:root{
  --navy:#06101d;--navy2:#0a1728;--panel:#0b1320;--panel2:#111b29;--gold:#ffc733;--gold2:#e9a91f;--text:#f8fbff;--muted:#b7c0cc;--line:rgba(255,255,255,.12);--green:#1fe276;--red:#ff6d6d;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;color:var(--text);background:radial-gradient(circle at 50% 18%,rgba(25,75,118,.28),transparent 42%),linear-gradient(180deg,#040a12 0%,#07111d 44%,#03080f 100%);min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:72px 0 0;pointer-events:none;z-index:-1;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%)}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}.page-shell{width:min(1540px,calc(100% - 58px));margin-inline:auto}.skip-link{position:absolute;left:12px;top:-80px;background:#fff;color:#000;padding:10px 14px;z-index:10000;border-radius:8px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:2000;background:rgba(3,8,15,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.09)}.nav-shell{height:78px;display:grid;grid-template-columns:160px 1fr 160px;align-items:center;width:min(1540px,calc(100% - 58px));margin:auto}.brand{display:flex;align-items:center}.brand-right{justify-content:flex-end}.brand img{width:104px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.38))}.nav-links{display:flex;justify-content:center;gap:52px;list-style:none;padding:0;margin:0}.nav-links a{font-weight:650;color:#f7f8fb;opacity:.92;letter-spacing:.01em}.nav-links a:hover{color:var(--gold)}
.hero-section{position:relative;min-height:580px;padding:30px 0 22px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}.hero-glow{position:absolute;left:38%;top:54px;width:520px;height:520px;background:radial-gradient(circle,rgba(255,199,51,.23),rgba(24,94,150,.16) 37%,transparent 68%);filter:blur(12px);pointer-events:none}.hero-grid{position:relative;display:grid;grid-template-columns:minmax(420px,1fr) minmax(380px,540px) minmax(410px,560px);align-items:start;gap:20px}.hero-copy{padding:48px 0 20px;z-index:2;max-width:610px}.tagline-badge{display:inline-flex;align-items:center;justify-content:center;margin:0 0 18px;padding:7px 17px;border:1.5px solid var(--gold);border-radius:999px;color:var(--gold);font-weight:900;letter-spacing:.08em;font-size:14px}.hero-copy h1{margin:0;text-transform:uppercase;font-size:clamp(38px,3.65vw,68px);line-height:.98;letter-spacing:-.04em;font-weight:950;text-shadow:0 10px 28px rgba(0,0,0,.35)}.hero-copy h2{margin:18px 0 12px;text-transform:uppercase;font-size:clamp(23px,2.1vw,35px);line-height:1.05;letter-spacing:-.02em;font-weight:950}.hero-copy h2 span{color:var(--gold);font-size:1.23em}.hero-description{max-width:560px;margin:0 0 22px;color:#d9e1ed;font-size:17px;line-height:1.55}.primary-cta{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-width:270px;padding:16px 23px;border-radius:10px;background:linear-gradient(180deg,#ffd44d,#f3b522);color:#111;font-weight:950;text-transform:uppercase;box-shadow:0 16px 34px rgba(255,199,51,.22),inset 0 1px rgba(255,255,255,.48)}.primary-cta:hover,.step-next:hover,.submit-button:hover,.photo-upload:hover{filter:brightness(1.05)}.trust-badges{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px;text-transform:uppercase;font-size:13px;font-weight:900;color:#fff}.trust-badges span{display:flex;gap:9px;align-items:center}.trust-badges strong{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#111;font-size:13px}.hero-character{position:relative;z-index:1;align-self:end;min-height:500px;margin-left:-45px;margin-right:-70px}.hero-character img{width:100%;max-width:680px;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)) drop-shadow(0 0 32px rgba(255,195,43,.18))}.quote-panel{position:relative;z-index:3;margin-top:4px;border:1.5px solid rgba(255,199,51,.72);border-radius:22px;background:linear-gradient(180deg,rgba(15,22,32,.96),rgba(6,13,22,.97));box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden}.quote-panel::after{content:"";position:absolute;right:-80px;bottom:-80px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,199,51,.16),transparent 70%);pointer-events:none}.quote-form{padding:24px}.quote-header{margin-bottom:16px}.quote-micro{margin:0 0 7px;color:var(--gold);font-weight:700}.quote-label{margin:0;color:var(--gold);font-weight:950;text-transform:uppercase;letter-spacing:.04em}.quote-header h3{margin:2px 0 8px;font-size:clamp(27px,2.2vw,42px);line-height:1.02;letter-spacing:-.035em}.estimate-row{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}.estimate-row strong{color:var(--gold);font-size:23px;font-weight:950}.estimate-row em{font-style:normal;color:#c9d0d8}.estimate-row em span,.estimate-row em{font-size:16px}.estimate-row em{ text-decoration:line-through; text-decoration-thickness:1.5px;text-decoration-color:var(--red)}.quote-header small{display:block;color:#95a1b0;margin-top:4px}.form-step{border:0;margin:0;padding:0}.form-step+ .form-step{margin-top:12px;border-top:1px solid rgba(255,199,51,.28);padding-top:12px}.form-step legend{color:var(--gold);font-weight:900;margin-bottom:9px}.form-step.collapsed{padding:14px 16px;border:1px solid rgba(150,170,196,.28);border-radius:11px;background:rgba(17,28,44,.72)}.form-step.collapsed .step-body{display:none}.form-step.collapsed legend{margin:0;color:#c7d2e4}.collapsed-summary{color:#99a5b4;font-size:13px;margin-top:4px}.form-step.active .collapsed-summary{display:none}.form-step.active .step-body{display:block}.form-row{display:grid;gap:9px;margin-bottom:10px}.three-col{grid-template-columns:1fr 1fr 1.1fr}.two-col{grid-template-columns:1fr 1fr}.compact-row{grid-template-columns:.9fr 1.2fr 1.1fr}.form-row label,.quote-form>label,.step-body>label,.manual-other{display:grid;gap:5px;font-size:12px;font-weight:750;color:#cbd6e4}input,select,textarea{width:100%;height:43px;border:1px solid rgba(172,190,214,.34);border-radius:9px;background:#101b2a;color:#f8fbff;padding:0 12px;outline:none}input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,199,51,.13)}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8fa0b2 50%),linear-gradient(135deg,#8fa0b2 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.ghost-button{height:43px;border:1px solid rgba(172,190,214,.34);border-radius:9px;background:#101b2a;color:#f8fbff;font-weight:850}.location-button{align-self:end}.input-with-button{position:relative;display:block}.input-with-button input{padding-right:82px;border-color:rgba(31,226,118,.45);background:#0b2330}.icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:30px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);border-radius:7px}.validation-mark{display:none;position:absolute;right:50px;top:50%;transform:translateY(-50%);color:var(--green);font-weight:950}.validation-mark.show{display:block}.vin-row small{color:#94a2b0}.brand-grid{display:grid;grid-template-columns:repeat(4,1fr) 44px;gap:8px;margin-bottom:8px}.brand-button{height:50px;border-radius:10px;border:1px solid rgba(172,190,214,.35);background:linear-gradient(180deg,#162235,#101929);color:#f4f7fb;font-weight:950;letter-spacing:.04em}.brand-button.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,199,51,.38),0 0 22px rgba(255,199,51,.11)}.year-wheel{height:50px;font-size:16px;background-color:#101b2a}.manual-other.hidden{display:none}.radio-group{border:1px solid rgba(172,190,214,.34);border-radius:9px;padding:9px 12px;margin:0;color:#cbd6e4}.radio-group legend{font-size:12px;color:#cbd6e4;margin:0 0 4px}.radio-group label{display:inline-flex;gap:6px;margin-right:12px;align-items:center;color:white;font-weight:700}.radio-group input{width:auto;height:auto;accent-color:var(--gold)}.tooltip-trigger{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:0;background:#6e7784;color:#fff;font-size:12px;font-weight:900;margin-left:4px}.photo-upload{height:50px;border:0;border-radius:10px;background:linear-gradient(180deg,#ffd44d,#f1b421);color:#151000;font-weight:950;text-align:center;align-content:center;cursor:pointer}.photo-upload input{display:none}.step-actions{display:flex;margin-top:12px}.step-actions.right{justify-content:flex-end}.step-actions.split{justify-content:space-between;gap:12px}.step-next,.submit-button{height:48px;border:0;border-radius:11px;background:linear-gradient(180deg,#ffd44d,#f1b421);color:#111;font-weight:950;padding:0 24px;box-shadow:0 15px 28px rgba(255,199,51,.18)}.submit-button{flex:1;font-size:20px}.privacy-note{margin:5px 0 10px;color:#b7c0cc}.quote-preview-box{border:1px solid rgba(172,190,214,.28);border-radius:11px;background:#111a27;padding:12px;margin-top:10px}.quote-preview-box strong{font-size:12px;color:var(--gold)}.quote-preview-box pre{margin:7px 0 0;color:#f7f8fb;white-space:pre-wrap;font:500 13px/1.38 Inter,system-ui,sans-serif}.notification-status{display:none;margin:10px 0 0;padding:10px;border-radius:8px;background:rgba(31,226,118,.11);color:#a9ffd0}.notification-status.show{display:block}.notification-status.error{background:rgba(255,109,109,.12);color:#ffb4b4}.form-footnote{text-align:center;margin:10px 0 0;color:#aeb9c7;font-size:12px}.hidden{display:none!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.lower-section{padding:28px 0 44px}.content-grid{display:grid;grid-template-columns:minmax(280px,390px) minmax(430px,1fr);gap:22px}.panel-card{border:1px solid rgba(172,190,214,.22);border-radius:12px;background:rgba(8,18,31,.72);box-shadow:0 18px 46px rgba(0,0,0,.22);padding:22px}.micro-heading{margin:0 0 7px;color:var(--gold);font-size:13px;font-weight:950;text-transform:uppercase}.panel-card h3{margin:0 0 14px;text-transform:uppercase;font-size:25px;line-height:1.05;letter-spacing:-.02em}.region-card{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid rgba(172,190,214,.26);border-radius:10px;background:#101b2a;padding:15px;margin-top:12px}.region-card strong{display:block;color:var(--gold);text-transform:uppercase;margin-bottom:5px}.region-card p{margin:0;color:#eef3fb;font-size:14px}.region-card a{flex:0 0 auto;padding:12px 14px;border:1px solid rgba(255,199,51,.45);border-radius:9px;background:rgba(255,199,51,.12);color:#ffe487;text-transform:uppercase;font-size:12px;font-weight:950}.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.service-card{border:1px solid rgba(172,190,214,.22);border-radius:10px;background:linear-gradient(180deg,#142033,#0f1724);padding:16px;min-height:220px}.service-card img{width:100%;height:118px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}.service-card h4{margin:10px 0 6px;text-transform:uppercase;font-size:15px}.service-card p{margin:0;color:#c7d1dd;font-size:14px}.success-state{padding:36px 26px;text-align:center}.success-state img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}.success-state h3{font-size:36px;margin:12px 0 8px;color:var(--gold)}.success-state p{color:#e6edf5;font-size:18px;line-height:1.45}
body.intro-active{overflow:hidden}.intro-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#06101d;opacity:1;visibility:visible;transition:opacity 900ms ease,visibility 900ms ease}.intro-overlay.is-ending{opacity:0;visibility:hidden;pointer-events:none}.intro-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#06101d}.intro-skip{position:fixed;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:10000;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(246,195,67,.48);background:rgba(6,16,29,.74);color:#ffe676;font-weight:900;letter-spacing:.02em;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.28)}.intro-skip:hover,.intro-skip:focus-visible{background:rgba(246,195,67,.95);color:#151000}.site-header,main{transition:opacity 700ms ease,transform 700ms ease,filter 700ms ease}body.intro-active .site-header,body.intro-active main{opacity:0;transform:translateY(10px) scale(.992);filter:blur(2px)}body.intro-finished .site-header,body.intro-finished main{opacity:1;transform:none;filter:none}@media (prefers-reduced-motion:reduce){.intro-overlay{transition:none}body.intro-active .site-header,body.intro-active main{opacity:1;transform:none;filter:none}}
@media (max-width:1180px){.page-shell,.nav-shell{width:min(100% - 30px,1000px)}.hero-grid{grid-template-columns:1fr;gap:12px}.hero-copy{padding-top:30px}.hero-character{position:absolute;right:20px;top:60px;width:min(50vw,470px);min-height:0;opacity:.92;margin:0}.quote-panel{margin-top:10px}.content-grid{grid-template-columns:1fr}.hero-copy h1{max-width:640px}.hero-description{max-width:500px}}
@media (max-width:760px){.page-shell,.nav-shell{width:calc(100% - 24px)}.nav-shell{height:70px;grid-template-columns:82px 1fr 82px}.brand img{width:76px}.nav-links{gap:18px;font-size:14px}.hero-section{padding-top:18px}.hero-copy{padding-top:18px}.hero-copy h1{font-size:38px}.hero-copy h2{font-size:24px}.hero-character{position:relative;right:auto;top:auto;width:100%;margin:-10px 0 -24px;opacity:1;text-align:center}.hero-character img{max-width:460px;margin:auto}.quote-form{padding:18px}.three-col,.two-col,.compact-row,.content-grid,.service-cards{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}.estimate-row strong{font-size:21px}.quote-header h3{font-size:31px}.step-actions.split{flex-direction:column}.submit-button{width:100%}.region-card{align-items:flex-start}.intro-skip{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));min-height:40px;padding-inline:14px;font-size:13px}}


