@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#07090c;
  --bg2:#0b0f15;
  --paper:#ffffff;

  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.12);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);

  --ink:#0b0d10;
  --ink2:rgba(10,12,16,.74);

  --a:#7de6ff;
  --b:#a792ff;
  --glow:rgba(125,230,255,.16);

  --radius:18px;
  --radius2:26px;

  --wrap:1200px;
  --sidebar:284px;

  --quoteHeroMinHDesktop: 740px;
  --quoteHeroPadBottomDesktop: 160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% 10%, rgba(167,146,255,.12), transparent 55%),
              radial-gradient(900px 520px at 30% 30%, rgba(125,230,255,.10), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.shell{min-height:100vh;display:flex}

.sidebar{
  width:var(--sidebar);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
  color:var(--ink);
  border-right:1px solid rgba(0,0,0,.08);
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:16px;
}
.brand img{height:80px;width:auto;display:block}
.brand .tag{
  display:block;
  font-size:12px;
  color:rgba(0,0,0,.62);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand .sub{
  display:block;
  font-size:12px;
  color:rgba(0,0,0,.55);
  margin-top:2px;
}

.nav{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.nav a{
  text-decoration:none;
  color:rgba(0,0,0,.78);
  font-weight:700;
  padding:11px 12px;
  border-radius:14px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.nav a:hover{background:rgba(0,0,0,.06);transform: translateX(2px)}
.nav a.active{
  background: linear-gradient(90deg, rgba(125,230,255,.28), rgba(167,146,255,.22));
  color:rgba(0,0,0,.86);
}

.sidebar .ctaBox{
  margin-top:auto;
  padding:14px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
  border:1px solid rgba(0,0,0,.08);
}
.sidebar .ctaBox .small{
  font-size:12px;
  color:rgba(0,0,0,.60);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sidebar .ctaBox h4{margin:8px 0 10px;font-size:16px;color:rgba(0,0,0,.86)}
.sidebar .ctaRow{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  border:0;
  background: linear-gradient(90deg, rgba(125,230,255,.95), rgba(167,146,255,.92));
  color:#05070a;
  font-weight:600;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-2px);filter: drop-shadow(0 12px 26px rgba(125,230,255,.18))}
.btn.ghost{background: rgba(0,0,0,.06);color: rgba(0,0,0,.82);font-weight:700}

.btnSubmit{padding: 12px 16px;font-size: 16px;font-weight: 800}

.topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(8,10,14,.74);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:12px 14px;
}
.topbar .row{
  max-width:var(--wrap);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.burger{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.burger svg{width:22px;height:22px}
.mobileBrand{display:flex;align-items:center;gap:10px}
.mobileBrand img{height:30px;width:auto;display:block}

.drawerOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index:60;
}
.drawer{
  position:fixed;
  top:0; left:0;
  width:min(88vw, 330px);
  height:100vh;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
  transform: translateX(-105%);
  transition: transform .22s ease;
  z-index:70;
  padding:18px;
  border-right:1px solid rgba(0,0,0,.08);
}
.drawer.open{transform: translateX(0)}
.drawerOverlay.open{opacity:1;pointer-events:auto}
.drawer .nav a{font-size:15px}

.main{flex:1;min-width:0}

.container{
  max-width:var(--wrap);
  margin:0 auto;
  padding: 34px 22px 70px;
}

.hero{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(125,230,255,.10), transparent 55%),
    radial-gradient(900px 520px at 80% 30%, rgba(167,146,255,.10), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.heroMedia{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity:.44;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(7,9,12,.88) 0%, rgba(7,9,12,.54) 55%, rgba(7,9,12,.22) 100%);
}

.heroInner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  padding: 34px;
  padding-bottom: 112px;
  align-items:start;
}

.quoteHero{
  min-height: var(--quoteHeroMinHDesktop);
}
.quoteHero .heroInner{
  min-height: var(--quoteHeroMinHDesktop);
  padding-bottom: var(--quoteHeroPadBottomDesktop);
}

.quoteHero.quoteOpen{
  --heroBeltPad: 0px;
  overscroll-behavior: contain;
}

h1{
  margin:14px 0 10px;
  font-size: clamp(30px, 4vw, 46px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.lede{
  margin:0 0 18px;
  color: rgba(255,255,255,.72);
  font-size: 15.5px;
  line-height:1.6;
  max-width: 56ch;
}

.badgeRow{display:flex;flex-wrap:wrap;gap:10px;margin-top: 10px}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size: 12.5px;
}

.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.cardQuote{position:relative;z-index: 4}

.cardHeader{padding:16px 16px 10px}
.cardHeader .title{margin:0;font-size:16px;font-weight:900}
.cardHeader .sub{margin:6px 0 0;font-size:13px;color: var(--muted);line-height:1.45}

.form{padding: 0 16px 16px;display:grid;gap:12px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

label{
  display:block;
  font-size:12px;
  color: rgba(255,255,255,.74);
  font-weight:800;
  letter-spacing:.04em;
  margin: 0 0 6px;
}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.55);
  color: var(--text);
  outline:none;
  font-family:inherit;
  transition: border .18s ease, transform .18s ease, background .18s ease;
}
textarea{min-height: 96px;resize: vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(125,230,255,.45);
  background: rgba(10,12,16,.66);
}

.helpRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding-top: 2px;
}
.note{font-size:12px;color: rgba(255,255,255,.58);line-height:1.45}
.formActions{display:flex;gap:10px;flex-wrap:wrap}

.hp{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  opacity:0 !important;
  height:0 !important;
  width:0 !important;
  pointer-events:none !important;
}

.msField{position:relative}
.ms{position:relative}
.ms summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.55);
  color: var(--text);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
.ms summary::-webkit-details-marker{display:none}
.ms summary::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid rgba(255,255,255,.58);
  border-bottom:2px solid rgba(255,255,255,.58);
  transform: rotate(45deg);
  opacity:.9;
  transition: transform .18s ease;
}
.ms[open] summary::after{transform: rotate(225deg)}
.msPanel{
  position:absolute;
  top: calc(100% + 8px);
  left:0; right:0;
  z-index:30;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 10px;
  max-height: 260px;
  overflow:auto;
}
.msOpt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  color: rgba(255,255,255,.86);
}
.msOpt:hover{background: rgba(255,255,255,.06)}
.msOpt input{width:16px;height:16px;accent-color: var(--a)}

