/* ============================================================
   SECTION STYLES for the Hillside Élite service lines:
   dual pricing, starlight headliners, memberships, weekly
   plans, fleet work. Loaded after cinematic.css.
   ============================================================ */

/* ---------- dual pricing (sedan / SUV) on package cards ---------- */
.amt-pair{display:flex;gap:26px;margin:18px 0 4px;flex-wrap:wrap}
.amt-pair div small{
  display:block;font-size:.54rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:5px;
}
.amt-pair .amt{font-size:2.1rem;margin:0;color:var(--accent-2)}
.tier .starting{
  font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:2px;
}

/* ============================================================
   STARLIGHT HEADLINER
   ============================================================ */
.star-sec{position:relative;overflow:hidden;background:#06060a}
/* a real star field, drawn with layered radial gradients */
.star-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, #ffe9b8, transparent),
    radial-gradient(1.6px 1.6px at 44% 26%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 74%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 74% 34%, #ffe9b8, transparent),
    radial-gradient(1.2px 1.2px at 88% 66%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 19% 84%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 12%, #ffe9b8, transparent),
    radial-gradient(1.4px 1.4px at 68% 90%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 93% 22%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 34% 44%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 82% 52%, #fff, transparent);
  animation:twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.34}to{opacity:.78}}

.star-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;position:relative;z-index:2}
.star-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
.star-feats span{
  border:1px solid var(--hair);padding:15px 16px;font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.5;
}
.star-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.star-shots div{
  aspect-ratio:4/3;border:1px solid var(--hair);background:#0b0b12;overflow:hidden;
  display:grid;place-items:center;color:rgba(255,255,255,.2);
  font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:10px;
}
.star-shots img{width:100%;height:100%;object-fit:cover}

.star-price{border:1px solid var(--gold-dim);background:rgba(0,0,0,.45);padding:34px}
.star-price h3{
  font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-2);text-align:center;
}
.star-price .lab{
  text-align:center;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin-top:7px;
}
.star-rows{margin-top:24px;border-top:1px solid var(--hair)}
.star-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--hair);
}
.star-row span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.star-row b{font-family:Cinzel,serif;font-size:1.5rem;font-weight:800;color:var(--accent-2);white-space:nowrap}
.star-row b.quote{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-family:Manrope,sans-serif}
.star-note{margin-top:18px;font-size:.66rem;line-height:1.7;color:var(--dimmer);text-align:center}

.star-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:56px;position:relative;z-index:2;
}
.star-col{background:rgba(8,8,14,.92);padding:32px 26px}
.star-col h4{
  font-size:.64rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:20px;
}
.star-col ul{list-style:none;display:grid;gap:11px}
.star-col li{font-size:.86rem;color:var(--dim);padding-left:20px;position:relative}
.star-col li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}

/* ============================================================
   MEMBERSHIPS + WEEKLY PLANS
   ============================================================ */
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.mem-card{background:var(--bg-2);padding:40px 30px;display:flex;flex-direction:column;transition:background .3s}
.mem-card:hover{background:#101017}
.mem-card.hot{background:linear-gradient(180deg,rgba(201,162,75,.13),var(--bg-2))}
.mem-card h3{font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2)}
.mem-card .amt{font-family:Cinzel,serif;font-size:2.4rem;font-weight:800;margin:16px 0 2px;letter-spacing:-.02em}
.mem-card .amt small{font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.mem-card .note{font-size:.74rem;color:var(--dim);margin-top:10px;line-height:1.6}
.mem-card ul{list-style:none;margin:24px 0 0;display:grid;gap:10px;border-top:1px solid var(--hair);padding-top:22px}
.mem-card li{font-size:.85rem;color:var(--dim);padding-left:20px;position:relative}
.mem-card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}

.week{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
.week-card{border:1px solid var(--hair);padding:30px 26px;background:rgba(255,255,255,.015);transition:border-color .3s}
.week-card:hover{border-color:var(--gold-dim)}
.week-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.week-card h4{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1.5}
.week-card .amt{font-family:Cinzel,serif;font-size:1.7rem;font-weight:800;color:var(--accent-2);white-space:nowrap}
.week-card .amt small{font-size:.55rem;letter-spacing:.14em;color:var(--dimmer)}
.week-card .val{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.week-card p{font-size:.82rem;color:var(--dim);margin-top:16px;line-height:1.75}

/* ============================================================
   FLEET + WHY CHOOSE US
   ============================================================ */
.fleet-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fleet-rows{border-top:1px solid var(--hair);margin-top:26px}
.fleet-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--hair)}
.fleet-row span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.fleet-row small{display:block;font-size:.55rem;letter-spacing:.2em;color:var(--dimmer);margin-bottom:5px}
.fleet-row b{font-family:Cinzel,serif;font-size:1.5rem;color:var(--accent-2);white-space:nowrap}

.why{list-style:none;display:grid;gap:0;border-top:1px solid var(--hair);margin-top:26px}
.why li{
  font-size:.9rem;color:var(--dim);padding:17px 0 17px 28px;position:relative;
  border-bottom:1px solid var(--hair);
}
.why li::before{content:"";position:absolute;left:0;top:1.5em;width:12px;height:1px;background:var(--accent)}

/* ============================================================
   BRAND ROUNDEL — gold ring with the car silhouette
   ============================================================ */
.roundel{display:block;width:104px;height:104px;margin:0 auto 24px}
.roundel .ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.95}
.roundel .ring2{fill:none;stroke:var(--accent);stroke-width:.6;opacity:.4}
.roundel .silhouette{fill:var(--accent)}
.splash-ui .roundel{width:120px;height:120px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .star-grid,.fleet-grid{grid-template-columns:1fr;gap:44px}
  .mem,.week,.star-cols{grid-template-columns:1fr}
}
@media (max-width:680px){
  .star-feats{grid-template-columns:1fr}
  .amt-pair{gap:18px}
  .amt-pair .amt{font-size:1.7rem}
  .star-shots{grid-template-columns:repeat(3,1fr);gap:6px}
}

/* ---------- Shopify checkout affordances ---------- */
.alt-link{
  display:block;text-align:center;margin-top:14px;
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);transition:color .2s;
}
.alt-link:hover{color:var(--accent-2)}
.prepay{
  max-width:62ch;margin:38px auto 0;text-align:center;
  font-size:.86rem;line-height:1.75;color:var(--dim);
  border-top:1px solid var(--hair);padding-top:26px;
}