/* ================================================================
   shared.css  —  Rules common to both PPF & Color-Change pages
   Defaults in :root match the PPF page so ppf.css stays minimal.
   ================================================================ */

/* ── Reset & Custom Properties ── */
:root{
  color-scheme: dark;
  --bg:       #07090c;
  --text:     #f2f2f2;
  --muted:    rgba(242,242,242,.72);
  --muted2:   rgba(242,242,242,.52);
  --shadow:   0 18px 60px rgba(0,0,0,.55);
  --r:        16px;
  --r2:       20px;
  --max:      1080px;
  --safeTop:    env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --glass:    rgba(255,255,255,.04);
  --depth-1:  rgba(255,255,255,.038);
  --depth-2:  rgba(255,255,255,.065);
  --border:   rgba(255,255,255,.09);
  --sectionY: 48px;
  --cardPad:  20px;
  --sticky-h: 80px;
  /* Timing */
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
  --dur-sheet:  380ms;
  --ease-out:   cubic-bezier(.22,.68,0,1.05);
  --ease-in:    cubic-bezier(.4,0,1,1);
  --ease-io:    cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.06,.64,1);
}
@media (max-width:820px){ :root{ --sectionY:32px; --cardPad:16px; } }

*, *::before, *::after{ box-sizing:border-box; }
html{ overflow-x:hidden; scroll-behavior:smooth; }
html,body{ min-height:100%; }
body{
  margin:0; padding:0;
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 32px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }
@media (max-width:430px){ .wrap{ padding:0 14px; } }

/* ── Topbar ── */
.topbar{
  position:sticky; top:0; z-index:30;
  padding:0;
  padding-top: env(safe-area-inset-top);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(to bottom, rgba(11,12,15,.94), rgba(11,12,15,.72));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbarRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; height:64px;
}
@media (min-width:768px){ .topbarRow{ height:70px; } }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; text-decoration:none; overflow:visible; }
.brandText{ display:flex; flex-direction:column; line-height:1.2; gap:1px; }
.brandName{ font-weight:720; font-size:17px; letter-spacing:.15px; color:#f2f2f2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.brandSub{ font-size:11px; font-weight:500; letter-spacing:.06px; color:rgba(242,242,242,.42); white-space:nowrap; }
.topActions{ display:flex; gap:12px; align-items:center; flex-shrink:0; }
.topPhoneDesktop{
  display:none; color:rgba(242,242,242,.65); text-decoration:none;
  font-size:15px; font-weight:640; letter-spacing:.2px;
  transition: opacity var(--dur-fast);
  white-space:nowrap;
}
.topPhoneDesktop:hover{ opacity:.8; }
@media (min-width:768px){ .topPhoneDesktop{ display:block; } }
.topCallMobile{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(242,242,242,.82); text-decoration:none;
  transition: background var(--dur-fast);
  flex-shrink:0;
}
.topCallMobile:active{ background:rgba(255,255,255,.12); }
@media (min-width:768px){ .topCallMobile{ display:none; } }
.topQuoteBtn{ display:none; }
@media (min-width:768px){
  .topQuoteBtn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 20px; height:38px; border-radius:999px;
    background:#f2f2f2; color:#0b0c0f;
    font-size:14px; font-weight:720; letter-spacing:.15px;
    border:none; cursor:pointer; text-decoration:none;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-io);
    white-space:nowrap; flex-shrink:0;
  }
  .topQuoteBtn:hover{ background:#fff; }
  .topQuoteBtn:active{ transform:scale(0.97); }
}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:12px 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text); text-decoration:none;
  font-weight:650; letter-spacing:.2px;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition: transform var(--dur-fast) var(--ease-io), background var(--dur-base) var(--ease-io), border-color var(--dur-base) var(--ease-io), box-shadow var(--dur-base) var(--ease-io);
  white-space:nowrap;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn:active{ transform: scale(0.98); transition: transform 120ms var(--ease-io); }