.heroBelts{
  position:absolute;
  left:34px;
  right:34px;
  bottom: 22px;
  z-index: 2;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
  transition: opacity .18s ease, transform .18s ease;
}
.quoteHero.quoteOpen .heroBelts{
  opacity:0;
  transform: translateY(14px);
  pointer-events:none;
}

.belt{
  height: 44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  overflow:hidden;
}
.beltMover{
  height:100%;
  display:flex;
  width:max-content;
  will-change: transform;
  animation: beltMove 26s linear infinite;
}
.belt:hover .beltMover{animation-play-state: paused}
.beltGroup{
  height:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 10px;
  flex-shrink:0;
}
.beltItem{
  height: 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,16,.45);
  color: rgba(255,255,255,.86);
  font-weight:900;
  font-size: 12.5px;
  letter-spacing:.08em;
  text-transform: uppercase;
  white-space:nowrap;
  max-width: 240px;
  overflow:hidden;
  text-overflow: ellipsis;
}
@keyframes beltMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .beltMover{animation: none}
}

.section{ margin-top: 26px; }
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}
.sectionHead h2{margin:0;font-size: 20px;letter-spacing:-.01em}
.sectionHead p{margin:0;color: var(--muted);font-size: 13.5px;line-height:1.6;max-width: 62ch}

