:root{
  --cream:#F4EDE1; --sand:#EBE2D2; --ink:#2A2521; --terra:#C0674A;
  --muted:#6d6459; --line:#e2d7c6; --paper:#fffdf9;
  --pad:56px; --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the sticky header used to swallow the anchor target, so #start landed on the photos below it */
:target,#start,#how,#different,#cost,#projects,#architects{scroll-margin-top:86px}
body{background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em,i{font-style:italic}

/* type */
h1,h2,.wm,.stepn{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144;font-weight:400}
/* Sub-headlines are Inter, not Fraunces. Fraunces is a display face here and reads poorly small. */
h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.15px}
.kick{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);font-weight:600}
.kick.light{color:#e0a68e}
.lede{font-size:17px;line-height:1.62;color:#5f574d;font-weight:300;max-width:620px;margin-inline:auto}
.lede.left{margin-inline:0;margin-top:16px}
.finemark{font-size:13px;color:#8a8075;margin-top:12px;text-align:center}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);background:rgba(244,237,225,.88);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.nav.stuck{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.badge{width:34px;height:34px;border-radius:9px;background:var(--terra);color:var(--cream);
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;display:grid;place-items:center;font-size:21px}
.badge.sm{width:26px;height:26px;font-size:16px;border-radius:7px}
.wm{font-size:22px;font-weight:600;letter-spacing:-.4px;font-variation-settings:'opsz' 40}
.wm.sm{font-size:16px}
.navl{display:flex;gap:26px;font-size:13.5px;color:var(--muted);font-weight:450}
.navl a:hover{color:var(--ink)}

/* buttons */
.btn{background:var(--terra);color:#fff;padding:15px 26px;border-radius:999px;font-size:15px;font-weight:600;
  display:inline-block;border:0;cursor:pointer;transition:transform .16s ease,background .16s ease}
.btn:hover{background:#a9573c;transform:translateY(-1px)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-lg{padding:17px 32px;font-size:16px}

/* hero */
.hero{text-align:center;padding:72px var(--pad) 0}
.hero h1{font-size:clamp(38px,5.4vw,70px);line-height:1.03;margin-top:20px}
.hero h1 span{display:block}
.hero h1 em{display:block;color:var(--terra)}
.hero .lede{margin-top:22px}

/* survey */
.startwrap{padding:28px var(--pad) 54px;max-width:720px;margin-inline:auto}
.stepmeta{font-size:11.5px;color:#8a8075;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* bands + sections */
/* Every source photo is portrait. A wide landscape band cropped and upscaled them, which is
   what made the hero image look low quality. Portrait frames use them at their real aspect. */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 var(--pad);max-width:var(--maxw);margin-inline:auto}
.strip figure{aspect-ratio:3/4;border-radius:14px;overflow:hidden}
.section{padding:66px var(--pad);max-width:var(--maxw);margin-inline:auto}
.section.tight{padding-bottom:34px}
.section.dark{background:var(--ink);color:var(--cream);max-width:none}
.section.sand{background:var(--sand);max-width:none}
.section.dark .lede,.section.dark p{color:#b7aa99}
.big{font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin:14px 0 6px}
.big em{color:var(--terra)}
.big.ink em{color:var(--terra)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
.stepn{font-size:34px;font-style:italic;font-weight:600;color:var(--terra);font-variation-settings:'opsz' 40}
.steps h3{font-size:18.5px;font-weight:600;margin:10px 0 8px;letter-spacing:-.15px}
.steps p{font-size:14.5px;line-height:1.6;color:var(--muted)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.vs-col{border-radius:16px;padding:26px 28px}
.vs-them{background:rgba(244,237,225,.06);border:1px solid rgba(244,237,225,.14)}
.vs-us{background:var(--terra);color:#fff}
.vs-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:16px;opacity:.85}
.vs-col ul{list-style:none}
.vs-col li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;padding:9px 0;border-top:1px solid rgba(255,255,255,.12)}
.vs-col li:first-child{border-top:0}
.vs-them li{color:#a89c8d}
.vs-col .x,.vs-col .c{flex:0 0 17px;height:17px;border-radius:99px;display:grid;place-items:center;font-size:9px;margin-top:2px}
.vs-col .x{background:rgba(244,237,225,.14);color:#c9bcab}
.vs-col .c{background:rgba(255,255,255,.22);color:#fff}
.btnwrap{margin-top:26px}
.cols h3{font-size:17.5px;font-weight:600;margin-bottom:8px}
.cols p{font-size:14.5px;line-height:1.62}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.costfig{height:400px;border-radius:16px;overflow:hidden}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.grid figure{height:230px;border-radius:12px;overflow:hidden}
.grid figure img{transition:transform .5s ease}
.grid figure:hover img{transform:scale(1.04)}

.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin-top:22px}
.faq h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
.faq p{font-size:14.5px;line-height:1.62;color:var(--muted)}

.final{background:var(--sand);text-align:center;padding:74px var(--pad)}
.final .big{margin-bottom:24px}
.foot{background:var(--ink);color:var(--sand);padding:34px var(--pad);display:flex;
  justify-content:space-between;align-items:center;font-size:12.5px}
.footnote{opacity:.65}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  :root{--pad:22px}
  .navl{display:none}
  .qbody,.qbody.stack,.qbody.fields{grid-template-columns:1fr 1fr}
  .qbody.solo{grid-template-columns:1fr}
  .qbody input.fld{grid-column:1/-1}
  .go{grid-column:1/-1}
  .steps,.cols,.split,.grid,.faq{grid-template-columns:1fr;gap:24px}
  .costfig{height:260px}
  .band{height:220px}
  .grid figure{height:200px}
  .start-head{flex-direction:column;align-items:flex-start;gap:6px}
  .hero{padding-top:44px}
}raw

/* ============ Form component, taken verbatim from the lander ============
   Extracted with a brace-matching parser AND with comments stripped first. Two earlier attempts
   failed: a regex that could not span multiline rules, then a parser that let preceding comments
   ride along in the selector so ".opt" never matched. The main .opt block carries display:flex
   and width:100%, which is what makes the options full-width rows instead of inline boxes. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter',system-ui,sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.64px; text-transform: uppercase;
  padding: 15px 26px; border-radius: 8px;
  background: #C0674A; color: #fff;
  border: 1px solid #C0674A;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px -8px rgba(192, 103, 74, 0.5);
}
.btn:hover { background: #A9573C; border-color: #A9573C; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .16s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.card {
  max-width: 660px; margin: 0 auto; text-align: left;
  background: #FFFCF7;
  border: 1px solid rgba(42,37,33,.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(42, 37, 33, 0.28), 0 2px 6px -3px rgba(42, 37, 33, 0.1);
}
.card-strip {
  background: #EBE2D2;
  text-align: center;
  font-family: 'Fraunces',Georgia,serif;
  font-size: clamp(21px, 3vw, 30px);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2A2521;
  padding: 22px 18px 18px;
  border-bottom: 2px solid #C0674A;
}
.card-body { padding: 30px 30px 32px; }
.qpill {
  display: inline-block;
  background: rgba(192,103,74,.10);
  color: #C0674A;
  font-family: 'Inter',system-ui,sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.quiz-q {
  font-family: 'Inter',system-ui,sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 26px);
  line-height: 1.2;
  color: #2A2521;
  margin-bottom: 22px;
  letter-spacing: -0.2px;
}
.opt {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 16px;
  background: #FFFCF7; color: #2A2521;
  border: 1px solid #C0674A;
  border-radius: 16px;
  box-shadow: rgba(192, 103, 74, 0.16) 0 3px 0 0;
  padding: 16px 18px; margin-bottom: 14px;
  font-family: 'Inter',system-ui,sans-serif; font-size: 16px; font-weight: 600;
  transition: box-shadow .16s ease, transform .12s ease, background .16s ease;
}
.opt:hover { background: rgba(192,103,74,.10); box-shadow: rgba(192, 103, 74, 0.22) 0 5px 0 0; transform: translateY(-1px); }
.opt:active { box-shadow: rgba(192, 103, 74, 0.16) 0 1px 0 0; transform: translateY(2px); }
.opt .badge {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(192,103,74,.10); color: #C0674A;
  font-family: 'Inter',system-ui,sans-serif; font-weight: 800; font-size: 14px;
  border-radius: 9px;
}
.opt .opt-label { flex: 1; }
.opt .chev { color: #8a8075; flex-shrink: 0; transition: color .16s ease, transform .16s ease; }
.opt:hover .chev { color: #C0674A; transform: translateX(2px); }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.q-bars { display: flex; gap: 5px; }
.q-bars span { width: 22px; height: 4px; border-radius: 2px; background: rgba(42,37,33,.14); transition: background .3s ease; }
.q-bars span.on { background: #C0674A; }
.field { margin-bottom: 15px; }
.field label { font-family: 'Inter',system-ui,sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8075; display: block; margin-bottom: 7px; }
.field input {
  width: 100%; background: #FFFCF7; color: #2A2521;
  border: 1px solid rgba(42,37,33,.14); border-radius: 10px;
  padding: 14px 15px; font-size: 16px; font-family: 'Inter',system-ui,sans-serif; transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus { outline: none; border-color: #C0674A; box-shadow: 0 0 0 3px rgba(192,103,74,.10); }
.field input::placeholder { color: #b7afb1; }
.submit { width: 100%; margin-top: 6px; }
.submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.back { font-family: 'Inter',system-ui,sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #8a8075; background: transparent; border: none; }
.back:hover { color: #2A2521; }
.disclaimer { font-family: 'Inter',system-ui,sans-serif; font-size: 11.5px; color: #8a8075; text-align: center; margin-top: 16px; }
.book-head { text-align: center; margin-bottom: 8px; }
.book-head .check { width: 52px; height: 52px; border-radius: 50%; background: rgba(46, 160, 100, 0.14); color: #2ea064; display: grid; place-items: center; margin: 0 auto 16px; font-size: 24px; }
.book-head h3 { font-family: 'Fraunces',Georgia,serif; font-size: 26px; color: #2A2521; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.book-head p { color: #5f574d; max-width: 44ch; margin: 0 auto; font-size: 14.5px; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(42, 37, 33,.55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 46px 16px; overflow-y: auto; animation: fadeIn .2s ease; }
.modal-inner { position: relative; width: 100%; max-width: 660px; margin: auto; animation: popIn .22s cubic-bezier(.2,.8,.3,1); }
.modal-x { position: absolute; top: -36px; right: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; color: #2A2521; font-size: 22px; line-height: 1; display: grid; place-items: center; z-index: 2; box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); }
.modal-x:hover { background: #fff; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
.opt.on { border-color:#C0674A; }
h1, h2, .sec-title, .hero-sub, .card-strip { font-variation-settings:'opsz' 144; }
.card-strip { font-family: 'Inter',system-ui,sans-serif; font-weight: 700; font-size: clamp(13px,1.7vw,15px); letter-spacing: .16em; }
.book-head h3 { font-family: 'Inter',system-ui,sans-serif; font-weight: 600; text-transform: none; letter-spacing: -.15px; }
.modal-overlay[hidden] { display: none; }

/* site-specific */
.startwrap{ max-width:660px; margin-inline:auto; padding:28px var(--pad) 54px }
.card{ box-shadow:0 18px 50px -34px rgba(42,37,33,.45) }
.modal-overlay[hidden]{ display:none }
.hero h1{ font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.028em; line-height:1.03 }
.hero h1 em{ font-style:normal; color:var(--terra) }
.big{ font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.026em; line-height:1.1 }
.big em{ font-style:normal; color:var(--terra) }
h3{ font-family:'Inter',system-ui,sans-serif; font-weight:600; letter-spacing:-.15px }
@media (max-width:760px){
  :root{ --pad:20px }
  .navl{ display:none }
  .hero{ padding:36px var(--pad) 0 }
  .hero h1{ font-size:clamp(28px,8.4vw,38px) }
  .card-body{ padding:22px 18px 24px }
  .quiz-q{ font-size:20px }
  .strip{ grid-template-columns:1fr 1fr; gap:8px }
  .section{ padding:44px var(--pad) }
  .big{ font-size:clamp(24px,7vw,30px) }
  .steps,.cols,.split,.grid,.faq,.versus{ grid-template-columns:1fr !important; gap:22px }
  .costfig{ height:230px } .grid figure{ height:200px }
  .foot{ flex-direction:column; gap:12px; text-align:center }
  .modal-overlay{ padding:16px 12px } .modal-x{ top:-34px }
}

/* inline validation: a blocked submit has to say why, and say it where they are looking */
.field { position: relative; }
.field input.bad { border-color: #C0674A !important; box-shadow: 0 0 0 3px rgba(192,103,74,.12) !important; }
.field .err { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #A9512F; font-weight: 500; }

/* quiz progress bars. Named .qb because .b1/.b2 are the two-line brand logo classes and the
   old markup reused them, so the bars inherited nothing and rendered flat. */
#qbars { display: flex; gap: 6px; align-items: center; }
#qbars .qb { display: block; width: 26px; height: 4px; border-radius: 999px; background: #E2D8C9; transition: background .35s ease; }
#qbars .qb.on { background: #C0674A; }