:root {
  color-scheme: light;
  --paper:#f6f3eb; --white:#fffdf8; --ink:#252f2c; --muted:#596660; --line:#ddd7ca;
  --green:#264d42; --green-deep:#1c3a32; --sage:#e4ece4; --gold:#8c663d; --amber:#f3e9d7;
  --red:#963f36; --red-bg:#fae8e2; --shadow:0 10px 28px #28352a0a;
  font-family: "Segoe UI", Arial, sans-serif; font-size:16px;
}
* {box-sizing:border-box}
body {margin:0; color:var(--ink); background:var(--paper); min-height:100vh; display:flex; flex-direction:column}
button,input,textarea,select {font:inherit}
button,a,input,textarea,select {outline-offset:4px}
a {color:var(--green); text-underline-offset:3px}
button {cursor:pointer}
button[disabled] {cursor:wait; opacity:.65}
img {max-width:100%; display:block}
h1,h2,h3,p {margin:0 0 .72rem}
h1,h2 {font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.028em; line-height:1.07}
h1 {font-size:clamp(2.3rem,5.4vw,4.2rem)}
h2 {font-size:clamp(1.6rem,3vw,2.25rem)}
h3 {font-size:1.03rem}
small,.small {font-size:.82rem}
p,li,dd {line-height:1.55}
dl,dd {margin:0}
dt {font-weight:650}
fieldset {min-width:0; border:1px solid var(--line); border-radius:10px; margin:0 0 14px; padding:15px}
legend {font-weight:700; padding:0 6px}
details {border-top:1px solid var(--line); padding:13px 0}
summary {cursor:pointer; font-weight:650; margin-bottom:.5rem}
hr {border:0; border-top:1px solid var(--line); margin:22px 0}
[hidden] {display:none !important}
.skip {position:absolute; top:-80px; background:white; padding:8px; z-index:10}
.skip:focus {top:10px; left:10px}
.top {background:var(--white); border-bottom:1px solid var(--line)}
.top-inner,.wrap,.bottom>div {width:min(1180px,calc(100% - 48px)); margin-inline:auto}
.top-inner {min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px}
.brand {display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; flex-shrink:0; font-size:.96rem; font-weight:750; letter-spacing:.17em}
.brand-mark {width:38px;height:38px;display:grid;place-items:center;background:var(--green);border-radius:6px;color:var(--white);font:1.5rem Georgia}
.brand small {display:block; font-size:.55rem; letter-spacing:.15em; color:var(--muted); margin-top:4px}
nav,.actions,.tabs,.pills {display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wrap {padding-block:34px 62px; flex:1}
.bottom {border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; background:#f2efe7}
.bottom>div {min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.bottom b {letter-spacing:.2em; color:var(--green)}
.loading {padding:5rem 0}
.hero {display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:stretch; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--white); box-shadow:var(--shadow)}
.hero-copy {padding:clamp(32px,6vw,76px)}
.eyebrow {font-size:.72rem; text-transform:uppercase; letter-spacing:.17em; color:var(--green); font-weight:750; margin-bottom:13px}
.hero-copy p:not(.eyebrow) {max-width:39ch; font-size:1.02rem; color:var(--muted); margin-bottom:22px}
.hero-art {min-height:290px; display:flex; flex-direction:column; justify-content:center; padding:28px; background:radial-gradient(ellipse at 33% 24%,#edf2e9 0%,#e1e9de 75%); color:var(--green); border-left:1px solid #d3ddd4; position:relative}
.hero-art svg {width:100%; align-self:center}
.hero-art .label {position:absolute; top:26px; left:26px; font-size:.68rem; font-weight:720; letter-spacing:.14em}
.hero-art .art-caption {position:absolute; bottom:23px; right:23px; font-size:.73rem; letter-spacing:.08em; color:#48665c}
.entry-grid,.split {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:20px; align-items:start}
.entry-grid {margin-top:22px}
.panel {padding:clamp(16px,3vw,30px); border:1px solid var(--line); background:var(--white); border-radius:13px; box-shadow:var(--shadow); min-width:0}
.panel+.panel {margin-top:14px}
.panel+.split {margin-top:14px}
.entry-grid>.panel+.panel,.split>.panel+.panel {margin-top:0}
.callout {background:var(--sage); color:var(--green-deep); border:1px solid #ceded0; border-radius:8px; padding:12px 15px; margin-block:12px}
.callout.warn {background:var(--amber); color:#694d2b; border-color:#e9d9bc}
.muted {color:var(--muted)}
.tag {display:inline-flex; align-items:center; gap:6px; border-radius:99px; background:var(--sage); color:var(--green-deep); font-size:.74rem; padding:4px 9px; font-weight:700; line-height:1.25}
.tag.warn {background:var(--amber); color:#694d2b}
.tag.fail {background:var(--red-bg); color:var(--red)}
.tag.neutral {background:#efede5; color:#545750}
.button,button.button {display:inline-flex; min-height:41px; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border-radius:7px; border:1px solid var(--green); background:var(--green); color:white; text-decoration:none; font-size:.88rem; font-weight:670; line-height:1.2; text-align:center}
.button:hover {background:var(--green-deep)}
.button.secondary {background:var(--white); color:var(--green); border-color:#becfc4}
.button.secondary:hover {background:var(--sage)}
.button.subtle {border-color:transparent; background:transparent; color:var(--green)}
.button.subtle:hover,.button.active {background:var(--sage)}
.button.danger {color:var(--red)}
.button.mini {min-height:31px; padding:5px 9px; font-size:.77rem}
.toggle {display:inline-flex; gap:6px; border:1px solid var(--line); border-radius:9px; padding:4px; background:var(--paper); margin:0 0 20px}
.toggle .button {min-height:36px}
.actions {margin-top:12px}
.pills {margin-bottom:16px}
.section-head {display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:23px}
.section-head p {margin-bottom:0}
.section-head h1 {font-size:clamp(2.2rem,4.9vw,3.6rem); margin-bottom:8px}
.section-head .eyebrow {margin-bottom:7px}
.steps {display:flex; flex-wrap:wrap; gap:8px; padding:6px; background:#ece9e0; border-radius:10px; margin-bottom:18px}
.steps .button {text-align:left; justify-content:flex-start}
.steps .active {background:var(--white); box-shadow:0 1px 5px #34423816}
.steps b {font-size:.72rem; color:#5b7469; font-variant-numeric:tabular-nums}
.grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px}
.grid.three {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid .wide {grid-column:1/-1}
.field {display:block; min-width:0; font-size:.83rem; font-weight:670; line-height:1.35}
.field input,.field textarea,.field select,.table select,.table input[type="number"] {display:block; width:100%; margin-top:5px; border:1px solid #cbc9be; border-radius:7px; background:#fffefa; color:var(--ink); padding:9px 10px; min-height:40px; font-weight:450}
.field textarea {resize:vertical; min-height:77px; line-height:1.42}
.field input[type="file"] {font-size:.82rem}
.check {display:flex; align-items:flex-start; gap:8px; line-height:1.4; font-size:.87rem; color:var(--ink); margin:5px 0}
.check input {accent-color:var(--green); width:17px; height:17px; margin:1px 0; flex-shrink:0}
.form-footer {display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:17px}
.card-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:14px}
.request-card,.product {display:flex; flex-direction:column; align-items:stretch; text-align:left; border:1px solid var(--line); padding:0; background:var(--white); border-radius:11px; overflow:hidden; color:var(--ink); box-shadow:var(--shadow)}
.request-card:hover,.product:hover {border-color:#99b2a2}
.request-card img,.product img,.photo-placeholder {height:158px; width:100%; object-fit:contain; background:#eeece5}
.photo-placeholder {display:grid; place-items:center; font-size:.8rem; color:var(--muted)}
.card-content {padding:15px}
.card-content .eyebrow {margin-bottom:8px}
.product .card-content {display:flex; flex-direction:column; gap:4px; flex:1}
.product p {margin-bottom:4px}
.photos {display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:12px 0}
.photo-tile {border:1px solid var(--line); border-radius:8px; overflow:hidden}
.photo-tile img {width:100%; height:122px; object-fit:contain; background:#f0ede6}
.photo-tile .small {padding:8px 8px 0; overflow-wrap:anywhere}
.photo-tile .actions {margin:4px 5px 7px; gap:2px}
.archive-list {margin-top:20px}
.archive-group summary {overflow-wrap:anywhere}
.archive-grid {margin-top:12px}
.archive-card {min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px}
.archive-card img {display:block; width:100%; height:174px; object-fit:contain; background:#f0ede6}
.archive-copy {padding:10px; overflow-wrap:anywhere}
.archive-copy .actions a {font-size:.82rem}
.archive-factory > summary {font-weight:700; overflow-wrap:anywhere}
.archive-sections {padding:12px 0 0 12px; border-left:2px solid var(--line); margin-top:10px}
.archive-sections section + section {margin-top:18px}
.order-card .field {margin:8px 0}
.order-card .form-footer {margin-top:10px}
.archive-project > summary {font-weight:700; overflow-wrap:anywhere}
.archive-project .empty {margin-top:10px}
.quote-line {margin:12px 0; min-width:0}
.quote-line .button {margin-top:8px}
.quote-note {padding:12px; background:var(--sage); border-radius:7px; margin-top:12px}
.quote-extras {margin-top:14px}
.quote-result {border-top:1px solid var(--line); margin-top:20px; padding-top:16px}
.quote-result .check-list li {justify-content:space-between}
.quote-result .check-list b {white-space:nowrap}
.quote-total {font-size:1.18rem}
.check-list {list-style:none; padding:0; margin:8px 0}
.check-list li {display:flex; align-items:flex-start; gap:9px; border-bottom:1px solid var(--line); padding:9px 0; font-size:.88rem}
.check-list .tag {flex-shrink:0; margin-top:2px}
.table-wrap {overflow:auto; margin-top:10px; border:1px solid var(--line); border-radius:9px}
.table {width:100%; border-collapse:collapse; font-size:.85rem}
.table th,.table td {border-bottom:1px solid var(--line); padding:9px; text-align:left; vertical-align:top}
.table th {background:var(--sage); color:var(--green-deep); font-weight:750}
.table tbody tr:last-child td {border-bottom:none}
.table td select {min-width:190px; font-size:.81rem}
.table td input[type="number"] {width:90px}
.table td img {width:70px; height:48px; object-fit:contain; background:#f1eee7; border-radius:4px}
.table .nowrap {white-space:nowrap}
.table p {margin-bottom:4px}
.stats {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:12px 0}
.stat {padding:13px; border:1px solid var(--line); border-radius:8px; background:#f8f6ef}
.stat b {display:block; font:1.4rem Georgia; margin-top:3px; color:var(--green)}
.sketch-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px}
.sketch-grid img {width:100%; border:1px solid var(--line); border-radius:8px; background:var(--paper)}
.sketch-grid label {margin-bottom:8px}
.color-swatch {width:20px; height:20px; border-radius:50%; border:1px solid var(--line); vertical-align:middle}
.empty {padding:34px 18px; border:1px dashed #b7c7bc; border-radius:10px; text-align:center; color:var(--muted)}
.product-picture {width:100%; max-height:410px; object-fit:contain; background:#f0eee7; border-radius:9px}
.toast {position:fixed; z-index:5; bottom:20px; right:20px; width:min(420px,calc(100vw - 40px)); border-radius:9px; color:#fff; background:var(--green-deep); box-shadow:0 5px 18px #182a2666; padding:12px 16px; font-size:.9rem; line-height:1.45}
.toast.error {background:#792e29}
@media(max-width:830px) {
  .entry-grid,.split {grid-template-columns:1fr}
  .hero-copy {padding:30px}
  .grid.three {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-art {min-height:250px}
  .hero-art svg {max-height:220px}
}
@media(max-width:570px) {
  .top-inner,.wrap,.bottom>div {width:calc(100% - 26px)}
  .top-inner,.section-head,.bottom>div {align-items:flex-start; flex-direction:column; gap:10px}
  .wrap {padding-block:18px 40px}
  .bottom>div {justify-content:center; padding-block:10px}
  .hero {grid-template-columns:1fr}
  .hero-copy {padding:23px}
  .hero-art {min-height:190px; padding:22px 14px 12px; border-left:0; border-top:1px solid #d3ddd4}
  .hero-art .label {top:13px;left:14px}
  .hero-art .art-caption {bottom:9px;right:14px}
  .hero-art svg {max-height:165px}
  .grid,.grid.three,.sketch-grid,.stats {grid-template-columns:1fr}
  .steps {gap:4px}
  .steps .button {font-size:.77rem; padding:6px 7px; min-height:33px}
  .card-grid {grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:9px}
  .card-content {padding:10px}
  .request-card img,.product img,.photo-placeholder {height:112px}
}

  .shop-return {min-height:44px}
  #vdb-back-top {position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));
    z-index:4;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #d6c7b4;border-radius:50%;
    background:#f5ede2;color:#624b34;font:26px/1 Arial,sans-serif;box-shadow:0 5px 16px #402f1d2e;cursor:pointer;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,background-color .2s,visibility .2s}
  #vdb-back-top[data-visible] {opacity:1;visibility:visible;pointer-events:auto}
  #vdb-back-top:focus-visible {outline:3px solid #92724e;outline-offset:3px}
  @media(hover:hover) and (pointer:fine) {#vdb-back-top:hover {background:#e8dac7}}
  @media(max-width:600px) {
    #vdb-back-top {right:max(12px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px}
    .wrap.demo {padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  }
  @media(prefers-reduced-motion:reduce) {#vdb-back-top {transition:none}}
  .demo {width:min(850px,calc(100% - 28px));padding-top:24px}
  .demo h1 {font-size:clamp(2rem,6vw,3.5rem)}
  .demo .field input,.demo .field select {font-size:1rem;min-height:44px}
  .mode-options {display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mode-options label {display:flex;align-items:center;gap:7px;min-height:46px;padding:8px;
    border:1px solid var(--line);border-radius:8px;font-weight:650}
  .mode-options label:has(:checked) {background:var(--sage);border-color:var(--green)}
  .demo button {width:100%;min-height:46px;margin-top:16px}
  .demo-list {list-style:none;padding:0;margin:0;display:grid;gap:9px}
  .demo-card {display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;gap:12px;
    border:1px solid var(--line);border-radius:10px;padding:10px;overflow-wrap:anywhere}
  .demo-card img {width:84px;height:90px;object-fit:contain;background:var(--white)}
  .demo-card p,.demo-card h3 {margin:0 0 3px}
  .demo-card a {display:inline-block;padding:5px 0}
  .demo-result {scroll-margin-top:10px}
  .demo .upload {display:block;margin-bottom:14px}
  .demo .upload input {max-width:100%}
  .demo .upload-preview {max-height:140px;width:auto;max-width:100%;border-radius:8px;margin-top:8px}
  .demo .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .estimate-actions {display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
  .estimate-actions .button,.demo-card .button {width:auto;min-height:44px;margin:0}
  .material-options {margin-bottom:16px}
  .material-options .demo-card {grid-template-columns:110px minmax(0,1fr)}
  .material-options img {width:110px;height:110px}
  .material-options .button {margin-top:5px}
  .article-results {margin:16px 0;scroll-margin-top:10px}
  @media(max-width:570px) {.shop-return {align-self:stretch}}
  @media(max-width:350px) {.demo .grid {grid-template-columns:1fr}}
  @media print {
    .top,#vdb-back-top,#article-search,.article-results,#estimate-form,.estimate-actions,.material-options,.photo-corrections,.demo > h1,.demo > p,#estimate-message {display:none!important}
    body,.demo {background:#fff;color:#111}
    .demo,.demo-result {width:100%;padding:0;border:0;box-shadow:none;margin:0}
    .demo-card {break-inside:avoid}
  }