/* ==========================================================================
   Phoenix Limo Biz - area and airport landing pages (build.mjs landingPage)
   The hero, the booking card, the fleet showcase, the reviews and the footer
   are the homepage's own (assets/home.css). This styles what each landing
   page adds between them - its intro, what it offers, the places it covers,
   its FAQs - in the homepage's tokens, so it follows the light and dark
   schemes the same way.

   The content is the same markup for the phone view and the desktop view,
   so it switches at the width home.js swaps them (1024px), not by view.
   ========================================================================== */

/* ---------- before the view is mounted ----------
   The page's plain copy (for search, and a browser without JavaScript) stays
   out of sight while home.js swaps the view in; if the script never runs it
   shows anyway after a few seconds. */
.plb-js .lpx-static{visibility:hidden;animation:lpxShow 0s 4s forwards}
@keyframes lpxShow{to{visibility:visible}}
.lpx-static{display:block;max-width:1440px;margin:0 auto}

/* ---------- the hero: one headline, for this place ----------
   Two lines like the homepage's; a longer one is set smaller (--lpx-k, from
   the build) so it still takes two on a phone. */
.lpx-title{font-size:calc(clamp(30px,8.6vw,38px) * var(--lpx-k,1))}
@media (min-width:1024px){
  .plb-h--d .lpx-title{font-size:calc(clamp(54px,calc(7.4vw - 22px),92px) * var(--lpx-k,1))}
}
/* the place over the headline - on a phone the headline says it, and the
   first screen has no room to spare (home.css, FIRST SCREEN) */
.plb-h--m .lpx-eyebrow{display:none}
.lpx-eyebrow{max-width:52ch;line-height:1.5}

/* the homepage's sections sit in <main> here, so they take its tablet
   gutters from here rather than from home.css's #app > div > section */
@media (min-width:560px) and (max-width:1023.98px){
  #app > div > main > section{
    padding-left:calc((100% - 520px) / 2 + 16px) !important;
    padding-right:calc((100% - 520px) / 2 + 16px) !important;
  }
}

/* ---------- a section ---------- */
.lpx-sec{display:flex;flex-direction:column;gap:18px;padding:30px 16px}
.lpx-sec--flush{padding-top:0}
@media (min-width:560px) and (max-width:1023.98px){
  .lpx-sec{padding-left:calc((100% - 520px) / 2 + 16px);padding-right:calc((100% - 520px) / 2 + 16px)}
}
@media (min-width:1024px){
  .lpx-sec{gap:40px;padding:56px 80px}
  .lpx-sec--flush{padding-top:0}
}

.lpx-head{display:flex;flex-direction:column;gap:12px;max-width:860px}
.lpx-eb{
  margin:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet-text);
}
.lpx-eb a{color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.lpx-eb a:hover{color:var(--violet-text-hover)}
.lpx-h2{
  margin:0;
  font-size:24px;line-height:1.06;font-weight:600;letter-spacing:-.035em;
  color:var(--ink);text-wrap:balance;
}
.lpx-h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet-text)}
.lpx-lede{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--muted)}
@media (min-width:1024px){
  .lpx-head{gap:18px}
  .lpx-eb{font-size:12px}
  .lpx-h2{font-size:clamp(40px,3.9vw,56px);line-height:1.02;letter-spacing:-.04em}
  .lpx-lede{font-size:17px}
}