.features{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.feature{
  grid-column: span 4;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.feature h3{margin: 0 0 8px;font-size: 15px}
.feature p{margin:0;color: var(--muted);font-size: 13.5px;line-height: 1.6}

.miniGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.tile{
  grid-column: span 4;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.tile .img{
  height: 130px;
  background-size: cover;
  background-position:center;
  opacity:.92;
}
.tile .body{ padding: 14px; }
.tile .body .k{
  font-size:12px;
  color: rgba(255,255,255,.64);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
}
.tile .body h3{margin: 8px 0 6px;font-size: 16px}
.tile .body p{margin:0;color: var(--muted);font-size: 13.5px;line-height: 1.6}

.split{display:grid;grid-template-columns: 1fr 1fr;gap: 16px}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 16px;
}
.panel h3{ margin: 0 0 8px; font-size: 16px; }
.panel p{ margin:0; color: var(--muted); font-size: 13.5px; line-height:1.7; }

.footer{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  font-size: 13px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer a{color: rgba(255,255,255,.72);text-decoration:none;font-weight:800}
.footer a:hover{ color: var(--a); }

.ctaPhone{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  color: rgba(0,0,0,.82);
  text-decoration:none;
  font-weight:900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ctaPhone:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.03));
}
.ctaPhone:active{ transform: translateY(0); }
.ctaPhoneIcon{
  width:42px;height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.06);
}
.ctaPhoneIcon svg{ width:22px; height:22px; }
.ctaPhoneText{ display:flex; flex-direction:column; line-height:1.1; }
.ctaPhone small{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
}
.ctaPhoneText span{ font-size:16px; color: rgba(0,0,0,.86); }

@media (max-width: 980px){
  .sidebar{ display:none; }
  .topbar{
    display:block;
    padding: 10px 12px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  .topbar .row{ gap:10px; }
  .topbar .btn{ padding: 10px 14px; font-size:14px; font-weight:800; border-radius:16px; }
  .mobileBrand img{ height:28px; }

  .container{
    padding: 16px calc(14px + env(safe-area-inset-right)) 54px calc(14px + env(safe-area-inset-left));
  }

  .builtFor{ display:none !important; }

  .hero{
    border-radius: 24px;
  }
  .heroMedia{
    opacity: .58;
    background-position: 60% 60%;
    transform: scale(1.06);
  }
  .hero::after{
    background: linear-gradient(
      180deg,
      rgba(7,9,12,.52) 0%,
      rgba(7,9,12,.80) 54%,
      rgba(7,9,12,.92) 100%
    );
  }

  .heroInner{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
    padding-bottom: 14px;
    align-items: start;
  }

  h1{
    font-size: clamp(30px, 8.2vw, 44px);
    line-height: 1.02;
    margin: 10px 0 10px;
    letter-spacing: -.02em;
  }

  .lede{
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: none;
  }

  .badgeRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .badge{
    width: 100%;
    justify-content: center;
    padding: 10px 10px;
    font-size: 12px;
  }

  .cardHeader{ padding: 16px 16px 10px; }
  .cardHeader .title{ font-size: 17px; }
  .cardHeader .sub{ font-size: 13.5px; }

  .btnSubmit{
    padding: 14px 16px;
    font-size: 17px;
    border-radius: 16px;
  }

  .heroBelts{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    padding: 0 24px 22px;
  }
  .belt{ height: 42px; }
  .beltGroup{ padding: 0 10px; }
  .beltItem{ max-width: 220px; }

  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }

  .features{ gap: 12px; }
  .features .feature{ grid-column: span 6; }

  .miniGrid{ gap: 12px; }
  .miniGrid .tile{ grid-column: span 6; }

  .split{ grid-template-columns: 1fr; }

  .quoteHero{ min-height: auto; }
  .quoteHero .heroInner{ min-height:auto; padding-bottom: 18px; }
}

