/* ==========================================================================
   Terra Futura staging, founder feedback 2026-10-06
   One override layer. Link LAST in <head>, after /assets/staging-fonts/fonts.css.
   Sections: 0 fonts + tokens, A fonts/H1, B circles, C consent, D shared spaces,
   E small layout fixes, F buttons + closing blocks, G property thumbnails.
   ========================================================================== */

/* ---- 0. Variable-weight faces (same files as fonts.css; they are variable
   fonts, so one face covers 300-800 and 700-weight text stops faux-bolding) */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/assets/releases/20261015-main/assets/staging-fonts/9fea608a947e67020c33cad9.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/assets/releases/20261015-main/assets/staging-fonts/a5d38fe99f930275684999b4.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("/assets/releases/20261015-main/assets/staging-fonts/7234ed860a9cc83045413c4f.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("/assets/releases/20261015-main/assets/staging-fonts/a2930b27d13a228bd9ab6a49.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ff-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ff-garden:#5f7a4b; --ff-moss:#3f4d37; --ff-clay:#9a4f32; --ff-cream:#faf7f0; --ff-muted:#5e5f58;
  --ff-h1:clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem); /* 36px @390 -> 56px @1440 */
}

/* ==========================================================================
   A. Fonts: Fraunces for display, DM Sans for body/UI, site-wide.
   Each selector below mirrors a rule that set Georgia or Helvetica Neue in
   site.css, chrome.css, families/*.css, canonical header/footer; the html/body
   prefix makes it win over that same rule and nothing else changes.
   ========================================================================== */
html body h1,
html body h2,
html body h3,
html body .brand strong,
html body blockquote,
html body .status-label,
html body .footer-brand span strong,
html body .request-decision-intro,
html body .reliability-summaries strong,
html body .parity-home-hero-copy p,
html body .tf-local-area-copy h2,
html body .tf-brand-copy strong,
html body #tf-canonical-header .tf-brand-copy strong,
html body #tf-canonical-footer .tf-brand-copy strong,
html body .local-amenities li span,
html body .builder-testimonials blockquote > span,
html body .core-page h1,
html body .core-page h2,
html body .core-page h3,
html body .community-intro-copy p,
html body .community-mountains p,
html body .amenities-heading p,
html body .build-hero-copy > p,
html body .builder-testimonials p,
html body .faq-list summary,
html body .core-v2 h1,
html body .core-v2 h2,
html body .core-v2 h3,
html body .home-v2 h1,
html body .home-v2 h2,
html body .home-v2 h3,
html body .core-v2-display,
html body .home-v2-display,
html body .core-v2-lede,
html body .home-v2-lede > p,
html body .core-v2-testimonial-grid blockquote p,
html body .core-v2-faq-group summary,
html body .privacy-hero > p:last-child,
html body .request-page h1,
html body .request-page h2,
html body .request-page h3,
html body .request-intro-copy,
html body .request-next-steps li span,
html body .editorial-index-heading h1,
html body .editorial-feature-copy h2,
html body .editorial-section-heading h2,
html body .editorial-recent-heading h2,
html body .editorial-card-copy h2,
html body .editorial-card-copy h3,
html body .editorial-post h1,
html body .editorial-body h2,
html body .editorial-body h3,
html body .editorial-lede,
html body .editorial-emphasis,
html body .editorial-deck,
html body .editorial-body blockquote,
html body .homes-family h1,
html body .homes-family h2,
html body .homes-family h3,
html body .homes-introduction-lede,
html body .homes-map-hotspot-dot,
html body .homes-map-property-dot,
html body .homes-huffman-name,
html body .homes-ledger-name,
html body .homes-process-list span,
html body .homes-paired-home > a:not(.homes-text-link) span:first-child,
html body .terranet-metrics strong,
html body .terranet-history-summary strong,
html body .property-page :is(h1, h2, h3) { font-family: var(--ff-serif); }
html:root,
html body .eyebrow,
html body .card-body h2 span,
html body .tf-site-header,
html body .tf-site-footer,
html body #tf-canonical-header,
html body #tf-canonical-footer,
html body .builder-testimonials p,
html body .core-page .button,
html body .core-page .core-text-link,
html body .amenity-card figcaption,
html body .build-hero-copy h1 strong,
html body .core-v2-image-grid figcaption,
html body .home-v2-amenity-grid figcaption,
html body .editorial-kicker,
html body .editorial-card-meta,
html body .editorial-story-count,
html body .editorial-meta,
html body .editorial-updated,
html body .editorial-breadcrumb,
html body .editorial-figure figcaption,
html body .editorial-share,
html body .editorial-text-link,
html body .editorial-backlink a,
html body .property-page,
html body .property-page button { font-family: var(--ff-sans); }

/* Header + footer chrome: brand name in Fraunces, everything else DM Sans */
html body #tf-canonical-header .tf-brand-copy strong,
html body #tf-canonical-footer .tf-brand-copy strong{font-family:var(--ff-serif);font-weight:400}
html body #tf-canonical-header :is(.tf-nav-link,.tf-header-written-action,.tf-disclosure-panel a,.tf-mobile-nav-link,.tf-mobile-subnav a,button),
html body #tf-canonical-footer :is(h2,a,span,p,li,button){font-family:var(--ff-sans)}