/* running text */
.lpx-prose{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.lpx-prose p{margin:0 0 1em}
.lpx-prose p:last-child{margin-bottom:0}
.lpx-prose strong{font-weight:600;color:var(--ink)}
.lpx-prose a{color:var(--violet-text);text-decoration:underline;text-underline-offset:3px}
.lpx-prose a:hover{color:var(--violet-text-hover)}
.lpx-prose h3{margin:1.5em 0 .35em;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
@media (min-width:1024px){
  .lpx-prose{font-size:16.5px}
  .lpx-prose h3{font-size:20px}
}

/* buttons */
.lpx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.lpx-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 20px;border-radius:999px;
  background:var(--violet);color:#FFFFFF;
  font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(124,58,237,.8);
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.lpx-btn:hover{background:var(--violet-btn-bot);color:#FFFFFF}
.lpx-btn:active{transform:scale(.98)}
.lpx-btn i{font-size:17px}
.lpx-btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.lpx-btn--line:hover{background:var(--tint);color:var(--ink)}
.lpx-btn--line i{color:var(--violet-text)}

/* ---------- the opening: copy beside two photos ---------- */
.lpx-intro{display:grid;gap:24px}
.lpx-intro-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.lpx-lead{margin:0;font-size:16px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
/* the second photo overlaps the first's lower corner; a grid, not absolute
   positioning, so the block still rises in with the rest (home.js revealInit) */
.lpx-shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-bottom:13%}
.lpx-shot{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint);border-radius:22px}
.lpx-shot--a{grid-area:1/3/2/13;z-index:1;box-shadow:0 30px 60px -32px rgba(18,13,28,.55)}
.lpx-shot--b{
  grid-area:1/1/2/8;align-self:end;z-index:2;
  transform:translateY(28%);
  border:5px solid var(--page-bg);border-radius:20px;
  box-shadow:0 24px 50px -26px rgba(18,13,28,.6);
}
.lpx-shots--one{padding-bottom:0}
.lpx-shots--one .lpx-shot--a{grid-column:1/13}
@media (min-width:1024px){
  .lpx-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,5vw,80px);align-items:center;padding-top:80px}
  .lpx-intro-copy{gap:18px}
  .lpx-lead{font-size:20px}
  .lpx-shot{border-radius:30px}
  .lpx-shot--b{border-width:8px;border-radius:28px}
}

/* ---------- what you get ----------
   rows on a phone, cards on a desktop */
.lpx-perks{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.lpx-perk{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.lpx-perk-ico{
  grid-row:span 2;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--tint);color:var(--violet-text);font-size:20px;
}
.lpx-perk h3{margin:0;align-self:end;font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lpx-perk p{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (min-width:1024px){
  .lpx-perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0}
  .lpx-perk{
    display:flex;flex-direction:column;
    padding:30px;border:0;border-radius:26px;
    background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
    transition:box-shadow .25s ease, transform .25s ease;
  }
  .lpx-perk:hover{box-shadow:inset 0 0 0 1px var(--ride-hover), 0 30px 60px -40px rgba(59,21,128,.5);transform:translateY(-2px)}
  .lpx-perk-ico{width:50px;height:50px;margin-bottom:22px;font-size:25px}
  .lpx-perk h3{align-self:auto;font-size:20px}
  .lpx-perk p{margin-top:8px;font-size:15px}
}

/* ---------- the studio panel ----------
   The homepage's reviews panel: violet night, with its grain laid in as a
   background so the panel has no positioned children (revealInit). Dark in
   both schemes. */
.lpx-panel{
  display:grid;gap:24px;
  padding:26px 20px;border-radius:22px;overflow:hidden;
  color:var(--studio-text);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 70% at 25% 0%, #7C3AED 0%, #3B1580 45%, #13072A 100%);
  background-blend-mode:overlay, normal;
  box-shadow:0 40px 100px rgba(59,21,128,.30), inset 0 1px 0 rgba(255,255,255,.12);
}
.lpx-panel-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.lpx-panel-aside{min-width:0}
.lpx-panel .lpx-eb{color:var(--studio-eyebrow)}
.lpx-panel .lpx-h2{color:#FFFFFF}
.lpx-panel .lpx-h2 em{color:var(--studio-accent)}
.lpx-panel .lpx-prose{color:var(--studio-body)}
.lpx-panel .lpx-prose strong,
.lpx-panel .lpx-prose a,
.lpx-panel .lpx-prose a:hover{color:#FFFFFF}
@media (min-width:1024px){
  .lpx-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,4.5vw,72px);align-items:start;padding:clamp(40px,4.4vw,64px);border-radius:36px}
}

/* trips and destinations, inside the panel */
.lpx-cap{margin:0 0 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--studio-caption)}
.lpx-trips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lpx-trip{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  color:#FFFFFF;text-decoration:none;
  transition:background .2s ease, box-shadow .2s ease;
}
.lpx-trip:hover{color:#FFFFFF;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(233,221,255,.4)}
.lpx-trip-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.lpx-trip-txt b{font-size:14px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.lpx-trip-txt span{font-size:12.5px;line-height:1.45;color:var(--studio-body)}
.lpx-trip-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-align:right;white-space:nowrap;color:var(--studio-accent)}
.lpx-trip i{display:none}
@media (min-width:1024px){
  .lpx-trip{grid-template-columns:minmax(0,1fr) auto 18px;gap:16px;padding:18px 20px 18px 22px;border-radius:20px}
  .lpx-trip-txt b{font-size:16px}
  .lpx-trip-txt span{font-size:13.5px}
  .lpx-trip-tag{font-size:12px}
  .lpx-trip i{display:block;font-size:18px;color:var(--studio-eyebrow);transition:transform .2s ease}
  .lpx-trip:hover i{transform:translate(2px,-2px)}
}
.lpx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lpx-chips li{
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:13px;color:#FFFFFF;
}
@media (min-width:1024px){.lpx-chips li{padding:10px 16px;font-size:14px}}

/* how booking works, inside the panel on a service page */
.lpx-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lpx-steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#FFFFFF;
}
.lpx-step-n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(233,221,255,.14);box-shadow:inset 0 0 0 1px rgba(233,221,255,.3);
  font-family:var(--font-mono);font-size:12px;color:var(--studio-accent);
}
.lpx-steps i{font-size:20px;color:var(--studio-eyebrow)}
@media (min-width:1024px){
  .lpx-steps li{gap:18px;padding:18px 20px 18px 18px;border-radius:20px}
  .lpx-step-n{width:36px;height:36px;font-size:13px}
  .lpx-steps i{font-size:22px}
}

