/*
 * Subcity shared detail layer — 2026-08-19
 * Material 3 inspired surfaces, states and motion without changing imagery,
 * information architecture or the isolated 3D configurator.
 */
:root{
  --subcity-surface:#f8faf7;
  --subcity-surface-low:#f2f5f0;
  --subcity-surface-mid:#e9eee8;
  --subcity-surface-high:#dfe7e0;
  --subcity-ink:#202422;
  --subcity-muted:#626a65;
  --subcity-outline:#bcc8bf;
  --subcity-primary:#956446;
  --subcity-primary-hover:#7b5038;
  --subcity-primary-soft:#f4e9e1;
  --subcity-radius-sm:10px;
  --subcity-radius-md:16px;
  --subcity-radius-lg:24px;
  --subcity-shadow-rest:0 1px 2px rgba(27,31,29,.05),0 5px 16px rgba(27,31,29,.045);
  --subcity-shadow-hover:0 2px 5px rgba(27,31,29,.07),0 12px 28px rgba(27,31,29,.075);
  --subcity-ease:cubic-bezier(.2,0,0,1);
  --paper:var(--subcity-surface);
  --bg:var(--subcity-surface);
  --surface:var(--subcity-surface-low);
  --ink:var(--subcity-ink);
  --muted:var(--subcity-muted);
  --line:var(--subcity-outline);
  --accent:var(--subcity-primary);
  --accent-hover:var(--subcity-primary-hover);
  --radius:var(--subcity-radius-md);
  --shadow:var(--subcity-shadow-rest);
  --green:#202426;
  --green-800:#171b1d;
  --green-700:#343c3f;
  --accent-600:#754b34;
  --spruce:#d8ddcd;
  --serif:'Sora',system-ui,-apple-system,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Sora',system-ui,-apple-system,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}

html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--subcity-surface);color:var(--subcity-ink)}

/* Navigation: calm tonal surface, clear state feedback. */
header.site,.site-head{
  border-bottom:1px solid color-mix(in srgb,var(--subcity-outline) 68%,transparent);
  background:color-mix(in srgb,var(--subcity-surface) 90%,transparent);
  box-shadow:0 0 0 rgba(0,0,0,0);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  transition:box-shadow .3s var(--subcity-ease),background-color .3s var(--subcity-ease);
}
header.site.is-scrolled,.site-head.is-scrolled{
  background:color-mix(in srgb,var(--subcity-surface) 96%,transparent);
  box-shadow:0 1px 2px rgba(27,31,29,.06),0 8px 24px rgba(27,31,29,.055);
}
.nav-links>a:not(.button),header.site .nav-links>a:not(.btn){
  border-radius:999px;
  transition:color .2s var(--subcity-ease),background-color .2s var(--subcity-ease);
}
.nav-links>a:not(.button):hover,header.site .nav-links>a:not(.btn):hover{
  background-color:var(--subcity-surface-mid);
}

