@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#10283d;--navy-deep:#0a1c2e;--orange:#e96b25;--ink:#172d3d;--muted:#617482;--line:#d9e2e7;--paper:#f3f6f8;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 'DM Sans',Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e77c3b;outline-offset:3px}
h1,h2,h3,h4,p{margin-top:0}
.shell{max-width:1600px;margin:auto;overflow:hidden}
.topbar{height:104px;background:var(--navy-deep);padding:0 clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff26}
.brand{display:flex;align-items:center;justify-content:center;width:200px;height:104px;background:#fff;border-left:5px solid var(--orange);border-radius:0 0 12px 12px;box-shadow:0 14px 24px #020d1b35}
.brand img{width:175px;height:96px;object-fit:contain;display:block}
footer img{width:125px;height:auto;display:block}
.header-note{font-size:13px;color:#d1e0e7;font-weight:800;letter-spacing:.12em}
.intro{min-height:330px;background:linear-gradient(120deg,var(--navy-deep),#173b55 70%,#224e68);color:#fff;padding:49px clamp(20px,5vw,80px) 96px;display:flex;align-items:center}
.intro-copy{max-width:850px}
.eyebrow{color:#ffb584;font:800 12px/1.4 'Manrope',sans-serif;letter-spacing:.14em;margin-bottom:17px}
.eyebrow.dark{color:#b4541f}
.intro h1{font:800 clamp(35px,4.3vw,60px)/1.11 'Manrope',sans-serif;letter-spacing:-.055em;margin-bottom:17px}
.intro h1 em{font-style:normal;color:#ffa565}
.intro-copy>p:last-child{font-size:17px;line-height:1.55;color:#d5e0e6;max-width:620px;margin:0}
.client-intake{position:relative;max-width:1420px;margin:-50px auto 0;padding:31px clamp(22px,4vw,55px) 34px;background:#fff;border-radius:16px;box-shadow:0 22px 45px #0c304419}
.intake-heading,.field-heading{display:flex;align-items:flex-start;gap:15px}
.intake-heading h2,.section-head h2,.compare-heading h2{font:800 clamp(25px,2.4vw,35px)/1.2 'Manrope',sans-serif;letter-spacing:-.045em;margin:0 0 7px}
.intake-heading p,.section-head p:not(.eyebrow),.compare-heading p:not(.eyebrow){font-size:15px;color:var(--muted);margin:0}
.step-number{width:32px;height:32px;flex:none;border-radius:8px;background:#fde6d7;color:#ad4d18;font:800 14px 'Manrope',sans-serif;display:grid;place-items:center}
.input-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:25px}
.input-grid label{font-size:14px;color:#354d5e;font-weight:700;display:flex;flex-direction:column;gap:7px}
.input-grid input{height:49px;width:100%;min-width:0;border:1px solid #bdcbd3;border-radius:8px;padding:0 13px;color:var(--ink);background:#fff;font-size:16px}
.input-grid input::placeholder{color:#8e9da7}
.intake-actions{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.intake-actions span{font-size:13px;color:var(--muted)}
.intake-button,.primary-button{background:var(--orange);color:#fff;border:0;border-radius:8px;font-weight:800;text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:11px 18px}
.intake-button:hover,.primary-button:hover{background:#cb571b}
#quote-app{max-width:1600px;margin:auto}
.workspace,.compare-section,.accessories-section{padding:72px clamp(20px,5vw,80px)}
.workspace{background:#f5f8f9}
.section-head,.compare-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
.section-head .eyebrow,.compare-heading .eyebrow{margin-bottom:9px}
.step-label,.count{font-size:12px;letter-spacing:.1em;color:#708492;font-weight:800}
.field-heading h3{font:800 17px 'Manrope',sans-serif;margin:0 0 3px}
.field-heading p{color:var(--muted);font-size:14px;margin:0}
.category-wrap{margin-top:38px}
.category-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:16px}
.category-tab{min-height:65px;display:flex;justify-content:center;align-items:center;gap:10px;text-align:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:#42596a;font-size:14px;font-weight:700;padding:10px}
.category-tab:hover,.vehicle-button:hover{border-color:#db8e60}
.category-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab-icon{color:var(--orange);font-size:21px;font-weight:500}
.vehicle-wrap{margin-top:33px}
.vehicle-options{display:grid;grid-template-columns:repeat(var(--vehicle-count,4),minmax(0,1fr));gap:9px;margin-top:16px}
.vehicle-button{min-height:52px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 13px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;color:#445d6e;font-size:14px;font-weight:800}
.vehicle-button span{color:#d78758}
.vehicle-button.active{background:#fff5ee;border-color:#e06c2b;color:var(--navy)}
.results-head{margin:40px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.option-card{min-height:218px;padding:21px;border:1px solid #e0e7eb;border-radius:11px;background:#fff}
.option-card.selected{border-color:var(--orange);box-shadow:0 0 0 2px #e96b2529}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.index{font:800 12px 'Manrope',sans-serif;color:#8196a1}
.status-tag{background:#fff1e7;color:#9b551f;border-radius:4px;padding:6px 8px;font-size:11px;font-weight:800;line-height:1.2}
.status-tag.confirmed{background:#e9f5f0;color:#285e4b}
.option-card h4{font:800 19px/1.25 'Manrope',sans-serif;letter-spacing:-.03em;margin:17px 0 7px}
.card-sub{font-size:13px;line-height:1.4;color:#677d88;min-height:36px;margin:0}
.card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:17px}
.card-price small{display:block;font-size:12px;color:#728590}
.card-price strong{display:block;color:var(--navy);font:800 22px 'Manrope',sans-serif;letter-spacing:-.035em}
.select-button{border:0;background:#e8eef1;color:var(--navy);font-weight:800;font-size:13px;padding:10px;border-radius:7px;white-space:nowrap}
.selected .select-button{background:#fce4d4}
.compare-toggle{border:0;background:none;padding:17px 0 0;color:#617786;font-size:13px;font-weight:700}
.compare-toggle.on{color:#bd5b25}
.check{display:inline-grid;width:16px;height:16px;place-items:center;border:1px solid #a2b1b9;border-radius:3px;margin-right:5px}
.compare-toggle.on .check{background:#bd5b25;color:#fff;border-color:#bd5b25}
.quote-panel{position:sticky;top:18px;border-radius:12px;background:var(--navy);color:#fff;padding:25px}
.panel-kicker{font-size:12px;font-weight:800;color:#ffad78;letter-spacing:.13em}
.quote-panel h3{font:800 24px/1.2 'Manrope',sans-serif;letter-spacing:-.035em;margin:15px 0 20px}
.quote-line{padding:10px 0;border-bottom:1px solid #ffffff2c;display:flex;justify-content:space-between;gap:14px;font-size:13px}
.quote-line span{color:#aac0cb}
.quote-line strong{text-align:right;max-width:180px;overflow-wrap:anywhere}
.quote-total{margin-top:22px}
.quote-total span{font-size:12px;color:#a8bdc8}
.quote-total strong{display:block;font:800 30px 'Manrope',sans-serif;letter-spacing:-.04em}
.quote-total small{display:block;font-size:12px;line-height:1.4;color:#c0d1da;min-height:33px}
.primary-button{margin-top:18px;font-size:14px}
.primary-button.disabled{opacity:.48;cursor:not-allowed;pointer-events:none}
.send-note,.panel-foot{color:#afc5d0;font-size:12px;line-height:1.5;margin:13px 0 0}
.panel-foot{color:#8ea9b8;margin-top:15px}
.empty-category{grid-column:1/-1;min-height:310px;border:1px dashed #bfd0d7;border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:35px}
.empty-icon{font-size:36px;color:#d97839}
.empty-category h3{font:800 26px 'Manrope',sans-serif;margin:13px 0 7px}
.empty-category p{color:var(--muted);max-width:480px;font-size:15px}
.outline-button{border:1px solid #bed0d8;background:#fff;color:var(--navy);font-size:13px;font-weight:800;padding:11px 14px;border-radius:7px}
.compare-section{background:#eaf0f3}
.compare-heading p:not(.eyebrow){max-width:650px}
.text-button{border:0;background:none;font-size:14px;color:#526d7c;font-weight:800}
.compare-content{margin-top:26px}
.compare-empty{min-height:128px;background:#fff9;border:1px dashed #bfd0d8;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;color:#567080;font-size:14px}
.compare-empty p{margin:0}
.compare-plus{font-size:27px;color:var(--orange)}
.comparison-scroll{overflow-x:auto;border-radius:10px;border:1px solid #d0dde2;background:#fff}
.comparison-table{display:grid;grid-template-columns:155px repeat(var(--compare-count),minmax(195px,1fr));min-width:calc(155px + var(--compare-count)*195px)}
.comparison-table>div{border-right:1px solid #e4ebee;border-bottom:1px solid #e4ebee}
.comparison-corner{background:var(--navy);color:#ffae75;display:flex;align-items:end;padding:20px;font-size:12px;font-weight:800;letter-spacing:.1em}
.comparison-head{position:relative;min-height:195px;padding:24px 18px 18px}
.comparison-head small{font-size:11px;color:#708995;font-weight:800}
.comparison-head h3{font:800 18px/1.3 'Manrope',sans-serif;margin:15px 25px 8px 0}
.comparison-head>strong{display:block;color:#b35420;font:800 23px 'Manrope',sans-serif;margin-bottom:14px}
.remove-compare{position:absolute;right:12px;top:10px;border:0;background:none;color:#6b8490;font-size:24px}
.comparison-head .outline-button{width:100%}
.comparison-label,.comparison-cell{min-height:54px;display:flex;align-items:center;padding:11px 16px;font-size:13px;line-height:1.35}
.comparison-label{background:#f2f6f7;color:#526c7a;font-weight:800}
.comparison-cell{font-weight:600}
.accessories-section{background:#fff}
.accessories-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:27px;max-width:1100px}
.accessory-card{border:1px solid #d9e4e8;border-radius:11px;padding:20px;display:flex;align-items:flex-start;gap:13px;cursor:pointer;min-height:157px;background:#fbfcfd}
.accessory-card.active{border-color:var(--orange);background:#fff6f0}
.accessory-card:focus-within{outline:3px solid #e77c3b;outline-offset:3px}
.accessory-card.included{cursor:default;background:#f0f5f5;border-color:#d2e0df}
.accessory-marker{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #b6c8d1;border-radius:6px;color:#b45820;font-size:18px}
.accessory-card.active .accessory-marker,.accessory-card.included .accessory-marker{background:#e76828;color:#fff;border-color:#e76828}
.accessory-card.included .accessory-marker{background:#4d8177;border-color:#4d8177}
.accessory-copy{display:flex;flex-direction:column;gap:7px}
.accessory-copy strong{font:800 18px 'Manrope',sans-serif}
.accessory-copy small{font-size:13px;color:#637b88;line-height:1.4}
.accessory-copy em{font-size:11px;font-style:normal;font-weight:800;color:#a35c30;letter-spacing:.04em;margin-top:4px}
.accessory-card.included em{color:#377268}
.accessory-card input{position:absolute;opacity:0;width:1px;height:1px}
.accessories-note{margin:18px 0 0;color:#647b88;font-size:13px}
.back-to-summary{display:inline-block;margin-top:18px;color:#a84816;font-size:14px;font-weight:800}
footer{background:var(--navy-deep);color:#a9bdc8;min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(20px,5vw,80px);font-size:13px}
footer img{background:#fff;border-radius:6px;padding:5px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;z-index:5;font-size:13px}
.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:1100px){.content-grid{grid-template-columns:minmax(0,1fr) 290px}.card-bottom{align-items:start;flex-direction:column}.options-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.quote-panel{position:static}.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.vehicle-options{grid-template-columns:repeat(2,minmax(0,1fr))}.accessories-grid{grid-template-columns:1fr}}
@media(max-width:590px){.topbar{height:82px}.brand{width:150px;height:82px;border-left-width:4px}.brand img{width:139px;height:75px}.header-note{font-size:10px;text-align:right;max-width:95px}.intro{min-height:290px;padding:34px 20px 88px}.intro h1{font-size:35px}.intro-copy>p:last-child{font-size:15px}.client-intake{margin:-51px 13px 0;padding:24px 19px 26px}.intake-heading h2{font-size:25px}.input-grid{gap:13px;margin-top:20px}.input-grid label{font-size:13px}.input-grid input{height:46px}.intake-actions{align-items:stretch;flex-direction:column}.intake-button{justify-content:center}.workspace,.compare-section,.accessories-section{padding:52px 19px}.category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tab{min-height:60px;font-size:13px}.category-tab:last-child{grid-column:span 2}.vehicle-button{font-size:12px}.options-grid{grid-template-columns:1fr}.section-head,.compare-heading{align-items:flex-start;flex-direction:column}.results-head{align-items:flex-start}.step-label,.count{font-size:11px}.comparison-table{grid-template-columns:120px repeat(var(--compare-count),minmax(170px,1fr));min-width:calc(120px + var(--compare-count)*170px)}.comparison-label,.comparison-cell{padding:10px}.comparison-head{padding:20px 14px}.comparison-head>strong{font-size:20px}footer{align-items:flex-start;flex-direction:column}}