/* /new-build/ — Flintwick Homes palette + page extras. Shared layout lives in /assets/css/demo.css. */
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-normal-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
.nb-page {
  --pg-bg: #f3efe8; --pg-ink: #1e2a2e; --bg: #1e2a2e; --ink: #1e2a2e;
  --bar-bg: #1e2a2e; --bar-fg: #f3efe8; --tag: #c99a5b;
  --btn-bg: #a8763e; --btn-fg: #fff; --accent: #a8763e; --card-bg: #faf7f2;
  --order-bg: #1e2a2e; --order-fg: #f3efe8;
  --f-display: "Instrument Serif", Georgia, serif; --h-weight: 400;
  --f-body: "Instrument Sans", system-ui, sans-serif; --f-mono: "Instrument Sans", system-ui, sans-serif;
}
.nb-page h1, .nb-page h2, .nb-page h3 { letter-spacing: -.015em; line-height: 1.02; }
.nb-page h1 em, .nb-page h2 em { font-style: italic; color: #8a5f2f; }
.nb-page .dm-bar__name { font-weight: 400; font-size: 1.35rem; }
.nb-page .dm-kicker, .nb-page .dm-eyebrow { color: #8a5f2f; }
.dm-on .dm-page.nb-page .dm-stage { color: var(--pg-ink); }
.dm-on .dm-page.nb-page .dm-stage::before { display: none; }
/* soft vignette so the cards sit on the footage */
.dm-on .dm-page.nb-page .dm-obj::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .3)); }
.dm-on .dm-page.nb-page .dm-step h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }
.dm-on .dm-page.nb-page .dm-step p { color: #45514f; font-size: 1.05rem; }
.dm-on .dm-page.nb-page .dm-intro h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.dm-on .dm-page.nb-page .dm-intro p:last-child { color: #45514f; }
.dm-on .dm-page.nb-page .dm-cue { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.dm-on .dm-page.nb-page .dm-load { color: #fff; }
/* step cards: solid warm cream, set in from the edges (about where the house isn't) */
.dm-on .dm-page.nb-page .dm-step { width: min(31rem, 34vw); padding: 1.4rem 1.5rem; background: rgba(244, 236, 220, .94); }
.dm-on .dm-page.nb-page .dm-step[data-side="left"] { left: 5vw; }
.dm-on .dm-page.nb-page .dm-step[data-side="right"] { right: 5vw; }
/* the opening card is almost clear: light text with a soft shadow so it reads over the footage and the dark stage */
.dm-on .dm-page.nb-page .dm-intro {
  background: color-mix(in srgb, var(--card-bg) 6%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
/* the small top line sits on a dark pill: thin light text alone got lost over the bright grass */
.dm-on .dm-page.nb-page .dm-intro .dm-eyebrow {
  display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: rgba(20, 30, 32, .62);
  color: #f6dcb0; font-size: .8rem; text-shadow: none;
}
.dm-on .dm-page.nb-page .dm-intro h1 em { color: #f0cf9c; }
.dm-on .dm-page.nb-page .dm-intro p:last-child { color: rgba(255, 255, 255, .92); }
.nb-page .dm-kicker, .nb-page .dm-eyebrow { font-weight: 600; letter-spacing: .16em; }
/* the finale card sits low so the finished house stays in view */
/* same almost-clear look as the opening card; sized to its content (top: auto + height: auto, never stretched between top and bottom) */
.dm-on .dm-page.nb-page .dm-final {
  top: auto; bottom: 5svh; height: auto; translate: -50% 0; width: min(32rem, 100% - 32px); padding: 1.2rem 1.6rem 1.3rem;
  background: color-mix(in srgb, var(--card-bg) 6%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.dm-on .dm-page.nb-page .dm-final h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.dm-on .dm-page.nb-page .dm-final p { margin: .4rem 0 .9rem; color: rgba(255, 255, 255, .92); }
.dm-on .dm-page.nb-page .dm-final .dm-btn { min-height: 44px; text-shadow: none; }

/* The house */
.nb-house { background: var(--pg-bg); }
.nb-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0 0 3rem; padding: 0; }
.nb-specs li { padding: 1.4rem 1.5rem; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .3); }
.nb-specs strong { display: block; font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-display); }
.nb-specs span { font: 500 .75rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.nb-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.nb-split img { display: block; width: 100%; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .4); }
.nb-split h3 { font-size: 2.4rem; margin-bottom: 1.2rem; }
.nb-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 1rem; }
.nb-steps li { counter-increment: s; position: relative; padding-left: 3rem; color: #45514f; }
.nb-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .1rem; font: 500 .8rem var(--f-mono); color: #8a5f2f; }
.nb-steps b { color: var(--pg-ink); }
.nb-enquire { background: var(--pg-bg); padding-top: 0; }
.nb-page .dm-order .dm-btn { --btn-bg: #c99a5b; --btn-fg: #1e2a2e; }
@media (max-width: 900px) { .nb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) {
  .dm-on .dm-page.nb-page .dm-final { bottom: 1rem; }
  .dm-on .dm-page.nb-page .dm-step, .dm-on .dm-page.nb-page .dm-step[data-side] { left: 16px; right: 16px; width: auto; }
}