/* Final Key Hero production polish: Superdog sidekick, image make tiles, and refined form states */
.hero-character{position:relative;}
.hero-character .keyhero-main{position:relative;z-index:2;}
.superdog-sidekick{position:absolute;z-index:3;width:clamp(96px,11vw,168px);height:auto;left:4%;bottom:5%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.48)) drop-shadow(0 0 16px rgba(255,199,51,.14));transform:translateZ(0);opacity:.96;}
.brand-logo-button{display:grid;place-items:center;padding:5px;background:linear-gradient(180deg,#182437,#0d1725);overflow:hidden;}
.brand-logo-button img{width:100%;max-width:110px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));}
.brand-other-button{display:grid;place-items:center;gap:0;text-transform:uppercase;}
.brand-other-button span{font-size:14px;font-weight:950;}
.brand-other-button small{font-size:10px;color:#aeb9c7;text-transform:none;letter-spacing:0;}
.brand-button.active img{filter:drop-shadow(0 0 10px rgba(255,199,51,.32));}
.quote-preview-box strong{letter-spacing:.04em;text-transform:uppercase;}
.success-state p{max-width:420px;margin-inline:auto;color:#d9e1ed;}
.form-step.collapsed{transition:background .2s ease,border-color .2s ease;}
.form-step.collapsed:hover{border-color:rgba(255,199,51,.42);background:rgba(20,32,50,.78);}
@media (max-width:1180px){.superdog-sidekick{width:clamp(92px,17vw,140px);left:auto;right:6%;bottom:2%;}}
@media (max-width:760px){.hero-character{display:grid;place-items:center;}.superdog-sidekick{width:104px;right:7%;bottom:5%;}.brand-logo-button img{height:46px;max-width:124px;}.brand-grid{grid-template-columns:repeat(2,1fr);}}


.photo-upload-status {
  display: block;
  margin-top: .38rem;
  color: rgba(6,16,29,.78);
  font-size: .72rem;
  line-height: 1.15;
  font-weight: 700;
}

.photo-upload.has-file {
  box-shadow: 0 0 0 2px rgba(44, 255, 132, .35), 0 0 16px rgba(44, 255, 132, .18);
}

.photo-upload.has-file .photo-upload-status {
  color: #06351b;
}


.photo-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  align-items: stretch;
}

.photo-upload-grid .photo-upload {
  min-height: 72px;
}

.photo-note {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .photo-upload-grid {
    grid-template-columns: 1fr;
  }
}


/* Superdog/Mercedes final subtle placement override
   Purpose: keep Mercedes visible as Key Hero's small sidekick without competing with the hero or quote form. */
.hero-character { position: relative; isolation: isolate; }
.hero-character .keyhero-main { position: relative; z-index: 2; }
.superdog-sidekick {
  position: absolute;
  z-index: 1;
  width: clamp(54px, 6.2vw, 92px);
  max-width: 18%;
  height: auto;
  left: 12%;
  bottom: 9%;
  opacity: .74;
  transform: rotate(-2deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.42));
  pointer-events: none;
}
@media (min-width: 1320px) {
  .superdog-sidekick { left: 14%; bottom: 10%; width: 88px; }
}
@media (max-width: 1180px) {
  .superdog-sidekick { width: clamp(58px, 8vw, 84px); left: 11%; bottom: 8%; opacity: .72; }
}
@media (max-width: 760px) {
  .superdog-sidekick { width: 62px; left: 22%; bottom: 8%; opacity: .68; }
}
@media (max-width: 460px) {
  .superdog-sidekick { width: 52px; left: 23%; bottom: 10%; opacity: .64; }
}


