/* FIELD — light and editorial: a big photo leads, a serif headline, lots of air. For shops with great photography
   and traditional work (inset doors, furniture-grade finishes). Rules: TASTE.md (one accent: oxblood). */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Archivo:wght@400;500;600;700&family=Azeret+Mono:wght@400;500&display=swap");

:root {
  --paper: #fbfaf8;
  --sand: #f1eee9;
  --ink: #1d1c1a;
  --muted: #5d5953;
  --accent: #7b2d26;
  --cta: #1d1c1a;
  --cta-ink: #fbfaf8;
  --line: #e4e0d9;
  --line-strong: #c8c2b8;
  --field: #ffffff;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;
  --head-weight: 600;
  --head-track: -0.01em;
  --radius-img: 2px;
  --radius-btn: 999px;
  --radius-card: 4px;
  --radius-field: 4px;
  --wood: #c49a6c;
  --finish: #f3efe8;
}

h1, h2, h3 { font-variation-settings: "opsz" 72; }
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; }
.brand { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
.eyebrow { color: var(--accent); letter-spacing: .18em; }
.lede { font-size: 1.2rem; color: #3f3c37; max-width: 36ch; }
.btn { padding: 14px 26px; }
.btn:hover { filter: none; background: #34322e; }
.btn-ghost { border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.trust b { color: var(--accent); }

/* the photo leads: full width above the words on phones, the larger half on wide screens */
.hero { padding-top: 24px; }
.hero-grid { grid-template-columns: .9fr 1.25fr; align-items: end; }
.hero-mosaic { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 5 / 4; }
.hero-mosaic .m0 { grid-row: auto; }
.hero-mosaic img:not(.m0) { display: none; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-mosaic { order: -1; aspect-ratio: 4 / 3; } }

.section { padding: clamp(56px, 8vw, 120px) 0; }
.section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.section-head h2::after { display: none; }
.section-head p { font-size: 1.08rem; }
.more { color: var(--accent); }
.rooms { gap: 28px; }
.room h3 { font-family: var(--font-head); font-size: 1.35rem; }
.work-grid { gap: 32px; }
.work figcaption b { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.steps li { border-top: 1px solid var(--ink); }
.steps .num, .proc-steps .num { color: var(--accent); }
.proc-steps h3 { font-family: var(--font-head); }
.review p { font-family: var(--font-head); font-size: 1.2rem; font-style: italic; }
.youget { background: transparent; border: 1px solid var(--line-strong); }
.status-pill { background: var(--ink); color: var(--paper); }
.status-pill span { background: var(--paper); box-shadow: none; width: 7px; height: 7px; }
.tracker .done .dot { background: var(--ink); border-color: var(--ink); }
.tracker .now .dot { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.concept-bar { background: var(--accent); }