/* One H1 scale for page titles (Home/About scale: ~56px desktop, 36px phone) */
html body main h1{font-family:var(--ff-serif);font-size:var(--ff-h1) !important;line-height:1.05 !important;letter-spacing:-0.025em !important}
/* Home hero: let the title breathe at the shared size */
html body main[data-home-flow] .hero-copy{max-width:min(560px,100%)}

/* ==========================================================================
   B. Community: circles diagram (snippets/circles.html at <!-- TF-CIRCLES-SLOT -->,
   inside #a-place-residents-help-shape .recovery-community-copy).
   Desktop: the copy becomes a two-column grid; text stays in column 1 at its
   current 66ch measure and the figure fills the empty right column.
   ========================================================================== */
.tf-circles{margin:28px 0 30px;container-type:inline-size}
.tf-circles svg{display:block;width:100%;height:auto;max-width:480px;margin:0 auto}
.tf-circles text{font-family:var(--ff-sans)}
.tf-circles figcaption{font-family:var(--ff-sans);font-size:14px;line-height:1.45;color:var(--ff-muted);text-align:center;max-width:44ch;margin:10px auto 0}
/* Narrow figure (phones): drop the small sub-labels (the desc/caption carry them),
   enlarge the circle names and re-centre them in their circles */
@container (max-width: 400px){
  .tf-circles .tf-c-sub{display:none}
  .tf-circles .tf-c-name{font-size:20px;transform:translateY(9px)}
  .tf-circles .tf-c-core{font-size:24px;transform:translateY(16px)}
}
@media (min-width: 1100px){
  [data-site-flow="community"] #a-place-residents-help-shape .recovery-community-copy:has(> .tf-circles){
    display:grid;grid-template-columns:minmax(0,600px) minmax(400px,1fr);column-gap:clamp(32px,3.5vw,56px);
    align-items:start;max-width:none}
  [data-site-flow="community"] #a-place-residents-help-shape .recovery-community-copy:has(> .tf-circles) > *{grid-column:1}
  [data-site-flow="community"] #a-place-residents-help-shape .recovery-community-copy > .tf-circles{
    grid-column:2;grid-row:1 / span 12;align-self:center;margin:0;width:100%;max-width:480px;justify-self:center}
}

/* ==========================================================================
   C. FAQ: consent flow (snippets/consent.html at <!-- TF-CONSENT-SLOT -->,
   inside #what-does-consent-mean .faq-answer). Owner-approved geometry.
   ========================================================================== */
