@font-face {
  font-family: 'Inter';
  src: url('assets/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #0e0f11;
  --surface: #151618;
  --raised: #1a1b1e;
  --border: #2a2b2e;
  --gold: #d4af37;
  --gold-soft: #e4c975;
  --text: #f5f5f7;
  --muted: #a3a3a9;
  --dim: #84848a;
}
body {background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
button, a {transition: color .18s, background .18s, border-color .18s;}
button:hover {filter: none;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 2px solid var(--gold-soft); outline-offset: 4px;}
.skip-link {position: absolute; z-index: 100; top: -80px; left: 24px; padding: 12px 18px; background: var(--gold); color: #0e0f11;}
.skip-link:focus {top: 16px;}
.header {height: 76px; max-width: 1440px; margin: auto; padding: 0 5%; gap: 36px; border-color: var(--border); background: var(--bg);}
.brand {font-size: 15px; font-weight: 650; letter-spacing: .28em; line-height: 1.3; color: var(--text); white-space: nowrap;}
.brand span {color: var(--gold);}
.header .host-nav {display: flex; gap: 28px; margin: auto;}
.host-nav a {font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap;}
.host-nav a:hover {color: var(--text);}
.site-link {font-size: 14px; font-weight: 500; padding: 10px 21px; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); text-decoration: none;}
.site-link:hover {background: #d4af3712; text-decoration: none;}
.workspace-bar {border-bottom: 1px solid var(--border); background: #111214;}
.workspace-inner {max-width: 1440px; margin: auto; padding: 0 5%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.branch-label {display: flex; align-items: center; gap: 16px; font-size: 14px;}
.branch-label a {color: var(--muted); text-decoration: none;}
.branch-label > span {color: #5a5b60; font-weight: 300;}
.branch-label strong {font-weight: 500;}
.workspace-inner nav {display: flex; align-self: stretch; gap: 28px;}
.nav {background: transparent; border-radius: 0; border-bottom: 1px solid transparent; padding: 0 2px; font-size: 14px; color: var(--muted); font-weight: 400;}
.nav.active {background: transparent; color: var(--gold-soft); border-bottom-color: var(--gold);}
.nav:hover {color: var(--text);}
main {max-width: 1440px; margin: auto; padding: 48px 5% 64px;}
.page-heading {gap: 30px; align-items: flex-end; margin-bottom: 32px;}
.eyebrow {color: var(--gold); font-size: 12px; letter-spacing: .19em; font-weight: 500; margin-bottom: 18px;}
h1 {font-size: clamp(2.6rem, 4.6vw, 4.4rem); font-weight: 300; letter-spacing: -.052em; line-height: 1.1; margin-bottom: 18px; color: #fff;}
h1 em {font-weight: 300;}
h2 {font-size: 26px; font-weight: 400; letter-spacing: -.025em; line-height: 1.2;}
h3 {font-size: 17px; font-weight: 500;}
.sub {font-size: 16px; color: var(--muted); line-height: 1.65;}
.badge {font-size: 13px; border: 1px solid var(--border); border-radius: 3px; font-weight: 400; line-height: 1.5;}
.badge.gold {color: var(--gold-soft); background: #d4af3709; border-color: #d4af3738;}
.badge.gray {color: #b8b8be; background: #202125; border-color: #33343a;}
.badge.green {color: #a7d8b3; background: #1c2a22; border-color: #354e3f;}
.steps {background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 28px;}
.steps button {position: relative; background: transparent; color: var(--muted); padding: 19px 0; margin-right: 28px; border: 0; font-size: 14px; font-weight: 400;}
.steps button:last-child {margin-right: 0;}
.steps b {font-weight: 400; color: var(--dim); margin-right: 12px; font-size: 12px;}
.steps button.selected {background: transparent; color: var(--text); box-shadow: inset 0 -1px 0 var(--gold);}
.steps button.selected b {color: var(--gold);}
.client-grid {grid-template-columns: minmax(0,1.5fr) minmax(330px,1fr); gap: 36px;}
.preview-column {min-width: 0;}
.sculpture-stage {background: radial-gradient(ellipse at 50% 100%, #65502126, transparent 60%), linear-gradient(150deg,#171719,#090a0c 62%); border: 1px solid #353129; border-radius: 4px; min-height: 560px;}
.sculpture-stage:after {content: ''; position: absolute; pointer-events: none; bottom: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg,transparent,#d4af3770,transparent);}
model-viewer {background: transparent; height: 560px; max-height: none;}
.sculpture-image {height: 560px; max-height: none;}
.stage-meta {top: 23px; left: 24px; right: 24px; color: #bdbdc4; font-size: 12px; letter-spacing: .06em; align-items: center; pointer-events: none;}
.stage-meta > span:first-child {padding: 6px 9px; color: var(--gold-soft); border-color: #74643a;}
.stage-meta span span {border: 0; padding: 0;}
.stage-caption {left: 24px; bottom: 24px; font-size: 12px; color: var(--muted); pointer-events: none;}
.dot {background: var(--gold);}
.viewer-switch {right: 23px; bottom: 20px;}
.viewer-switch button {background: #101113d9; border-color: #3c3c41; color: #aeb0b7; font-size: 12px; padding: 6px 10px;}
.viewer-switch button.active {background: #29271e; color: var(--gold-soft); border-color: #74643a;}
.view-controls {gap: 6px; margin-top: 18px;}
.view-controls button {color: var(--muted); font-size: 13px; padding: 9px 12px; border-radius: 3px;}
.view-controls button.active {background: #d4af370b; color: var(--gold-soft); border-color: #d4af3738;}
.preview-note {font-size: 13px; color: var(--dim); line-height: 1.7; max-width: 620px; margin: 12px auto 0;}
.configuration-card {padding: 30px; background: var(--surface); border-color: var(--border); border-radius: 4px;}
.card-top {margin-bottom: 28px;}
.card-top .eyebrow {margin-bottom: 13px;}
.field {margin: 24px 0;}
.field-label {color: #d5d5db; font-size: 14px; font-weight: 400;}
.option {background: #d4af3705; border-color: #6b5b2c; padding: 16px;}
.option strong {font-size: 15px; font-weight: 500;}
.option small {color: var(--muted); font-size: 13px;}
.check {color: var(--gold-soft); font-size: 16px;}
.finish {background: transparent; border-color: #393a3f; color: #bdbdc4; padding: 14px; font-size: 14px;}
.finish.selected {background: #d4af3708; border-color: #998033; color: var(--text);}
.finish i {width: 32px; height: 32px; box-shadow: inset 0 0 0 1px #ffffff1a;}
.stone-swatch {background: radial-gradient(circle at 30% 25%,#e5dfd3,#827f74);}
.bronze-swatch {background: radial-gradient(circle at 30% 25%,#b89243,#583817);}
.size-row {background: var(--raised); border: 1px solid var(--border); padding: 16px;}
.size-row strong {font-size: 34px; font-weight: 300; letter-spacing: -.05em;}
.size-row strong small {color: #d5d5db; font-size: 16px;}
.size-row > span {color: var(--muted); font-size: 13px;}
.specs {border-color: var(--border); padding: 14px 0;}
.specs dt {color: var(--muted);}
.specs dd {color: #dedee3;}
.specs div {font-size: 14px; line-height: 1.6;}
.primary {background: var(--gold); color: #101011; border-color: var(--gold); padding: 14px 18px; font-size: 14px; font-weight: 550; border-radius: 4px;}
.primary:hover {background: #e1be52; border-color: #e1be52;}
.secondary {background: transparent; color: #d4d4db; border-color: #42434a; border-radius: 4px; font-size: 14px; padding: 12px 17px;}
.secondary:hover {background: #242529; border-color: #66676e;}
.text-button {color: var(--gold-soft); font-size: 14px;}
.small-note {color: var(--dim); font-size: 13px; line-height: 1.65;}
.muted {color: var(--muted); font-size: 14px; line-height: 1.7;}
.divider {background: var(--border);}
.panel {background: var(--surface); border-color: var(--border); border-radius: 4px; padding: 30px;}
.metrics {gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 36px 0;}
.metrics article {border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 24px 28px; background: transparent;}
.metrics article:first-child {padding-left: 0;}
.metrics article:last-child {border-right: 0;}
.metrics span, .metrics small {color: var(--muted);}
.metrics strong {font-size: 42px; font-weight: 300; letter-spacing: -.05em; margin: 12px 0;}
.metrics em {color: #c6c6cd; font-size: 14px; letter-spacing: 0;}
.work-grid {grid-template-columns: minmax(0,1.7fr) minmax(300px,1fr); gap: 28px;}
.order-summary img {border: 1px solid var(--border);}
.order-summary strong {font-weight: 500;}
.order-summary p {color: var(--muted); font-size: 14px;}
.gates li, .stage-form, .integration-list > div {border-color: var(--border);}
.gates li {font-size: 14px;}
.gates small {color: var(--muted); font-size: 13px;}
.gate-icon {color: #76777f;}
.gates .complete .gate-icon {color: #a7d8b3;}
.gates input, .consent-label input {accent-color: var(--gold);}
.stage-form select {background: var(--raised); color: var(--text); border-color: #42434a; padding: 12px; font-size: 14px;}
.plain-list {color: var(--muted); font-size: 14px;}
.crm-panel {background: #141516;}
.activity-list li {font-size: 14px;}
.activity-list li:before {background: var(--gold);}
.activity-list small {color: var(--muted); font-size: 13px;}
.project-intro {background: radial-gradient(ellipse at 100% 100%,#d4af3712,transparent 65%),#131416; border: 1px solid #4d4429; padding: 36px; border-radius: 4px;}
.project-intro p, .project-counter span {color: var(--muted);}
.project-counter strong {color: var(--gold); font-weight: 300; font-size: 72px;}
.flow-diagram {gap: 0; border: 1px solid var(--border); border-radius: 4px;}
.flow-diagram article {border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 24px 20px;}
.flow-diagram article:last-child {border-right: 0;}
.flow-diagram b {color: var(--gold); font-size: 13px; margin-bottom: 18px;}
.flow-diagram h3 {font-size: 15px; font-weight: 500;}
.flow-diagram p {color: var(--muted); font-size: 13px;}
.integration-list strong {font-size: 15px; font-weight: 500;}
.integration-list small {color: var(--muted); font-size: 13px;}
.integration-list .badge {font-size: 12px;}
.roadmap b {border-color: #6b5b2c; color: var(--gold-soft); font-size: 12px;}
.roadmap strong {font-weight: 500; font-size: 15px;}
.roadmap p {color: var(--muted); font-size: 14px;}
.decision-strip {background: #d4af3707; border-color: #4d4429;}
.decision-strip p {color: var(--muted); font-size: 14px;}
.reference-grid article, .review-box, .tracking-contact {background: var(--raised); border: 1px solid var(--border);}
.reference-grid small, .review-box ul, .version-card p, .payment-box p, .tracking-contact p {color: var(--muted);}
.reference-grid small {font-size: 12px;}
.upload-label {color: var(--gold-soft); font-size: 13px;}
.upload-label input {color: var(--muted); font-size: 12px;}
.upload-label input::file-selector-button {background: #2a2b2e; color: #dedee3; border: 1px solid #4d4e56; border-radius: 3px; padding: 5px 6px; font: inherit; cursor: pointer;}
.consent-label, .review-box, .review-box ul {font-size: 14px;}
.version-card {border-color: #6b5b2c; background: #d4af3705;}
.version-card strong {font-weight: 500;}
.payment-box {border-color: var(--border);}
.tracking li {color: var(--dim); font-size: 14px;}
.tracking li.done:before {color: #a7d8b3;}
.tracking li.current:before {color: var(--gold);}
.tracking li.current {color: var(--text); font-weight: 500;}
.tracking small {color: var(--muted); font-size: 13px;}
.status-copy {color: var(--gold-soft); font-size: 14px;}
.change-request {background: #d4af3709; border-color: var(--gold); color: #dedee3; font-size: 14px;}
dialog {background: var(--surface); color: var(--text); border: 1px solid #4c4530; border-radius: 4px; box-shadow: 0 20px 100px #0008; padding: 30px;}
dialog::backdrop {background: #000a; backdrop-filter: blur(6px);}
.icon-button {color: var(--muted);}
dialog textarea {background: #101113; color: var(--text); border-color: #42434a;}
dialog textarea::placeholder {color: #84848a;}
.toast {background: #24231b; color: #f2e8c2; border: 1px solid #8b7635; border-radius: 4px; font-size: 14px; box-shadow: 0 6px 25px #0007;}
.demo-strip {background: transparent; border-top: 1px solid var(--border); color: var(--dim); padding: 20px 5%; font-size: 13px;}
.demo-strip span {color: var(--gold); font-size: 11px; letter-spacing: .17em;}
footer {max-width: 1440px; margin: auto; border-color: var(--border); padding: 40px 5%; gap: 50px; color: var(--muted); display: grid; grid-template-columns: 1.6fr 1fr 1fr; font-size: 14px;}
.footer-identity p {font-size: 13px; line-height: 1.8; margin: 18px 0 0;}
.footer-links, .footer-meta {display: flex; flex-direction: column; align-items: flex-start; gap: 12px;}
.footer-links > span, .footer-meta > span {letter-spacing: .14em; font-size: 11px; color: #929299; margin-bottom: 5px;}
.footer-links a, .footer-links button {text-decoration: none; color: #c4c4cb; font-size: 13px;}
.footer-links button {padding: 0; background: none; border: 0;}
.footer-links a:hover, .footer-links button:hover {color: var(--gold-soft);}
.footer-meta p {margin: 0; font-size: 13px;}
.footer-meta small {font-size: 12px;}
@media(max-width:1100px) {
  .header .host-nav {gap: 18px;}
  .header {gap: 22px;}
  .client-grid {gap: 24px; grid-template-columns: minmax(0,1.2fr) minmax(320px,1fr);}
  .configuration-card, .panel {padding: 25px;}
  .stage-form > div {flex-direction: column;}
  .flow-diagram article {border-bottom: 1px solid var(--border);}
}
@media(max-width:900px) {
  .host-nav a:nth-child(n+3) {display: none;}
  .site-link {display: block;}
  .header {height: 72px; padding: 0 24px;}
  .workspace-inner {padding: 0 24px; gap: 20px;}
  .branch-label {gap: 10px; font-size: 13px;}
  .workspace-inner nav {gap: 22px;}
  main {padding: 36px 24px 48px;}
  .page-heading {align-items: flex-start; flex-direction: column; gap: 20px;}
  h1 {font-size: 52px;}
  model-viewer, .sculpture-image {height: 540px;}
  .sculpture-stage {min-height: 540px;}
  .stage-caption {bottom: 66px; max-width: 80%;}
  .viewer-switch {bottom: 20px;}
  .metrics article {padding: 20px;}
}
@media(max-width:720px) {
  .header {height: 68px; flex-wrap: nowrap; justify-content: space-between; gap: 15px;}
  .header .host-nav {display: none;}
  .brand {font-size: 13px; letter-spacing: .24em;}
  .site-link {font-size: 13px; padding: 9px 15px;}
  .workspace-inner {flex-direction: column; align-items: stretch; gap: 0; padding: 16px 22px 0;}
  .branch-label {font-size: 12px; margin-bottom: 12px;}
  .workspace-inner nav {width: 100%; justify-content: flex-start; gap: 32px;}
  .nav {flex: none; padding: 11px 0 15px; font-size: 14px;}
  main {padding: 32px 22px 42px;}
  h1 {font-size: clamp(2.65rem,8vw,3.4rem); line-height: 1.08;}
  h1 em {display: block;}
  .eyebrow {font-size: 11px; letter-spacing: .14em; margin-bottom: 16px;}
  .sub {font-size: 15px; max-width: 360px;}
  .page-heading {margin-bottom: 25px;}
  .steps {margin-bottom: 24px; gap: 24px;}
  .steps button {min-width: 130px; margin: 0; padding: 17px 0;}
  .steps b {margin-right: 9px;}
  .client-grid {grid-template-columns: 1fr; gap: 26px;}
  .sculpture-stage {min-height: 480px;}
  model-viewer, .sculpture-image {height: 480px;}
  .stage-meta {left: 18px; right: 18px; top: 18px; font-size: 11px;}
  .stage-caption {left: 18px; font-size: 11px; bottom: 64px;}
  .viewer-switch {right: 18px; bottom: 19px;}
  .view-controls {gap: 2px;}
  .view-controls button {font-size: 12px; padding: 8px;}
  .configuration-card, .panel {padding: 25px;}
  .metrics {grid-template-columns: 1fr 1fr; gap: 0; margin: 28px 0;}
  .metrics article, .metrics article:first-child {padding: 22px 18px; border-bottom: 1px solid var(--border);}
  .metrics article:nth-child(2n) {border-right: 0;}
  .metrics article:nth-child(n+3) {border-bottom: 0;}
  .metrics strong {font-size: 36px;}
  .work-grid, .work-side, .project-grid {grid-template-columns: 1fr;}
  .flow-diagram {grid-template-columns: 1fr 1fr;}
  .flow-diagram article {padding: 20px 16px;}
  .flow-diagram article:nth-child(2n) {border-right: 0;}
  .flow-diagram article:nth-last-child(-n+2) {border-bottom: 0;}
  .project-intro {flex-direction: column; padding: 26px; gap: 28px;}
  .project-counter strong {font-size: 64px;}
  .integration-list > div {gap: 15px;}
  .integration-list .badge {white-space: normal; text-align: center; font-size: 12px;}
  .decision-strip {align-items: flex-start; flex-direction: column; gap: 18px;}
  .decision-strip button {white-space: normal;}
  .demo-strip {padding: 22px; font-size: 12px; line-height: 1.8;}
  .demo-strip span {display: block; margin: 0 0 6px;}
  footer {grid-template-columns: 1fr 1fr; padding: 34px 22px; gap: 30px;}
  .footer-identity {grid-column: 1/-1;}
  .footer-identity p {margin-top: 12px;}
}
@media print {
  :root {color-scheme: light; --text: #111; --muted: #555; --gold: #735f17; --gold-soft: #735f17; --border: #ddd; --surface: #fff;}
  .workspace-bar, .header, .demo-strip, footer, .toast, .skip-link {display: none!important;}
  body, .panel, .project-intro, .flow-diagram article {background: #fff; color: #111;}
  h1, h2, h3 {color: #111;}
  h1 {font-size: 40px;}
  .badge, .badge.gold, .badge.gray, .badge.green {color: #333; background: #fff; border-color: #ccc;}
  .integration-list small, .roadmap p, .flow-diagram p {color: #555;}
  .project-intro {border-color: #ddd;}
  .project-counter strong {font-size: 56px; color: #735f17;}
  .flow-diagram {grid-template-columns: repeat(3,1fr);}
}