.btnPrimary{ background:#f2f2f2; color:#0b0c0f; border-color:transparent; }
.btnPrimary:hover{ background:#fff; }
.btnGhost{ background:rgba(0,0,0,.12); border-color:rgba(255,255,255,.14); }
.btnSm{ padding:10px 14px; font-size:14px; }
.btnLg{ padding:11px 20px; font-size:15px; }

/* ── Layout ── */
section{ padding:var(--sectionY) 0; }
.hero{ padding:18px 0; }
@media (max-width:820px){
  .hero{ padding:8px 8px 0; }
  .hero + section{
    margin-top:-1px;
    padding-top:18px;
  }
}

/* ── Hero Card ── */
.heroCard{
  position:relative; border-radius:var(--r2); overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow); min-height:580px;
}
.heroMedia{
  position:absolute; inset:0;
  filter:saturate(.95) contrast(1.02);
}
.heroMedia::after{
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.025; pointer-events:none; z-index:1;
}
.heroCard::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
}
.heroInner{
  position:relative; z-index:3;
  padding:32px 22px 22px;
  display:flex; flex-direction:column; gap:14px;
}
@media (max-width:820px){
  .heroCard{
    position:relative;
    min-height: calc(100svh - 110px);
    max-height: calc(100svh - 90px);
    overflow:hidden;
  }
  .heroInner{
    padding:30px 16px 0;
    gap:10px;
  }
}

/* ── Typography ── */
.eyebrow{ display:flex; align-items:center; gap:10px; color:rgba(242,242,242,.78); font-size:14px; letter-spacing:.15px; }
.eyebrow .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
h1{
  margin:0;
  font-size:clamp(38px,7.2vw,58px);
  line-height:1.06; letter-spacing:-0.01em; font-weight:620; max-width:16ch;
}
.sub{
  max-width:54ch; color:var(--muted);
  font-size:clamp(16px,3.7vw,18px); line-height:1.35; margin-top:4px;
}
.priceBlock{ margin-top:4px; margin-bottom:8px; display:flex; flex-direction:column; gap:6px; width:min(560px,100%); }
.priceLabel{ font-size:13px; font-weight:600; color:rgba(242,242,242,.50); letter-spacing:.2px; text-transform:uppercase; }
.priceList{ display:flex; flex-direction:column; gap:4px; color:rgba(242,242,242,.48); font-size:14px; line-height:1.3; margin-top:2px; }
.priceList b{ color:rgba(242,242,242,.82); font-weight:580; }

/* ── Hero CTA ── */
.heroBtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; width:min(560px,100%); }
@media (max-width:430px){ .heroBtns .btn{ flex:1 1 auto; } }
.note{ color:rgba(242,242,242,.60); font-size:13.5px; margin-top:2px; }
.trustLine{ margin-top:6px; font-size:13px; color:rgba(242,242,242,.70); }
.trustLine a{ color:rgba(242,242,242,.85); text-decoration:none; border-bottom:1px solid rgba(242,242,242,.25); }
.trustLine a:hover{ border-bottom-color:rgba(242,242,242,.55); }
.starRating{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none !important; border-bottom:none !important;
  color:rgba(242,242,242,.90); font-size:14px;
}
.starRating:hover{ color:#fff; }
.stars{ color:rgba(251,191,36,.85); font-size:15px; letter-spacing:1px; line-height:1; }
.ratingNum{ font-weight:760; color:rgba(242,242,242,.95); }
.ratingCount{ color:rgba(242,242,242,.60); }

/* ── heroBottom: hidden by default, shown only on mobile ── */
.heroBottom{ display:none; }
@media (max-width:820px){
  .heroBottom{
    display:flex;
    position:absolute; left:16px; right:16px;
    bottom:calc(20px + var(--safeBottom));
    flex-direction:column; gap:8px; z-index:3;
  }
  .heroBottom .heroBtns{ margin:0; width:100%; }
  .heroBottom .heroBtns .btn{ width:100%; justify-content:center; }
  .heroBottom .trustLine{ margin:0; order:-1; }
  .heroCard::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    height:200px;
    background:linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,.55) 52%,rgba(10,12,16,.82) 100%);
    pointer-events:none; z-index:2;
  }
}
@media (max-width:430px){
  .heroBottom{ left:14px; right:14px; bottom:calc(20px + var(--safeBottom)); }
}
/* Landscape mobile: tighter hero, show inline buttons instead of absolute */
@media (max-width:820px) and (orientation:landscape) and (max-height:500px){
  .heroCard{ min-height:auto; max-height:none; }
  .heroBottom{ display:none !important; }
  .heroInner > .heroBtns{ display:flex !important; }
  .heroInner > .trustLine{ display:block !important; }
  .heroInner > .note{ display:block !important; }
  .heroInner{ padding-bottom:22px; }
}