/* Buttons keep the existing brand color but gain one shared shape/state model. */
:is(.button,.btn,.cookie-accept,.cookie-save,.accept,.save){
  border-radius:var(--subcity-radius-sm) !important;
  box-shadow:0 1px 2px rgba(27,31,29,.08);
  transition:background-color .2s var(--subcity-ease),border-color .2s var(--subcity-ease),box-shadow .2s var(--subcity-ease),transform .2s var(--subcity-ease) !important;
}
:is(.button,.btn,.cookie-accept,.cookie-save,.accept,.save):hover{
  box-shadow:0 2px 4px rgba(27,31,29,.08),0 8px 18px rgba(27,31,29,.09);
  transform:translateY(-1px);
}
:is(.button,.btn,.cookie-accept,.cookie-save,.accept,.save):active{
  box-shadow:0 1px 2px rgba(27,31,29,.08);
  transform:translateY(0) scale(.985);
}
:is(.button.secondary,.btn.ghost){
  background:color-mix(in srgb,var(--subcity-surface) 84%,transparent) !important;
  border-color:var(--subcity-outline) !important;
  color:var(--subcity-ink) !important;
}
.hero :is(.button.secondary,.btn.ghost.on-dark){
  background:color-mix(in srgb,#fff 12%,transparent) !important;
  border-color:color-mix(in srgb,#fff 70%,transparent) !important;
  color:#fff !important;
}
:is(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid color-mix(in srgb,var(--subcity-primary) 48%,transparent) !important;
  outline-offset:3px !important;
}

/* Deliberately restrained type scale — no oversized AI-style headings. */
.hero-copy h1,.hero h1,.offer-hero h1,header.pp h1,body>header h1{
  max-width:18ch;
  font-size:clamp(2.25rem,4.8vw,4rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  text-wrap:balance;
}
main h2,.section-head h2,.process-head h2,.contact-copy h2{
  max-width:24ch;
  font-size:clamp(1.8rem,3.2vw,2.75rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  text-wrap:balance;
}
main h3{letter-spacing:-.025em;text-wrap:balance}

/* Material-like tonal hierarchy, kept subtle so the architecture stays primary. */
.section.alt,.offer,.decision-bridge,.calculator-page-intro,.proof-strip{
  background-color:var(--subcity-surface-low);
}
.featured-home-card,.form-wrap,.contact-form,.calculator-shell,.calculator-panel,.calculator-result,
.decision-pack-card,.option-card,.price-card,.doc-card,.card,.contact-card,.toc,.package{
  border-color:color-mix(in srgb,var(--subcity-outline) 76%,transparent) !important;
  border-radius:var(--subcity-radius-lg) !important;
  box-shadow:var(--subcity-shadow-rest);
}
.question,.gain-card,.role,.step,.metric,.included-grid>div,.proof-grid>div,.decision-grid>div,
.scope-option,.choice,.cookie-choice,.cookie-row{
  border-radius:var(--subcity-radius-md) !important;
}
.gallery-item,.hero-media,.featured-home-media,.offer-hero-media,.floor-plan-stage{
  overflow:hidden;
  border-radius:var(--subcity-radius-md);
}
.hero>.hero-media,.hero-media:only-child{border-radius:0}

input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  border-radius:var(--subcity-radius-sm) !important;
  border-color:color-mix(in srgb,var(--subcity-outline) 82%,transparent) !important;
  background-color:#fff !important;
  transition:border-color .2s var(--subcity-ease),box-shadow .2s var(--subcity-ease),background-color .2s var(--subcity-ease);
}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
  border-color:var(--subcity-primary) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--subcity-primary) 15%,transparent) !important;
}
.faq-item,.faq-q,.offer-price-row,.result-row,.toc a{
  transition:background-color .2s var(--subcity-ease),color .2s var(--subcity-ease);
}
.faq-item:hover,.faq-q:hover,.offer-price-row:hover,.toc a:hover{
  background-color:color-mix(in srgb,var(--subcity-primary-soft) 52%,transparent);
}
.tbl,table{border-radius:var(--subcity-radius-md);overflow:hidden}

/* Hover elevation only where a card is genuinely interactive or comparable. */
@media (hover:hover) and (pointer:fine){
  .featured-home-card,.option-card,.price-card,.doc-card,.card,.question{
    transition:transform .28s var(--subcity-ease),box-shadow .28s var(--subcity-ease),border-color .28s var(--subcity-ease);
  }
  .featured-home-card:hover,.option-card:hover,.price-card:hover,.doc-card:hover,.card:hover,.question:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--subcity-primary) 34%,var(--subcity-outline)) !important;
    box-shadow:var(--subcity-shadow-hover);
  }
}

/* Added only when a section actually enters the viewport; off-screen content stays visible. */
.subcity-reveal-pending{
  opacity:.82;
  transform:translateY(12px);
}
.subcity-reveal-pending.subcity-reveal-in{
  opacity:1;
  transform:translateY(0);
  transition:opacity .56s var(--subcity-ease),transform .56s var(--subcity-ease);
}

@media (max-width:720px){
  html{scroll-padding-top:72px}
  .hero-copy h1,.hero h1,.offer-hero h1,header.pp h1,body>header h1{
    max-width:17ch;
    font-size:clamp(2rem,10vw,2.65rem) !important;
    line-height:1.04 !important;
  }
  main h2,.section-head h2,.process-head h2,.contact-copy h2{
    font-size:clamp(1.65rem,7.8vw,2.15rem) !important;
  }
  .featured-home-card,.form-wrap,.contact-form,.calculator-shell,.calculator-panel,.calculator-result,
  .decision-pack-card,.option-card,.price-card,.doc-card,.card,.contact-card,.toc,.package{
    border-radius:var(--subcity-radius-md) !important;
  }
  :is(.button,.btn){min-height:46px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .subcity-reveal-pending,.subcity-reveal-pending.subcity-reveal-in{opacity:1;transform:none}
}