/* ============================================================================
   JACOB LIMOS  ·  BRAND LAYER
   Positioning: the person, not the fleet. Relationship-led, premium,
   corporate-and-occasion. Priced above market and unapologetic about it.
   Palette: warm ivory ground, charcoal ink, brass accent. Editorial, not flashy.
   ========================================================================== */

:root{
  --ink:#141210;
  --ink-2:#211e1a;
  --paper:#f8f5f0;
  --paper-2:#efeae1;
  --line:#ddd5c8;
  --accent:#a87d3a;
  --accent-soft:#c9a561;
  --muted:#6d655a;

  --font-display:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Cormorant runs light; give it weight and optical size correction */
h1,h2,h3,h4,.display{font-weight:300}
.display-xl,.display-lg{letter-spacing:-.028em}
body{font-weight:350}
strong,b{font-weight:600}

/* Jost's uppercase tracking needs a touch more air */
.eyebrow,.caps,.btn{letter-spacing:.2em}
.btn{letter-spacing:.14em;font-weight:500}

/* ---------- FILM GRAIN — the single most effective "expensive" cue ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:1200;pointer-events:none;
  opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- HEADER OVER THE DARK HERO ----------
   The header is transparent until scroll, so it sits on the dark hero and must
   invert. Once stuck it gains a paper background and must invert back. The
   mobile nav panel always has a paper ground, so its links stay ink in both
   states — that pairing is the easy thing to get wrong.
--------------------------------------------------------------------------- */
.header{color:var(--paper)}
.header .brand small{color:rgba(248,245,240,.55)}
.header .nav>a{color:var(--paper)}
.header .btn--ghost{--fg:var(--paper);border-color:rgba(248,245,240,.34)}
.header .btn--ghost:hover{border-color:var(--paper);background:rgba(248,245,240,.09)}
.header .burger{color:var(--paper)}

.header.is-stuck{color:var(--ink)}
.header.is-stuck .brand small{color:var(--muted)}
.header.is-stuck .nav>a{color:var(--ink)}
.header.is-stuck .nav>a[aria-current="page"]{color:var(--accent)}
.header.is-stuck .btn--ghost{--fg:var(--ink);border-color:rgba(20,18,16,.26)}
.header.is-stuck .btn--ghost:hover{border-color:var(--ink);background:rgba(20,18,16,.05)}
.header.is-stuck .burger{color:var(--ink)}

/* Mobile drop panel is always paper — force ink regardless of header state */
@media (max-width:960px){
  .header .nav{background:var(--paper)}
  .header .nav>a,
  .header.is-stuck .nav>a{color:var(--ink)}
  .header .nav>a[aria-current="page"]{color:var(--accent)}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:min(100dvh,940px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + var(--s-xl));
  padding-bottom:var(--s-2xl);
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
}
.hero__bg{position:absolute;inset:0;z-index:0}
/* Layered light — reads as a night city through a windscreen */
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 78% 18%,rgba(201,165,97,.30),transparent 62%),
    radial-gradient(60% 60% at 12% 88%,rgba(168,125,58,.20),transparent 60%),
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.07),transparent 55%),
    linear-gradient(168deg,#1b1814 0%,#141210 48%,#0d0b09 100%);
}
/* Sweeping light streaks — chauffeur headlamps at long exposure */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(102deg,transparent 42%,rgba(201,165,97,.11) 47%,transparent 52%),
    linear-gradient(102deg,transparent 62%,rgba(255,255,255,.05) 66%,transparent 70%);
  mask-image:linear-gradient(180deg,transparent,#000 35%,#000 75%,transparent);
}
.hero__grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse 78% 68% at 34% 46%,#000 12%,transparent 76%);
}
.hero__in{position:relative;z-index:2;width:100%}
.hero__layout{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:1060px){.hero__layout{grid-template-columns:1.08fr .92fr}}

.hero h1{
  font-size:clamp(3rem,2.1rem + 4.4vw,6.1rem);
  line-height:.98;letter-spacing:-.03em;
  margin-bottom:var(--s-md);
}
.hero .lede{color:rgba(248,245,240,.72);max-width:34rem;font-size:var(--step-1)}

