/* Hometown Painting — Color Visualizer. Same design language as the main site
   (site/src/styles/global.css): Heritage Navy #1B2A4A, Brand Red #C41230, Warm Linen #F5F0EB,
   DM Sans body, DM Serif Display headings, Montserrat wordmark, 4px buttons, 8px cards. */
@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url('/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url('/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:600;font-display:swap;src:url('/fonts/dm-sans-600.woff2') format('woff2')}
@font-face{font-family:'DM Serif Display';font-weight:400;font-display:swap;src:url('/fonts/dm-serif-display-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:800;font-display:swap;src:url('/fonts/montserrat-800.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:900;font-display:swap;src:url('/fonts/montserrat-900.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',Arial,sans-serif;background:#fff;color:#222;font-size:16px;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3{font-family:'DM Serif Display',serif;font-weight:400;color:#1B2A4A;line-height:1.2}
h2{font-size:2rem;margin-bottom:8px}
h3{font-size:1.3rem}
p{margin-bottom:1em}
a{color:#1B2A4A}
button{font:inherit}
img{max-width:100%;display:block}
.section-sub{color:#666;margin-bottom:28px}
.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;font-weight:700;color:#C41230;margin-bottom:8px}
.fineprint{font-size:.85rem;color:#777}
.opt{font-weight:400;color:#777;font-size:.85em}
[hidden]{display:none!important}

/* HEADER */
.site-header{background:#1B2A4A;padding:14px 0;position:sticky;top:0;z-index:100}
.site-header .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo-mark{display:inline-flex;flex-direction:column;line-height:1;color:#fff;text-decoration:none;font-family:'Montserrat','DM Sans',Arial,sans-serif}
.logo-name{color:#fff;font-weight:900;font-size:1.7rem;letter-spacing:-.012em}
.logo-tag{color:#C41230;font-weight:800;font-size:.74rem;letter-spacing:.62em;margin-top:4px;padding-left:.05em}
.header-right{display:flex;align-items:center;gap:18px}
.header-link{color:#F5F0EB;text-decoration:none;font-weight:500;font-size:.95rem;opacity:.9}
.header-link:hover{opacity:1;text-decoration:underline}
.header-phone{color:#F5F0EB;font-weight:600;font-size:1.05rem;text-decoration:none;background:#C41230;padding:8px 18px;border-radius:4px;white-space:nowrap}
.header-phone:hover{background:#a01020}
@media(max-width:480px){.logo-name{font-size:1.45rem}.logo-tag{font-size:.62rem;letter-spacing:.5em}.header-link{display:none}.header-phone{padding:8px 14px;font-size:.95rem}}

/* BUTTONS (site conventions) */
.cta-phone,.btn-red{display:inline-block;background:#C41230;color:#fff;font-size:1.1rem;font-weight:600;padding:14px 30px;border-radius:4px;text-decoration:none;border:0;cursor:pointer;text-align:center;transition:background .2s}
.cta-phone:hover,.btn-red:hover{background:#a01020}
.cta-secondary{display:inline-block;background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(245,240,235,.7);font-size:1.1rem;font-weight:600;padding:12px 26px;border-radius:4px;text-decoration:none;cursor:pointer;text-align:center;transition:background .2s,border-color .2s}
.cta-secondary:hover{background:rgba(255,255,255,.22);border-color:#fff}
.btn-outline{display:inline-block;background:transparent;color:#1B2A4A;border:2px solid #1B2A4A;font-size:1.05rem;font-weight:600;padding:12px 26px;border-radius:4px;text-decoration:none;cursor:pointer;text-align:center;transition:all .2s}
.btn-outline:hover{background:#1B2A4A;color:#fff}
.btn-ghost{background:none;border:0;color:#1B2A4A;font-weight:600;padding:12px;cursor:pointer;text-decoration:underline}
.btn-red:disabled,.btn-outline:disabled{opacity:.45;cursor:not-allowed}
.btn-block{display:block;width:100%}
.stack{display:grid;gap:12px;margin:20px 0}
@media(min-width:600px){.stack.cols{grid-template-columns:1fr 1fr}}

/* HERO (landing) */
.hero{background:#1B2A4A center/cover no-repeat;color:#F5F0EB;padding:64px 0}
.hero-copy{max-width:640px}
.hero h1{font-size:2.4rem;line-height:1.2;margin-bottom:16px;color:#fff}
.hero-sub{font-size:1.1rem;opacity:.9;margin-bottom:24px}
.trust-signals{list-style:none;margin-bottom:28px}
.trust-signals li{padding:4px 0;font-weight:500;color:#F5F0EB}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-note{margin-top:12px;font-size:.9rem;color:#F5F0EB;opacity:.75}
@media(max-width:768px){.hero{padding:44px 0}.hero h1{font-size:1.85rem}.hero-ctas{flex-direction:column;align-items:stretch}.hero-ctas>*{width:100%}}

/* TRUST BAR */
.trustbar{background:#1B2A4A;color:#F5F0EB;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.trustbar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;font-size:.98rem}
.trustbar-stars{color:#F6B500;letter-spacing:2px;font-size:1.1rem}
.trustbar-text strong{color:#fff}
.trustbar-sep{width:1px;height:16px;background:rgba(245,240,235,.35)}
@media(max-width:600px){.trustbar-sep{display:none}}

/* BEFORE / AFTER */
.before-after{padding:60px 0;text-align:center;background:#fff}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto 8px}
.ba-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block}
.ba-label{font-weight:600;margin-top:8px;color:#1B2A4A}
.ba-caption{color:#666;font-size:.95rem;margin-top:14px;max-width:60ch;margin-left:auto;margin-right:auto}

/* HOW IT WORKS */
.process{background:#F5F0EB;padding:60px 0;text-align:center}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.process-num{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:#C41230;color:#fff;font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.process-step h3{font-family:'DM Sans',sans-serif;font-size:1.15rem;font-weight:600;color:#1B2A4A;margin-bottom:8px}
.process-step p{color:#555;font-size:.95rem}
@media(max-width:768px){.process-grid{grid-template-columns:1fr;gap:24px}}

/* REVIEW */
.reviews{background:#fff;padding:52px 0;text-align:center}
.stars{font-size:2rem;color:#C41230;margin-bottom:4px;line-height:1}
.rating-label{font-weight:600;color:#1B2A4A;margin-bottom:20px}
.review-card{background:#F5F0EB;padding:28px;border-radius:8px;text-align:left;border-left:4px solid #C41230;max-width:720px;margin:0 auto}
.review-card p{font-size:1rem;color:#444;margin-bottom:12px;line-height:1.7}
.review-card cite{font-weight:600;color:#1B2A4A;font-style:normal;font-size:.9rem}

/* BOTTOM CTA */
.cta-bottom{padding:56px 0;text-align:center;background:#1B2A4A;color:#F5F0EB}
.cta-bottom h2{color:#fff}
.cta-bottom p{opacity:.85;margin-bottom:24px}

/* TOOL SCREENS */
.tool{padding:32px 0 56px;min-height:60vh}
.tool h2{margin-bottom:6px}
.hint{color:#666;margin-bottom:18px}
.back{background:none;border:0;color:#1B2A4A;padding:0;margin-bottom:14px;cursor:pointer;font-weight:600}
.link{background:none;border:0;color:#1B2A4A;text-decoration:underline;cursor:pointer;padding:6px 0}
input[type=text],input[type=search],input[type=email],input[type=tel],input:not([type]){width:100%;padding:11px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;font:inherit;color:#222}
input:focus{outline:none;border-color:#1B2A4A;box-shadow:0 0 0 3px rgba(27,42,74,.12)}
.q{margin:18px 0}
.q-label{display:block;font-weight:600;color:#1B2A4A;margin-bottom:6px}

.seg{display:inline-flex;border:2px solid #1B2A4A;border-radius:4px;overflow:hidden;margin:8px 0 18px}
.seg.wrap{display:flex;flex-wrap:wrap;border:0;gap:8px;margin:4px 0 0}
.seg-btn{border:0;background:#fff;color:#1B2A4A;padding:10px 18px;cursor:pointer;font-weight:600}
.seg.wrap .seg-btn{border:2px solid #ddd;border-radius:4px}
.seg-btn.is-on{background:#1B2A4A;color:#fff}
.seg.wrap .seg-btn.is-on{border-color:#1B2A4A}

.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:36px 16px;border:2px dashed #1B2A4A;border-radius:8px;background:#F5F0EB;cursor:pointer;text-align:center}
.drop.is-over{background:#e9e3dc}
.drop-icon{font-size:2rem}
.drop-title{font-weight:600;color:#1B2A4A}
.drop-sub{color:#666;font-size:.9rem}
.preview-wrap{margin:16px 0;text-align:center}
.preview-wrap img{margin:0 auto;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.tips{margin:16px 0;padding-left:20px;color:#555;font-size:.95rem}
.tips li{margin:4px 0}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.chips.small{gap:6px;margin:10px 0}
.chip{border:2px solid #ddd;background:#fff;border-radius:4px;padding:10px 16px;cursor:pointer;font-weight:600;color:#1B2A4A}
.chips.small .chip{padding:5px 11px;font-size:.85rem;font-weight:500}
.chip.is-on{background:#1B2A4A;border-color:#1B2A4A;color:#fff}

.assign-list{display:grid;gap:10px;margin:16px 0}
.assign{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;transition:box-shadow .2s}
.assign:hover{box-shadow:0 8px 24px rgba(0,0,0,.10)}
.assign .sw{width:46px;height:46px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex:none}
.assign .sw.empty{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#eee 6px,#eee 12px)}
.assign .lbl{font-weight:600;color:#1B2A4A}
.assign .val{color:#666;font-size:.92rem}
.assign .chev{margin-left:auto;color:#999}
.warnings{background:#fff4dc;color:#7a4f00;border-left:4px solid #F6B500;border-radius:0 6px 6px 0;padding:12px 14px;margin:8px 0 18px;font-size:.93rem}
.warnings p{margin:4px 0}

.schemes{display:grid;gap:16px;margin-top:16px}
.scheme{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:22px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.scheme h3{margin-bottom:4px}
.scheme .summary{color:#555;font-size:.95rem}
.scheme .row{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.scheme .row .sw{width:44px;height:44px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex:none}
.scheme .row b{display:block;color:#1B2A4A}
.scheme .row small{color:#777}
.scheme .row p{margin:3px 0 0;font-size:.93rem;color:#444}
.scheme .stack{margin:16px 0 0}
.observations{background:#F5F0EB;border-left:4px solid #C41230;padding:14px 16px;border-radius:0 6px 6px 0;font-size:.95rem;color:#444;margin:12px 0 20px}

.working{text-align:center;padding:56px 0}
.spinner{width:52px;height:52px;border:5px solid #e5e5e5;border-top-color:#C41230;border-radius:50%;margin:0 auto 20px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:8px;background:#F5F0EB;border-radius:4px;overflow:hidden;margin:16px auto;max-width:360px;border:1px solid #e5e5e5}
.bar-fill{height:100%;width:0;background:#1B2A4A;transition:width .8s linear}

.compare{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);background:#000;user-select:none;-webkit-user-select:none}
.compare img{display:block;width:100%;height:auto;pointer-events:none}
.compare-before{position:absolute;inset:0;width:50%;overflow:hidden}
.compare-before img{width:auto;height:100%;max-width:none}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;width:0;border-left:3px solid #fff;pointer-events:none}
.compare-handle span{position:absolute;top:50%;left:-16px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);transform:translateY(-50%)}
.wm{position:absolute;left:0;right:0;bottom:8%;text-align:center;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.12em;font-size:clamp(.7rem,2.4vw,1.1rem);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;transform:rotate(-8deg)}
.tag{position:absolute;top:10px;background:rgba(27,42,74,.8);color:#fff;font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:4px}
.tag-l{left:10px}.tag-r{right:10px}
.slider{width:100%;margin:12px 0 18px;accent-color:#C41230}
.board{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 20px}
.board .card{display:flex;align-items:center;gap:10px;background:#F5F0EB;border-radius:6px;padding:6px 12px 6px 6px;font-size:.9rem}
.board .card .sw{width:36px;height:36px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.board .card b{display:block;line-height:1.2;color:#1B2A4A}
.board .card small{color:#666}
.result-cta{background:#1B2A4A;color:#F5F0EB;border-radius:8px;padding:24px;margin:28px 0 12px}
.result-cta h3{color:#fff;margin-bottom:6px}
.result-cta p{opacity:.9;margin-bottom:16px}
.error{background:#F5F0EB;border-left:4px solid #C41230;padding:14px 16px;border-radius:0 6px 6px 0}

/* DIALOGS */
.picker,.gate{border:0;border-radius:8px;padding:0;width:min(96vw,640px);max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.35);color:#222}
.picker::backdrop,.gate::backdrop{background:rgba(27,42,74,.6)}
.picker{display:none;flex-direction:column}
.picker[open]{display:flex}
.picker-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 10px}
.picker-head h3{margin:0}
.x{background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:#777}
.picker input{margin:0 18px;width:calc(100% - 36px)}
.picker .chips{padding:0 18px}
.swatches{overflow:auto;flex:1 1 auto;min-height:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;grid-auto-rows:max-content;align-content:start}
.swatch{border:2px solid transparent;border-radius:6px;padding:0;background:#fff;cursor:pointer;text-align:left;overflow:hidden}
.swatch:hover,.swatch:focus-visible{border-color:#1B2A4A}
.swatch .c{display:block;height:56px}
.swatch .n{display:block;padding:5px 6px 0;font-size:.78rem;font-weight:600;line-height:1.2;color:#222}
.swatch .k{display:block;padding:0 6px 6px;font-size:.72rem;color:#777}
.swatch.is-sel{border-color:#C41230}
.empty-note{grid-column:1/-1;color:#777;padding:16px 0}
.gate form{padding:24px}
.gate h3{margin-bottom:6px}
.gate label{display:block;font-weight:600;color:#1B2A4A;font-size:.92rem;margin:12px 0}
.gate label input{margin-top:6px;font-weight:400}
.gate-err{color:#C41230;font-weight:600}
.hp{position:absolute;left:-9999px;opacity:0}

/* FOOTER */
.site-footer{background:#1B2A4A;color:#F5F0EB;padding:40px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;margin-bottom:28px}
.footer-brand p{opacity:.8;font-size:.9rem;margin-top:12px;max-width:40ch}
.footer-brand .logo-name{font-size:1.4rem}
.site-footer a{color:#F5F0EB}
.footer-col h4{font-family:'DM Serif Display',serif;font-size:1.1rem;color:#fff;margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:8px}
.footer-col a{opacity:.85;text-decoration:none;font-size:.92rem}
.footer-col a:hover{opacity:1;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:.78rem;opacity:.7;line-height:1.6}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:24px}}

/* OPTIONS (up to 3 renders per photo) */
.opt-tabs{display:flex;gap:8px;margin:0 0 12px}
.opt-tab{flex:1;border:2px solid #ddd;border-radius:6px;background:#fff;padding:6px;cursor:pointer;text-align:center;font-weight:600;color:#1B2A4A;font-size:.85rem}
.opt-tab img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:4px}
.opt-tab.is-on{border-color:#C41230}
.compare-title{margin:28px 0 4px}
.compare-grid{display:grid;gap:14px;margin:12px 0 8px}
@media(min-width:640px){.compare-grid{grid-template-columns:repeat(3,1fr)}}
.opt-card{border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;text-align:left;padding:0;width:100%}
.opt-card.is-on{outline:3px solid #C41230}
.opt-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.opt-card .oc-body{padding:10px 12px 12px}
.opt-card .oc-title{font-weight:600;color:#1B2A4A;margin-bottom:6px;display:block}
.opt-card .oc-row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#444;margin:3px 0}
.opt-card .oc-row .sw{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.12);flex:none}