/* Superdog desktop placement correction: place Mercedes next to Key Hero, not behind him. */
@media (min-width: 1181px) {
  .hero-character {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    min-height: auto;
    margin-left: -18px;
    margin-right: -24px;
    padding-top: 24px;
    isolation: isolate;
  }

  .hero-character img {
    width: auto;
    height: auto;
    max-width: none;
  }

  .hero-character .keyhero-main {
    position: relative;
    z-index: 2;
    flex: 0 1 540px;
    width: min(100%, 540px);
    max-width: 540px;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)) drop-shadow(0 0 32px rgba(255,195,43,.18));
  }

  .hero-character .superdog-sidekick {
    position: relative;
    order: -1;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 112px;
    max-width: none;
    flex: 0 0 auto;
    margin: 0 -6px 30px 0;
    opacity: .94;
    transform: none;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(255,199,51,.10));
    pointer-events: none;
  }
}

@media (max-width: 1180px) {
  .hero-character .keyhero-main {
    max-width: 470px;
  }

  .hero-character .superdog-sidekick {
    position: absolute;
    order: 0;
    left: auto;
    right: 8%;
    bottom: 6%;
    width: 82px;
    max-width: none;
    margin: 0;
    opacity: .86;
    transform: none;
  }
}

@media (max-width: 760px) {
  .hero-character .superdog-sidekick {
    right: 9%;
    bottom: 6%;
    width: 64px;
    opacity: .82;
  }
}


/* Superdog refinement: closer to Key Hero and protected from distortion */
@media (min-width: 1181px) {
  .hero-character {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    min-height: auto;
    margin-left: -12px;
    margin-right: -18px;
    padding-top: 18px;
    isolation: isolate;
  }

  .hero-character .keyhero-main {
    position: relative;
    z-index: 2;
    width: 520px !important;
    max-width: 520px !important;
    height: auto !important;
    flex: 0 0 520px;
    object-fit: contain;
    align-self: flex-end;
  }

  .hero-character .superdog-sidekick {
    position: relative !important;
    order: -1;
    z-index: 1;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 88px !important;
    min-width: 88px;
    max-width: 88px !important;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
    flex: 0 0 88px;
    align-self: flex-end;
    margin: 0 -2px 26px 0;
    opacity: .95;
    transform: none !important;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.34)) drop-shadow(0 0 8px rgba(255,199,51,.08));
    pointer-events: none;
  }
}

