/* ============================================================
   Juan Carlos Figueroa — Personal Driver (Santa Ana, CA)
   Preview: toggles tier (Essential/Professional/Signature) + language (EN/ES).
   Premium dark, bold condensed display. Held to impeccable.style.
   Brand accent is provisional until his business card is sampled.
   ============================================================ */
:root{
  --bg:#0E0F12; --bg-2:#15171C; --surface:#191C22; --surface-2:#20242C;
  --ink:#F3EFE6; --ink-2:#C2C0B8; --muted:#8A8D96;
  --accent:#F0EAD9;        /* cream (B&W brand) */
  --accent-2:#F0EAD9;
  --line:#262A31; --line-2:#363B45;
  --shadow:0 22px 50px -26px rgba(0,0,0,.8);
  --fs-sm:.8125rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --step:clamp(3.5rem, 2.4rem + 5vw, 6rem);
  --z-nav:100; --z-menu:200; --z-skip:300;
}
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:where(h1,h2,h3){ text-wrap:balance; } :where(p,li){ text-wrap:pretty; }

body{ background:var(--bg); color:var(--ink); font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1{ font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.9rem, 1.9rem + 4.8vw, 5.4rem); line-height:.92; letter-spacing:.005em; }
h2{ font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem); line-height:.98; letter-spacing:.01em; }
h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.22rem; line-height:1.2; }
.lede{ font-size:var(--fs-lg); color:var(--ink-2); max-width:52ch; }
.accent{ color:var(--accent); }

.wrap{ max-width:75rem; margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
.section{ padding-block:var(--step); }
.section.alt{ background:var(--bg-2); }
.narrow{ max-width:54rem; }
.kicker{ display:inline-flex; align-items:center; gap:.55rem; font-family:'Hanken Grotesk',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.kicker::before{ content:""; width:1.7rem; height:2px; background:var(--accent); }

/* ---------- bilingual: show only active language ---------- */
[data-lang="en"] .l-es{ display:none; } [data-lang="es"] .l-en{ display:none; }

/* ---------- tier visibility (progressive reveal) ---------- */
[data-tier="essential"] .t-pro, [data-tier="essential"] .t-sig{ display:none !important; }
[data-tier="professional"] .t-sig{ display:none !important; }
.t-only-ess, .t-only-pro, .t-only-sig{ display:none; }
[data-tier="essential"] .t-only-ess{ display:inline; }
[data-tier="professional"] .t-only-pro{ display:inline; }
[data-tier="signature"] .t-only-sig{ display:inline; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.6rem; border-radius:8px;
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem;
  transition:transform .15s,filter .15s,background .15s,color .15s,border-color .15s; }
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{ background:var(--accent); color:#15110a; }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-ghost{ border:1.5px solid var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; }
.skip-link{ position:absolute; left:1rem; top:-4rem; z-index:var(--z-skip); background:var(--accent); color:#15110a; padding:.7rem 1.1rem; border-radius:6px; transition:top .2s; }
.skip-link:focus{ top:1rem; }

/* ---------- header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-nav); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:1rem; padding-block:.7rem; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; flex:none; }
.brand .mark{ width:2.5rem; height:2.5rem; border-radius:10px; background:var(--accent); color:#15110a; display:grid; place-items:center; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.2rem; }
.brand .word{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase; line-height:.9; }
.brand .sub{ display:block; font-size:.58rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.nav-spacer{ flex:1; }
.nav-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* segmented toggles */
.seg{ display:inline-flex; gap:.2rem; padding:.25rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; }
.seg button{ padding:.4rem .8rem; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--muted); letter-spacing:.02em; white-space:nowrap; transition:background .15s,color .15s; }
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--accent); color:#15110a; }
.seg.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.seg-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); align-self:center; margin-right:.1rem; }

/* ---------- tier banner ---------- */
.tier-banner{ background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:1.1rem 1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; box-shadow:var(--shadow); }
.tier-banner .tb-name{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.5rem; }
.tier-banner .tb-price{ font-weight:700; color:var(--accent); font-size:1.15rem; }
.tier-banner .tb-price small{ color:var(--muted); font-weight:500; font-size:.85rem; }
.tier-banner .tb-note{ color:var(--ink-2); font-size:.95rem; flex:1; min-width:14rem; }
.tier-banner .tb-pop{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#15110a; background:var(--accent); padding:.2rem .6rem; border-radius:999px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-10%; top:-40%; width:55%; height:180%; background:radial-gradient(closest-side, color-mix(in srgb,var(--accent) 22%, transparent), transparent); pointer-events:none; }
.hero-inner{ position:relative; display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding-block:clamp(3rem,7vw,5.5rem); }
@media(min-width:60rem){ .hero-inner{ grid-template-columns:1.1fr .9fr; } }
.hero h1{ margin:1rem 0 1.2rem; }
.hero .lede{ margin-bottom:2rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; }
.proof{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.6rem .9rem; font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.proof b{ color:var(--ink); }

/* phone/app mock for hero */
.phone{ justify-self:center; width:min(300px,80%); aspect-ratio:9/19; background:#0a0b0e; border:8px solid #23262d; border-radius:34px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.phone .scr{ position:absolute; inset:0; padding:1.5rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.phone .map{ flex:1; border-radius:14px; background:
  linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/100% 26px,
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/26px 100%, #11141a; position:relative; overflow:hidden; }
.phone .route{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.phone .route polyline{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.phone .pin{ position:absolute; width:.8rem; height:.8rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent); transform:translate(-50%,-50%); }
.phone .pin-dest{ background:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 30%,transparent); }
.phone .car{ position:absolute; left:46%; top:51%; color:var(--accent); transform:translate(-50%,-50%); }
.phone .card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; }
.phone .card .row{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-2); }
.phone .card .big{ font-weight:800; font-size:1.05rem; color:var(--ink); }

/* ---------- cards / steps ---------- */
.grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); margin-top:2.4rem; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.5rem; }
.card .ico{ width:2.5rem; height:2.5rem; color:var(--accent); margin-bottom:.9rem; }
.card h3{ margin-bottom:.4rem; } .card p{ color:var(--ink-2); font-size:.96rem; }
.steps{ counter-reset:s; display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); margin-top:2.2rem; }
.step .n{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; color:var(--accent); font-size:2.4rem; line-height:1; }
.step h3{ margin:.5rem 0 .3rem; } .step p{ color:var(--ink-2); font-size:.95rem; }

