:root{ --accent:#db0000; --bg:#f7f7f8; --border:#e6e7eb; --padTop: 100px; --collapseMs: 1500ms;}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;background:var(--bg)}
.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center}.brand img{height:22px}
.center{min-height:calc(100vh - 60px);display:grid;justify-items:center;align-items:start;padding:22px;padding-top:var(--padTop)}
.qbox{width:min(980px,92vw)} .err{color:#b91c1c;font-weight:700;margin:8px 0}
.firstFade{opacity:0}.firstFade.show{opacity:1;transition:opacity 1s ease}.appear{opacity:0}.appear.on{opacity:1;transition:opacity 1s ease}
.qhdr{text-align:center;margin:0 0 10px 0;overflow:hidden;height:auto;transition:opacity var(--collapseMs) ease,height var(--collapseMs) ease,margin var(--collapseMs) ease}
.qhdr.min{opacity:0;margin:0}.qhdr h1{margin:4px 0 6px;font-size:clamp(22px,3.4vw,34px)}.qhdr .sub{color:#6b7280}
.progress{height:6px;background:#ececf1;border-radius:999px;overflow:hidden;width:min(900px,92%);margin:6px auto 16px}
.progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s ease}
#qmount{transition:min-height .45s ease; min-height:220px}
.tiles{display:grid;gap:18px;opacity:1;max-width:980px;margin:0 auto;justify-items:stretch;align-content:start;transition:opacity .5s ease}
.tiles.fade-in{opacity:0}.tiles.swap-out{opacity:0}
.tiles.two{grid-template-columns:repeat(2,minmax(280px,1fr))}
.tiles.cols-3{grid-template-columns:repeat(3,minmax(220px,1fr))}
.tiles.cols-4{grid-template-columns:repeat(4,minmax(200px,1fr))}
.tiles.engine-step{grid-template-columns:repeat(2,minmax(280px,1fr))}
.tiles.engine-step .tile{height:340px}
.tiles.engine-step .pic{height:225px}
.tiles.engine-step .pic img{height:225px;width:auto;object-fit:contain}
.tiles.screen-step{grid-template-columns:repeat(3,minmax(220px,1fr))}
.tiles.screen-step .tile{height:220px}
.tiles.screen-step .pic{height:140px}
.tiles.screen-step .pic img{height:140px;width:auto;object-fit:contain}
.tile.full{grid-column:1/-1;height:86px}
@media(max-width:1000px){.tiles.cols-3,.tiles.cols-4,.tiles.screen-step{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:700px){.tiles.two{grid-template-columns:1fr}.tile.full{height:140px}}
.tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;height:140px;display:flex;flex-direction:column;gap:10px;cursor:pointer;align-items:center;justify-content:center;text-align:center}
.tile:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:var(--accent)} .tile.selected{outline:3px solid rgba(219,0,0,.25);border-color:var(--accent)}
.tile .title{font-weight:800;font-size:1.05rem;line-height:1.25;padding:0 8px;text-transform:capitalize}
.tile .pic{display:flex;align-items:center;justify-content:center;width:100%}.tile .pic img{max-width:100%;display:block}
.group-title{grid-column:1/-1;font-weight:800;color:#374151;margin:6px 0 2px}

/* Ensure full-width tiles (Other, CAT OEM) are half-height on desktop */
.tiles .tile.full { height: 86px !important; }
.tiles.screen-step .tile.full { height: 86px !important; }
@media (max-width:700px){
  .tiles .tile.full,
  .tiles.screen-step .tile.full { height: 140px !important; }
}

.stage2{display:none;padding:16px 18px 28px}.stage2.show{display:block}
.layout{max-width:1200px;margin:12px auto 0;display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px}
.diagram,.measurements{height:750px;min-height:750px;max-height:750px}
.diagram{position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.zoom-ui{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:5}
#zoomWrap{transform-origin:top center;transition:transform .08s linear;display:inline-block;max-width:100%;max-height:100%;margin:0 auto}
.diagram svg{display:block;width:100%;height:auto;max-height:100%;background:#fff}

.measurements{overflow:hidden;display:flex;flex-direction:column}
.measure-inner{display:flex;flex-direction:column;height:100%}
.contentScroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.measurements h3{margin:6px 0 12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.card{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff}
.card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap}
.card .head .tag{font-weight:800;background:#f3f4f6;border-radius:8px;padding:6px 10px;min-width:44px;text-align:center}
.card .head .label{font-weight:700;color:#374151;flex:1 1 auto}
.card input{width:100%;padding:10px 12px;border:1px solid #dfe3e8;border-radius:10px}
.card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(219,0,0,.2)}
.card .ft{font-size:12px;color:#6b7280;margin-top:4px}
.stickyBottom{border-top:1px dashed #ececf1;padding-top:8px;margin-top:8px}
.selections h4{margin:0 0 6px 0}
.footer-actions{display:flex;gap:10px;justify-content:space-between;margin-top:10px}
.btn{appearance:none;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:700;padding:12px 18px;border-radius:12px;cursor:pointer;transition:background .15s ease, color .15s ease, opacity .15s ease}
.btn.secondary{background:#fff;border-color:#dfe3e8;color:#111}
.btn.full{width:100%}
.btn:disabled{background:#e6e7eb;color:#9aa0a6;border-color:#e6e7eb;opacity:1;cursor:not-allowed}

.stage3{display:none;padding:28px}.stage3.show{display:block}
.docwrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.03);padding:24px}
.doc{background:#fff;border:1px solid var(--border);border-radius:14px;max-width:840px;width:100%;padding:20px 22px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.quoteHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.logo img{height:26px}.company small{color:#6b7280}.qmeta{margin-top:6px;color:#374151}
.priceTable{margin-top:8px;border-top:1px dashed #e5e7eb}
.priceRow{display:flex;justify-content:space-between;padding:8px 0}.priceRow.total{font-weight:900;border-top:1px solid #e5e7eb;margin-top:6px}
.doc-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:100}
.modal.show{display:flex}
.modal-content{background:#fff;border-radius:12px;border:1px solid var(--border);padding:18px 16px;max-width:420px;width:92%}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200}
.loading.hidden{display:none}.ring{width:72px;height:72px;border-radius:50%;border:6px solid #eee;border-top-color:var(--accent);animation:spin 1s linear infinite}
.loading-text{margin-top:12px;color:#374151;font-weight:700}@keyframes spin{to{transform:rotate(360deg)}}

.doc-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px;flex-wrap:wrap}
.doc-actions-left{display:flex;gap:10px;align-items:center}
.doc-actions-right{display:flex;gap:10px;align-items:center}
.priceRow.sub{font-size:12px;color:#4b5563;padding:4px 0}
.priceRow.group{font-weight:700;padding-top:10px;border-top:1px dashed #e5e7eb}


/* ---- Mobile-only layout adjustments ---- */
@media (max-width:700px){
  /* 3-option screens → full-width bars, text left / image right */
  .tiles.cols-3{ grid-template-columns: 1fr; }
  .tiles.cols-3 .tile{
    width:100%;
    height:86px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    gap:12px;
  }
  .tiles.cols-3 .tile .title{ margin:0 auto 0 0; text-align:left; }
  .tiles.cols-3 .tile .pic{ height:auto; }
  .tiles.cols-3 .tile .pic img{ height:44px; width:auto; }

  /* Measurements page: diagram full width; fields beneath */
  .layout{ grid-template-columns: 1fr; }
  .diagram, .measurements{ height:auto; min-height:unset; max-height:none; }
  .diagram{ margin-bottom:12px; }
  .measurements .contentScroll{ max-height:none; }
}

@media (max-width:700px){
  /* Engine tiles (first step) -> bars */
  .tiles.engine-step{ grid-template-columns: 1fr; }
  .tiles.engine-step .tile{
    width:100%;
    height:86px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    gap:12px;
  }
  .tiles.engine-step .tile .title{ margin:0 auto 0 0; text-align:left; }
  .tiles.engine-step .tile .pic img{ height:44px; width:auto; }

  /* Display tiles -> bars */
  .tiles.screen-step{ grid-template-columns: 1fr; }
  .tiles.screen-step .tile{
    width:100%;
    height:86px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    gap:12px;
  }
  .tiles.screen-step .tile .title{ margin:0 auto 0 0; text-align:left; }
  .tiles.screen-step .tile .pic img{ height:44px; width:auto; }

  /* Make 'Other' / '4+ Call For Quote' same height as others */
  .tiles .tile.full,
  .tiles.screen-step .tile.full { height: 86px !important; }
}

/* Quote chrome clean-up */
.docwrap{ background: transparent; padding: 0; }
.doc{ border: none; box-shadow: none; }

/* Heading balance */
.qhdr h1, .qhdr h2{ text-wrap: balance; }

@media (max-width:700px){
  .diagram img, .diagram svg{ max-height:none; height:auto; }
}

/* Mobile line break utility for quote lines */
.mbr{display:none}
@media(max-width:700px){.mbr{display:block}}


/* Mobile: square diagram viewport (1:1) */
@media (max-width:700px){
  .diagram{
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }
  .diagram .panzoom-viewport,
  .diagram .diagramViewport{
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }
}


/* Mobile: make Engine + Display tiles match Engine Control tile height */
@media (max-width:700px){
  :root{
    --mobile-bar-height: 112px;
  }
  .tiles.two .tile,
  .tiles.engine-step .tile,
  .tiles.screen-step .tile{
    height: var(--mobile-bar-height);
  }
  .tiles .tile.full,
  .tiles.screen-step .tile.full{
    height: var(--mobile-bar-height) !important;
  }
  .tiles.engine-step .tile .pic img,
  .tiles.screen-step .tile .pic img,
  .tiles.two .tile .pic img{
    height: calc(var(--mobile-bar-height) - 64px);
    width: auto;
  }
}


/* ---- Mobile: make image-based option tiles taller (1.5x = 168px) ---- */
@media (max-width:700px){
  :root{
    --mobile-bar-height: 112px;      /* engine controls etc. */
    --mobile-img-bar-height: 168px;  /* engine + display (with images) */
  }
  /* Engines + Displays (image tiles) */
  .tiles.engine-step .tile,
  .tiles.screen-step .tile{
    height: var(--mobile-img-bar-height);
  }
  /* Half-height specials should match the same height on mobile */
  .tiles.engine-step .tile.full,
  .tiles.screen-step .tile.full{
    height: var(--mobile-img-bar-height) !important;
  }
  /* Keep thumbnails proportional inside taller bars */
  .tiles.engine-step .tile .pic img,
  .tiles.screen-step .tile .pic img{
    height: calc(var(--mobile-img-bar-height) - 64px);
    width: auto;
  }
}


/* Brand-step logos: scale within tile */
.tiles.brand-step .tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tiles.brand-step .tile .pic{ display:flex; align-items:center; justify-content:center; width:100%; height:60%; }
.tiles.brand-step .tile .pic img{ max-width:80%; max-height:80%; object-fit:contain; }

/* Desktop: more square brand tiles */
@media (min-width:701px){
  .tiles.brand-step{ grid-template-columns: repeat(3, 260px); justify-content:center; }
  .tiles.brand-step .tile{ height: 220px; }
}

/* Mobile: brand step same tall height as image-based selections */
@media (max-width:700px){
  .tiles.brand-step .tile{ height: var(--mobile-img-bar-height, 168px); }
  .tiles.brand-step .tile .pic img{ height: calc(var(--mobile-img-bar-height, 168px) - 64px); width:auto; }
}


/* Tighter brand logo containment */
.tiles.brand-step .tile{ 
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tiles.brand-step .tile img{
  max-width: 90%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (min-width:701px){
  .tiles.brand-step{ grid-auto-rows: 220px; grid-template-columns: repeat(3, 260px); justify-content:center; }
  .tiles.brand-step .tile{ height: 220px; }
}


/* Strong containment for brand logos */
.tiles.brand-step .tile{ overflow:hidden; position:relative; }
.tiles.brand-step .tile .pic{ height:100%; width:100%; display:flex; align-items:center; justify-content:center; }
.tiles.brand-step .tile .pic img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (min-width:701px){
  .tiles.brand-step{ grid-template-columns: repeat(3, 280px); grid-auto-rows: 220px; }
  .tiles.brand-step .tile{ height: 220px; }
}


/* === Tile image containment fixes (brand logos) === */
:root{
  --brand-img-max-w: 300px;
  --brand-img-max-h: 225px;
}
.tiles.brand-step .tile{
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tiles.brand-step .tile .pic{
  display: grid;
  place-items: center;
  width: 100% !important;
  max-width: var(--brand-img-max-w);
  aspect-ratio: 4 / 3;
  max-height: var(--brand-img-max-h);
  margin-inline: auto;
}
.tiles.brand-step .tile .pic img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}
@media (min-width: 900px){
  .tiles.brand-step{ grid-auto-rows: 240px; grid-template-columns: repeat(3, 280px); }
  .tiles.brand-step .tile{ height: 240px !important; }
}
.tiles.brand-step .tile img{ flex: 0 0 auto !important; }


/* === Make brand-step tiles match engine-step sizing on desktop === */
.tiles.brand-step .tile{ height:340px !important; overflow:hidden; }
.tiles.brand-step .tile .pic{
  height:225px !important;
  width:100% !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.tiles.brand-step .tile .pic img{
  height:225px !important;
  width:auto !important;
  max-height:225px !important;
  max-width:100% !important;
  object-fit:contain !important;
}

/* Keep mobile bars consistent with image-based selections */
@media (max-width:700px){
  .tiles.brand-step .tile{ height: var(--mobile-img-bar-height, 168px) !important; }
  .tiles.brand-step .tile .pic{ height:auto !important; aspect-ratio:auto !important; }
  .tiles.brand-step .tile .pic img{ height: calc(var(--mobile-img-bar-height,168px) - 64px) !important; }
}


/* === HARD CLAMP for logo tiles to match engine selection size (desktop) === */
@media (min-width:900px){
  .tiles.brand-step{ grid-template-columns: repeat(3, 340px) !important; grid-auto-rows: 340px !important; }
  .tiles.brand-step .tile{ width:340px !important; height:340px !important; overflow:hidden !important; }
  .tiles.brand-step .tile .pic{ height:225px !important; width:100% !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .tiles.brand-step .tile img{ height:225px !important; width:auto !important; max-width:100% !important; object-fit:contain !important; display:block !important; }
}

/* Extra guard: if brand-step class is missing, apply clamp to the first question tiles only */
@media (min-width:900px){
  .q:first-of-type .tiles .tile{ overflow:hidden !important; }
  .q:first-of-type .tiles .tile img{ height:225px !important; width:auto !important; max-width:100% !important; object-fit:contain !important; }
}


/* Hard clamp the very first question to match engine card size */
@media (min-width:900px){
  #wizard .q:nth-of-type(1) .tiles{ grid-template-columns: repeat(3, 340px) !important; grid-auto-rows: 340px !important; justify-content:center; gap:32px; }
  #wizard .q:nth-of-type(1) .tile{ width:340px !important; height:340px !important; overflow:hidden !important; }
  #wizard .q:nth-of-type(1) .tile img{ height:225px !important; width:auto !important; max-width:100% !important; object-fit:contain !important; }
}


/* Reduce extra gap above first tiles grid */
#wizard #qmount{ transition:min-height .45s ease; }
@media (min-width:900px){
  #wizard .q:nth-of-type(1) ~ #qmount{ min-height: 0 !important; }
}


/* Tighten space between first question title and tiles */
@media (min-width:900px){
  #wizard .q:nth-of-type(1) + #qmount{ margin-top: 12px !important; }
}

@media (min-width:900px){#wizard .q:nth-of-type(1)+#qmount{padding-top:0!important;margin-top:12px!important;min-height:0!important;}}


/* First question spacing: keep small padding above tiles only */
@media (min-width:900px){
  #wizard .q:nth-of-type(1)+#qmount{ margin-top:0 !important; padding-top:0 !important; min-height:0 !important; }
  #wizard .q:nth-of-type(1)+#qmount .tiles{ margin-top:12px !important; }
}

/* --- Gap fix: anchor first tiles directly under question on desktop --- */
@media (min-width:900px){
  #wizard .q:nth-of-type(1)+#qmount{
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    display:block !important;       /* cancel any flex centering */
  }
  #wizard .q:nth-of-type(1)+#qmount .tiles{
    margin-top:16px !important;     /* small breathing room like before */
  }
}

@media (min-width:900px){
  #wizard .q:nth-of-type(1)+#qmount{
    display:block !important;
    position:relative !important;
    margin:0 !important; padding:0 !important;
    min-height:auto !important; height:auto !important;
  }
  #wizard .q:nth-of-type(1)+#qmount .tiles{ margin-top:16px !important; }
}

/* Brand step: pin the tiles directly under the h2 */
@media (min-width:900px){
  #wizard .qhdr + .q, 
  #wizard .qhdr + #qmount { margin-top:0 !important; }
  #wizard .qhdr + #qmount{
    padding-top:0 !important; 
    min-height:auto !important; 
    height:auto !important; 
    position:static !important; 
    top:auto !important; 
    transform:none !important;
  }
  #wizard .qhdr + #qmount .tiles{ margin-top:12px !important; }
}

/* ---- First-step vertical gap hard reset ---- */
@media (min-width:900px){
  #wizard .q:first-of-type + #qmount{
    margin:0!important; padding:0!important;
    min-height:0!important; height:auto!important;
    position:static!important; top:auto!important; transform:none!important;
  }
  #wizard .q:first-of-type + #qmount > *{ margin-top:0!important; }
  #wizard .q:first-of-type + #qmount .tiles{ margin-top:12px!important; }
  #wizard .q:first-of-type + #qmount .spacer,
  #wizard .q:first-of-type + #qmount .vspace,
  #wizard .q:first-of-type + #qmount .shim,
  #wizard .q:first-of-type + #qmount::before{ display:none!important; height:0!important; }
}