:root{--black:#000;--panel:#0d0d0d;--line:#2a2a2a;--white:#f4f4f4;--muted:#aaa;--teal:#19a9b7}
*{box-sizing:border-box}body{margin:0;background:#000;color:var(--white);font-family:Arial,Helvetica,sans-serif}
header{min-height:95px;padding:12px 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;background:rgba(0,0,0,.96);z-index:5}
header img{width:230px;height:70px;object-fit:contain;object-position:left center}header>div{text-align:right}header span{display:block;color:var(--teal);font-weight:900;letter-spacing:2px}header a{color:#ddd;text-decoration:none;font-size:.85rem}
main{max-width:1100px;margin:auto;padding:55px 22px 90px}.intro{margin-bottom:35px}.eyebrow{color:var(--teal);font-size:.78rem;font-weight:900;letter-spacing:3px;margin:0 0 8px}.intro h1{font-size:clamp(2.3rem,6vw,4.5rem);text-transform:uppercase;line-height:.95;margin:0 0 20px}.intro>p:last-child{max-width:760px;color:var(--muted)}
.card,.estimate-card{background:linear-gradient(145deg,#111,#070707);border:1px solid var(--line);border-radius:8px;padding:26px;margin:18px 0}.card h2{margin:0 0 22px;text-transform:uppercase;font-size:1.25rem}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
label{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}select,input[type=number],textarea{width:100%;margin-top:8px;background:#050505;color:#fff;border:1px solid #3b3b3b;border-radius:5px;padding:13px;font:inherit}select:focus,input:focus,textarea:focus{outline:1px solid var(--teal);border-color:var(--teal)}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choices label,.toggle{display:flex;gap:12px;padding:16px;border:1px solid #333;border-radius:6px;background:#080808;text-transform:none;letter-spacing:0;cursor:pointer}.choices input,.toggle input{accent-color:var(--teal);margin-top:3px}.choices small,.toggle small{display:block;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.4}.color-fields{margin-top:18px}.color-fields input[type=color]{display:block;width:100%;height:48px;margin-top:8px;border:1px solid #444;background:#050505}.notes{display:block;margin-top:18px}.toggle{margin:10px 0}.disabled{opacity:.5;cursor:not-allowed}.hint{color:var(--muted);font-size:.9rem;margin-bottom:0}
.estimate-card{border-color:var(--teal);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.estimate-card h2{font-size:3rem;margin:0;color:#fff}.estimate-card #status{color:var(--muted);max-width:440px}.breakdown{border-left:1px solid #333;padding-left:28px}.row{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px solid #202020}.row.discount{color:var(--teal)}.row.totalrow{font-weight:900;border-bottom:0;margin-top:5px}.consult{color:#ffd27a!important}
@media(max-width:700px){
  header{
    min-height:60px;
    padding:7px 14px;
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  header img{
    width:138px;
    height:44px;
  }
  header>div{
    margin-left:auto;
    text-align:right;
    line-height:1.15;
  }
  header span{
    font-size:.78rem;
    letter-spacing:1.4px;
  }
  header a{
    display:block;
    margin-top:3px;
    font-size:.72rem;
  }
  .grid,.choices,.estimate-card{grid-template-columns:1fr}
  .breakdown{border-left:0;border-top:1px solid #333;padding:20px 0 0}
  main{padding-top:24px}
}

/* V1.1 — higher-contrast themed form controls */
select,
input[type=number],
textarea {
    background: #15191a;
    color: #f4f4f4;
    border: 1px solid #3d747a;
    box-shadow: inset 0 0 0 1px rgba(25,169,183,.08);
}

select {
    cursor: pointer;
}

select:hover,
input[type=number]:hover,
textarea:hover {
    background: #192022;
    border-color: #19a9b7;
}

select:focus,
input[type=number]:focus,
textarea:focus {
    background: #192022;
    border-color: #19a9b7;
    outline: 2px solid rgba(25,169,183,.20);
    outline-offset: 1px;
}

select option {
    background: #15191a;
    color: #f4f4f4;
}

.choices label,
.toggle {
    background: #121617;
    border-color: #31575b;
}

.choices label:hover,
.toggle:not(.disabled):hover {
    background: #172022;
    border-color: #19a9b7;
}

.choices label:has(input:checked),
.toggle:has(input:checked) {
    background: #132427;
    border-color: #19a9b7;
    box-shadow: inset 0 0 0 1px rgba(25,169,183,.16);
}

.color-fields input[type=color] {
    background: #15191a;
    border-color: #3d747a;
}


/* V1.2 — simplified color swatch picker */
.swatch-groups {
    display: grid;
    gap: 22px;
    margin-top: 18px;
}

.swatch-group {
    padding: 16px;
    background: #0b0f10;
    border: 1px solid #31575b;
    border-radius: 7px;
}

.swatch-label {
    margin-bottom: 12px;
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swatch {
    min-width: 68px;
    padding: 34px 10px 9px;
    position: relative;
    background: #15191a;
    color: #f4f4f4;
    border: 1px solid #3d747a;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.swatch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 22px;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--swatch, linear-gradient(135deg,#19a9b7,#7e22ce));
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}

.swatch:hover {
    border-color: #19a9b7;
    background: #192022;
}

.swatch.selected {
    border-color: #19a9b7;
    background: #132427;
    box-shadow:
        0 0 0 2px rgba(25,169,183,.18),
        inset 0 0 0 1px rgba(25,169,183,.14);
}

.swatch.selected::after {
    content: "✓";
    position: absolute;
    right: 7px;
    top: 4px;
    color: #19a9b7;
    font-size: .85rem;
    font-weight: 900;
}

.swatch.metallic::before {
    background:
        linear-gradient(135deg,
            rgba(255,255,255,.75),
            var(--swatch),
            rgba(20,20,20,.35),
            var(--swatch));
}

.custom-swatch::before {
    background: conic-gradient(
        #b91c1c,
        #d97706,
        #d6b914,
        #2f7d32,
        #2563eb,
        #7e22ce,
        #b91c1c
    );
}

.custom-color-text {
    width: 100%;
    margin-top: 12px;
    background: #15191a;
    color: #f4f4f4;
    border: 1px solid #3d747a;
    border-radius: 5px;
    padding: 12px;
}

@media (max-width:700px) {
    .swatch {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 82px;
    }
}


/* V1.3 — stronger dropdown definition */
select {
    border-width: 4px;
}


/* V1.4 — 6px borders around all interactive fields */
select,
input[type=number],
textarea,
.custom-color-text,
.color-fields input[type=color],
.swatch-group,
.choices label,
.toggle {
    border-width: 6px;
}

.swatch {
    border-width: 6px;
}


/* V1.6 — multi-line project groups */
.section-title-row,
.item-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.secondary-button,
.remove-item {
    border:3px solid #19a9b7;
    background:#102022;
    color:#f4f4f4;
    border-radius:6px;
    padding:11px 16px;
    cursor:pointer;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.secondary-button:hover,
.remove-item:hover { background:#173034; }

.project-item {
    margin-top:22px;
    padding:24px;
    border:2px solid #31575b;
    border-radius:8px;
    background:linear-gradient(145deg,#0d1112,#070909);
}

.project-item + .project-item { margin-top:28px; }

.item-header { margin-bottom:20px; }

.item-header h3 {
    margin:0;
    font-size:1.45rem;
    text-transform:uppercase;
}

.item-kicker { margin-bottom:5px; }

.remove-item {
    border-color:#5c3838;
    background:#1b1010;
    color:#e6c5c5;
}

.remove-item:hover {
    border-color:#a14e4e;
    background:#2a1515;
}

.subsection {
    margin-top:26px;
    padding-top:24px;
    border-top:1px solid #2b3435;
}

.subsection h4 {
    margin:0 0 14px;
    text-transform:uppercase;
    font-size:1rem;
}

.item-summary {
    margin-top:24px;
    padding:15px 18px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    background:#101718;
    border:1px solid #31575b;
    border-radius:6px;
    text-transform:uppercase;
    font-weight:900;
}

.item-summary strong { color:#fff; }

@media(max-width:700px){
    .section-title-row,
    .item-header { flex-direction:column; }
    .secondary-button,
    .remove-item { width:100%; }
}


/* V1.7 — customer and project information */
input[type=text],
input[type=email],
input[type=tel] {
    width:100%;
    margin-top:8px;
    background:#15191a;
    color:#f4f4f4;
    border:6px solid #3d747a;
    border-radius:5px;
    padding:13px;
    font:inherit;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=tel]:hover {
    background:#192022;
    border-color:#19a9b7;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus {
    background:#192022;
    border-color:#19a9b7;
    outline:2px solid rgba(25,169,183,.20);
    outline-offset:1px;
}

.required {
    color:#19a9b7;
    font-weight:900;
}

.contact-notice {
    margin-top:20px;
    padding:16px 18px;
    background:#102022;
    border:2px solid #31575b;
    border-radius:6px;
    color:#d8e7e9;
    line-height:1.45;
}

.contact-notice strong {
    display:block;
    color:#fff;
    margin-bottom:5px;
    text-transform:uppercase;
    font-size:.82rem;
    letter-spacing:.5px;
}

.contact-notice span {
    color:#b9c7c9;
    font-size:.9rem;
}

.customer-summary {
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid #333;
}

.summary-heading {
    margin:0 0 8px;
    color:#19a9b7;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.customer-summary p:last-child {
    margin:0;
    color:#aaa;
    font-size:.86rem;
    line-height:1.45;
}


/* V1.8 coupon + secure submission */
.coupon-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px}
.coupon-button{min-height:58px;margin:0}
.coupon-message,.submit-message{min-height:1.4em;margin:12px 0 0;font-size:.92rem}
.success{color:#70dcae}.error{color:#ff8d8d}.warning{color:#ffd27a}
.row.discount{color:#19a9b7}
.acknowledgment{display:flex;align-items:flex-start;gap:12px;margin:22px 0;padding:16px;background:#101718;border:2px solid #31575b;border-radius:6px;text-transform:none;letter-spacing:0;line-height:1.45}
.acknowledgment input{accent-color:#19a9b7;margin-top:4px}
.submit-button{width:100%;padding:17px 24px;border:3px solid #19a9b7;border-radius:6px;background:#19a9b7;color:#fff;cursor:pointer;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.submit-button:hover{background:#22c0ce}.submit-button:disabled,.secondary-button:disabled{opacity:.55;cursor:not-allowed}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:700px){.coupon-row{grid-template-columns:1fr}.coupon-button{width:100%}}

.build-version {
    margin: 28px 0 0;
    text-align: center;
    color: #555;
    font-size: .72rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* V2.12.3 estimator UX */
.swatch-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.swatch-group{padding:10px!important}
.swatch-row{gap:5px!important}
.swatch{width:28px!important;height:28px!important;min-width:28px!important}
.need-by-card,.upload-callout,.project-name-field{display:block;border:1px solid rgba(25,169,183,.45);border-radius:10px;padding:16px;margin:18px 0;background:rgba(25,169,183,.06)}
.need-by-card h3,.upload-callout h3{margin-top:0}
.upload-callout input[type=file]{display:block;width:100%;padding:18px;border:2px dashed rgba(25,169,183,.7);border-radius:8px;margin:10px 0}
#submitEstimateBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.swatch-groups{grid-template-columns:1fr}}


/* V2.17.2.3 — Progressive Estimator S1 / Thip 2: model-group completion collapse */
.item-header-actions{display:flex;gap:10px;align-items:center}
.item-collapsed-summary{margin:7px 0 0;color:#c7d7d9;line-height:1.45;text-transform:none}
.complete-item{margin-top:16px;width:100%}
.project-item.is-collapsed{padding-top:18px;padding-bottom:18px}
.project-item.is-collapsed .item-header{margin-bottom:0}
.project-item.is-collapsed .item-kicker{margin-bottom:3px}
@media(max-width:700px){
  .item-header-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .item-header-actions .secondary-button,.item-header-actions .remove-item{width:100%}
}


/* V2.17.2.4 — Progressive Estimator S1 / Thip 3: staged model-group disclosure */
.progressive-group-fields{display:grid;gap:14px}
.progressive-step{padding:14px;border:1px solid rgba(25,169,183,.28);border-radius:8px;background:rgba(25,169,183,.035)}
.progressive-step[hidden]{display:none!important}
.progressive-step.is-active{border-color:rgba(25,169,183,.72);background:rgba(25,169,183,.075)}
.progressive-step > label{margin:0}
.progress-next{width:100%;margin-top:12px}
.scheme-subsection.progressive-step{margin-top:18px}
.scheme-subsection.progressive-step h4{margin-top:0}

/* V2.17.2.5 — Progressive Estimator S1 / Thip 4: logical viewport advance */
.progressive-step:focus{outline:none}

/* V2.17.2.6 — Progressive Estimator S1 / Thip 4a: explicit cross-section advance */
#customerInfoCard:focus,.project-item:focus{outline:none}

/* V2.17.2.7 — Progressive Estimator S1 / Thip 5: visual choice cards */
.choice-card-source{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}
.visual-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.visual-choice-grid--tier{grid-template-columns:repeat(2,minmax(0,1fr))}
.visual-choice-card{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;min-height:88px;padding:11px;text-align:left;color:var(--white);background:#101516;border:1px solid #31575b;border-radius:8px;cursor:pointer;font:inherit}
.visual-choice-card:hover{background:#172022;border-color:var(--teal)}
.visual-choice-card:focus-visible{outline:3px solid rgba(25,169,183,.38);outline-offset:2px;border-color:var(--teal)}
.visual-choice-card.is-selected{background:#132427;border-color:var(--teal);box-shadow:inset 0 0 0 1px rgba(25,169,183,.22)}
.visual-choice-placeholder{display:grid;place-items:center;width:64px;aspect-ratio:1;border:1px dashed #53777a;border-radius:6px;background:linear-gradient(145deg,#192123,#0a0d0e);color:#85cbd1;font-size:.72rem;font-weight:900;letter-spacing:1px}
.visual-choice-copy{display:block;min-width:0}
.visual-choice-copy strong{display:block;font-size:.88rem;text-transform:uppercase;letter-spacing:.45px}
.visual-choice-copy small{display:block;margin-top:5px;color:var(--muted);font-size:.75rem;font-weight:400;line-height:1.35;text-transform:none;letter-spacing:0}
.visual-choice-check{position:absolute;top:7px;right:8px;color:var(--teal);font-weight:900;opacity:0}
.visual-choice-card.is-selected .visual-choice-check{opacity:1}
@media(max-width:760px){
  .visual-choice-grid,.visual-choice-grid--tier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual-choice-card{grid-template-columns:48px 1fr;min-height:78px;padding:9px;gap:9px}
  .visual-choice-placeholder{width:48px}
}
@media(max-width:390px){
  .visual-choice-grid{grid-template-columns:1fr}
}

/* V2.17.2.8 — Narrow-mobile visual choice card containment */
@media(max-width:520px){
  .visual-choice-grid,.visual-choice-grid--tier{grid-template-columns:minmax(0,1fr)}
  .visual-choice-card{box-sizing:border-box;width:100%;min-width:0;max-width:100%;grid-template-columns:48px minmax(0,1fr);min-height:78px}
  .visual-choice-placeholder{min-width:0;max-width:100%}
  .visual-choice-copy,.visual-choice-copy strong,.visual-choice-copy small{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal}
}


/* V2.17.2.9 — Elder VS approved estimator photography */
.visual-choice-image{overflow:hidden;border-style:solid;background:#000}
.visual-choice-image img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;background:#000}

/* Respect consultation visibility even though need-by-card sets display:block. */
#consultPreferenceCard[hidden]{display:none!important}

/* V2.17.2.11 — Card Image Legibility Calibration.
   Enlarge both photographic selectors without changing crops; retain compact side-by-side copy.
   Narrow phones: +25%; intermediate widths: 72px; roomy desktop: +50%. */
.visual-choice-card{grid-template-columns:96px minmax(0,1fr)}
.visual-choice-image{width:96px}
@media(max-width:1000px){
  .visual-choice-grid--model{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual-choice-card{grid-template-columns:72px minmax(0,1fr)}
  .visual-choice-image{width:72px}
}
@media(max-width:760px){
  .visual-choice-card{grid-template-columns:60px minmax(0,1fr)}
  .visual-choice-image{width:60px}
}

/* Keep the accepted single-column containment on narrow phones. */
@media(max-width:520px){
  .visual-choice-grid--model{grid-template-columns:minmax(0,1fr)}
}

/* V2.17.2.11A — Larger card image legibility pass.
   Use more of each row for the unchanged, fully contained photograph. */
.visual-choice-card{grid-template-columns:120px minmax(0,1fr)}
.visual-choice-image{width:120px}
@media(max-width:1000px){
  .visual-choice-card{grid-template-columns:90px minmax(0,1fr)}
  .visual-choice-image{width:90px}
}
@media(max-width:760px){
  .visual-choice-card{grid-template-columns:76px minmax(0,1fr);padding-top:5px;padding-bottom:5px}
  .visual-choice-image{width:76px}
}
/* Allow long category labels to wrap within the remaining copy column. */
.visual-choice-copy,.visual-choice-copy strong,.visual-choice-copy small{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal}