:root { --ink:#142521; --muted:#65736e; --forest:#0d332c; --paper:#f6f4ef; --surface:#fff; --line:#d9dfdb; --gold:#a86f1e; --green-soft:#e9f4ee; --error:#9b3127; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); font-size:.9375rem; line-height:1.55; }
button { font:inherit; }
.skip-link { position:absolute; top:-4rem; left:1rem; z-index:10; padding:.75rem 1rem; background:var(--forest); color:#fff; }
.skip-link:focus { top:1rem; }
header { display:flex; width:min(100% - 2rem,72rem); min-height:5rem; margin:0 auto; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.625rem; color:var(--forest); text-decoration:none; }
.brand svg { width:2.25rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.brand span { display:flex; flex-direction:column; }
.brand strong { font-family:Georgia,serif; font-size:1.125rem; }
.brand small,.step-label { color:var(--muted); font-size:.625rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
main { width:min(100% - 2rem,72rem); margin:0 auto; padding:3rem 0 6rem; }
.loading-state { display:flex; min-height:55vh; align-items:center; justify-content:center; gap:.75rem; color:var(--forest); }
.loading-state span { width:.75rem; height:.75rem; border-radius:50%; background:var(--gold); animation:pulse 1s infinite alternate; }
@keyframes pulse { to { transform:scale(1.6); opacity:.45; } }
.eyebrow { margin:0 0 .375rem; color:var(--gold); font-size:.6875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Georgia,serif; font-weight:500; line-height:1.1; }
h1 { font-size:clamp(2.2rem,7vw,4.25rem); }
h2 { font-size:1.65rem; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.page-heading > div:first-child { max-width:45rem; }
.page-heading p:last-child { margin:.75rem 0 0; color:var(--muted); }
.quote-status { display:flex; padding:1rem; flex-direction:column; border-left:.25rem solid var(--gold); background:#fff; }
.quote-status span { color:var(--muted); font-size:.625rem; font-weight:800; text-transform:uppercase; }
.quote-status strong { color:var(--forest); }
.quote-status code { margin-top:.25rem; color:var(--muted); font-size:.6rem; overflow-wrap:anywhere; }
.quote-grid { display:grid; margin-top:2rem; gap:1rem; }
.panel { border:1px solid var(--line); border-radius:.625rem; background:var(--surface); box-shadow:0 .75rem 2rem rgba(13,51,44,.05); overflow:hidden; }
.panel-heading { display:flex; padding:1.25rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-bottom:1px solid var(--line); }
.panel-heading > span,.panel-heading > strong { color:var(--muted); font-size:.6875rem; }
.scope-list { display:grid; margin:0; padding:1rem 1.25rem; gap:.5rem; list-style:none; }
.scope-list li { display:flex; padding:.75rem; justify-content:space-between; gap:1rem; background:#f5f8f6; }
.scope-list span { color:var(--muted); text-align:right; }
.scope-note { margin:0; padding:0 1.25rem 1.25rem; color:var(--muted); font-size:.75rem; }
.price-panel { padding:1.5rem; background:var(--forest); color:#fff; }
.price-panel .eyebrow { color:#e7bd72; }
.price-panel h2 { font-size:clamp(2.4rem,8vw,4rem); }
.price-panel dl { margin:1rem 0; border-top:1px solid #44655e; }
.price-panel dl div { display:flex; padding:.75rem 0; justify-content:space-between; gap:1rem; border-bottom:1px solid #44655e; }
.price-panel dt { color:#b9c9c4; }
.price-panel dd { margin:0; font-weight:800; }
.price-panel > p { color:#c5d2ce; font-size:.75rem; }
.button { display:inline-flex; min-height:3rem; padding:.75rem 1.125rem; align-items:center; justify-content:center; border:1px solid transparent; border-radius:.375rem; cursor:pointer; font-weight:800; text-decoration:none; }
.button-primary { background:#c58a31; color:#142521; }
.price-panel .button { width:100%; }
.quote-actions { display:grid; gap:.625rem; }
.price-panel .button-decline { border-color:#78938b; background:transparent; color:#d9e5e1; }
.button:disabled { cursor:wait; opacity:.65; }
.quote-message { margin:1rem 0; padding:.75rem; border-left:.25rem solid #c58a31; background:#fff7e7; color:#56390e; }
.deposit-panel,.install-panel { margin-top:1rem; }
.deposit-panel > p { margin:0; padding:1.25rem; color:var(--muted); }
.deposit-panel > .button { margin:0 1.25rem 1.25rem; background:var(--forest); color:#fff; }
.payment-methods { display:grid; padding:0 1.25rem 1.25rem; gap:.75rem; }
.payment-method { display:flex; min-width:0; padding:1rem; align-items:flex-start; flex-direction:column; gap:.625rem; border:1px solid var(--line); background:#f8faf8; }
.payment-method h3,.payment-method p { margin:0; }
.payment-method h3 { font-family:Georgia,serif; font-size:1.15rem; font-weight:500; }
.payment-recipient { color:var(--forest) !important; font-size:1rem; font-weight:800; overflow-wrap:anywhere; }
.payment-method img { display:block; width:min(11.25rem,100%); height:auto; border:1px solid var(--line); background:#fff; }
.payment-method-link { width:100%; border-color:var(--forest); color:var(--forest); }
.deposit-panel > .payment-safety { margin:0 1.25rem 1.25rem; padding:.875rem 1rem; border-left:.25rem solid var(--gold); background:#fff7e7; color:#56390e; font-size:.8rem; }
.date-grid { display:grid; padding:1.25rem; gap:.625rem; }
.date-grid label { position:relative; cursor:pointer; }
.date-grid input { position:absolute; width:1px; height:1px; opacity:0; }
.date-grid span { display:flex; min-height:3.25rem; padding:.75rem; align-items:center; border:1px solid #b7c3bd; border-radius:.375rem; color:var(--forest); font-weight:750; }
.date-grid input:checked + span { border-color:var(--forest); background:var(--green-soft); box-shadow:inset 0 0 0 1px var(--forest); }
#install-form > .button { margin:0 1.25rem 1.25rem; background:var(--forest); color:#fff; }
.field-error { min-height:1.25rem; margin:-.5rem 1.25rem .75rem; color:var(--error); font-weight:700; }
.job-confirmation { display:flex; margin:1.25rem; padding:1rem; flex-direction:column; border-left:.25rem solid #237352; background:var(--green-soft); }
.empty-dates { margin:0; color:var(--muted); }
.error-state { max-width:44rem; padding:2rem; border:1px solid var(--line); background:#fff; }
.error-state p:not(.eyebrow) { color:var(--muted); }
.error-state .button { background:var(--forest); color:#fff; }
button:focus-visible,a:focus-visible,.date-grid input:focus-visible + span { outline:3px solid rgba(168,111,30,.38); outline-offset:2px; }
[hidden] { display:none !important; }
@media (min-width:48rem) { header,main { width:min(100% - 3rem,72rem); } .quote-grid { grid-template-columns:minmax(0,1.5fr) minmax(19rem,.7fr); } .payment-methods,.date-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .loading-state span { animation:none; } }