/* ── Cards & Grid ── */
.card{
  border-radius: var(--r); border:1px solid rgba(255,255,255,.08);
  background: var(--depth-1); padding: 16px 16px;
  position:relative; overflow:hidden; box-shadow: var(--shadow);
  transition: background var(--dur-base) var(--ease-io), border-color var(--dur-base) var(--ease-io), transform var(--dur-base) var(--ease-io), box-shadow var(--dur-base) var(--ease-io);
}
.card:has(.customSelect.open){ overflow: visible; }
.card:hover{ background: var(--depth-2); border-color: rgba(255,255,255,.10); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.40); }
.card::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(820px 360px at 20% 12%, rgba(255,255,255,.08), transparent 65%), radial-gradient(760px 380px at 85% 14%, rgba(120,160,255,.06), transparent 70%); opacity:.45; }
.card > *{ position:relative; z-index:1; }
.card h3{ margin:0; font-size:18px; letter-spacing:-.2px; }
.card h3::after{ content:''; display:block; height:1px; background:rgba(255,255,255,.08); margin:8px 0 10px; }
.card p{ margin:0; color: var(--muted); line-height:1.35; }
.divider{ height:1px; background: rgba(255,255,255,.08); margin: 6px 0 0; }

.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .grid3{ grid-template-columns:1fr; } }

/* ── Gallery ── */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.shot{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  aspect-ratio:4/3; position:relative; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: transform var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io);
}
.shot:hover{ transform:scale(1.015); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.shot:active{ transform:scale(.98); }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95) contrast(1.02); }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.00),rgba(0,0,0,.18)); pointer-events:none; }
@media (max-width:820px){
  .galleryWrap{ position:relative; }
  .gallery{
    display:flex; flex-direction:row; gap:10px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .shot{ flex:0 0 82vw; max-width:320px; scroll-snap-align:start; aspect-ratio:4/3; border-radius:18px; }
  .galleryHint{ margin-top:10px; font-size:13px; color:rgba(255,255,255,.38); text-align:center; letter-spacing:.1px; }
}
@media (min-width:821px){ .galleryHint{ display:none; } }
.galleryCaption{
  margin-top:12px; padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  font-size:13px; color:rgba(242,242,242,.55); line-height:1.4;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.galleryCaption b{ color:rgba(242,242,242,.85); font-weight:700; }
.galleryCaptionDot{ width:3px; height:3px; border-radius:50%; background:rgba(242,242,242,.25); flex-shrink:0; }
.shotLabel{
  position:absolute; bottom:6px; left:6px;
  padding:3px 8px; border-radius:6px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  font-size:10px; font-weight:600; letter-spacing:.04em;
  color:rgba(242,242,242,.8); pointer-events:none;
  opacity:0; transition:opacity .2s;
}
.shot:hover .shotLabel,
.shot:focus .shotLabel{ opacity:1; }
@media (max-width:820px){ .shotLabel{ display:none; } }

/* ── Compare Slider ── */
.compareCard{ padding:16px; }
.compareWrap{ margin-top:20px; }
.compare{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:24px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.35); touch-action:pan-y;
  cursor:ew-resize;
}
@media (max-width:720px){ .compare{ aspect-ratio:4/3; } }
.compare__before{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.compare__after{ position:absolute; inset:0; z-index:2; clip-path:inset(0 50% 0 0); will-change:clip-path; }
.compare__after img{ width:100%; height:100%; object-fit:cover; display:block; }
.compare__line{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.75) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.75) 70%,rgba(255,255,255,.15) 100%);
  transform:translateX(-1px); z-index:3; will-change:left;
}
.compareFoot{ display:none; }
.compare__label{
  position:absolute; top:14px; z-index:5;
  font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62); pointer-events:none;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.compare__label--before{ left:14px; }
.compare__label--after{ right:14px; }