@media (max-width: 1180px) {
  .hero-character .superdog-sidekick {
    width: 74px !important;
    max-width: 74px !important;
    height: auto !important;
    object-fit: contain;
    right: 10% !important;
    bottom: 7% !important;
    opacity: .88;
  }
}

@media (max-width: 760px) {
  .hero-character .superdog-sidekick {
    width: 60px !important;
    max-width: 60px !important;
    right: 10% !important;
    bottom: 6% !important;
  }
}


/* Premium fob image replacement polish */
.service-card img {
  width: 100%;
  height: 128px;
  object-fit: contain;
  object-position: center;
}
.service-card {
  overflow: hidden;
}



/* Final Superdog refinement
   - fix aspect ratio distortion
   - bring Mercedes closer to Key Hero
   - keep the placement subtle and clean
*/
.hero-character .superdog-sidekick{
  aspect-ratio: 420 / 443 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}

@media (min-width: 1181px){
  .hero-character{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    isolation: isolate;
  }

  .hero-character .keyhero-main{
    position: relative;
    z-index: 2;
    width: 520px !important;
    max-width: 520px !important;
    height: auto !important;
    flex: 0 0 520px;
    object-fit: contain !important;
    align-self: flex-end;
  }

  .hero-character .superdog-sidekick{
    position: relative !important;
    z-index: 1;
    order: -1;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    flex: 0 0 76px !important;
    margin: 0 -14px 18px 0 !important;
    opacity: .95 !important;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.34)) drop-shadow(0 0 8px rgba(255,199,51,.08)) !important;
    pointer-events: none;
  }
}

@media (max-width: 1180px){
  .hero-character .superdog-sidekick{
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    right: 9% !important;
    bottom: 7% !important;
    opacity: .88 !important;
  }
}

@media (max-width: 760px){
  .hero-character .superdog-sidekick{
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    right: 10% !important;
    bottom: 6% !important;
    opacity: .84 !important;
  }
}



/* Clean Superdog asset + closer placement */
.hero-character .superdog-sidekick{
  aspect-ratio: 1122 / 1402 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto;
}

@media (min-width: 1181px){
  .hero-character .superdog-sidekick{
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
    margin: 0 -26px 14px 0 !important;
    opacity: .95 !important;
    transform: none !important;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.34)) drop-shadow(0 0 8px rgba(255,199,51,.08)) !important;
  }
}

@media (max-width: 1180px){
  .hero-character .superdog-sidekick{
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    right: 8% !important;
    bottom: 7% !important;
  }
}

@media (max-width: 760px){
  .hero-character .superdog-sidekick{
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    right: 10% !important;
    bottom: 6% !important;
  }
}



/* Final delivery Superdog placement
   Uses the clean source asset, keeps proportions correct, and places Mercedes
   slightly beside Key Hero without overpowering the hero image.
*/
.hero-character .superdog-sidekick{
  aspect-ratio: 1122 / 1402 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto;
  transform: none !important;
}

@media (min-width: 1181px){
  .hero-character .superdog-sidekick{
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
    margin: 0 -22px 16px 0 !important;
    opacity: .95 !important;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.34)) drop-shadow(0 0 8px rgba(255,199,51,.08)) !important;
    pointer-events: none;
  }
}

@media (max-width: 1180px){
  .hero-character .superdog-sidekick{
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    right: 8% !important;
    bottom: 7% !important;
    opacity: .88 !important;
  }
}

@media (max-width: 760px){
  .hero-character .superdog-sidekick{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    right: 10% !important;
    bottom: 6% !important;
    opacity: .84 !important;
  }
}


/* FINAL hero composition fix: preserve Key Hero placement and use a clean Superdog asset */
.hero-character {
  position: relative !important;
  align-self: end;
}
.hero-character .keyhero-main {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 3 !important;
  left: auto !important;
  top: auto !important;
  width: 88px !important;
  max-width: 88px !important;
  min-width: 88px !important;
  height: auto !important;
  aspect-ratio: 360 / 450 !important;
  right: 14px !important;
  bottom: 34px !important;
  margin: 0 !important;
  opacity: .97 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(255,199,51,.10)) !important;
  pointer-events: none !important;
}
@media (min-width: 1320px) {
  .hero-character {
    margin-left: -8px !important;
    margin-right: -42px !important;
  }
  .hero-character .keyhero-main {
    max-width: 580px !important;
    width: min(100%, 580px) !important;
  }
  .hero-character .superdog-sidekick {
    width: 94px !important;
    max-width: 94px !important;
    min-width: 94px !important;
    right: 18px !important;
    bottom: 36px !important;
  }
}
@media (max-width: 1180px) {
  .hero-character {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-character .keyhero-main {
    max-width: 480px !important;
    width: min(100%, 480px) !important;
  }
  .hero-character .superdog-sidekick {
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    right: 8% !important;
    bottom: 28px !important;
    opacity: .94 !important;
  }
}
@media (max-width: 760px) {
  .hero-character .keyhero-main {
    max-width: 430px !important;
    width: min(100%, 430px) !important;
  }
  .hero-character .superdog-sidekick {
    width: 58px !important;
    max-width: 58px !important;
    min-width: 58px !important;
    right: 7% !important;
    bottom: 20px !important;
    opacity: .9 !important;
  }
}


/* FINAL approved mockup-based hero placement
   Keeps Key Hero dominant and places Superdog clearly beside him using the clean source asset.
*/
.hero-grid {
  align-items: start;
}

.hero-character {
  position: relative !important;
  align-self: end !important;
  min-height: 520px !important;
  margin-left: -28px !important;
  margin-right: -56px !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

.hero-character .keyhero-main {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.50)) drop-shadow(0 0 34px rgba(255,195,43,.18)) !important;
}

.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 3 !important;
  width: 128px !important;
  max-width: 128px !important;
  min-width: 128px !important;
  height: auto !important;
  aspect-ratio: 1122 / 1402 !important;
  right: 10px !important;
  bottom: 44px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  opacity: .98 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(255,199,51,.08)) !important;
  pointer-events: none !important;
}

@media (min-width: 1320px) {
  .hero-character {
    margin-left: -16px !important;
    margin-right: -70px !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 610px) !important;
    max-width: 610px !important;
  }
  .hero-character .superdog-sidekick {
    width: 136px !important;
    max-width: 136px !important;
    min-width: 136px !important;
    right: 18px !important;
    bottom: 48px !important;
  }
}