@media (max-width: 620px){
  .container{
    padding: 14px calc(12px + env(safe-area-inset-right)) 48px calc(12px + env(safe-area-inset-left));
  }

  .hero{
    border-radius: 22px;
  }

  .heroInner{
    padding: 20px 18px 12px;
    gap: 14px;
  }

  h1{
    font-size: clamp(28px, 9vw, 40px);
  }

  .badgeRow{
    grid-template-columns: 1fr;
  }

  .heroBelts{
    padding: 0 18px 18px;
    margin-top: 12px;
  }
  .beltItem{ max-width: 190px; }

  .features .feature{ grid-column: span 12; }
  .miniGrid .tile{ grid-column: span 12; }

  .tile .img{ height: 160px; }

  .sectionHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer{
    flex-direction: column;
    align-items: flex-start;
  }
}

.quoteLauncher{gap:12px}
.quoteLauncherList{display:grid;gap:10px}
.quoteLauncherItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size:13px;
}
.quoteLauncherItem .dot{
  width:8px;height:8px;border-radius:99px;
  background: linear-gradient(90deg, rgba(125,230,255,.95), rgba(167,146,255,.92));
  box-shadow: 0 0 0 4px rgba(125,230,255,.10);
  flex:0 0 auto;
}

.quoteHero .heroInner{position:relative}
.quoteHero .quoteOverlay{
  position:absolute;
  inset:0;
  z-index: 8;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;

  display:flex;
  padding:0;
}
.quoteHero.quoteOpen .quoteOverlay{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.quoteHero.quoteOpen .heroInner > :not(.quoteOverlay){
  opacity:0;
  transform: translateY(-8px);
  filter: blur(0px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.quoteHero .heroInner > :not(.quoteOverlay){
  transition: opacity .18s ease, transform .18s ease;
}

.quoteHero .quoteSheet{
  width:100%;
  height: calc(100% - var(--heroBeltPad, 0px));
  margin:0;
  border-radius: 0;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,16,.70);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.quoteHero .quoteTop{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.quoteHero .quoteTitle{
  font-size:18px;
  font-weight:950;
  letter-spacing:-.01em;
}
.quoteHero .quoteSub{
  margin-top:6px;
  font-size:13px;
  color: rgba(255,255,255,.65);
  line-height:1.45;
}
.quoteHero .quoteClose{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.quoteHero .quoteClose:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(125,230,255,.22);
}
.quoteHero .quoteClose svg{width:20px;height:20px}

.quoteHero .quoteContent{
  flex:1;
  overflow:auto;
  padding:16px;
  overscroll-behavior: contain;
}
.quoteHero .quoteGrid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:16px;
  align-items:start;
}
.quoteHero .quoteSide{display:grid;gap:12px}
.quoteHero .quoteSidePanel{padding:14px}

.quoteHero .quoteFormWrap{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.quoteHero .quoteForm{padding:16px}

@media (max-width: 980px){
  .quoteHero .quoteSheet{height: 100%;}
  .quoteHero .quoteGrid{grid-template-columns: 1fr;}
  .quoteHero .quoteContent{padding:12px}
  .quoteHero .quoteForm{padding:14px}
}

.img.paint-compare{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  cursor: ew-resize;
  touch-action: pan-y;
}

.img.paint-compare.pc-ease .pc-top{
  transition: clip-path .22s ease, -webkit-clip-path .22s ease;
}
.img.paint-compare.pc-ease .pc-divider{
  transition: left .22s ease;
}

.img.paint-compare .pc-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.img.paint-compare .pc-top{
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

.img.paint-compare .pc-divider{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 0;
  pointer-events: none;
}

.img.paint-compare .pc-divider::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-1.5px;
  width:3px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 0 18px rgba(255,255,255,0.22);
}

.img.paint-compare .pc-divider::after{
  content:"";
  position:absolute;
  top:50%;
  left:-10px;
  width:20px;
  height:14px;
  transform: translate(-50%, -50%);
  opacity: 0.95;
  background:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)) 0 0/100% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 0 6px/100% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)) 0 12px/100% 2px no-repeat;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.18));
}

.img.paint-compare .pc-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
}