/* executive transportation, explained: two cards whose rows line up */
.lpx-measure{max-width:72ch}
.lpx-compare{display:grid;gap:12px}
.lpx-compare-card{
  padding:20px;border-radius:22px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}
.lpx-compare-card.is-key{box-shadow:inset 0 0 0 1.5px var(--violet-text)}
.lpx-compare-top{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.lpx-compare-top .lpx-perk-ico{flex:0 0 auto}
.lpx-compare-top h3{margin:2px 0 0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lpx-compare-card dl{margin:0}
.lpx-compare-card dl > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.lpx-compare-card dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-text);padding-top:2px}
.lpx-compare-card dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (min-width:1024px){
  /* one set of row tracks for both cards (subgrid), so "The vehicle" sits
     level with "The vehicle" however the words wrap */
  .lpx-compare{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(5,auto);gap:0 16px}
  .lpx-compare-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;padding:28px;border-radius:26px}
  .lpx-compare-card dl{display:contents}
  .lpx-compare-card dl > div{grid-template-columns:130px minmax(0,1fr)}
  .lpx-compare-top h3{font-size:21px}
  .lpx-compare-card dd{font-size:15px}
}

/* ---------- a heading beside its paragraphs ---------- */
.lpx-split{display:grid;gap:16px}
.lpx-split-head{display:flex;flex-direction:column;gap:12px}
@media (min-width:1024px){
  .lpx-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,5vw,80px);align-items:start}
  .lpx-split-head{position:sticky;top:32px;gap:18px}
  .lpx-prose--lg{font-size:17px}
}

/* ---------- photos in a row ---------- */
.lpx-gallery{
  list-style:none;margin:0 -16px;padding:0 16px;
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;
}
.lpx-gallery::-webkit-scrollbar{display:none}
.lpx-gallery li{flex:0 0 82%;scroll-snap-align:start}
.lpx-gallery--1 li{flex-basis:100%}
.lpx-gallery img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px;background:var(--tint)}
@media (min-width:560px){.lpx-gallery{margin:0;padding:0;scroll-padding:0}}
@media (min-width:1024px){
  .lpx-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;overflow:visible}
  .lpx-gallery img{border-radius:28px}
  .lpx-gallery--1 img{aspect-ratio:21/9}
}