@media (max-width: 1180px) {
  .hero-character {
    position: absolute !important;
    right: 18px !important;
    top: 60px !important;
    width: min(50vw, 480px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: .94 !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
  }
  .hero-character .superdog-sidekick {
    width: 86px !important;
    max-width: 86px !important;
    min-width: 86px !important;
    right: 5% !important;
    bottom: 28px !important;
    opacity: .94 !important;
  }
}

@media (max-width: 760px) {
  .hero-character {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: -10px 0 -24px !important;
    opacity: 1 !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
  }
  .hero-character .superdog-sidekick {
    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    right: 9% !important;
    bottom: 20px !important;
    opacity: .9 !important;
  }
}

/* Final form wording safety: quote preview only, no SMS fallback banner. */
.quote-preview-box strong {
  text-transform: uppercase;
}


/* FINAL Superdog desktop correction
   - clean source image
   - no distortion
   - shifted left so the quote form does not cut her off
*/
.hero-character {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-character .keyhero-main {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  height: auto !important;
  object-fit: contain !important;
}

.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 1 !important;
  width: 108px !important;
  max-width: 108px !important;
  min-width: 108px !important;
  height: auto !important;
  aspect-ratio: 1122 / 1402 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
  opacity: .98 !important;
  left: 34px !important;
  right: auto !important;
  bottom: 22px !important;
  top: auto !important;
  margin: 0 !important;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(255,199,51,.08)) !important;
  pointer-events: none !important;
}

@media (min-width: 1320px) {
  .hero-character .superdog-sidekick {
    width: 116px !important;
    max-width: 116px !important;
    min-width: 116px !important;
    left: 48px !important;
    bottom: 26px !important;
  }
}

@media (max-width: 1180px) {
  .hero-character .superdog-sidekick {
    width: 82px !important;
    max-width: 82px !important;
    min-width: 82px !important;
    left: 18px !important;
    right: auto !important;
    bottom: 16px !important;
  }
}

@media (max-width: 760px) {
  .hero-character .superdog-sidekick {
    width: 62px !important;
    max-width: 62px !important;
    min-width: 62px !important;
    left: 10px !important;
    right: auto !important;
    bottom: 8px !important;
    opacity: .94 !important;
  }
}


/* FINAL approved screenshot placement
   Match Key Hero + Superdog composition to the approved reference:
   - Key Hero centered in the middle column
   - Superdog fully visible at lower-right of Key Hero
   - no distortion, no cutoff by the quote panel
*/
.hero-grid {
  align-items: start !important;
}

.hero-character {
  position: relative !important;
  align-self: end !important;
  min-height: 560px !important;
  margin-left: -18px !important;
  margin-right: -28px !important;
  z-index: 1 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-character .keyhero-main {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(100%, 610px) !important;
  max-width: 610px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 28px 36px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(255,195,43,.14)) !important;
}

.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 3 !important;
  width: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;
  height: auto !important;
  aspect-ratio: 1122 / 1402 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
  opacity: .99 !important;
  right: 8px !important;
  left: auto !important;
  bottom: 20px !important;
  top: auto !important;
  margin: 0 !important;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(255,199,51,.08)) !important;
  pointer-events: none !important;
}

@media (min-width: 1320px) {
  .hero-character {
    margin-left: -10px !important;
    margin-right: -18px !important;
    min-height: 580px !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 625px) !important;
    max-width: 625px !important;
  }
  .hero-character .superdog-sidekick {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    right: 14px !important;
    bottom: 22px !important;
  }
}

@media (max-width: 1180px) {
  .hero-character {
    position: absolute !important;
    right: 18px !important;
    top: 62px !important;
    width: min(50vw, 480px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: .96 !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
  }
  .hero-character .superdog-sidekick {
    width: 104px !important;
    max-width: 104px !important;
    min-width: 104px !important;
    right: 6px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 760px) {
  .hero-character {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: -10px 0 -20px !important;
    opacity: 1 !important;
  }
  .hero-character .keyhero-main {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
  }
  .hero-character .superdog-sidekick {
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    right: 8% !important;
    bottom: 8px !important;
  }
}


/* FINAL Superdog artifact fix
   Use the clean source image and preserve exact proportions.
*/
.hero-character .superdog-sidekick {
  height: auto !important;
  aspect-ratio: 1122 / 1402 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
}


/* FINAL Superdog update using the new clean user-provided source image */
.hero-character {
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 3 !important;
  width: 152px !important;
  max-width: 152px !important;
  min-width: 152px !important;
  height: auto !important;
  aspect-ratio: 1122 / 1402 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto !important;
  transform: none !important;
  opacity: .99 !important;
  right: 8px !important;
  left: auto !important;
  bottom: 18px !important;
  top: auto !important;
  margin: 0 !important;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(255,199,51,.08)) !important;
  pointer-events: none !important;
}

@media (min-width: 1320px) {
  .hero-character .superdog-sidekick {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    right: 12px !important;
    bottom: 20px !important;
  }
}

@media (max-width: 1180px) {
  .hero-character .superdog-sidekick {
    width: 104px !important;
    max-width: 104px !important;
    min-width: 104px !important;
    right: 6px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 760px) {
  .hero-character .superdog-sidekick {
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    right: 8% !important;
    bottom: 8px !important;
  }
}


/* FINAL approved mockup polish pass
   Goal: make the live website visually match the approved mockup more closely.
*/
.hero-section {
  min-height: 610px !important;
  padding: 28px 0 20px !important;
}

.hero-glow {
  left: 36.5% !important;
  top: 52px !important;
  width: 560px !important;
  height: 560px !important;
  background: radial-gradient(circle, rgba(255,199,51,.28), rgba(32,103,164,.19) 38%, transparent 69%) !important;
  filter: blur(12px) !important;
}

.hero-grid {
  grid-template-columns: minmax(420px, 1fr) minmax(380px, 545px) minmax(430px, 560px) !important;
  gap: 22px !important;
  align-items: start !important;
}

.hero-copy {
  padding: 54px 0 20px !important;
  max-width: 600px !important;
}

.hero-copy h1 {
  font-size: clamp(38px, 3.8vw, 70px) !important;
  line-height: .97 !important;
  letter-spacing: -.045em !important;
}

.hero-copy h2 {
  margin: 20px 0 12px !important;
  font-size: clamp(23px, 2.15vw, 35px) !important;
}

.hero-description {
  max-width: 510px !important;
}

.hero-character {
  position: relative !important;
  align-self: end !important;
  min-height: 565px !important;
  margin-left: -14px !important;
  margin-right: -26px !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.hero-character .keyhero-main {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(100%, 610px) !important;
  max-width: 610px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 30px 36px rgba(0,0,0,.50)) drop-shadow(0 0 26px rgba(255,195,43,.12)) !important;
}

.hero-character .superdog-sidekick {
  position: absolute !important;
  z-index: 3 !important;
  width: 136px !important;
  max-width: 136px !important;
  min-width: 136px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  right: 6px !important;
  bottom: 22px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.34)) !important;
  pointer-events: none !important;
}