/* ── Lightbox ── */
.lightbox{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  align-items:center; justify-content:center; cursor:zoom-out;
}
.lightbox.is-open{ display:flex; animation:lbIn .18s ease; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{
  max-width:min(92vw,960px); max-height:88vh; object-fit:contain;
  border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.7);
  cursor:default; user-select:none; -webkit-user-drag:none;
}
.lightbox.is-open img{ animation:lbImgIn .2s cubic-bezier(.22,.68,0,1.1); }
@keyframes lbImgIn{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.lbClose{
  position:fixed; top:max(16px,env(safe-area-inset-top,16px)); right:16px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.85); font-size:20px; z-index:201;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition: background var(--dur-fast);
}
.lbClose:hover{ background:rgba(255,255,255,.20); }
.lbClose:active{ transform:scale(.92); }

/* ── Pricing Layout ── */
.pricing{ display:grid; grid-template-columns:1.2fr .8fr; gap:12px; align-items:start; margin-top:16px; }
@media (max-width:900px){ .pricing{ grid-template-columns:1fr; } }
.priceCard{ border-radius:22px; padding:18px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); }
.priceCardHeader h2{ margin:0 0 4px; font-size:20px; letter-spacing:-.02em; font-weight:700; }
.priceCardHeader p{ margin:0 0 14px; color:var(--muted); line-height:1.35; font-size:13px; }
.pricingCta{ margin-top:20px; width:100%; justify-content:center; padding:12px 20px; font-size:15px; }
.priceRows{ display:flex; flex-direction:column; gap:6px; }
.priceRow{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  align-items:center; gap:0 12px; padding:14px 16px;
  border-radius:16px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10); text-decoration:none; color:inherit;
  transition: background var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io), transform .38s var(--ease-out), opacity .38s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.priceRow:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); }
.priceRow:active{ transform:scale(0.99); }
.priceRow .title{ font-weight:800; font-size:16px; line-height:1.2; grid-column:1; grid-row:1; }
.priceRow .sub{ margin-top:3px; color:rgba(242,242,242,.42); font-size:12px; line-height:1.2; grid-column:1; grid-row:2; }
.priceRow .right{
  font-weight:900; font-size:22px; letter-spacing:-.02em; white-space:nowrap;
  grid-column:2; grid-row:1 / span 2; font-variant-numeric:tabular-nums;
  color:rgba(242,242,242,.95); display:flex; align-items:center; gap:6px;
}
.priceRow .right::after{
  content:"\2192"; font-size:14px; font-weight:400; color:rgba(242,242,242,.28);
  transition: transform var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io);
}
.priceRow:hover .right::after{ transform:translateX(3px); color:rgba(242,242,242,.55); }
.asideCard{
  border-radius:var(--r2); border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); padding:20px; backdrop-filter:blur(12px);
}
.asideCard h3{ margin:0 0 14px; font-size:16px; letter-spacing:.2px; text-transform:uppercase; color:rgba(242,242,242,.55); font-weight:650; }
.bul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.bul li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); line-height:1.4; }
.bul li b{ color:rgba(242,242,242,.92); }
.check{
  flex-shrink:0; width:16px; height:16px; margin-top:2px;
  border-radius:4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.check svg{ width:10px; height:10px; stroke:rgba(255,255,255,.65); }

/* ── FAQ ── */
.faq{ display:grid; gap:8px; }
details{
  border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); padding:0;
  transition: background var(--dur-fast);
}
details:hover{ background:rgba(255,255,255,.055); }
summary{
  cursor:pointer; list-style:none; font-weight:700; letter-spacing:-.2px;
  padding:15px 16px; min-height:44px;
  display:flex; align-items:center; justify-content:space-between;
  -webkit-tap-highlight-color:transparent;
}
summary::-webkit-details-marker{ display:none; }
details p{ margin:0; padding:10px 16px 16px; color:var(--muted); line-height:1.5; }
details[open] summary{ border-bottom:1px solid rgba(255,255,255,.07); }
details[open] summary ~ *{ animation:fadeSlideDown .18s ease; }
@keyframes fadeSlideDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
summary::after{
  content:'+'; flex-shrink:0; font-size:20px; font-weight:300;
  color:rgba(255,255,255,.35);
  transition: transform var(--dur-base) var(--ease-io), color var(--dur-base) var(--ease-io);
  line-height:1;
}
details[open] summary::after{ transform:rotate(45deg); color:rgba(255,255,255,.60); }