/* Trust row under the hero copy */
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-lg);
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid rgba(248,245,240,.13);
}
.hero__trust div{display:flex;align-items:center;gap:.6rem;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:rgba(248,245,240,.62)}
.hero__trust svg{width:16px;height:16px;color:var(--accent-soft);flex:none}

/* ---------- QUOTE WIZARD SKIN (light card on the dark hero) ---------- */
.quote{--bg:#fff;--fg:#141210;--fg-muted:#6d655a;--surface:#f6f2eb;--hairline:#e5ded2}
.quote.wizard{border-color:rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset}
.quote .wizard__q{font-weight:400}
.quote__crown{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;
  background:linear-gradient(90deg,#141210,#221e18);
  color:var(--paper);
}
.quote__crown span{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase}
.quote__crown b{color:var(--accent-soft);font-weight:500}

/* ---------- SECTION HEADS ---------- */
.sec-head{max-width:52rem;margin-bottom:var(--s-2xl)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:var(--s-sm)}

/* ---------- SERVICE CARDS ---------- */
.svc{
  display:block;text-decoration:none;position:relative;
  padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--bg);overflow:hidden;isolation:isolate;
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid);
}
.svc::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(168,125,58,.09));
  transition:height var(--t-slow) var(--ease-out);
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 42%,var(--hairline))}
.svc:hover::before{height:100%}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:var(--s-md)}
.svc__ico{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);flex:none}
.svc__ico svg{width:22px;height:22px}
.svc__from{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);text-align:right;line-height:1.4;flex:none}
.svc__from b{display:block;font-family:var(--font-display);font-size:var(--step-2);color:var(--accent);letter-spacing:0;font-weight:400}
.svc h3{font-size:var(--step-2);margin-bottom:.4em}
.svc p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.6;margin-bottom:var(--s-sm)}
.svc__go{display:inline-flex;align-items:center;gap:.45em;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.svc__go svg{width:14px;height:14px;transition:translate var(--t-mid) var(--ease-out)}
.svc:hover .svc__go svg{translate:4px 0}

/* ---------- FLEET ---------- */
.fleet{display:grid;gap:var(--s-lg);grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.veh{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.veh:hover{transform:translateY(-5px);box-shadow:var(--shadow-3)}
.veh__img{aspect-ratio:4/3;position:relative}
.veh__body{padding:var(--s-md) var(--s-md) var(--s-lg)}
.veh__meta{display:flex;gap:var(--s-md);margin:var(--s-sm) 0 var(--s-md);font-size:var(--step--2);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted)}
.veh__meta span{display:flex;align-items:center;gap:.4em}
.veh__meta svg{width:14px;height:14px;color:var(--accent)}
.veh h3{font-size:var(--step-2)}
.veh__rate{font-family:var(--font-display);font-size:var(--step-2);color:var(--accent)}
.veh__rate small{font-family:var(--font-body);font-size:var(--step--2);color:var(--fg-muted);letter-spacing:.1em;text-transform:uppercase}

/* ---------- SIGNATURE: THE FOUNDER BLOCK ---------- */
.founder{position:relative;overflow:hidden}
.founder__quote{
  font-family:var(--font-display);font-size:var(--step-4);
  line-height:1.28;font-style:italic;letter-spacing:-.012em;
}
.founder__sig{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--step-3);color:var(--accent);margin-top:var(--s-md);
}
.founder__rule{width:70px;height:1px;background:var(--accent);margin:var(--s-md) 0}

/* ---------- PROCESS ---------- */
.steps{counter-reset:s;display:grid;gap:var(--s-xl);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.step{position:relative;padding-top:var(--s-lg)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--font-display);font-size:var(--step-2);color:var(--accent);
}
.step::after{content:"";position:absolute;top:calc(var(--s-lg) - 14px);left:0;right:var(--s-md);height:1px;background:var(--hairline)}
.step h3{font-size:var(--step-2);margin-bottom:.4em}
.step p{color:var(--fg-muted);font-size:var(--step--1)}

/* ---------- REVIEWS ---------- */
.rev{padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--bg);display:flex;flex-direction:column;gap:var(--s-sm);height:100%}
.rev p{font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;font-style:italic;flex:1}
.rev__who{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:var(--s-sm);border-top:1px solid var(--hairline)}
.rev__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--ink));display:grid;place-items:center;color:#fff;font-size:var(--step--1);flex:none;font-weight:500}
.rev__who strong{display:block;font-size:var(--step--1);font-weight:500}
.rev__who span{display:block;font-size:var(--step--2);color:var(--fg-muted)}