.quote-panel {
  border-radius: 26px !important;
  border: 1.5px solid rgba(255,199,51,.82) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,199,51,.08) !important;
  background: linear-gradient(180deg, rgba(20,25,35,.95) 0%, rgba(12,18,29,.97) 100%) !important;
}

.quote-form {
  padding: 18px 18px 16px !important;
}

.quote-header {
  padding-bottom: 10px !important;
}

.quote-header h3 {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  font-size: clamp(28px, 2.2vw, 40px) !important;
  line-height: 1.02 !important;
}

.estimate-row {
  align-items: center !important;
  gap: 14px !important;
}

.estimate-row strong {
  font-size: clamp(23px, 1.65vw, 31px) !important;
}

.estimate-row em {
  opacity: .92 !important;
  font-style: normal !important;
}

.form-step legend {
  margin-bottom: 12px !important;
}

.brand-grid {
  gap: 10px !important;
}

.brand-option {
  min-height: 74px !important;
  border-radius: 14px !important;
}

.brand-option img {
  max-height: 34px !important;
}

.step-next,
.submit-button,
.location-button,
.upload-button,
.ghost-button {
  border-radius: 12px !important;
}

.submit-button {
  min-height: 58px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.panel-card {
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(7,14,26,.92) 0%, rgba(7,14,26,.82) 100%) !important;
}

.service-card {
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.18) !important;
}

.service-card img {
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)) !important;
}

.region-card {
  border-radius: 16px !important;
}

@media (min-width: 1320px) {
  .hero-character .keyhero-main {
    width: min(100%, 622px) !important;
    max-width: 622px !important;
  }
  .hero-character .superdog-sidekick {
    width: 144px !important;
    max-width: 144px !important;
    min-width: 144px !important;
    right: 10px !important;
    bottom: 22px !important;
  }
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-character {
    position: relative !important;
    min-height: 0 !important;
    margin: 10px auto 0 !important;
    width: 100% !important;
    max-width: 560px !important;
  }

  .hero-character .keyhero-main {
    width: min(100%, 500px) !important;
    max-width: 500px !important;
  }

  .hero-character .superdog-sidekick {
    width: 104px !important;
    max-width: 104px !important;
    min-width: 104px !important;
    right: 18px !important;
    bottom: 16px !important;
  }

  .quote-panel {
    max-width: 720px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  .hero-section {
    min-height: auto !important;
  }

  .hero-copy {
    padding-top: 30px !important;
  }

  .hero-character .keyhero-main {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
  }

  .hero-character .superdog-sidekick {
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    right: 22px !important;
    bottom: 10px !important;
  }
}


/* Photo upload button readability fix */
.photo-upload-grid {
  gap: .8rem !important;
}

.photo-upload-grid .photo-upload,
.photo-upload {
  min-height: 96px !important;
  height: auto !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  color: #160f00 !important;
  text-shadow: none !important;
}

.photo-upload-title {
  display: block;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.12;
  color: #120d00;
}

.photo-upload-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  color: #382500;
  opacity: .92;
}

.photo-upload-status {
  display: block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  color: #3b2a00 !important;
  max-width: 100% !important;
}

.photo-upload.has-file .photo-upload-status {
  color: #06351b !important;
}

.photo-note {
  margin-top: 2px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: rgba(236, 243, 255, .74) !important;
}

@media (max-width: 640px) {
  .photo-upload-grid .photo-upload,
  .photo-upload {
    min-height: 88px !important;
  }

  .photo-upload-title {
    font-size: 14px;
  }
}


/* Vehicle make coverage and key type visual helper */
.brand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-height: 176px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.brand-text-button,
.brand-other-button {
  display: grid;
  place-items: center;
  min-height: 54px;
}

.make-text-logo {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,199,51,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: #f7f9fc;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.other-make-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(255,199,51,.28);
  border-radius: 12px;
  background: rgba(255,199,51,.06);
}

.other-make-panel label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #d8e2ee;
}

.key-row {
  grid-template-columns: 1fr !important;
}

.key-type-preview {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: center;
  margin: -2px 0 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(172,190,214,.28);
  background: linear-gradient(180deg, rgba(16,27,42,.96), rgba(12,20,31,.96));
}

.key-type-preview img {
  width: 104px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.34));
}

.key-type-preview strong {
  display: block;
  color: var(--gold);
  font-weight: 950;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
}

.key-type-preview p {
  margin: 0;
  color: #d8e2ef;
  font-size: 12px;
  line-height: 1.35;
}

/* Move Key Hero and Superdog higher with the glow behind them */
@media (min-width: 1181px) {
  .hero-glow {
    top: 20px !important;
    left: 36% !important;
    width: 590px !important;
    height: 590px !important;
  }

  .hero-character {
    transform: translateY(-38px) !important;
  }
}

@media (max-width: 760px) {
  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 220px;
  }

  .other-make-panel {
    grid-template-columns: 1fr;
  }

  .key-type-preview {
    grid-template-columns: 82px 1fr;
  }

  .key-type-preview img {
    width: 78px;
    height: 58px;
  }
}


/* Key type preview clarity fix */
.key-type-preview.is-placeholder {
  opacity: .86;
}

.key-type-preview.is-placeholder img {
  opacity: .72;
}

.key-type-preview.is-placeholder strong {
  color: #f1c64a;
}


/* Realistic key type preview assets */
.key-type-preview {
  min-height: 118px;
}

.key-type-preview img {
  width: 118px !important;
  height: 88px !important;
  object-fit: contain !important;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 72%);
}

@media (max-width: 760px) {
  .key-type-preview img {
    width: 84px !important;
    height: 66px !important;
  }
}


