:root {
        --ink: #10263d;
        --blue: #175b97;
        --sky: #e4f1f6;
        --sand: #f7f2ea;
        --clay: #cf634a;
        /* clay is 3.79:1 on white, which fails WCAG AA for small text.
           --clay-text is the same hue darkened until it clears 4.5:1 on every
           background we use (white 5.11, sand 4.59, areas 4.69). Shapes,
           borders, and large decorative fills keep --clay. */
        --clay-text: #ae533e;
        --line: #dbe2df;
        --white: #fffdfa;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--white); font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
      a { color: inherit; text-decoration: none; }
      button, input, select { font: inherit; }
      .shell { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
      .nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
      .mark { display: block; width: 292px; flex: 0 0 auto; }
      .mark img { display: block; width: 100%; height: auto; }
      .nav-links { display: flex; gap: 28px; align-items: center; font-size: .93rem; font-weight: 650; }
      .nav-links a:not(.button) { color: #496073; }
      .button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 21px; border: 0; border-radius: 6px; background: var(--blue); color: white; font-weight: 750; cursor: pointer; transition: transform .2s, background .2s, opacity .2s; }
      .button:hover { transform: translateY(-2px); background: #0f4c80; }
      .button:focus-visible, .choice:focus-visible, .area:focus-visible, .nav a:focus-visible { outline: 3px solid #f3c567; outline-offset: 3px; }
      .button:disabled { cursor: not-allowed; opacity: .46; transform: none; }
      .button.ghost { color: var(--blue); background: transparent; border: 1px solid #a6c2d2; }
      .hero { position: relative; padding: 52px 0; background: linear-gradient(118deg, var(--sand) 0 61%, var(--sky) 61%); overflow: hidden; }
      .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 58px; }
      .eyebrow { margin: 0 0 17px; color: var(--clay-text); font-size: .73rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
      h1, h2, h3 { margin: 0; letter-spacing: 0; line-height: 1.02; }
      h1 { max-width: 650px; font-size: 5.65rem; }
      h1 em { color: var(--blue); font-style: normal; }
      .hero-copy { max-width: 530px; margin: 25px 0 30px; color: #425b68; font-size: 1.13rem; }
      .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
      .microcopy { margin: 17px 0 0; color: #606f77; font-size: .82rem; }
      .art { position: relative; min-height: 474px; }
      .hero-photo { position: absolute; z-index: 3; right: 6%; bottom: 0; width: min(390px, 88%); height: 460px; object-fit: cover; object-position: center 25%; border-radius: 190px 190px 6px 6px; box-shadow: 0 20px 26px rgba(26, 64, 79, .18); }
      .sun { position: absolute; top: 4px; right: 5%; width: 100px; height: 100px; border-radius: 50%; background: #f3c567; }
      .hill { position: absolute; right: -10%; bottom: 0; width: 108%; height: 210px; border-radius: 100% 0 0 0; background: #9ec7c4; transform: rotate(-5deg); }
      .hill.back { right: 28%; bottom: 52px; width: 85%; height: 138px; background: #bfd8c5; transform: rotate(6deg); }
      .proof { background: #fff; border-bottom: 1px solid var(--line); }
      .proof-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); padding-block: 0; }
      .proof-item { min-width: 0; padding: 28px 26px; border-left: 1px solid var(--line); }
      .proof-item:first-child { padding-left: 0; border-left: 0; }
      .proof-item p { margin: 4px 0 0; color: #506470; font-size: .91rem; line-height: 1.45; }
      .proof-item strong { display: block; color: var(--blue); font-size: .73rem; letter-spacing: .11em; text-transform: uppercase; }
      .proof-intro p { max-width: 265px; }
      .section { position: relative; padding: 105px 0; overflow: hidden; }
      .section > .shell, .quiz-wrap > .shell { position: relative; z-index: 2; }
      .reveal-item { transform: none; opacity: 1; }
      .motion-ready .reveal-item { transform: translateY(32px); opacity: 0; transition: transform .85s cubic-bezier(.2,.75,.2,1), opacity .75s ease; }
      .motion-ready .is-visible .reveal-item { transform: translateY(0); opacity: 1; }
      .motion-ready .reveal-item:nth-child(2) { transition-delay: .1s; }
      .motion-ready .reveal-item:nth-child(3) { transition-delay: .18s; }
      .section-layers { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
      .section-layer { position: absolute; display: block; opacity: 0; transform: translate3d(0, -75px, 0); transition: transform 1.25s cubic-bezier(.2,.75,.2,1), opacity 1s ease; }
      .is-visible .section-layer { opacity: 1; transform: translate3d(0, 0, 0); }
      .areas .layer-blue { top: -105px; right: -7%; width: 42%; height: 260px; background: rgba(23,91,151,.11); clip-path: polygon(24% 0,100% 0,100% 100%,0 65%); }
      .areas .layer-clay { top: -36px; right: 8%; width: 32%; height: 230px; background: rgba(207,99,74,.13); clip-path: polygon(34% 0,100% 23%,77% 100%,0 72%); transition-delay: .1s; }
      .areas .layer-gold { right: 31%; bottom: -70px; width: 230px; height: 230px; border-radius: 50%; background: rgba(243,197,103,.2); transition-delay: .2s; }
      .process-section .layer-blue { left: -8%; bottom: -120px; width: 54%; height: 280px; background: rgba(23,91,151,.1); clip-path: polygon(0 20%,100% 0,84% 100%,0 100%); }
      .process-section .layer-clay { right: -6%; top: 22px; width: 31%; height: 250px; background: rgba(207,99,74,.11); clip-path: polygon(20% 0,100% 0,100% 84%,0 100%); transition-delay: .12s; }
      .process-section .layer-gold { right: 14%; top: 80px; width: 150px; height: 150px; border-radius: 50%; background: rgba(243,197,103,.22); transition-delay: .22s; }
      .section-header { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 44px; }
      h2 { font-size: 4rem; max-width: 680px; }
      .section-header p { max-width: 365px; margin: 0; color: #536772; }
      .areas { background: #f2f6f4; }
      .area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
      .area { min-height: 190px; padding: 24px; overflow: hidden; position: relative; background: white; border: 1px solid #d7e3df; border-radius: 8px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; }
      .area::after { content: ""; position: absolute; right: -34px; bottom: -42px; width: 105px; height: 105px; border-radius: 50%; background: var(--sky); transition: transform .25s; }
      .area:hover { transform: translateY(-4px); border-color: #a8c9d6; box-shadow: 0 14px 30px rgba(16, 38, 61, .08); }
      .area:hover::after { transform: scale(1.14); }
      .area b { position: relative; z-index: 1; font-size: 1.42rem; letter-spacing: 0; }
      .area-places { position: relative; z-index: 1; display: block; margin-top: 9px; max-width: 245px; color: #60737c; font-size: .85rem; line-height: 1.45; }
      .area-cta { position: relative; z-index: 1; display: block; margin-top: auto; padding-top: 21px; color: var(--clay-text); font-size: .81rem; font-weight: 780; }
      .process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
      .step { position: relative; min-height: 245px; padding: 30px 28px; background: var(--sand); border-top: 4px solid #b8d4dd; border-radius: 0 0 8px 8px; }
      .step-number { display: block; margin-bottom: 32px; color: #96c2cf; font-size: 3rem; font-weight: 850; line-height: 1; letter-spacing: 0; }
      .step h3 { font-size: 1.35rem; margin-bottom: 12px; }
      .step p { margin: 0; color: #5d6b75; }
      .horizon-break { position: relative; height: clamp(260px, 34vw, 470px); overflow: hidden; background: var(--sand); }
      .horizon-break img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: center; transform: scale(1.04); will-change: transform; }
      .horizon-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,253,250,.08), rgba(16,38,61,.06)); pointer-events: none; }
      .horizon-caption { position: absolute; z-index: 2; left: max(32px, calc((100% - 1116px) / 2)); top: 50%; max-width: 430px; translate: 0 -50%; padding: 22px 26px; background: rgba(255,253,250,.88); border-left: 5px solid var(--clay); backdrop-filter: blur(8px); }
      .horizon-caption p { margin: 0; color: var(--blue); font-size: .73rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
      .horizon-caption strong { display: block; margin-top: 8px; font-size: 2.7rem; line-height: 1; letter-spacing: 0; }
      .quiz-wrap { position: relative; padding: 86px 0; overflow: hidden; background: var(--ink); color: white; }
      .quiz-wrap .layer-blue { left: -9%; top: -75px; width: 38%; height: 250px; background: rgba(78,157,224,.12); clip-path: polygon(0 0,100% 28%,72% 100%,0 82%); }
      .quiz-wrap .layer-clay { right: -7%; bottom: -90px; width: 42%; height: 270px; background: rgba(207,99,74,.2); clip-path: polygon(18% 0,100% 30%,100% 100%,0 100%); transition-delay: .1s; }
      .quiz-wrap .layer-gold { right: 18%; bottom: 25px; width: 120px; height: 120px; border-radius: 50%; background: rgba(243,197,103,.16); transition-delay: .2s; }
      .quiz-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: 70px; align-items: start; }
      .quiz-wrap .eyebrow { color: #f1a48d; }
      .quiz-wrap h2 { color: #fffdf7; }
      .quiz-intro { color: #c7d8e1; max-width: 390px; }
      .quiz-note { color: #99b3c0; font-size: .83rem; }
      .quiz { padding: 29px; background: #fffdf9; color: var(--ink); border-radius: 5px; box-shadow: 12px 12px 0 #224966; }
      .step-count { margin: 0 0 9px; color: #606f77; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
      .progress { display: flex; gap: 7px; margin-bottom: 25px; }
      .progress span { display: block; height: 4px; flex: 1; background: #d8e2e2; border-radius: 2px; transition: background-color .3s ease; }
      .progress span.active { background: var(--clay); }
      .question { display: none; } .question.active { display: block; }
      .question-label { display: block; margin-bottom: 16px; font-size: 1.35rem; font-weight: 790; letter-spacing: 0; }
      .choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .choice { padding: 14px; background: #fff; border: 1px solid #cfdbdc; border-radius: 4px; color: #264558; text-align: left; font-weight: 680; cursor: pointer; transition: border-color .18s, background .18s, color .18s, transform .12s; }
      .choice:hover { border-color: #78a7bd; }
      .choice.selected { border-color: var(--blue); background: #eaf4f8; box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }
      .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .field { width: 100%; padding: 13px 14px; border: 1px solid #c7d5d6; border-radius: 3px; color: var(--ink); background: #fff; }
      .field:focus { outline: 2px solid #8ec1d5; outline-offset: 1px; }
      .field-label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 750; }
      .contact-inline { margin: 20px 0 0; color: #b9ced8; font-size: .9rem; }
      .contact-inline a { color: white; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
      .consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 15px; color: #5d6b75; font-size: .76rem; line-height: 1.45; }
      .consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue); }
      .consent strong { color: var(--ink); }
      /* margin-left:auto pins Next to the right whether or not Back is rendered,
         so the primary action does not jump left-to-right between step 1 and 2 */
      .form-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
      /* scoped to .quiz: ".back" alone also matches the decorative .hill.back in the hero */
      .quiz .back { min-height: 36px; padding: 0 4px; border: 0; background: none; color: #56707d; font-weight: 700; cursor: pointer; transition: transform .12s, color .18s; }
      .quiz .back:hover { color: var(--ink); }
      .quiz .button { min-width: 145px; margin-left: auto; }
      .success { display: none; padding: 20px 0; } .success.show { display: block; }
      .success h3 { font-size: 1.8rem; margin-bottom: 10px; }
      body.modal-open { overflow: hidden; }
      .contact-modal { width: min(510px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: 0 28px 80px rgba(7,25,43,.34); }
      .contact-modal::backdrop { background: rgba(7,25,43,.68); backdrop-filter: blur(5px); }
      .contact-modal-card { position: relative; padding: 42px; }
      .contact-modal-close { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf2f3; color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; }
      .contact-modal h2 { max-width: 390px; font-size: 2.45rem; }
      .contact-modal-copy { margin: 17px 0 22px; color: #526975; }
      .contact-number { display: block; margin-top: 6px; color: var(--blue); font-size: 1.7rem; font-weight: 850; letter-spacing: 0; }
      .contact-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
      .contact-modal-actions .button { flex: 1 1 175px; }
      .contact-modal-email { display: inline-block; margin-top: 20px; color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
      .copy-status { min-height: 21px; margin: 12px 0 0; color: #56707d; font-size: .82rem; }
      .footer { position: relative; z-index: 50; padding: 34px 0; background: #0b1d2f; color: #d5e2e6; }
      .footer-grid { display: flex; justify-content: space-between; gap: 28px; align-items: center; font-size: .81rem; }
      .footer .mark { width: 245px; }
      .footer p { max-width: 540px; margin: 0; color: #92a9b5; }
      .footer-contact { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
      /* min-height keeps these clear of the 24px minimum tap target */
      .footer-contact a { display: inline-flex; align-items: center; min-height: 30px; color: white; font-weight: 700; }
      @media (max-width: 1050px) {
        h2 { font-size: 3.5rem; }
        .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .proof-item, .proof-item:first-child { padding: 25px 28px; border-left: 0; border-top: 1px solid var(--line); }
        .proof-item:nth-child(-n + 2) { border-top: 0; }
        .proof-item:nth-child(even) { border-left: 1px solid var(--line); }
        .proof-intro p { max-width: none; }
        .horizon-caption { max-width: 400px; padding: 20px 23px; }
        .horizon-caption strong { font-size: 2.1rem; line-height: 1.05; }
      }
      @media (max-width: 900px) {
        h1 { font-size: 4.5rem; }
        h2 { font-size: 3.2rem; }
        .horizon-caption strong { font-size: 1.9rem; }
        .section-header { display: block; }
        .section-header p { max-width: 540px; margin-top: 18px; }
        .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (max-width: 800px) {
        .nav { height: 72px; } .nav-links a:not(.button) { display: none; }
        .hero { padding: 36px 0 48px; background: var(--sand); } .hero-grid, .quiz-grid { grid-template-columns: 1fr; gap: 38px; } .art { min-height: 335px; }
        .hero-photo { height: 325px; right: 5%; object-position: center 24%; }
        .section { padding: 76px 0; }
        .process { grid-template-columns: 1fr; gap: 14px; }
        .step { min-height: 0; }
        .horizon-break { height: 350px; }
        .horizon-break img { object-position: 68% center; }
        .horizon-caption { left: 24px; right: 24px; top: 36px; max-width: 440px; translate: none; }
        .quiz-wrap { padding: 70px 0; } .footer-grid { display: block; } .footer p, .footer-contact { margin-top: 18px; }
      }
      @media (max-width: 620px) {
        .shell { padding-inline: 20px; }
        .mark { width: 205px; }
        .nav .button { min-height: 44px; padding-inline: 16px; font-size: .88rem; }
        .hero-actions .button { flex: 1 1 145px; }
        .proof-grid { grid-template-columns: 1fr; padding-block: 7px; }
        .proof-item, .proof-item:first-child, .proof-item:nth-child(even) { padding: 14px 0; border: 0; border-top: 1px solid var(--line); }
        .proof-item:first-child { border-top: 0; }
        .proof-item p { margin-top: 2px; }
        .area-grid { grid-template-columns: 1fr; gap: 12px; }
        .area { min-height: 148px; padding: 21px; }
        .area-cta { padding-top: 15px; }
        .choice-grid, .form-row { grid-template-columns: 1fr; }
        .quiz { padding: 22px; box-shadow: 8px 8px 0 #224966; }
        .contact-modal-card { padding: 36px 24px 28px; }
        .contact-modal h2 { font-size: 2rem; }
        .footer .mark { width: 225px; }
        .areas .layer-blue { width: 78%; }
        .areas .layer-clay { width: 64%; right: -10%; }
        .process-section .layer-clay { width: 58%; }
        .horizon-break { height: 330px; }
        .horizon-caption { left: 20px; right: 20px; padding: 18px 20px; }
        h1 { font-size: 3.25rem; }
        h2 { font-size: 2.4rem; }
        .horizon-caption strong { font-size: 1.45rem; line-height: 1.08; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .motion-ready .reveal-item, .section-layer { transform: none !important; opacity: 1 !important; transition: none !important; }
        .horizon-break img { transform: scale(1.04) !important; }
      }

/* area guides */
.area-guides { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.area-guides p { margin: 0 0 10px; color: #60737c; font-size: .85rem; }
.area-guides-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.area-guides-links a { color: var(--blue); font-size: .87rem; font-weight: 650; }
.area-guides-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* hub pages */
.hub-hero { padding: 60px 0 8px; }
.hub-hero h1 { max-width: 760px; font-size: 4rem; }
.hub-hero p { max-width: 640px; margin: 18px 0 0; color: #425b68; font-size: 1.08rem; }
.hub-hero .microcopy { margin-top: 20px; color: #64747c; font-size: .82rem; max-width: 640px; }
.hub-section { padding: 52px 0; border-top: 1px solid var(--line); }
.hub-section h2 { font-size: 2.6rem; max-width: 640px; margin: 0 0 10px; }
.hub-section .section-intro { max-width: 640px; color: #536772; margin: 0 0 28px; }
.community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.community-card { padding: 24px; background: #fff; border: 1px solid #d7e3df; border-radius: 8px; }
.community-card h3 { font-size: 1.28rem; letter-spacing: 0; margin: 0 0 6px; }
.community-meta { display: block; margin: 0 0 10px; color: #60737c; font-size: .83rem; line-height: 1.5; }
.community-meta strong { color: var(--blue); }
.community-card p { margin: 0 0 14px; color: #425b68; font-size: .93rem; line-height: 1.55; }
.community-cta { display: inline-flex; color: var(--clay-text); font-weight: 780; font-size: .85rem; }
.hub-living-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.hub-living-grid h3 { font-size: 1.05rem; margin: 0 0 10px; }
.hub-living-grid p, .hub-living-grid ul, .good-to-know ul { margin: 0; padding-left: 20px; color: #425b68; font-size: .95rem; line-height: 1.6; }
.hub-living-grid p { padding-left: 0; }
.good-to-know ul { padding-left: 20px; }
.good-to-know li { margin-bottom: 8px; }
.faq-item { margin-bottom: 22px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-size: 1.08rem; margin: 0 0 6px; }
.faq-item p { margin: 0; color: #425b68; font-size: .95rem; line-height: 1.55; }
.hub-cta { background: var(--ink); color: white; padding: 60px 0; text-align: center; }
.hub-cta h2 { color: #fffdf7; max-width: none; margin: 0 auto 12px; }
.hub-cta p { color: #c7d8e1; margin: 0 auto 26px; max-width: 480px; }
.hub-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 700px) {
  .community-grid, .hub-living-grid { grid-template-columns: 1fr; }
  .hub-hero h1 { font-size: 2.75rem; }
  .hub-section h2 { font-size: 2rem; }
}

/* hub pages: grouped community sections (more-areas) */
.hub-group-eyebrow { margin: 32px 0 14px; }
.hub-group-eyebrow.first { margin: 0 0 14px; }

/* builder comparison guide */
.guide-hero { padding: 68px 0 62px; background: #f7f2ea; border-bottom: 1px solid var(--line); overflow: hidden; }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr); gap: 62px; align-items: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; color: #60737c; font-size: .8rem; font-weight: 650; }
.breadcrumbs a { color: var(--blue); }
.guide-hero h1 { max-width: 790px; font-size: 4.5rem; line-height: 1.04; }
.guide-hero h1 em { color: var(--blue); font-style: normal; }
.guide-deck { max-width: 710px; margin: 25px 0 18px; color: #425b68; font-size: 1.15rem; line-height: 1.65; }
.guide-byline { margin: 0; color: #64747c; font-size: .82rem; font-weight: 650; }
.guide-hero-art { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: 6px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 70px; align-items: start; padding-top: 72px; padding-bottom: 86px; }
.guide-main { min-width: 0; }
.editorial-disclosure { margin: 0 0 68px; padding: 24px 28px; background: #eef4f2; border-left: 5px solid #cf634a; }
.editorial-disclosure strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 1rem; }
.editorial-disclosure p { margin: 0; color: #4f626c; font-size: .9rem; line-height: 1.62; }
.guide-section { padding: 0 0 72px; margin: 0 0 72px; border-bottom: 1px solid var(--line); }
.guide-section:last-child { margin-bottom: 0; }
.guide-section h2 { max-width: 730px; font-size: 3rem; }
.guide-section .section-intro { max-width: 720px; margin: 17px 0 30px; color: #536772; font-size: 1rem; line-height: 1.65; }
.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.decision-item { min-height: 205px; padding: 25px; background: #fff; border: 1px solid #d7e3df; border-radius: 8px; }
.decision-item span { display: block; margin-bottom: 22px; color: var(--clay-text); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.decision-item h3 { font-size: 1.45rem; }
.decision-item p { margin: 11px 0 0; color: #536772; font-size: .9rem; line-height: 1.58; }
.comparison-table-wrap { width: 100%; margin-top: 28px; overflow-x: auto; border: 1px solid #cedbdc; border-radius: 6px; background: #fff; }
.comparison-table-wrap:focus-visible { outline: 3px solid #f3c567; outline-offset: 3px; }
.comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .86rem; line-height: 1.5; }
.comparison-table th, .comparison-table td { padding: 17px 18px; border-bottom: 1px solid #dfe7e5; text-align: left; vertical-align: top; }
.comparison-table thead th { background: #10263d; color: #fff; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.comparison-table tbody th { width: 120px; color: var(--blue); font-size: .96rem; }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }
.builder-profiles > h2 { margin-bottom: 26px; }
.builder-profile { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 34px; padding: 34px 0; border-top: 1px solid var(--line); }
.builder-profile-label span { display: block; margin-bottom: 14px; color: #96c2cf; font-size: 2.3rem; font-weight: 850; line-height: 1; }
.builder-profile-label h3 { font-size: 1.55rem; }
.builder-profile p { margin: 0 0 15px; color: #425b68; line-height: 1.68; }
.source-link { display: inline-flex; color: var(--blue); font-size: .88rem; font-weight: 780; text-decoration: underline; text-underline-offset: 3px; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-block: 1px solid var(--line); }
.method-grid > div { padding: 24px 22px; border-left: 1px solid var(--line); }
.method-grid > div:first-child { padding-left: 0; border-left: 0; }
.method-grid strong { color: var(--blue); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.method-grid p { margin: 9px 0 0; color: #536772; font-size: .88rem; line-height: 1.6; }
.method-note { margin: 22px 0 0; color: #64747c; font-size: .86rem; line-height: 1.6; }
.guide-rail { min-width: 0; }
.guide-rail-inner { position: sticky; top: 28px; padding: 28px 0 28px 28px; border-left: 4px solid #175b97; }
.guide-rail h2 { font-size: 2rem; }
.guide-rail p:not(.eyebrow) { margin: 15px 0 22px; color: #536772; font-size: .92rem; line-height: 1.6; }
.guide-rail .button { width: 100%; text-align: center; }
.rail-text-link { display: block; margin-top: 15px; color: var(--blue); font-size: .87rem; font-weight: 750; text-align: center; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .guide-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 38px; }
  .guide-hero h1 { font-size: 3.6rem; }
  .guide-layout { grid-template-columns: 1fr; gap: 0; }
  .guide-rail { order: -1; margin-bottom: 64px; }
  .guide-rail-inner { position: static; padding: 28px; border: 1px solid #cbdde2; border-left: 5px solid var(--blue); background: #f5f9f8; }
  .guide-rail .button { width: auto; }
  .rail-text-link { display: inline-block; margin: 0 0 0 16px; text-align: left; }
}

@media (max-width: 760px) {
  .guide-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .guide-hero { padding: 44px 0 48px; }
  .guide-hero h1 { font-size: 3rem; }
  .guide-hero-art { aspect-ratio: 16 / 9; }
  .guide-layout { padding-top: 48px; padding-bottom: 62px; }
  .guide-section { padding-bottom: 54px; margin-bottom: 54px; }
  .guide-section h2 { font-size: 2.35rem; }
  .decision-grid, .method-grid { grid-template-columns: 1fr; }
  .method-grid > div, .method-grid > div:first-child { padding: 20px 0; border: 0; border-top: 1px solid var(--line); }
  .method-grid > div:first-child { border-top: 0; }
  .builder-profile { grid-template-columns: 1fr; gap: 16px; }
  .builder-profile-label { display: flex; align-items: center; gap: 13px; }
  .builder-profile-label span { margin: 0; font-size: 1.65rem; }
  .rail-text-link { display: block; margin: 14px 0 0; text-align: center; }
}

@media (max-width: 520px) {
  .guide-hero h1 { font-size: 2.55rem; }
  .guide-deck { font-size: 1rem; }
  .editorial-disclosure { padding: 21px; }
  .guide-rail-inner { padding: 24px; }
  .guide-rail .button { width: 100%; }
}

/* ============================================================
   Interaction polish
   Phones have no hover, so every tap on this site used to be
   visually silent. These are the press, transition, and
   persistent-CTA behaviours that were missing.
   ============================================================ */

/* --- press states (the mobile feedback that did not exist) --- */
.button:active { transform: translateY(0) scale(.975); }
.button:disabled:active { transform: none; }
.choice:active { transform: scale(.985); }
.area:active { transform: translateY(-1px) scale(.996); }
.quiz .back:active { transform: scale(.94); }
.contact-modal-close { transition: background .18s, transform .12s; }
.contact-modal-close:hover { background: #e2e9ea; }
.contact-modal-close:active { transform: scale(.92); }
.community-cta, .area-guides-links a, .rail-text-link, .source-link { transition: color .18s, transform .12s; }
.community-cta:active, .area-guides-links a:active { transform: scale(.97); }

/* --- selection confirm on a quiz choice --- */
.choice.selected { animation: choice-pop .2s cubic-bezier(.2,.75,.2,1); }
@keyframes choice-pop { 40% { transform: scale(1.018); } }

/* --- quiz steps read as one flow, not four hard cuts --- */
.question.active { animation: step-in .26s cubic-bezier(.2,.75,.2,1) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }

/* --- the contact dialog fades in instead of snapping open --- */
.contact-modal[open] { animation: modal-in .24s cubic-bezier(.2,.75,.2,1); }
.contact-modal[open]::backdrop { animation: backdrop-in .24s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes backdrop-in { from { opacity: 0; } }

/* --- persistent mobile CTA -------------------------------------------------
   The header is not sticky and scrolls away, so on a long area page there was
   no way to reach Pierre without scrolling to the very bottom. This bar slides
   up once the hero is out of view and hides again over the footer so it never
   covers the footer's own contact links. Fixed, not sticky, because
   body{overflow-x:hidden} makes position:sticky unreliable here.            */
.sticky-cta {
  position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
  display: none; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 250, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(16, 38, 61, .1);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.2, .75, .2, 1);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .button { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 12px; font-size: .92rem; }
@media (max-width: 800px) {
  .sticky-cta { display: flex; }
  .footer { padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .choice.selected, .question.active, .contact-modal[open], .contact-modal[open]::backdrop { animation: none !important; }
  .button:active, .choice:active, .area:active, .quiz .back:active,
  .contact-modal-close:active, .community-cta:active, .area-guides-links a:active { transform: none !important; }
  .sticky-cta { transition: none !important; }
}

/* ============================================================
   Nav, header, and the door
   The logo is a doorway with light spilling out of it. That is the one
   thing on this site worth animating with intent: the light comes on when
   the page loads, and the door brightens under the cursor. Everything else
   here is quiet support: a glass header that condenses on scroll, nav links
   whose underline spills in from the left like that light, an animated
   mobile menu, and a hero that arrives in order instead of all at once.
   ============================================================ */

/* --- header shell: sticky glass on desktop, static on phones (the bottom
       CTA bar is the persistent element there; two sticky bars is too much) --- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 253, 250, .84); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; animation: header-in .5s ease backwards; }
.site-header.is-scrolled { border-bottom-color: rgba(16, 38, 61, .08); box-shadow: 0 10px 30px rgba(16, 38, 61, .06); }
.site-header .nav { justify-content: flex-start; transition: height .32s cubic-bezier(.2, .75, .2, 1); }
.site-header .nav-links { margin-left: auto; }
.is-scrolled .nav { height: 64px; }
.mark { transition: width .32s cubic-bezier(.2, .75, .2, 1); }
.is-scrolled .mark { width: 232px; }
.mark svg { display: block; width: 100%; height: auto; overflow: visible; }
#areas, #how-it-works, #find-home { scroll-margin-top: 72px; }
@keyframes header-in { from { opacity: 0; } }

/* --- the door --- */
.door-light { transform-box: fill-box; transform-origin: 0% 45%; animation: door-light .8s cubic-bezier(.2, .75, .2, 1) .35s backwards; transition: transform .35s cubic-bezier(.2, .75, .2, 1); }
.door-inner { transition: fill .35s ease; }
.mark:hover .door-light, .mark:focus-visible .door-light { transform: scale(1.14); }
.mark:hover .door-inner, .mark:focus-visible .door-inner { fill: #2b7fc9; }
@keyframes door-light { from { transform: scale(0); opacity: 0; } 65% { transform: scale(1.1); opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* --- nav links: the underline spills in from the left, clay fading out, the
       same gesture as the door light. The current page keeps it lit. --- */
.nav-links a:not(.button) { position: relative; padding: 6px 0; transition: color .2s ease; }
.nav-links a:not(.button):hover { color: var(--ink); }
.nav-links a:not(.button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--clay), rgba(207, 99, 74, .12)); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.2, .75, .2, 1); }
.nav-links a:not(.button):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* --- buttons: a light sweep across the solid button, a fill on the ghost,
       and the card arrows lead by a few pixels --- */
.button { position: relative; overflow: hidden; }
.button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .24) 50%, transparent 62%); transform: translateX(-130%); transition: transform .6s ease; pointer-events: none; }
.button:hover::after { transform: translateX(130%); }
.button:disabled::after, .button.ghost::after { display: none; }
.button.ghost { transition: transform .2s, background .25s ease, border-color .25s ease, color .2s; }
.button.ghost:hover { background: var(--sky); border-color: #8fb6cb; }
.area-cta, .community-cta { transition: transform .25s cubic-bezier(.2, .75, .2, 1), color .2s; }
.area:hover .area-cta { transform: translateX(5px); }
.community-cta:hover { transform: translateX(4px); }

/* --- mobile menu --- */
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-left: 2px; border: 0; border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.2, .75, .2, 1), top .3s cubic-bezier(.2, .75, .2, 1); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.menu-open .nav-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .nav-toggle span:last-child { top: 21px; transform: rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid #f3c567; outline-offset: 2px; }
.mobile-nav { display: none; }
@media (max-width: 800px) {
  .site-header { position: static; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .is-scrolled .nav { height: 72px; }
  .is-scrolled .mark { width: 292px; }
  .site-header .nav-links { gap: 10px; }
  .nav-toggle { display: block; }
  .mobile-nav { display: grid; padding: 0 32px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); background: var(--white); border-bottom: 1px solid transparent; transition: max-height .38s cubic-bezier(.2, .75, .2, 1), opacity .25s ease, transform .3s cubic-bezier(.2, .75, .2, 1), padding .3s ease, border-color .3s ease; }
  .menu-open .mobile-nav { max-height: 320px; opacity: 1; transform: none; padding: 4px 32px 14px; border-bottom-color: var(--line); }
  .mobile-nav a { padding: 13px 4px; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); opacity: 0; transform: translateX(-10px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .75, .2, 1); }
  .mobile-nav a:first-child { border-top: 0; }
  .menu-open .mobile-nav a { opacity: 1; transform: none; }
  .menu-open .mobile-nav a:nth-child(2) { transition-delay: .05s; }
  .menu-open .mobile-nav a:nth-child(3) { transition-delay: .1s; }
  .menu-open .mobile-nav a:nth-child(4) { transition-delay: .15s; }
}
@media (max-width: 620px) {
  .is-scrolled .mark { width: 205px; }
  .mobile-nav { padding-inline: 20px; }
  .menu-open .mobile-nav { padding-inline: 20px; }
}

/* --- one gap under the header on every page. The three hero variants had
       three different top paddings (home 52, area pages 60, builder guide 68),
       which read as sloppiness once the header became a consistent element. --- */
:root { --hero-top: 56px; }
.hero, .hub-hero, .guide-hero { padding-top: var(--hero-top); }
.breadcrumbs { margin-bottom: 26px; }
/* .hub-hero p gave the eyebrow (a <p>) an 18px top margin on every area page */
.hub-hero .eyebrow { margin-top: 0; }
/* The img carries width/height attributes for CLS, and the height attribute
   acts as a presentational height:773px, which switches aspect-ratio off.
   height:auto hands sizing back to the 4/5 (desktop) and 16/9 (phone) crops. */
.guide-hero-art { height: auto; }
@media (min-width: 761px) {
  /* Center alignment against the taller art column pushed the guide text
     83px below the shared header gap. Top-align it. */
  .guide-hero-grid { align-items: start; }
}
@media (max-width: 800px) { :root { --hero-top: 40px; } }

/* --- contrast, surfaced by running Lighthouse on the guide page --- */
/* Large decorative numerals (step numbers, builder profile numbers) were
   #96c2cf at 1.9:1; large text needs 3:1. Same hue, darkened. */
:root { --numeral: #6d8e97; }
.step-number, .builder-profile-label span { color: var(--numeral); }
/* 4.44 and 4.35 on sand; #606f77 is the microcopy grey, 4.67 on sand */
.breadcrumbs, .guide-byline { color: #606f77; }
/* The ghost button on the dark hub-cta band was blue on navy, 2.18:1, on
   the guide and every area page. On that band it becomes an outline button. */
.hub-cta .button.ghost { color: #fffdf7; border-color: rgba(255, 253, 250, .5); }
.hub-cta .button.ghost:hover { background: rgba(255, 253, 250, .12); border-color: rgba(255, 253, 250, .85); }

/* --- arrival: the hero comes in in reading order, then the scene builds
       behind it. The photo moves on transform only, so LCP is untouched. --- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero .eyebrow, .hero h1, .hero-copy, .hero-actions, .hero .microcopy,
.hub-hero .eyebrow, .hub-hero h1, .hub-hero p,
.guide-hero .breadcrumbs, .guide-hero .eyebrow, .guide-hero h1, .guide-deck, .guide-byline { animation: rise .7s cubic-bezier(.2, .75, .2, 1) backwards; }
.hero h1, .hub-hero h1, .guide-hero h1 { animation-delay: .08s; }
.hero-copy, .hub-hero p, .guide-deck { animation-delay: .17s; }
.hero-actions, .guide-byline { animation-delay: .26s; }
.hero .microcopy, .hub-hero .microcopy { animation-delay: .34s; }
.sun { animation: sun-rise 1.1s cubic-bezier(.2, .75, .2, 1) .15s backwards; }
@keyframes sun-rise { from { opacity: 0; transform: translateY(36px); } }
.hill { animation: hill-in 1s cubic-bezier(.2, .75, .2, 1) .05s backwards; }
.hill.back { animation-name: hill-back-in; animation-delay: .12s; }
@keyframes hill-in { from { transform: translateX(7%) rotate(-5deg); } }
@keyframes hill-back-in { from { transform: translateX(-7%) rotate(6deg); } }
.hero-photo { animation: photo-rise 1s cubic-bezier(.2, .75, .2, 1) .28s backwards; }
@keyframes photo-rise { from { transform: translateY(30px); } }

@media (prefers-reduced-motion: reduce) {
  .site-header, .door-light, .sun, .hill, .hero-photo,
  .hero .eyebrow, .hero h1, .hero-copy, .hero-actions, .hero .microcopy,
  .hub-hero .eyebrow, .hub-hero h1, .hub-hero p,
  .guide-hero .breadcrumbs, .guide-hero .eyebrow, .guide-hero h1, .guide-deck, .guide-byline { animation: none !important; }
  .site-header, .site-header .nav, .mark, .door-light, .door-inner, .nav-links a::after, .button.ghost, .area-cta, .community-cta, .nav-toggle span, .mobile-nav, .mobile-nav a { transition: none !important; }
  .button::after { display: none; }
}