:root {
  --flat-ink: #153f36;
  --flat-paper: #f8f4ec;
  --flat-soft: #eee6d8;
  --flat-accent: #d8875b;
}

.flat-page { background: var(--flat-paper); color: #173f3b; }
.flat-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.flat-hero { padding: 42px 0 48px; background: #f1eadf; }
.flat-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 470px); gap: clamp(34px, 6vw, 76px); align-items: center; }
.flat-hero__copy { max-width: 700px; }
.flat-hero h1, .flat-page h2, .flat-page h3 { color: var(--flat-ink); }
.flat-hero h1 { font: 700 clamp(42px, 4.7vw, 64px)/1.04 Fraunces, Georgia, serif; letter-spacing: -.04em; margin: 12px 0 22px; max-width: 720px; }
.flat-hero p { font-size: 19px; line-height: 1.65; max-width: 660px; }
.flat-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.flat-hero__photo { width: min(100%, 510px); margin: 0; justify-self: center; }
.flat-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.flat-hero__photo figcaption { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #5c665d; }
.flat-section { padding: clamp(56px, 7vw, 84px) 0; }
.flat-section--tint { background: #eee6d8; }
.flat-section--deep { background: var(--flat-ink); color: #edf0e8; }
.flat-section--deep h2, .flat-section--deep h3, .flat-section--deep .eyebrow { color: #fffdf8; }
.flat-section__intro { max-width: 800px; margin-bottom: 36px; }
.flat-section h2 { font: 700 clamp(32px, 3.8vw, 50px)/1.07 Fraunces, Georgia, serif; letter-spacing: -.035em; margin: 10px 0 16px; }
.flat-section__intro > p:last-child { font-size: 18px; line-height: 1.65; }
.flat-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.flat-example { display: flex; flex-direction: column; margin: 0; background: #fffdf8; border: 1px solid #e1d6c5; box-shadow: 0 12px 24px rgba(29, 61, 51, .055); overflow: hidden; }
.flat-example__media { display: grid; place-items: center; height: 380px; background: #fff; overflow: hidden; }
.flat-example__media img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: contain; object-position: center; }
.flat-example__body { display: flex; flex: 1; flex-direction: column; padding: 20px 21px 22px; }
.flat-example h3 { font: 700 23px/1.15 Fraunces, Georgia, serif; margin: 0 0 9px; }
.flat-example p { margin: 0; line-height: 1.55; }
.flat-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.flat-decision { padding: 25px; border: 1px solid rgba(255,255,255,.27); }
.flat-decision strong { display: block; margin-bottom: 9px; color: #f3b08b; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; }
.flat-decision p { line-height: 1.6; margin: 0; }
.flat-structure { display: grid; grid-template-columns: minmax(250px, .83fr) minmax(0, 1.17fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.flat-concept { margin: 0; overflow: hidden; background: #fffdf8; border: 1px solid #dfd2bf; box-shadow: 0 14px 30px rgba(29, 61, 51, .07); }
.flat-concept img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.flat-concept figcaption { padding: 13px 15px 14px; color: #43574d; font-size: 13px; line-height: 1.45; }
.flat-concept--structure { align-self: start; }
.flat-panel-map { padding: 26px; background: #fffdf8; border: 1px solid #dfd2bf; }
.flat-panel-map__visual { display: grid; grid-template-columns: 1fr 1.55fr 1fr; grid-template-rows: 58px 178px 58px; gap: 8px; color: var(--flat-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.flat-panel-map__visual span { display: grid; place-items: center; padding: 8px; background: #e7efe8; border: 1px solid #b8c8bb; }
.flat-panel-map__visual .flat-top { grid-column: 1 / -1; background: #f7e5d8; border-color: #e5b798; }
.flat-panel-map__visual .flat-front { background: #d5e4d7; }
.flat-panel-map__visual .flat-base { grid-column: 1 / -1; background: #f0eadf; }
.flat-panel-map p { font-size: 14px; line-height: 1.55; margin: 19px 0 0; color: #43574d; }
.flat-structure__copy p { font-size: 17px; line-height: 1.7; }
.flat-structure__copy ul, .flat-spec-list { padding-left: 20px; line-height: 1.7; }
.flat-structure__copy li { margin-bottom: 8px; }
.flat-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.flat-option { background: #fffdf8; border: 1px solid #e1d6c5; padding: 25px; }
.flat-option h3 { font: 700 24px/1.1 Fraunces, Georgia, serif; margin: 0 0 12px; }
.flat-option p { margin: 0; line-height: 1.62; }
.flat-concept--customization { width: min(100%, 680px); margin: 28px auto 0; }
.flat-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .84fr); gap: clamp(30px, 6vw, 80px); align-items: start; }
.flat-brief__checklist { background: #fffdf8; padding: clamp(24px, 4vw, 42px); border: 1px solid #dfd2bf; }
.flat-brief__checklist ol { margin: 0; padding-left: 24px; }
.flat-brief__checklist li { padding: 8px 0; line-height: 1.55; }
.flat-brief__note { border-left: 4px solid var(--flat-accent); padding: 23px 25px; background: #f7efe2; }
.flat-brief__note p { margin: 0; line-height: 1.65; }
.flat-review-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
.flat-review-steps { counter-reset: review; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.flat-review-step { position: relative; padding: 23px; border-top: 3px solid var(--flat-accent); background: #fffdf8; }
.flat-review-step::before { counter-increment: review; content: "0" counter(review); display: block; color: var(--flat-accent); font-weight: 700; letter-spacing: .1em; margin-bottom: 20px; }
.flat-review-step h3 { font: 700 23px/1.1 Fraunces, Georgia, serif; margin: 0 0 10px; }
.flat-review-step p { margin: 0; line-height: 1.55; }
.flat-cta { padding: clamp(56px, 8vw, 98px) 0; background: #dce9df; }
.flat-cta__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; padding: clamp(28px, 5vw, 56px); background: var(--flat-ink); color: #fffdf8; }
.flat-cta h2 { color: #fffdf8; margin: 0 0 12px; }
.flat-cta p { margin: 0; max-width: 670px; font-size: 18px; line-height: 1.62; }
.flat-cta .button { white-space: nowrap; background: #f3b08b; color: #153f36; }
.flat-related { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 12px 22px; }
.flat-related a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .flat-hero__grid, .flat-structure, .flat-brief, .flat-cta__panel, .flat-review-layout { grid-template-columns: 1fr; }
  .flat-hero__photo { width: min(100%, 420px); justify-self: start; }
  .flat-examples, .flat-decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flat-review-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .flat-wrap { width: min(1180px, calc(100% - 28px)); }
  .flat-hero { padding-top: 44px; }
  .flat-hero h1 { font-size: clamp(40px, 13vw, 57px); }
  .flat-hero__photo { width: min(100%, 360px); margin-inline: auto; }
  .flat-example__media { height: 310px; }
  .flat-examples, .flat-decision-grid, .flat-option-grid, .flat-review-steps { grid-template-columns: 1fr; }
  .flat-hero p, .flat-section__intro > p:last-child, .flat-structure__copy p { font-size: 16px; }
  .flat-cta .button { width: 100%; text-align: center; }
}