.faq-answer:has(> .tf-consent){container-type:inline-size}
html body .faq-answer ol.tf-consent{list-style:none;margin:22px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:none}
html body .faq-answer ol.tf-consent > li{display:flex;flex-direction:column;position:relative;margin:0;border:0;background:var(--c);border-radius:10px;padding:14px 12px;text-align:center;font-family:var(--ff-sans);color:#fff;list-style:none}
html body .faq-answer ol.tf-consent > li::before{content:none}
.tf-consent .tf-consent-proposal{--c:#3e5c76}
.tf-consent .tf-consent-objections{--c:#9a4f32}
.tf-consent .tf-consent-consent{--c:#55703f}
.tf-consent .tf-consent-try{--c:#8a6417}
html body .faq-answer ol.tf-consent li strong{display:block;color:#fff;font-size:15px;line-height:20px;font-weight:700;margin:0 0 10px}
html body .faq-answer ol.tf-consent li span{display:block;font-size:13px;line-height:18px;color:#fff;opacity:.92}
html body .faq-answer ol.tf-consent li:not(:last-child)::after{content:"→";position:absolute;right:-21px;top:53px;transform:translateY(-50%);color:var(--ff-muted);font-size:16px;line-height:1}
@container (max-width: 560px){
  html body .faq-answer ol.tf-consent{grid-template-columns:1fr;gap:26px}
  html body .faq-answer ol.tf-consent li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-21px;transform:translateX(-50%)}
}
@supports not (container-type: inline-size){
  @media (max-width: 640px){
    html body .faq-answer ol.tf-consent{grid-template-columns:1fr;gap:26px}
    html body .faq-answer ol.tf-consent li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-21px;transform:translateX(-50%)}
  }
}

/* ==========================================================================
   D. Shared Spaces (/amenities/, main > article[data-site-flow="spaces"])
   ========================================================================== */
/* Nature Zones: the 3rd photo kept its desktop grid-area (1/3/span 2) below
   1024px, which created phantom 0px columns. Reset it with matching specificity. */
@media (max-width: 1023px){
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid > figure:nth-child(n){grid-area:auto}
}
/* Desktop: captions now run to two lines; rows size to content instead of the
   fixed 230/200px rows that let the next photo cover the second line */
@media (min-width: 1024px){
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid{grid-template-rows:auto auto;align-items:start;align-content:start;align-self:start}
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid > figure:nth-child(n) img{height:205px}
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid > figure:nth-child(3){contain:size;align-self:stretch;display:flex;flex-direction:column}
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid > figure:nth-child(3) img{height:auto;flex:1 1 0;min-height:0}
}
@media (max-width: 700px){
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid{display:flex;flex-direction:column;gap:18px}
  [data-site-flow="spaces"] [aria-labelledby="nature-zones-title"] .core-v2-image-grid figure:nth-child(n) img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  /* Events: photos fill the width of their caption panels */
  [data-site-flow="spaces"] [aria-labelledby="events-activities-title"] .core-v2-image-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:none}
  /* stray decorative dot above Events */
  [data-site-flow="spaces"] .terra-flair-ball{display:none}
}

/* ==========================================================================
   E. Small layout fixes
   ========================================================================== */
/* Homes phase cards: stack the Layout/Status labels so values get the full card
   width; keep the address and unit pairs from orphaning. */
[data-site-flow="housing"] .homes-card-facts div{grid-template-columns:minmax(0,1fr);gap:2px}
[data-site-flow="housing"] .homes-card-facts dt{font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ff-muted)}
[data-site-flow="housing"] .homes-card-facts dd{text-wrap:pretty}
[data-site-flow="housing"] .homes-card-address{text-wrap:balance}
[data-site-flow="housing"] .tf-nowrap{white-space:nowrap}
/* "All sixteen at a glance": specs take the empty 4th track so "860 sq ft" fits */
@media (min-width: 48.01rem){
  [data-site-flow="housing"] .homes-ledger-row{grid-template-columns:minmax(9rem,1fr) minmax(11rem,1.05fr) minmax(0,2.2fr) max-content auto}
  [data-site-flow="housing"] .homes-ledger-specs{grid-column:3;text-wrap:pretty}
  [data-site-flow="housing"] .homes-ledger-status{grid-column:4;min-width:6.5rem;text-align:center}
}
@media (min-width: 1100px){
  [data-site-flow="housing"] .homes-ledger-specs{white-space:nowrap}
}

/* Booking: kicker and heading together, left-aligned */
main[data-secondary-flow="booking-calendar"] .request-calendar-heading{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0.4rem}
main[data-secondary-flow="booking-calendar"] .request-calendar-heading h2{text-align:left}

/* Home: "Regenerative Neighborhood" stays inside its column (was 64.8px, overflowing the header edge) */
main[data-home-flow] #regenerative .regenerative-plan-copy h2{font-size:clamp(2.25rem,1.2rem + 2.4vw,3.1rem);overflow-wrap:break-word;hyphens:manual}
/* Home: remove the empty blue-gray band between the welcome drawing and the photo */
main[data-home-flow] #shared.feature{padding-top:0}

/* Header + footer brand tagline: same size/measure on every page (Community's
   chrome-study.css capped it at 185px) and room for the longer
   "Intentional Community in West Asheville" */
html body #tf-canonical-header .tf-brand-copy small,
html body #tf-canonical-footer .tf-brand-copy small{max-width:none;font-family:var(--ff-sans);font-weight:500}
html body #tf-canonical-header .tf-brand-copy small{letter-spacing:0.1em}
html body #tf-canonical-footer .tf-brand-copy small{white-space:nowrap;letter-spacing:0.1em}
@media (max-width: 420px){
  html body #tf-canonical-footer .tf-brand-copy small{white-space:normal}
}

/* ==========================================================================
   F. Buttons: ONE primary (garden fill, mixed case, DM Sans 600, 4px corners)
   and ONE secondary (same shape, outlined). Matches the About hero pair.
   On the clay closing band the same shapes invert (cream fill / cream outline).
   ========================================================================== */
/* Primary */
html body #tf-canonical-header :is(.tf-header-action,.tf-mobile-action,.tf-drawer-action),
html body main :is(.tf-opening-action a, a.button, .hero-action-primary, a.pill.light){
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:10px 18px;
  background:var(--ff-garden);border:1px solid var(--ff-garden);border-radius:4px;color:#fff;
  font-family:var(--ff-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;
  text-decoration:none;box-shadow:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
html body #tf-canonical-header :is(.tf-header-action,.tf-mobile-action,.tf-drawer-action){font-size:14px;padding-inline:14px}
html body #tf-canonical-header :is(.tf-header-action,.tf-mobile-action,.tf-drawer-action):hover,
html body main :is(.tf-opening-action a, a.button, .hero-action-primary, a.pill.light):hover{background:var(--ff-moss);border-color:var(--ff-moss);color:#fff}
/* Secondary */
html body main .hero-action-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;
  background:transparent;border:1px solid var(--ff-garden);border-radius:4px;color:var(--ff-moss);
  font-family:var(--ff-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none}
html body main .hero-action-secondary:hover{background:rgba(95,122,75,.1)}
html body main :is(.tf-opening-action a, a.button, .hero-action-primary, .hero-action-secondary, a.pill.light):focus-visible{outline:2px solid var(--ff-clay);outline-offset:3px}

/* ---- Closing invitation band (Community, About, Shared Spaces, Homes) ----
   Clay band, full-bleed colour, centred Fraunces heading, short text, then
   primary ("Ask a question") + secondary buttons. Full-bleed uses box-shadow +
   clip-path so it never causes horizontal scroll. */
[data-site-flow="community"] .tf-community-close,
main[data-site-flow="about"] section.close,
[data-site-flow="spaces"] .core-v2-simple-cta,
[data-site-flow="housing"] .homes-faq-cta{
  background:var(--ff-clay);color:var(--ff-cream);
  box-shadow:0 0 0 100vmax var(--ff-clay);clip-path:inset(0 -100vmax);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  text-align:center;margin:0 auto;max-width:none;width:auto;
  padding:clamp(36px,5vw,56px) clamp(16px,4vw,44px) clamp(40px,5vw,60px);border:0}
[data-site-flow="housing"] .homes-faq-cta > div:first-of-type{display:flex;flex-direction:column;align-items:center}
[data-site-flow="housing"] .homes-faq-cta > .terra-flair{display:none}
/* eyebrow */
main[data-site-flow="about"] section.close .eyebrow,
[data-site-flow="housing"] .homes-faq-cta .homes-eyebrow{color:var(--ff-cream);opacity:.85;margin:0 0 10px;font-family:var(--ff-sans)}
/* heading */
[data-site-flow="community"] .tf-community-close h2,
main[data-site-flow="about"] section.close h2,
[data-site-flow="spaces"] .core-v2-simple-cta h2,
[data-site-flow="housing"] .homes-faq-cta h2{
  font-family:var(--ff-serif);font-weight:400;color:var(--ff-cream);font-size:clamp(2rem,1.4rem + 1.6vw,2.6rem);
  line-height:1.1;letter-spacing:-0.02em;margin:0 auto 12px;max-width:24ch;text-wrap:balance}
[data-site-flow="housing"] .homes-faq-cta h2 em{color:inherit;font-style:italic}
[data-site-flow="housing"] .homes-faq-cta h2::after{display:none}
/* text */
[data-site-flow="community"] .tf-community-close p:not(:last-child),
[data-site-flow="spaces"] .core-v2-simple-cta p,
[data-site-flow="housing"] .homes-faq-cta > div:first-of-type p:not(.homes-eyebrow){
  color:var(--ff-cream);font-family:var(--ff-sans);font-size:17px;line-height:1.55;margin:0 auto 22px;max-width:52ch}
/* action row */
[data-site-flow="community"] .tf-community-close p:last-child,
main[data-site-flow="about"] section.close nav,
[data-site-flow="housing"] .homes-faq-actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin:0 auto;max-width:none;
  font-size:0;line-height:0;grid-template-columns:none} /* font-size:0 hides the bare " · " separators */
html body [data-site-flow="spaces"] .core-v2-simple-cta{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;gap:0}
html body [data-site-flow="spaces"] .core-v2-simple-cta > :is(h2,p){grid-column:1 / -1;order:-2}
html body [data-site-flow="spaces"] .core-v2-simple-cta > a:first-of-type{justify-self:end}
html body [data-site-flow="spaces"] .core-v2-simple-cta > a:last-of-type{justify-self:start}
@media (max-width: 480px){html body [data-site-flow="spaces"] .core-v2-simple-cta{grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:stretch}html body [data-site-flow="spaces"] .core-v2-simple-cta > a:is(:first-of-type,:last-of-type){justify-self:stretch}}
[data-site-flow="spaces"] .core-v2-simple-cta > p{margin-bottom:10px}
/* every link in the action row = secondary on clay */
html body [data-site-flow="community"] .tf-community-close p:last-child a,
html body main[data-site-flow="about"] section.close nav a,
html body [data-site-flow="spaces"] .core-v2-simple-cta > a,
html body [data-site-flow="housing"] .homes-faq-actions a{
  display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:44px;margin:0;padding:10px 18px;
  background:transparent;border:1px solid var(--ff-cream);border-radius:4px;color:var(--ff-cream);
  font-family:var(--ff-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;
  text-decoration:none;align-self:center;width:auto;margin:6px !important;transition:background-color .16s ease,color .16s ease}
/* the "Ask a question" link = primary on clay (cream fill, clay text) */
html body [data-site-flow="community"] .tf-community-close p:last-child a[href*="ask-a-question"],
html body main[data-site-flow="about"] section.close nav a[href*="ask-a-question"],
html body [data-site-flow="spaces"] .core-v2-simple-cta > a[href*="ask-a-question"],
html body [data-site-flow="housing"] .homes-faq-actions a[href*="ask-a-question"]{
  background:var(--ff-cream);border-color:var(--ff-cream);color:var(--ff-clay);order:-1}
html body [data-site-flow="community"] .tf-community-close p:last-child a:hover,
html body main[data-site-flow="about"] section.close nav a:hover,
html body [data-site-flow="spaces"] .core-v2-simple-cta > a:hover,
html body [data-site-flow="housing"] .homes-faq-actions a:hover{background:rgba(250,247,240,.16);color:var(--ff-cream)}
html body [data-site-flow="community"] .tf-community-close p:last-child a[href*="ask-a-question"]:hover,
html body main[data-site-flow="about"] section.close nav a[href*="ask-a-question"]:hover,
html body [data-site-flow="spaces"] .core-v2-simple-cta > a[href*="ask-a-question"]:hover,
html body [data-site-flow="housing"] .homes-faq-actions a[href*="ask-a-question"]:hover{background:#fff;color:var(--ff-clay)}
html body [data-site-flow="community"] .tf-community-close a:focus-visible,
html body main[data-site-flow="about"] section.close a:focus-visible,
html body [data-site-flow="spaces"] .core-v2-simple-cta a:focus-visible,
html body [data-site-flow="housing"] .homes-faq-cta a:focus-visible{outline:2px solid var(--ff-cream);outline-offset:3px}
[data-site-flow="spaces"] .core-v2-simple-cta .core-v2-text-link{margin-left:0}
@media (max-width: 480px){
  [data-site-flow="community"] .tf-community-close p:last-child a,
  main[data-site-flow="about"] section.close nav a,
  [data-site-flow="spaces"] .core-v2-simple-cta > a,
  [data-site-flow="housing"] .homes-faq-actions a{flex:1 1 100%}
}

/* ==========================================================================
   G. Property pages: thumbnail strip
   ========================================================================== */
main[data-secondary-flow="property-listing"] .property-thumbnail-track > figure{flex:1 0 160px;max-width:240px}
main[data-secondary-flow="property-listing"] .property-thumbnail-track img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
main[data-secondary-flow="property-listing"] .property-thumbnail-track figcaption{
  font-size:13px;line-height:1.35;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 1099px){
  main[data-secondary-flow="property-listing"] .property-thumbnail-track > figure{flex:0 0 132px;max-width:none}
  main[data-secondary-flow="property-listing"] .property-thumbnail-track{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  /* Where supported, the fade lifts once the strip is scrolled to its end */
  @supports (animation-timeline: scroll()){
    main[data-secondary-flow="property-listing"] .property-thumbnail-track{animation:ff-strip-fade linear both;animation-timeline:scroll(self inline)}
  }
}
@keyframes ff-strip-fade{
  0%,85%{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  100%{-webkit-mask-image:linear-gradient(to right,#000 100%,#000);mask-image:linear-gradient(to right,#000 100%,#000)}
}

/* Reduced motion: no hover/colour transitions from this layer */
@media (prefers-reduced-motion: reduce){
  html body #tf-canonical-header :is(.tf-header-action,.tf-mobile-action,.tf-drawer-action),
  html body main a{transition:none}
}

/* E (cont.). Mobile header: the longer tagline wraps to two short lines so the
   brand never runs under the "Ask a Question" button */
@media (max-width: 74rem){
  html body #tf-canonical-header .tf-mobile-brand .tf-brand-copy small{white-space:normal;max-width:9.5rem;font-size:7.5px;line-height:1.3;letter-spacing:0.08em}
  html body #tf-canonical-header .tf-mobile-action{font-size:13px;padding-inline:12px}
}

/* ==========================================================================
   H. Mobile first screen: top image + H1 + some body text visible without
   scrolling (checked at 390x664 and 375x667).
   ========================================================================== */
@media (max-width: 700px){
  /* Community: image moves up directly under the H1, height capped */
  [data-site-flow="community"] .tf-community-opening{display:flex;flex-direction:column}
  [data-site-flow="community"] .tf-community-opening > .recovery-intro{display:contents}
  [data-site-flow="community"] .tf-community-opening h1{order:1;margin-bottom:12px}
  [data-site-flow="community"] .tf-community-opening > .recovery-wide-media{order:2;margin:0 0 16px}
  [data-site-flow="community"] .tf-community-opening > .recovery-intro > :not(h1){order:3}
  [data-site-flow="community"] .tf-community-opening > .recovery-wide-media img{width:100%;height:200px;object-fit:cover}

  /* Building: same pattern (eyebrow + H1, image, then text) */
  main[data-site-flow="building"] .build-hero{display:flex;flex-direction:column}
  main[data-site-flow="building"] .build-hero > div{display:contents}
  main[data-site-flow="building"] .build-hero > div > :is(.eyebrow,h1){order:1}
  main[data-site-flow="building"] .build-hero > div > h1{margin-bottom:14px}
  main[data-site-flow="building"] .build-hero > figure{order:2;margin:0 0 16px}
  main[data-site-flow="building"] .build-hero > div > :not(.eyebrow,h1){order:3}
  main[data-site-flow="building"] .build-hero > figure img{width:100%;height:190px;object-fit:cover}

  /* Homes catalogue has no hero photo: a decorative photo band under the H1
     (CSS background, so no markup change; content image stays in the cards) */
  [data-site-flow="housing"] .homes-introduction-copy h1::after{
    content:"";display:block;height:190px;margin:16px 0 4px;border-radius:2px;
    background:#d9d8c9 url("/assets/releases/20261015-main/assets/media/properties/25-fireside-drive/photo-46-1024.webp") center 40%/cover no-repeat}

  /* Booking has no image at all: same decorative band under the H1 */
  main[data-secondary-flow="booking-calendar"] .request-heading-group h1::after{
    content:"";display:block;height:170px;margin:16px 0 4px;border-radius:2px;
    background:#d9d8c9 url("/assets/releases/20261015-main/restored-home-latest/assets/courtyard-52.jpg") center/cover no-repeat}

  /* Property + model pages: cap the hero so the summary/facts reach the first screen */
  main[data-secondary-flow="property-listing"] .property-hero img{width:100%;height:210px;object-fit:cover}
  main[data-secondary-flow="property-listing"] .property-summary{margin-top:0;padding-top:8px}
  html body main[data-secondary-flow="named-home"] .homes-named-home-detail .homes-property-photo img{height:190px;max-height:190px}
}

/* Home hero: keep the secondary link on one line on phones */
@media (max-width:640px){html body a.text-light[href="#regenerative"]{white-space:nowrap;display:inline-block;margin-top:6px}}

/* 2026-10-06 owner review: hero button hover stays light on the dark photo */
html body main .hero a.pill.light:hover{background:#9a4f32;border-color:#9a4f32;color:#fff;box-shadow:none}
/* 2026-10-06 owner review: one eyebrow size site-wide, larger section links on Home */
html body main :is(.kicker,.eyebrow,.homes-eyebrow,.core-v2-kicker,.tf-local-area-kicker,.property-eyebrow,.request-kicker){font-size:14px;letter-spacing:.14em;line-height:1.4}
html body main .arrow-link{font-size:16px}
@media (max-width:480px){html body main :is(.kicker,.eyebrow,.homes-eyebrow,.core-v2-kicker,.tf-local-area-kicker,.property-eyebrow,.request-kicker){font-size:13px;letter-spacing:.12em}}
/* 2026-10-06 owner review: Home welcome paragraph on two lines at desktop widths */
@media (min-width:1200px){html body section.welcome-home{padding-left:max(32px,calc(50% - 400px));padding-right:max(32px,calc(50% - 400px))}html body .welcome-home .welcome-copy{max-width:800px;width:auto}html body .welcome-home .welcome-copy p.lead{max-width:800px}}

/* 2026-10-06 owner review: larger hero secondary link */
@media (min-width:641px){html body main .hero a.text-light[href="#regenerative"]{font-size:15px}}
/* 2026-10-06 owner review: Home welcome paragraph line spacing */
html body .welcome-home .welcome-copy p.lead{line-height:1.65}
/* 2026-10-06 owner review: Home cards align across, one-line titles at 1200px+, larger links */
@media (min-width:901px){
 html body main .themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;row-gap:0}
 html body main .themes article{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
 html body main .themes article img{grid-row:1;order:0}
 html body main .themes article h3{grid-row:2;max-width:none;font-size:clamp(24px,1.95vw,31px);margin:0 0 16px}
 html body main .themes article p{grid-row:3;align-self:start}
 html body main .themes article>a{grid-row:4;align-self:start}
}
html body main .themes article>a{font-size:16px}
@media (max-width:900px){html body main .themes article>a{font-size:15px}}
@media (min-width:1200px){html body main .themes article h3{white-space:nowrap}}
/* 2026-10-06 owner review: Home location section spacing and eyebrow contrast (2.5:1 -> 5.5:1) */
html body main .home-landscape-copy .kicker{color:#e8b79c}
html body main .strip.home-landscape .home-landscape-copy h2{margin:0 0 24px}
html body main .home-landscape-copy p:not(.kicker){line-height:1.6;margin:0 0 18px}
/* 2026-10-06 owner review: welcome line break on desktop, space above Home card links */
.br-desk{display:none}
@media (min-width:1200px){.br-desk{display:inline}}
html body main .themes article>a{margin-top:28px}
/* 2026-10-06 owner review: Home closing links as matching rows; one body text size and spacing on Home */
html body main section#next-steps.routes > a{background:transparent;color:var(--ink,#273128);font-weight:400;font-size:17px;padding:16px 0;border-top:1px solid #c8c8bc;min-height:44px;display:flex;align-items:center;justify-content:space-between}
html body main section#next-steps.routes > a:last-of-type{border-bottom:1px solid #c8c8bc}
html body main section#next-steps.routes > a:hover{color:#9a4f32}
html body main :is(.welcome-copy,.living-copy,.feature-card,.regenerative-plan-copy,.themes article,.home-landscape-copy,.route-copy) p:not(.kicker){font-size:17px;line-height:1.65}
html body main :is(.living-copy,.feature-card,.regenerative-plan-copy,.home-landscape-copy,.route-copy) p:not(.kicker){margin-top:0;margin-bottom:0}
html body main :is(.living-copy,.feature-card,.regenerative-plan-copy,.home-landscape-copy) p:not(.kicker) + p{margin-top:16px}
html body main :is(.living-copy,.feature-card,.home-landscape-copy) p:not(.kicker){margin-bottom:0}
html body main :is(.living-copy,.feature-card) p:not(.kicker):last-of-type{margin-bottom:20px}
@media (max-width:640px){html body main :is(.welcome-copy,.living-copy,.feature-card,.regenerative-plan-copy,.themes article,.home-landscape-copy,.route-copy) p:not(.kicker){font-size:16px}html body main section#next-steps.routes > a{font-size:16px}}
html body main section#next-steps.routes > a:last-of-type{font-weight:400;background:transparent;padding:16px 0}
html body main section#living .living-copy > p:not(.kicker){line-height:1.65}
html body main .themes article p:not(.kicker){margin:0}
html body main section#next-steps.routes > a,html body main section#next-steps.routes > a:last-of-type{margin:0}
@media (max-width:900px){html body main section#next-steps.routes > a:first-of-type{margin-top:24px}}
/* 2026-10-06 owner review: location heading top lines up with the photo beside it */
@media (min-width:901px){html body main section.home-landscape > img{align-self:start;margin-top:72px;margin-bottom:72px}html body main section.strip.home-landscape > .home-landscape-copy{padding-top:64px;justify-content:flex-start}}
/* 2026-10-09 owner review: more room between the last nav link and Ask a Question */
html body .tf-desktop-header-right .tf-header-action{margin-left:16px}
/* 2026-10-09 owner review: footer as three even groups (Explore / About / Connect) */
#tf-canonical-footer .tf-footer-group-explore ul{columns:1}
@media (min-width:1001px){#tf-canonical-footer .tf-footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr)}}
/* 2026-10-09 owner review: footer bottom row in one weight; every clickable item underlined */
#tf-canonical-footer .tf-footer-legal .tf-analytics-status{font-weight:400}
#tf-canonical-footer .tf-footer-legal > a{text-decoration:underline;text-underline-offset:.18em}

/* 2026-10-12 owner: Welcome home section. Drawings anchored to the text column (no overlap at any text length); below 1000px one centered scene under the text with the sun at the upper left of the mountains. */
html body main section.welcome-home{height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;justify-items:center!important;padding:56px 24px 0!important}
html body main section.welcome-home > *{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important}
html body main section.welcome-home .welcome-copy{grid-row:1;grid-column:1;max-width:760px!important;margin:0 auto!important}
html body main section.welcome-home .welcome-sun,html body main section.welcome-home .welcome-mountains,html body main section.welcome-home .welcome-homes{grid-row:2;grid-column:1;align-self:end}
html body main section.welcome-home .welcome-sun{justify-self:start;align-self:start;margin:28px 0 0 max(0px,calc(50% - 520px))!important;width:clamp(52px,6vw,84px)!important;height:auto!important}
html body main section.welcome-home .welcome-homes{justify-self:end;width:clamp(230px,30vw,400px)!important;max-width:none!important;height:auto!important;margin:40px max(0px,calc(50% - 540px)) -6px 0!important}
html body main section.welcome-home .welcome-grass{grid-row:3;grid-column:1;width:100%!important;height:clamp(64px,7vw,96px)!important;margin-top:-28px!important;z-index:1!important}
@media (max-width:700px){
 html body main section.welcome-home{padding:40px 20px 0!important}
 html body main section.welcome-home .welcome-sun{margin:18px 0 0 4px!important;width:52px!important}
 html body main section.welcome-home .welcome-mountains{display:none!important}
 html body main section.welcome-home .welcome-homes{width:min(78%,300px)!important;justify-self:center;margin:26px 0 -4px!important}
}


@media (min-width:1000px){
 html body main section.welcome-home{--col:520px;--gap:32px;--sun:84px;--art:190px;display:block!important;padding:64px 24px 132px!important;min-height:0!important}
 html body main section.welcome-home > *{position:absolute!important;margin:0!important;justify-self:auto!important}
 html body main section.welcome-home .welcome-copy{position:relative!important;max-width:var(--col)!important;margin:0 auto!important;z-index:3!important}
 
 html body main section.welcome-home .welcome-sun{margin:0!important;display:block!important;left:calc(50% - var(--col)/2 - var(--gap) - var(--sun))!important;right:auto!important;top:56px!important;width:var(--sun)!important;height:auto!important}
 
 html body main section.welcome-home .welcome-homes{margin:0!important;display:block!important;left:calc(50% + var(--col)/2 + var(--gap))!important;right:auto!important;top:auto!important;bottom:70px!important;width:var(--art)!important;max-width:none!important;height:auto!important;z-index:2!important}
 
 html body main section.welcome-home .welcome-mountains{margin:0!important;display:block!important;left:calc(50% + var(--col)/2 + var(--gap) - 10px)!important;right:auto!important;top:auto!important;bottom:150px!important;width:calc(var(--art) + 20px)!important;height:auto!important;z-index:1!important}
 html body main section.welcome-home .welcome-grass{margin:0!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;height:96px!important;z-index:4!important}
}
@media (min-width:1200px){ html body main section.welcome-home{--col:580px;--gap:40px;--sun:96px;--art:230px} }
@media (min-width:1440px){ html body main section.welcome-home{--col:640px;--gap:48px;--sun:110px;--art:300px} }
@media (min-width:1600px){ html body main section.welcome-home{--col:680px;--gap:72px;--sun:120px;--art:340px} }

@media (max-width:999px){
 html body main section.welcome-home{--scene:min(62vw,460px)}
 html body main section.welcome-home .welcome-mountains{display:block!important;justify-self:center!important;align-self:end!important;width:var(--scene)!important;margin:0 0 calc(var(--scene)*.16) 0!important;z-index:1!important}
 html body main section.welcome-home .welcome-homes{justify-self:center!important;align-self:end!important;width:calc(var(--scene)*.86)!important;max-width:none!important;margin:calc(var(--scene)*.2) 0 -6px 0!important;z-index:2!important}
 html body main section.welcome-home .welcome-sun{justify-self:center!important;align-self:start!important;width:calc(var(--scene)*.15)!important;margin:0!important;translate:calc(var(--scene)/-2 + var(--scene)*.04) 0}
}
@media (max-width:700px){
 html body main section.welcome-home{--scene:min(88vw,340px)}
 html body main section.welcome-home .welcome-sun{width:calc(var(--scene)*.16)!important;translate:calc(var(--scene)/-2 + var(--scene)*.1) 0}
}

/* Closing invitation: 701-900px stacks like phone (the old four-column grid squeezed the links). */
@media (min-width:701px) and (max-width:900px){html body main section#next-steps.routes{display:block;padding:64px 9%}}

/* Arrow links: keep the arrow on the same line as the text at every width. */
html body main a.arrow-link{display:inline-flex;align-items:center;gap:24px;max-width:100%}
html body main a.arrow-link span{margin-left:0;flex:none}

/* FAQ Land heading: seedhead drawing sits to the right of the heading, like the Children sun. */
html body .faq-main .faq-group-heading-land{display:grid;grid-template-columns:minmax(0,max-content) 112px minmax(5rem,1fr);align-items:center;gap:0}
html body .faq-main .faq-group-heading-land h2{grid-column:1;grid-row:1}
html body .faq-main .faq-group-heading-land .faq-group-seedhead{grid-column:2;grid-row:1;margin:0 0 0 .8rem;align-self:center}
html body .faq-main .faq-group-heading-land > a{grid-column:3;grid-row:1;justify-self:end}
@media (max-width:52rem){html body .faq-main .faq-group-heading-land{grid-template-columns:minmax(0,max-content) 84px minmax(0,1fr);justify-content:start;row-gap:.25rem}html body .faq-main .faq-group-heading-land .faq-group-seedhead{width:84px;height:21px;margin-left:.5rem}html body .faq-main .faq-group-heading-land > a{grid-column:1 / -1;grid-row:2;justify-self:start}}

/* About: one section-heading scale across every section. */
html body main[data-about-living="v1"][data-site-flow="about"] section:not(.about-hero) h2.h2,html body main[data-about-living="v1"][data-site-flow="about"] section:not(.about-hero):not(.x-a):not(.x-b) h2{font-size:clamp(32px,calc(1.2vw + 23px),40px);letter-spacing:-.035em}
/* Eyebrows: one size, spacing and weight on every page (14px, 13px on phones). :not(#tf-eyebrow) lifts these above page-level paragraph rules. */
html body main p:is(.eyebrow,.kicker,.homes-eyebrow,.core-v2-kicker,.tf-local-area-kicker,.property-eyebrow,.request-kicker):not(#tf-eyebrow){font-size:14px;letter-spacing:.14em;line-height:1.4;font-weight:700;text-transform:uppercase}
@media (max-width:480px){html body main p:is(.eyebrow,.kicker,.homes-eyebrow,.core-v2-kicker,.tf-local-area-kicker,.property-eyebrow,.request-kicker):not(#tf-eyebrow){font-size:13px;letter-spacing:.12em}}

/* Building opening on short screens: retain type size and photo, trim dead space. */
@media (max-width: 700px) {
  main[data-site-flow="building"] .build-hero {
    gap: 10px;
    padding-block: 28px 32px;
  }
  main[data-site-flow="building"] .build-hero > div > .eyebrow { margin: 0; }
  main[data-site-flow="building"] .build-hero > div > h1 { margin: 8px 0 10px; }
  main[data-site-flow="building"] .build-hero > figure { margin: 0 0 8px; }
  main[data-site-flow="building"] .build-hero > figure img { height: 160px; }
}


/* Keyboard skip link, shown only when focused. */
.seo-skip-link{position:absolute;z-index:10000;top:0;left:1rem;transform:translateY(-150%);padding:.75rem 1rem;background:#fffdf8;color:#243126;border:2px solid #48613c;border-radius:.3rem;font:600 1rem/1.3 sans-serif}
.seo-skip-link:focus,.seo-skip-link:focus-visible{transform:translateY(.75rem);outline:3px solid #b17c3f;outline-offset:3px}