/* ---------- CORPORATE BAND ---------- */
.corp{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.corp::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(75% 80% at 88% 12%,rgba(201,165,97,.24),transparent 62%),
             radial-gradient(60% 70% at 6% 96%,rgba(168,125,58,.16),transparent 60%);
}
.corp>*{position:relative;z-index:1}

/* ---------- RATE TABLE ---------- */
.rates td.num{color:var(--accent);font-family:var(--font-display);font-size:var(--step-1);font-weight:400}

/* ---------- FINAL CTA ---------- */
.finale{text-align:center;position:relative;overflow:hidden}
.finale h2{font-size:var(--step-7);margin-bottom:var(--s-md)}
.finale .btn{margin-top:var(--s-md)}

/* ---------- FOOTER ---------- */
.footer .brand{color:var(--paper)}

/* ============================================================================
   INNER PAGES — added for services / fleet / rates / corporate / about /
   contact. Three additions only, all of them load-bearing:

   .pagehead  The header is white-on-transparent until it sticks (see above),
              so every page must open on a dark band or the navigation is
              invisible for the first 24px of scroll. Same reason the hero
              is dark; this is the hero's quieter sibling.
   .crumbs    Breadcrumb trail, which only ever sits inside .pagehead.
   .ticks     Inclusion lists. Used on four pages; the alternative was the
              same six inline styles repeated a hundred times.
   ========================================================================== */
.pagehead{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding-top:calc(var(--header-h) + var(--s-2xl));
  padding-bottom:var(--s-2xl);
}
.pagehead::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 84% 8%,rgba(201,165,97,.26),transparent 62%),
    radial-gradient(58% 62% at 2% 98%,rgba(168,125,58,.18),transparent 60%),
    linear-gradient(168deg,#1b1814 0%,#141210 55%,#0d0b09 100%);
}
.pagehead>*{position:relative;z-index:1}
.pagehead h1{font-size:clamp(2.4rem,1.7rem + 2.9vw,4.2rem);line-height:1.02;letter-spacing:-.028em;margin-bottom:var(--s-md)}
.pagehead .lede{color:rgba(248,245,240,.72);max-width:46rem}
.pagehead .eyebrow{color:var(--accent-soft)}

.crumbs{margin-bottom:var(--s-lg)}
.crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  list-style:none;padding:0;margin:0;
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(248,245,240,.55);
}
.crumbs li{display:flex;align-items:center;gap:.55rem}
.crumbs li+li::before{content:"·";color:rgba(248,245,240,.35)}
.crumbs a{color:rgba(248,245,240,.78);text-decoration:none}
.crumbs a:hover{color:var(--accent-soft)}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.ticks li{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:.7rem;align-items:start;
  font-size:var(--step--1);line-height:1.55;color:var(--fg-muted);
}
.ticks svg{width:18px;height:18px;color:var(--accent);margin-top:.25em}

/* ---------- RESPONSIVE FINE-TUNING ---------- */
@media (max-width:1059px){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + var(--s-lg))}
  .hero__layout{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero h1{font-size:clamp(2.5rem,8vw,3.4rem)}
  .step::after{display:none}
}

/* ---------- LUXURY PASS (photography + cinema) --------------------------- */

/* Hero: the night skyline under the existing gradient atmosphere.
   Photo: NorbertNagel, CC BY-SA 4.0, via Wikimedia Commons
   (File:Chicago Skyline Sunrise March 15 2026 - 01.jpg) */