/* ── Sheet (Bottom Sheet / Form) ── */
.overlay{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-sheet) var(--ease-io);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.sheetOverlay{
  display:none; position:fixed; inset:0; z-index:200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity:0; transition: opacity var(--dur-slow) var(--ease-out);
}
.sheetOverlay.is-open{ display:block; }
.sheetOverlay.is-visible{ opacity:1; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-height:92dvh; display:flex; flex-direction:column;
  border-radius:28px 28px 0 0;
  background:rgba(13,14,18,.97);
  border:1px solid rgba(255,255,255,.10); border-bottom:none;
  box-shadow:0 -24px 80px rgba(0,0,0,.65), 0 0 0 0.5px rgba(255,255,255,.08);
  transform:translateY(110%);
  transition: transform var(--dur-sheet) var(--ease-spring);
  will-change:transform;
  overflow:visible;
}
.sheet.is-open{ transform:translateY(0); }
@media (min-width:680px){
  .overlay{ display:flex; align-items:flex-end; justify-content:center; }
  .sheet{ position:static; max-width:560px; width:100%; border-radius:28px; border:1px solid rgba(255,255,255,.12); margin-bottom:24px; transform:translateY(20px) scale(0.97); opacity:0; pointer-events:none; }
  .sheet.is-open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .overlay.is-open .sheet{ transition: transform var(--dur-sheet) var(--ease-spring), opacity var(--dur-sheet) var(--ease-io); }
}
.sheetHandle{ flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:12px 0 4px; position:relative; z-index:1; }
.sheetHandle span{ width:36px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); display:block; }
@media (min-width:680px){ .sheetHandle{ display:none; } }
.sheetHeader{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:8px 20px 6px; position:relative; z-index:1;
}
.sheetHeader h2{ margin:0; font-size:22px; font-weight:760; letter-spacing:-.3px; }
.sheetClose{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  color:rgba(242,242,242,.65); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-fast), color var(--dur-fast);
  -webkit-tap-highlight-color:transparent;
}
.sheetClose:hover{ background:rgba(255,255,255,.12); color:#fff; }
.sheetBody{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:10px 18px calc(var(--sheet-actions-h,72px) + 8px + env(safe-area-inset-bottom));
  position:relative; z-index:1;
}
.sheetBody .cbWrap{ position:relative; }
.sheetActions{ flex-shrink:0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11,12,15,.88); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(12px); position:relative; z-index:1; }
.sheetSubmit{ width:100%; padding: 15px; border-radius: 18px; border: 1px solid transparent; font-size:16px; font-weight:760; cursor:pointer; background: #f2f2f2; color: #0b0c0f; transition: box-shadow var(--dur-base) var(--ease-io), background var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io); }
.sheetSubmit.is-ready{ background:#fff; border-color: rgba(170,200,255,.7); box-shadow: 0 0 0 3px rgba(170,200,255,.25), 0 0 28px rgba(120,160,255,.45); }
.sheetSubmit:active{ transform: scale(0.98); transition: transform 120ms cubic-bezier(.4,0,.2,1); }

body.sheet-open .stickyCta{ opacity:0 !important; pointer-events:none !important; }

/* Sheet landscape: side-panel layout */
@media (orientation:landscape) and (max-height:500px){
  .sheet{
    left:auto; right:0; top:0; bottom:0;
    width:min(460px,58vw); max-height:100dvh;
    border-radius:20px 0 0 20px;
    border-top:none; border-left:1px solid rgba(255,255,255,.10);
    transform:translateX(110%);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
  }
  .sheet.is-open{ transform:translateX(0) !important; }
  .sheetHandle{ display:none; }
  .sheetHeader{ padding:12px 16px 8px; }
  .sheetBody{ padding:8px 14px calc(var(--sheet-actions-h, 72px) + 8px + env(safe-area-inset-bottom)); }
  .sheetActions{ padding:7px 14px calc(8px + env(safe-area-inset-bottom)); }
}

/* ── Form Fields ── */
.field{ display:grid; gap:6px; margin:10px 0; }
label{ font-size:13px; color:rgba(242,242,242,.62); font-weight:600; letter-spacing:.1px; }
input, select, textarea{
  width:100%; box-sizing:border-box;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:14px; padding:12px; outline:none;
  font-size:16px; font-family:inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus, select:focus, textarea:focus{
  border-color:rgba(170,200,255,.45);
  box-shadow:0 0 0 3px rgba(120,160,255,.10);
}
textarea{ min-height:80px; resize:vertical; }
.floatField{ position:relative; margin:10px 0; }
.floatField input{ width:100%; padding:20px 12px 8px; font-size:16px; }
.floatField label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:16px; color:rgba(242,242,242,.38); font-weight:400; letter-spacing:0;
  pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:calc(100% - 24px);
  transition:top var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-io), font-size var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io);
}
.floatField input:focus + label,
.floatField input:not(:placeholder-shown) + label{
  top:10px; transform:translateY(0);
  font-size:11px; color:rgba(242,242,242,.45); font-weight:650; letter-spacing:.2px;
}
.floatField input:focus + label{ color:rgba(170,200,255,.65); }
.vehicleRow{ display:grid; grid-template-columns: 80px 1fr 1fr; gap:8px; }
.yearField input{ letter-spacing:0.5px; }
@media (max-width:480px){ .vehicleRow{ grid-template-columns:70px 1fr; grid-template-rows:auto auto; } .vehicleRow .colModel{ grid-column:1 / -1; } }
.segRow{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
label.seg{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
label.seg:active{ transform:scale(.97); }
label.seg input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
label.seg span{ position:relative; padding-left:22px; font-weight:720; font-size:14px; }
label.seg span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
label.seg input:checked + span::before{ border-color:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(255,255,255,.10); }
label.seg input:checked + span::after{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.90);
}
label.seg:has(input:checked){ background:rgba(255,255,255,.08); border-color:rgba(170,200,255,.55); box-shadow:0 0 0 3px rgba(120,160,255,.10); }
.notesToggle{ background:none; border:none; color:rgba(242,242,242,.45); font-size:13px; cursor:pointer; padding:0; font-family:inherit; transition: color .15s; }
.notesToggle:hover{ color:rgba(242,242,242,.75); }
.notesArea{ display:none; margin-top:10px; }
.notesArea.open, .notesArea.is-open{ display:block; }

/* ── Custom Select (form dropdowns) ── */
.customSelect{ position:relative; user-select:none; }
.csSelected{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; box-sizing:border-box;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:14px; padding:12px; font-size:16px;
  cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.csSelected:focus, .customSelect.open .csSelected{
  border-color:rgba(170,200,255,.45);
  box-shadow:0 0 0 3px rgba(120,160,255,.10);
}
.csLabel{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csLabel.placeholder{ color:rgba(242,242,242,.38); }
.csArrow{ flex-shrink:0; color:rgba(242,242,242,.45); display:flex; align-items:center; transition:transform var(--dur-base) var(--ease-io); }
.customSelect.open .csArrow{ transform:rotate(180deg); }
.customSelect .csDropdown{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:100; margin:0; padding:6px; list-style:none;
  background:#1a1c22; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.65);
  overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:240px;
}
.customSelect.open .csDropdown{ display:block; }
.csDropdown{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:9999; margin:0; padding:6px; list-style:none;
  background:#1a1c22; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.65);
  overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:240px;
}
.csDropdown.is-open{ display:block; }
.csDropdown.opens-up{ top:auto; bottom:calc(100% + 6px); }
.csOpt{
  padding:12px 14px; border-radius:10px; font-size:15px;
  color:rgba(242,242,242,.75); cursor:pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  display:flex; align-items:center; gap:10px;
}
.csOpt + .csOpt{ border-top:1px solid rgba(255,255,255,.06); }
.csOpt.active, .csOpt:hover{ background:rgba(255,255,255,.08); }
.csOpt.is-pressing{ background:rgba(255,255,255,.12) !important; transform:scale(0.99); }
.csOpt:hover{ background:rgba(255,255,255,.07); color:#fff; }
.csOpt.selected{ background:rgba(255,255,255,.09); color:#fff; font-weight:650; }
.csOpt.selected::after{
  content:""; flex-shrink:0; width:16px; height:16px; margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(255,255,255,.8)' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Confirm flash */
@keyframes optConfirm{
  0%  { background:rgba(255,255,255,.09); transform:scale(1); }
  35% { background:rgba(255,255,255,.18); transform:scale(1.012); }
  70% { background:rgba(255,255,255,.12); transform:scale(0.997); }
  100%{ background:rgba(255,255,255,.09); transform:scale(1); }
}
.csOpt.is-confirming{ animation:optConfirm 280ms var(--ease-io) forwards; pointer-events:none; }
.csOptGroup{ padding: 8px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,242,242,.28); pointer-events: none; user-select: none; }
.csOptGroup + .csOpt{ border-top: none; }

/* ── Validation ── */
.field.has-error input, .field.has-error textarea, .field.has-error .csSelected,
.field.has-error .floatField input{
  border-color:rgba(255,100,100,.55) !important;
  box-shadow:0 0 0 3px rgba(255,80,80,.10) !important;
}
.fieldError{ font-size:12px; color:rgba(255,120,120,.85); margin-top:5px; display:none; }
.field.has-error .fieldError{ display:block; }
.formFine{ min-height:0; font-size:13px; line-height:1.4; color:rgba(255,100,100,.9); text-align:center; padding:0 4px; transition:opacity var(--dur-base); }
.formFine:empty{ display:none; }
.formTrust{
  display:flex; align-items:flex-start; gap:7px;
  margin:14px 0 0; font-size:13px; color:rgba(242,242,242,.55); line-height:1.45;
}
.formTrust::before{
  content:""; flex-shrink:0; width:14px; height:14px; margin-top:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(242,242,242,.45)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Success ── */
.formSuccess{
  display:none; flex-direction:column; align-items:center;
  text-align:center; padding:40px 24px 32px; gap:16px;
}
.formSuccess.is-visible{ display:flex; animation: fadeSlideUp .35s var(--ease-out) both; }
@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes successPop{
  0%  { transform:scale(0.6); opacity:0; }
  60% { transform:scale(1.12); opacity:1; }
  80% { transform:scale(0.94); }
  100%{ transform:scale(1); }
}
@keyframes successGlow{
  0%,100%{ box-shadow:0 0 0 6px rgba(52,211,153,.06), 0 0 20px rgba(52,211,153,.15); }
  50%    { box-shadow:0 0 0 10px rgba(52,211,153,.10), 0 0 40px rgba(52,211,153,.28); }
}
.successIcon{
  width:64px; height:64px; border-radius:50%;
  background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.40);
  display:flex; align-items:center; justify-content:center;
  animation: successPop .5s cubic-bezier(.22,.68,0,1.2) both, successGlow 2.5s ease-in-out 0.5s infinite;
}
.successIcon svg{ width:28px; height:28px; stroke:#34d399; stroke-width:2.5; }
.formSuccess h3{ margin:0; font-size:22px; letter-spacing:-.3px; }
.formSuccess p{ margin:0; color:var(--muted); line-height:1.45; max-width:34ch; }
.successResponseTime{ font-size:13px !important; color:rgba(52,211,153,.65) !important; font-weight:500; margin-top:-4px !important; }
.successResponseTime:empty{ display:none; }
.formSuccess .callLink{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  padding:14px 28px; border-radius:999px;
  border:1px solid rgba(52,211,153,.45); background:rgba(52,211,153,.10);
  box-shadow:0 0 0 3px rgba(52,211,153,.08), 0 0 24px rgba(52,211,153,.20);
  color:var(--text); text-decoration:none; font-weight:700; font-size:16px;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.formSuccess .callLink:hover{
  background:rgba(52,211,153,.16);
  box-shadow:0 0 0 4px rgba(52,211,153,.12), 0 0 32px rgba(52,211,153,.30);
}

/* ── Progress Bar ── */
.formProgress{
  position:sticky; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.07); border-radius:0; overflow:hidden;
  z-index:10; opacity:0; transition:opacity var(--dur-base);
  flex-shrink:0;
}
.formProgress.active{ opacity:1; }
.formProgressBar{
  height:100%; width:0%; border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.65));
  transition:width .35s var(--ease-io);
}

/* ── Sticky CTA ── */
.stickyCta{
  position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 12px);
  width:calc(100% - 24px); max-width:480px;
  margin-left:auto; margin-right:auto; z-index:35;
  display:flex; gap:8px; padding:8px; border-radius:999px;
  background:rgba(14,16,20,.92); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 8px 32px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.06);
  transform:translateY(120%); opacity:0; pointer-events:none;
  transition: transform .28s var(--ease-spring), opacity .22s ease;
  box-sizing:border-box;
}
.stickyCta.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
@media (min-width:768px){ .stickyCta{ display:none !important; } }
.stickyCtaBtn{
  flex:1; text-align:center; white-space:nowrap; border-radius:999px;
  padding:13px 10px; font-size:15px; font-weight:700;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; border:none; -webkit-tap-highlight-color:transparent;
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.stickyCtaBtn:active{ transform:scale(0.98); }
.stickyCtaQuote{ background:#f2f2f2; color:#0b0c0f; }
.stickyCtaQuote:hover{ background:#fff; }

/* ── Scroll Reveal ── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.reveal.is-revealed{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(12px); transition:opacity .38s var(--ease-out), transform .38s var(--ease-out); }
.reveal-stagger.is-revealed > *:nth-child(1){ opacity:1; transform:none; transition-delay:0ms; }
.reveal-stagger.is-revealed > *:nth-child(2){ opacity:1; transform:none; transition-delay:60ms; }
.reveal-stagger.is-revealed > *:nth-child(3){ opacity:1; transform:none; transition-delay:120ms; }
.reveal-stagger.is-revealed > *:nth-child(4){ opacity:1; transform:none; transition-delay:180ms; }
.reveal-stagger.is-revealed > *:nth-child(5){ opacity:1; transform:none; transition-delay:240ms; }

/* ── Ambient Effects ── */
body::before{
  position:fixed; content:""; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    radial-gradient(60% 60% at 20% 0%, rgba(255,255,255,.04), rgba(255,255,255,0) 55%),
    radial-gradient(70% 80% at 80% 20%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  opacity:.85;
}
main section:not(.hero){ position:relative; }
main section:not(.hero)::before{
  content:""; position:absolute; left:0; right:0; top:-28px; height:220px;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(75% 90% at 50% 0%, rgba(255,255,255,.060), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 55%);
}
main section:not(.hero) > *{ position:relative; z-index:1; }

/* ── Footer ── */
footer{ padding:26px 0 calc(40px + var(--safeBottom)); color:rgba(242,242,242,.45); font-size:13px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px; }
.footRow{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; }
.legalLinks{ display:flex; gap:12px; flex-wrap:wrap; }
.linkBtn{ background:none; border:none; color:rgba(242,242,242,.7); text-decoration:underline; cursor:pointer; padding:0; font:inherit; }

/* ── Modal (terms/privacy) ── */
.modal{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.62); backdrop-filter:blur(6px); }
.modal.open{ display:flex; }
.modalBox{ width:min(860px,100%); max-height:min(80vh,780px); overflow:auto; border-radius:18px; background:rgba(15,16,20,.96); border:1px solid rgba(255,255,255,.10); box-shadow:0 30px 90px rgba(0,0,0,.65); }
.modalHead{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:rgba(15,16,20,.98); border-bottom:1px solid rgba(255,255,255,.08); }
.modalHead b{ font-size:14px; }
.modalBody{ padding:14px 14px 16px; color:rgba(242,242,242,.72); line-height:1.5; }
.modalBody p{ margin:0 0 10px; font-size:14px; }
.x{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; }

/* ── Directions ── */
.directionsCard{ display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; padding:0; }
.directionsInfo{ padding:24px; display:flex; flex-direction:column; justify-content:center; }
.directionsActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.mapWrap{ position:relative; min-height:260px; }
.mapWrap::after{ content:""; position:absolute; inset:0; pointer-events:none; background:rgba(11,12,15,.18); mix-blend-mode:multiply; }
.directionsMap{ width:100%; height:100%; border:none; display:block; filter:saturate(0) brightness(0.55) contrast(1.1); }
@media (max-width:700px){ .directionsCard{ grid-template-columns:1fr; } .mapWrap{ min-height:200px; } }
@media (max-width:720px){ .mapWrap{ min-height:200px; } .mapWrap iframe{ min-height:200px; } }

/* ── Misc shared helpers ── */
.hint{ margin-top:6px; font-size:12px; line-height:1.4; color:rgba(242,242,242,.50); }
.cbWrap{ position:relative; }
.cbWrap .csDropdown{ background:#1a1c22; border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.65); padding:6px; list-style:none; margin:0; max-height:220px; overflow-y:auto; }
.formWrap{ border-radius:var(--r2); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); overflow:clip; position:relative; }
.formHead{ padding:20px 20px 0; }
.formHead h2{ margin:0; font-size:26px; letter-spacing:-.4px; }
.formHead p{ margin:8px 0 0; color:var(--muted); line-height:1.35; padding-bottom:4px; }
form{ padding:0 0 8px; }

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}