/* ---------- forms / sample UI ---------- */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow); }
.field{ display:grid; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; padding:.8rem .9rem; font:inherit; color:var(--ink); background:var(--bg-2); border:1.5px solid var(--line-2); border-radius:9px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.grid-2{ display:grid; gap:0 1rem; } @media(min-width:34rem){ .grid-2{ grid-template-columns:1fr 1fr; } }
.sample-tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border:1px dashed var(--accent); border-radius:999px; padding:.15rem .6rem; }

/* fare estimate result */
.fare{ margin-top:1rem; background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px; padding:1.1rem 1.3rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.fare .amt{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:2.4rem; color:var(--accent); line-height:1; }
.fare .vs{ font-size:.85rem; color:var(--muted); } .fare .vs s{ color:var(--ink-2); }
.fare .save{ margin-left:auto; color:var(--accent-2); font-weight:700; font-size:.92rem; }

/* split media */
.split{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; } @media(min-width:56rem){ .split{ grid-template-columns:1fr 1fr; } .split.rev>:first-child{ order:2; } }

/* tracking map mock */
.trackmap{ aspect-ratio:5/4; border-radius:16px; border:1px solid var(--line-2); position:relative; overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/100% 32px,
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/32px 100%, #10131a; }
.trackmap .road{ position:absolute; background:#1c2129; }
.trackmap .r1{ left:0; right:0; top:58%; height:14px; transform:translateY(-50%); }
.trackmap .r2{ top:0; bottom:0; left:38%; width:14px; transform:translateX(-50%); }
.trackmap .route{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.trackmap .route polyline{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.trackmap .carpin{ position:absolute; left:38%; top:78%; transform:translate(-50%,-50%); color:var(--accent); animation:carmove 5.5s ease-in-out infinite; }
.trackmap .dest{ position:absolute; left:80%; top:58%; transform:translate(-50%,-50%); color:var(--accent-2); }
@keyframes carmove{
  0%{ left:38%; top:78%; opacity:0; }
  7%{ opacity:1; }
  48%{ left:38%; top:58%; }
  88%{ left:76%; top:58%; opacity:1; }
  100%{ left:76%; top:58%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .trackmap .carpin{ animation:none; } }
.trackmap .eta{ position:absolute; left:1rem; bottom:1rem; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:.7rem 1rem; }
.trackmap .eta b{ color:var(--accent); }

/* dashboard mock */
.dash{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow); }
.dash .bar{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:.8rem; margin-bottom:.8rem; }
.dash .stat{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.dash .stat div{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:.8rem; }
.dash .stat .num{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.6rem; color:var(--accent); }
.dash .stat .lbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.dash .ride{ display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-2); }
.dash .ride .dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--accent-2); flex:none; }

/* tags / chips */
.tags{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.tags li{ font-size:.8rem; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:.3rem .8rem; }

/* placeholder chip for unknown real data */
.ph{ color:var(--accent); border:1px dashed var(--accent); border-radius:5px; padding:0 .35em; font-size:.9em; font-weight:600; white-space:nowrap; }

/* footer */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:3rem; }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.foot-grid h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.8rem; }
.foot-grid ul{ list-style:none; padding:0; display:grid; gap:.5rem; font-size:.95rem; color:var(--ink-2); }
.foot-legal{ margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.mt-sm{ margin-top:1rem; } .mt-md{ margin-top:1.5rem; } .muted{ color:var(--muted); } .ink-2{ color:var(--ink-2); }

@media(max-width:30rem){
  .seg-label{ display:none; }
  .seg button{ padding:.35rem .6rem; font-size:.74rem; }
  .nav-actions{ gap:.45rem; }
}

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } html{ scroll-behavior:auto; } }

/* tier banner variants (swap by active tier) */
.tb-var{ display:none; }
[data-tier="essential"] .tb-ess, [data-tier="professional"] .tb-pro, [data-tier="signature"] .tb-sig{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }

/* icon sizing inside mocks + inline */
.phone .car svg, .trackmap .carpin svg, .trackmap .dest svg{ width:1.7rem; height:1.7rem; }
.ico-sm{ width:1rem; height:1rem; display:inline-block; vertical-align:-3px; color:var(--accent); }
.tags li{ display:inline-flex; align-items:center; gap:.4rem; }