/* ---------- questions ---------- */
.lpx-faq{display:grid;gap:18px}
.lpx-faq-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lpx-faq-list{border-top:1px solid var(--line)}
.lpx-q{border-bottom:1px solid var(--line)}
.lpx-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;
  font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.lpx-q summary i{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--tint);color:var(--violet-text);font-size:15px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.lpx-q summary:hover i{background:var(--seg-bg)}
.lpx-q[open] summary i{transform:rotate(45deg)}
.lpx-q p{margin:-4px 0 18px;padding-right:46px;font-size:14px;line-height:1.65;color:var(--ink-2)}
@media (min-width:1024px){
  .lpx-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,5vw,80px);align-items:start}
  .lpx-faq-head{position:sticky;top:32px;gap:18px}
  .lpx-q summary{padding:22px 0;font-size:18px}
  .lpx-q p{font-size:15.5px}
}

/* ---------- cards linking on ----------
   a row to swipe on a phone, a grid on a desktop */
.lpx-tiles{
  list-style:none;margin:0 -16px;padding:2px 16px 8px;
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;
}
.lpx-tiles::-webkit-scrollbar{display:none}
.lpx-tiles > li{flex:0 0 74%;scroll-snap-align:start;display:flex}
@media (min-width:560px){
  .lpx-tiles{margin:0;padding:2px 0 8px;scroll-padding:0}
  .lpx-tiles > li{flex-basis:46%}
}
.lpx-tile{
  display:flex;flex-direction:column;width:100%;
  border-radius:22px;overflow:hidden;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);text-decoration:none;
  transition:box-shadow .25s ease, transform .25s ease;
}
.lpx-tile:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ride-hover), 0 30px 60px -38px rgba(59,21,128,.55);transform:translateY(-2px)}
.lpx-tile-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.lpx-tile-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lpx-tile:hover .lpx-tile-img img{transform:scale(1.045)}
.lpx-tile-body{flex:1;display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.lpx-tile-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-text)}
.lpx-tile-name{font-size:16px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.lpx-tile-text{font-size:13px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lpx-tile-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--violet-text)}
.lpx-tile-go i{transition:transform .2s ease}
.lpx-tile:hover .lpx-tile-go i{transform:translateX(3px)}
@media (min-width:1024px){
  .lpx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;overflow:visible}
  .lpx-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lpx-tiles--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lpx-tile{border-radius:26px}
  .lpx-tile-body{gap:6px;padding:20px 22px 22px}
  .lpx-tile-name{font-size:19px}
  .lpx-tile-text{font-size:14px}
  .lpx-tile-go{font-size:14px}
}

/* ten golf courses: two rows of five where there is room */
@media (min-width:1280px){
  .lpx-tiles--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .lpx-tiles--5 .lpx-tile-body{padding:16px 18px 18px}
  .lpx-tiles--5 .lpx-tile-name{font-size:17px}
}
.lpx-lede a{color:var(--violet-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- the plain page (no JavaScript) ---------- */
.lpx-fallback{
  padding:24px 16px 36px;
  background:radial-gradient(ellipse 90% 120% at 15% 0%, #7C3AED 0%, #3B1580 48%, #13072A 100%);
  color:#FFFFFF;
}
.lpx-fb-brand{display:inline-flex;align-items:center;gap:10px;color:#FFFFFF;font-weight:600;text-decoration:none}
.lpx-fb-brand:hover{color:#FFFFFF}
.lpx-fb-crumb{margin-top:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio-caption)}
.lpx-fb-crumb a{color:inherit}
.lpx-fallback .lpx-fb-eb{margin:14px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--studio-eyebrow)}
.lpx-fallback h1{margin:10px 0 12px;font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,7vw,72px);line-height:1.02;letter-spacing:-.015em}
.lpx-fallback p{margin:0;max-width:60ch;line-height:1.6;color:var(--studio-body)}
.lpx-fallback .lpx-acts{margin-top:22px}
.lpx-fallback .lpx-btn--line{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
@media (min-width:1024px){.lpx-fallback{padding:36px 80px 64px}}