/* FINAL hero placement correction
   Key Hero belongs in the top half of the website, dominating the right/center-right
   of the hero section, with Superdog positioned beside him.
*/
@media (min-width: 1181px) {
  .hero-section {
    min-height: 620px !important;
    padding-top: 18px !important;
  }

  .hero-glow {
    left: 36% !important;
    top: 8px !important;
    width: 650px !important;
    height: 650px !important;
    background: radial-gradient(circle, rgba(255,199,51,.30), rgba(32,103,164,.22) 38%, transparent 70%) !important;
    filter: blur(12px) !important;
  }

  .hero-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(430px, 610px) minmax(420px, 560px) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .hero-character {
    position: relative !important;
    align-self: start !important;
    min-height: 560px !important;
    margin-left: -38px !important;
    margin-right: -52px !important;
    margin-top: -24px !important;
    transform: none !important;
    overflow: visible !important;
    isolation: isolate !important;
    z-index: 2 !important;
  }

  .hero-character .keyhero-main {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.50)) drop-shadow(0 0 34px rgba(255,195,43,.17)) !important;
  }

  .hero-character .superdog-sidekick {
    position: absolute !important;
    z-index: 3 !important;
    width: 152px !important;
    max-width: 152px !important;
    min-width: 152px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    right: 22px !important;
    left: auto !important;
    bottom: 12px !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: .99 !important;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.36)) drop-shadow(0 0 10px rgba(255,199,51,.08)) !important;
    pointer-events: none !important;
  }

  .quote-panel {
    z-index: 4 !important;
  }
}

@media (min-width: 1320px) {
  .hero-character {
    margin-top: -34px !important;
    margin-left: -28px !important;
    margin-right: -64px !important;
  }

  .hero-character .keyhero-main {
    width: min(100%, 670px) !important;
    max-width: 670px !important;
  }

  .hero-character .superdog-sidekick {
    width: 162px !important;
    max-width: 162px !important;
    min-width: 162px !important;
    right: 26px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 1180px) {
  .hero-character {
    margin-top: -12px !important;
    margin-bottom: -12px !important;
    transform: none !important;
  }

  .hero-character .keyhero-main {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
  }

  .hero-character .superdog-sidekick {
    width: 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    right: 20px !important;
    bottom: 12px !important;
  }
}

@media (max-width: 760px) {
  .hero-character {
    margin-top: 0 !important;
    margin-bottom: -10px !important;
  }

  .hero-character .keyhero-main {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
  }

  .hero-character .superdog-sidekick {
    width: 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
    right: 22px !important;
    bottom: 8px !important;
  }
}


/* English / Spanish language toggle */
.nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}

.language-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,199,51,.42);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.language-button{
  border:0;
  border-radius:999px;
  min-width:38px;
  height:30px;
  padding:0 10px;
  background:transparent;
  color:#dbe5f2;
  font-weight:900;
  font-size:12px;
  letter-spacing:.05em;
  cursor:pointer;
}

.language-button.active{
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#12100a;
  box-shadow:0 7px 18px rgba(255,199,51,.25);
}

body.lang-es .hero-copy h1{
  font-size:clamp(34px,3.35vw,62px);
}

body.lang-es .quote-header h3{
  font-size:clamp(26px,2.0vw,36px);
}

body.lang-es .submit-button{
  font-size:17px !important;
}

@media (max-width:760px){
  .nav-actions{gap:8px}
  .language-toggle{position:absolute;right:92px;top:22px}
  .language-button{min-width:34px;height:28px;padding:0 8px}
}


/* FINAL MOBILE-ONLY LANGUAGE TOGGLE FIX
   Prevents EN/ES toggle from overlapping Home / Services / Locations on small screens.
   Desktop layout is not changed.
*/
@media (max-width: 760px) {
  .site-header {
    min-height: 106px !important;
  }

  .nav-shell {
    height: auto !important;
    min-height: 106px !important;
    width: calc(100% - 24px) !important;
    padding: 8px 0 10px !important;
    display: grid !important;
    grid-template-columns: 82px 1fr 94px !important;
    grid-template-rows: 56px 34px !important;
    align-items: center !important;
    gap: 2px 6px !important;
  }

  .brand-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .brand-left img {
    width: 72px !important;
  }

  .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    position: static !important;
  }

  .nav-actions .brand-right {
    display: none !important;
  }

  .language-toggle {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .language-button {
    min-width: 36px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .nav-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(20px, 7vw, 34px) !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .nav-shell {
    grid-template-columns: 74px 1fr 88px !important;
  }

  .brand-left img {
    width: 66px !important;
  }

  .language-button {
    min-width: 34px !important;
    height: 27px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  .nav-links {
    gap: 18px !important;
    font-size: 13px !important;
  }
}


/* Subtle replay intro button — intentionally inconspicuous */
.site-replay-intro {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(3, 8, 15, .38);
  color: rgba(236, 243, 255, .68);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  opacity: .48;
  transition: opacity .2s ease, transform .2s ease, color .2s ease, background .2s ease;
}

.site-replay-intro:hover,
.site-replay-intro:focus-visible {
  opacity: .9;
  color: #fff;
  background: rgba(3, 8, 15, .64);
  transform: translateY(-1px);
}

body.intro-active .site-replay-intro {
  display: none !important;
}

@media (max-width: 760px) {
  .site-replay-intro {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 31px;
    padding: 6px 9px;
    font-size: 11px;
    opacity: .42;
  }
}


/* Superdog VIN helper callout — current site layout preserved */
.vin-superdog-helper {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 9px 12px 10px 8px;
  border: 1px solid rgba(255, 199, 51, .26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,199,51,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 22px rgba(0,0,0,.18);
}

.vin-superdog-img {
  width: 66px;
  height: auto;
  object-fit: contain;
  align-self: end;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255,199,51,.10));
  pointer-events: none;
  user-select: none;
}

.vin-superdog-content {
  min-width: 0;
}

.vin-superdog-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 5px;
  padding: 3px 8px;
  border: 1px solid rgba(255,199,51,.55);
  border-radius: 999px;
  background: rgba(255,199,51,.12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.vin-superdog-bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 9px 14px 10px;
  border: 3px solid #111;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 24%, #fff 0%, #fffdf4 60%, #fff4d9 100%);
  color: #111;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
  box-shadow: 0 5px 0 rgba(0,0,0,.15), 0 12px 20px rgba(0,0,0,.22);
}

.vin-superdog-bubble strong {
  font-weight: 950;
}

.vin-superdog-bubble::before,
.vin-superdog-bubble::after {
  content: "";
  position: absolute;
  display: block;
  border: 3px solid #111;
  border-radius: 999px;
  background: radial-gradient(circle at 45% 35%, #fff 0%, #fffdf4 58%, #fff4d9 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 9px 14px rgba(0,0,0,.16);
}

/* Option 1-style rounded double-bubble tail pointing toward Superdog */
.vin-superdog-bubble::before {
  width: 18px;
  height: 14px;
  left: -13px;
  bottom: 12px;
}

.vin-superdog-bubble::after {
  width: 11px;
  height: 9px;
  left: -27px;
  bottom: 4px;
}

body.lang-es .vin-superdog-bubble {
  font-size: 11.5px;
}

@media (min-width: 1181px) {
  .vin-superdog-helper {
    max-width: 96%;
  }
}

@media (max-width: 760px) {
  .vin-superdog-helper {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
    margin-top: 9px;
    padding: 8px 9px 9px 6px;
    border-radius: 15px;
  }

  .vin-superdog-img {
    width: 50px;
  }

  .vin-superdog-tag {
    font-size: 10px;
    padding: 3px 7px;
    margin-bottom: 4px;
  }

  .vin-superdog-bubble {
    padding: 8px 11px 9px;
    border-width: 2.5px;
    font-size: 11px;
    line-height: 1.12;
  }

  .vin-superdog-bubble::before,
  .vin-superdog-bubble::after {
    border-width: 2.5px;
  }

  .vin-superdog-bubble::before {
    width: 15px;
    height: 12px;
    left: -11px;
    bottom: 11px;
  }

  .vin-superdog-bubble::after {
    width: 9px;
    height: 7px;
    left: -22px;
    bottom: 4px;
  }

  body.lang-es .vin-superdog-bubble {
    font-size: 10.5px;
  }
}


.optional-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid rgba(255,199,51,.42);
  border-radius: 999px;
  background: rgba(255,199,51,.10);
  color: var(--gold);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* Bottom estimate summary moved from top of form */
.form-bottom-estimate {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,199,51,.28);
  border-radius: 13px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,199,51,.13), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 24px rgba(0,0,0,.16);
}

