h1 { max-width: 13ch; font-weight: 700; line-height: .98; letter-spacing: -.055em; }
h2, h3 { font-weight: 600; }
body { font-feature-settings: "tnum" 1; }
.skip-link { background: var(--color-cedar-light); color: var(--color-graphite); }
.site-header { background: var(--color-graphite); color: var(--color-chalk); border-color: #3b4942; }
.brand-mark { stroke: var(--color-cedar-light); }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
.brand-note, .main-nav a, .header-phone { color: #bcc8c0; }
.main-nav a:hover, .header-phone:hover { color: var(--color-chalk); border-bottom-color: var(--color-cedar-light); }
.menu-toggle { color: var(--color-chalk); border-color: #7a8a80; }

.planner { padding-top: var(--space-6); }
.configurator { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.45fr); overflow: hidden; background: var(--color-graphite); color: var(--color-chalk); border-top: 3px solid var(--color-cedar); color-scheme: dark; }
.config-intro { padding: var(--space-10) var(--space-8); border-right: 1px solid #405047; }
.config-intro .folio { margin-bottom: var(--space-5); color: var(--color-cedar-light); }
.config-intro .planner-lede { max-width: 43ch; margin-top: var(--space-6); color: #bdc9c1; font-size: var(--text-base); line-height: 1.65; }
.scene-project-control { margin-top: var(--space-8); }
.scene-project-control label, .control-label { display: block; color: #b6c3ba; font-size: var(--text-sm); }
.configurator select { min-height: 52px; margin-top: var(--space-2); background: var(--color-graphite-raised); color: var(--color-chalk); border-color: #7b8b81; border-radius: 0; }
.scene-specs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-6); border-block: 1px solid #4a5a51; }
.scene-specs > div { padding: var(--space-4) var(--space-3) var(--space-4) 0; }
.scene-specs > div + div { padding-left: var(--space-3); border-left: 1px solid #4a5a51; }
.scene-specs dt { color: #aebcb3; font-size: var(--text-xs); }
.scene-specs dd { margin-top: var(--space-1); font: 600 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.scene-catalog-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: var(--space-4); color: var(--color-cedar-light); text-underline-offset: 5px; }
.scene-workbench { min-width: 0; padding: var(--space-6) var(--space-6) var(--space-5); }
.scene-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.scene-kicker { color: #b3c0b7; font-size: var(--text-sm); }
.scene-heading h2 { margin-top: 3px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; }
#scene-layer { padding-bottom: 5px; color: var(--color-cedar-light); font-size: var(--text-sm); white-space: nowrap; }
.art-stage { height: clamp(350px, 36vw, 490px); background: var(--color-graphite); border: 1px solid #56675d; }
.art-stage img[data-art-poster] { object-fit: cover; }
.art-stage[data-art-state="fallback"] { border-color: var(--color-cedar-light); }
.scene-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); }
.material-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.material-picker .control-label { width: 100%; margin-bottom: 2px; }
.material-button, .view-controls button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 9px 11px; background: transparent; color: #d6dfd8; border: 1px solid #64766b; border-radius: 0; font-size: 13px; }
.material-button:hover, .view-controls button:hover { background: #2c3b33; border-color: #b3c2b7; }
.material-button[aria-pressed="true"] { background: #e0e6df; color: var(--color-graphite); border-color: #e0e6df; }
.material-button[data-finish="cedar"][aria-pressed="true"] { background: var(--color-cedar-light); border-color: var(--color-cedar-light); }
.material-button[data-finish="graphite"][aria-pressed="true"] { background: #63746a; color: #fff; border-color: #92a399; }
.material-swatch { width: 11px; height: 20px; border: 1px solid currentColor; }
.swatch-concrete { background: #bcc4bc; }
.swatch-cedar { background: #b87954; }
.swatch-graphite { background: #4a5850; }
.view-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding-top: 23px; }
.scene-diagram-caption { margin-top: var(--space-3); color: #c4cec7; font-size: var(--text-sm); }
.art-disclaimer { max-width: 85ch; margin-top: var(--space-2); color: #a7b6ac; font-size: var(--text-xs); line-height: 1.5; }
.kit-picker { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(145px, .6fr) repeat(3, 1fr); gap: var(--space-3); align-items: stretch; padding: var(--space-5) var(--space-6); background: #202c26; border-top: 1px solid #405047; }
.kit-picker > .control-label { align-self: center; max-width: 12ch; }
.kit-picker button { display: flex; min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px var(--space-4); background: transparent; color: var(--color-chalk); text-align: left; border: 1px solid #5f7166; border-radius: 0; }
.kit-picker button:hover { border-color: var(--color-cedar-light); }
.kit-picker button[aria-pressed="true"] { background: var(--color-cedar-light); color: var(--color-graphite); border-color: var(--color-cedar-light); }
.kit-picker button strong { font-size: 15px; font-weight: 600; }
.kit-picker button span { color: #b7c4bb; font-size: 12px; }
.kit-picker button[aria-pressed="true"] span { color: #344139; }
.configurator :focus-visible { outline-color: var(--color-cedar-light); }
.company-proof { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-5); border-top-color: var(--text-secondary); }
.company-proof div { padding-block: var(--space-3); }
.company-proof div + div { padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
.company-proof div:last-child { grid-column: auto; }
.company-proof dd { font-family: var(--font-display); font-weight: 600; }
.filters { margin-top: var(--space-5); }
.catalog-status { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.project-card { border-radius: 0; box-shadow: none; }
.project-card.is-selected { border-color: var(--action-primary); box-shadow: inset 0 3px 0 var(--color-cedar); }
.project-card:hover { box-shadow: var(--shadow-whisper); }
.project-plan { background: #d5ddd4; }
.project-index, .package-code, .section-number { font-weight: 500; }
.project-specs dd, .project-price, .estimate-output output { font-variant-numeric: tabular-nums; }

@media (min-width: 1500px) {
  .art-stage { height: 510px; }
}

@media (max-width: 1180px) {
  .configurator { grid-template-columns: minmax(275px, .75fr) minmax(0, 1.25fr); }
  .config-intro { padding-inline: var(--space-6); }
  .scene-workbench { padding-inline: var(--space-5); }
  .scene-toolbar { flex-direction: column; }
  .view-controls { justify-content: flex-start; padding-top: 0; }
  .kit-picker { grid-template-columns: repeat(3, 1fr); }
  .kit-picker > .control-label { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 960px) {
  .main-nav.is-open { background: var(--color-graphite-raised); color: var(--color-chalk); border-color: #53655a; }
  .main-nav.is-open a { color: var(--color-chalk); border-bottom-color: #45564b; }
}

@media (max-width: 860px) {
  .configurator { grid-template-columns: 1fr; }
  .config-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0 var(--space-8); padding: var(--space-8); border-right: 0; border-bottom: 1px solid #405047; }
  .config-intro .folio { grid-column: 1 / -1; }
  .config-intro h1 { grid-column: 1; grid-row: 2; font-size: 44px; }
  .config-intro .planner-lede { grid-column: 1; grid-row: 3; margin-top: var(--space-4); }
  .scene-project-control { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; }
  .scene-specs { grid-column: 2; grid-row: 3; align-self: start; }
  .scene-catalog-link { grid-column: 1 / -1; }
  .scene-workbench { padding: var(--space-6); }
  .scene-toolbar { flex-direction: row; }
  .art-stage { height: 430px; }
}

@media (max-width: 680px) {
  .planner { padding-top: 0; }
  .planner > .wrap { padding-inline: 0; }
  .configurator { border-top-width: 2px; }
  .config-intro { display: block; padding: var(--space-8) var(--page-pad); }
  .config-intro h1 { max-width: 11ch; font-size: 43px; }
  .config-intro .planner-lede { margin-top: var(--space-5); }
  .scene-project-control { margin-top: var(--space-6); }
  .scene-specs dd { font-size: 22px; }
  .scene-workbench { padding: var(--space-5) var(--page-pad); }
  .scene-heading { align-items: flex-start; }
  .scene-heading h2 { font-size: 32px; }
  #scene-layer { max-width: 13ch; text-align: right; white-space: normal; }
  .art-stage { height: min(88vw, 360px); }
  .art-stage img[data-art-poster] { object-fit: contain; }
  .scene-toolbar { flex-direction: column; }
  .material-picker, .view-controls { width: 100%; }
  .material-button { flex: 1; }
  .view-controls button { flex: 1; }
  .kit-picker { grid-template-columns: 1fr; padding: var(--space-5) var(--page-pad); }
  .kit-picker button { min-height: 62px; }
  .company-proof, .filters, .catalog-note, .empty-state { margin-inline: var(--page-pad); }
  .company-proof { grid-template-columns: 1fr 1fr; }
  .company-proof div:nth-child(2) { border-left: 1px solid var(--color-border); }
  .company-proof div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .catalog-status { margin-inline: var(--page-pad); }
  .project-grid { padding-inline: var(--page-pad); }
}

@media (prefers-reduced-motion: reduce) {
  .art-stage { border-style: double; }
}