.hero__bg{
  background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Chicago%20Skyline%20Sunrise%20March%2015%202026%20-%2001.jpg?width=1920");
  background-size:cover;background-position:center 62%;
}
.hero__bg::before{
  background:
    radial-gradient(70% 55% at 78% 18%,rgba(201,165,97,.28),transparent 62%),
    radial-gradient(60% 60% at 12% 88%,rgba(168,125,58,.18),transparent 60%),
    linear-gradient(100deg,rgba(13,11,9,.94) 0%,rgba(20,18,16,.86) 46%,rgba(13,11,9,.55) 100%),
    linear-gradient(0deg,rgba(13,11,9,.9) 0%,rgba(13,11,9,.25) 38%,rgba(13,11,9,.35) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__bg{animation:jlDrift 42s ease-in-out infinite alternate;will-change:transform}
  @keyframes jlDrift{
    from{transform:scale(1.03) translate(0,0)}
    to{transform:scale(1.1) translate(-1.4%,-1.8%)}
  }
  /* staged arrival of the hero copy */
  .hero__layout>div:first-child>*{
    opacity:0;transform:translateY(16px);
    animation:jlArrive .85s var(--ease-out) forwards;
  }
  .hero__layout>div:first-child>*:nth-child(1){animation-delay:.1s}
  .hero__layout>div:first-child>*:nth-child(2){animation-delay:.26s}
  .hero__layout>div:first-child>*:nth-child(3){animation-delay:.44s}
  .hero__layout>div:first-child>*:nth-child(4){animation-delay:.62s}
  .hero__layout>div:first-child>*:nth-child(5){animation-delay:.85s}
  @keyframes jlArrive{to{opacity:1;transform:none}}
}

/* Fleet cards: photographs with a discreet credit chip */
.veh__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.veh__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.03);
  transition:transform var(--t-slow) var(--ease-out);
}
.veh:hover .veh__img img{transform:scale(1.04)}
.veh__credit,.chifig__credit{
  position:absolute;right:.5rem;bottom:.5rem;z-index:2;
  font-size:9px;letter-spacing:.04em;line-height:1;
  color:rgba(255,255,255,.55);background:rgba(13,11,9,.55);
  padding:.35em .6em;border-radius:999px;text-decoration:none;
  backdrop-filter:blur(4px);
}
.veh__credit:hover,.chifig__credit:hover{color:#fff}

/* fleet.html full-width shots */
.fleetshot{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.fleetshot img{width:100%;height:100%;object-fit:cover;display:block}

/* Chicago band */
.chiband{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.chiband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 10%,rgba(201,165,97,.14),transparent 60%);
}
.chiband__grid{display:grid;gap:clamp(1rem,2vw,1.75rem);grid-template-columns:repeat(2,1fr)}
.chifig{grid-column:span 2;margin:0;position:relative}
@media (min-width:820px){
  .chifig{grid-column:span 1}
  .chifig--wide{grid-column:span 2}
}
.chifig img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--r-md);
  filter:sepia(.14) saturate(.85) contrast(1.02) brightness(.96);
  transition:filter var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
}
.chifig--wide img{aspect-ratio:21/9}
.chifig:hover img{filter:none;transform:scale(1.008)}
.chifig figcaption{padding:var(--s-sm) .25rem 0;position:static}
.chifig figcaption strong{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:var(--step-2);color:var(--paper);margin-bottom:.25em;
}
.chifig figcaption span{display:block;font-size:var(--step--1);color:rgba(248,245,240,.62);max-width:52ch}
.chifig .chifig__credit{position:static;display:inline-block;margin-top:.6em;background:transparent;padding:0;border-bottom:1px solid rgba(248,245,240,.2);border-radius:0;color:rgba(248,245,240,.4)}
@media (prefers-reduced-motion:reduce){
  .hero__bg{animation:none}
  .hero__layout>div:first-child>*{opacity:1;transform:none;animation:none}
  .veh__img img,.chifig img{transition:none}
}