.form-bottom-estimate .estimate-row {
  margin: 0;
}

.form-step {
  scroll-margin-top: 108px;
}

@media (max-width: 760px) {
  .form-bottom-estimate {
    margin-top: 12px;
    padding: 10px;
  }

  .form-bottom-estimate .estimate-row {
    gap: 8px;
  }

  .form-step {
    scroll-margin-top: 126px;
  }
}


/* Extra scroll clearance so Step 2 title is visible below the sticky mobile header */
.form-step[data-step="2"],
.form-step[data-step="3"] {
  scroll-margin-top: 150px;
}

@media (max-width: 760px) {
  .form-step[data-step="2"],
  .form-step[data-step="3"] {
    scroll-margin-top: 190px;
  }
}


/* Quote ID, consent, third-party/gift fields, and estimate notice */
.quote-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 9px 11px;
  border: 1px solid rgba(255,199,51,.34);
  border-radius: 11px;
  background: rgba(255,199,51,.09);
  color: #d8e2ef;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.quote-id-row strong {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.consent-card,
.recipient-fields {
  border: 1px solid rgba(172,190,214,.24);
  border-radius: 12px;
  background: rgba(17,26,39,.78);
  padding: 12px;
  margin: 10px 0;
}

.checkbox-line {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #e9eef7;
  text-transform: none !important;
}

.checkbox-line input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #ffc733;
}

.recipient-group {
  margin-top: 12px;
}

.recipient-fields textarea {
  width: 100%;
  margin-top: 6px;
  resize: vertical;
}

.gift-service-note,
.quote-estimate-notice {
  display: block;
  margin: 8px 0 0;
  color: #b8c4d4;
  font-size: 12px;
  line-height: 1.35;
}

.quote-estimate-notice {
  padding-top: 8px;
  border-top: 1px solid rgba(172,190,214,.18);
}

.success-quote-id {
  margin: 6px 0 10px;
  color: #dce6f4;
  font-weight: 900;
}

.success-quote-id strong {
  color: var(--gold);
  letter-spacing: .06em;
}

@media (max-width: 760px) {
  .quote-id-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .quote-id-row strong {
    font-size: 12px;
  }

  .checkbox-line {
    font-size: 12px;
  }
}


.photo-upload.photo-optional {
  border-color: rgba(31,226,118,.36);
  background:
    linear-gradient(180deg, rgba(31,226,118,.075), rgba(255,255,255,.025));
}

.photo-upload.photo-optional .photo-upload-status {
  color: #bff7d0;
}


/* Premium Quote Sent confirmation screen */
.success-state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 900px;
  margin: 18px auto 0;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px) !important;
  text-align: center;
  border: 2px solid rgba(255,199,51,.78);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,199,51,.14), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(255,199,51,.13), transparent 22%),
    linear-gradient(180deg, rgba(9,18,31,.98), rgba(4,10,18,.98));
  box-shadow:
    0 26px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 42px rgba(18,68,115,.22);
}

.success-state::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,221,126,.22);
  border-radius: 22px;
  pointer-events: none;
  z-index: -1;
}

.success-state::after {
  content: "✦";
  position: absolute;
  right: clamp(26px, 5vw, 58px);
  bottom: clamp(20px, 4vw, 46px);
  color: #ffe28a;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1;
  text-shadow:
    0 0 12px rgba(255,199,51,.80),
    0 0 28px rgba(255,199,51,.42);
  opacity: .95;
}

.success-logo {
  width: min(330px, 78vw);
  height: auto;
  margin: 0 auto 10px;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 28px rgba(0,0,0,.42))
    drop-shadow(0 0 18px rgba(255,199,51,.18));
}

.success-state h3 {
  margin: 8px 0 8px !important;
  font-size: clamp(42px, 6.4vw, 76px) !important;
  line-height: .96;
  color: var(--gold) !important;
  font-weight: 950;
  letter-spacing: -.035em;
  text-shadow:
    0 3px 0 rgba(105,72,10,.55),
    0 18px 30px rgba(0,0,0,.42);
}

.success-quote-id {
  margin: 10px 0 26px !important;
  color: #fff0bd !important;
  font-size: clamp(18px, 2.4vw, 30px) !important;
  font-weight: 950 !important;
  letter-spacing: .015em;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.success-quote-id strong {
  color: #ffe18a !important;
  letter-spacing: .04em;
  white-space: nowrap;
}

.success-message {
  max-width: 680px;
  margin: 0 auto !important;
  color: #f2dfb0 !important;
  font-size: clamp(18px, 2.1vw, 28px) !important;
  line-height: 1.45 !important;
  font-weight: 650;
  text-shadow: 0 8px 18px rgba(0,0,0,.32);
}

@media (max-width: 760px) {
  .success-state {
    margin-top: 12px;
    border-radius: 22px;
    padding: 28px 16px 34px !important;
  }

  .success-state::before {
    inset: 7px;
    border-radius: 17px;
  }

  .success-logo {
    width: min(250px, 74vw);
  }

  .success-state h3 {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .success-quote-id {
    font-size: clamp(16px, 4.5vw, 21px) !important;
    margin-bottom: 18px !important;
  }

  .success-message {
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }
}