:root {
  --tertiary-fixed-dim: #e7bcbf;
  --tertiary: #271013;
  --outline: #737973;
  --secondary-container: #e4e2e1;
  --tertiary-container: #3f2427;
  --primary: #061b0e;
  --outline-variant: #c3c8c1;
  --primary-container: #1b3022;
  --surface-dim: #dadada;
  --inverse-surface: #2f3131;
  --on-surface: #1a1c1c;
  --surface-container: #eeeeee;
  --secondary: #5f5e5e;
  --primary-fixed-dim: #b4cdb8;
  --surface-variant: #e2e2e2;
  --on-surface-variant: #434843;
  --surface-bright: #f9f9f9;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3f3;
  --background: #f9f9f9;
  --on-primary: #ffffff;
  --shadow-soft: 0 10px 40px -10px rgba(26, 28, 28, 0.08);
  --shadow-card: 0 22px 60px -30px rgba(26, 28, 28, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--on-surface);
  font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  border-radius: 4px;
  background: var(--surface-container-lowest);
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transform: translateY(-120%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid #0d5c2e;
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

.nav-link:focus-visible,
.header-cta:focus-visible,
.nav-toggle:focus-visible {
  outline-offset: 4px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 max(2rem, calc((100vw - 1280px) / 2));
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(226, 226, 226, 0.75);
  box-shadow: 0 1px 12px rgba(26, 28, 28, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}

.brand {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--primary);
  text-decoration: none;
}

.brand img {
  width: 104px;
  max-height: 42px;
  object-fit: contain;
}

.brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.nav-link {
  padding: 0.25rem 0;
  color: #5f5e5e;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.nav-link:hover,
.nav-link.active {
  color: #064621;
  border-bottom-color: #064621;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1.35rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.header-cta:hover {
  opacity: 0.9;
}

.nav-toggle {
  flex: 0 0 44px;
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle::before {
  content: "";
}

.page-hero {
  position: relative;
  min-height: min(100vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 8rem max(2rem, calc((100vw - 1280px) / 2)) 6rem;
  isolation: isolate;
}

.hero-bg picture,
.hero-bg > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(6, 27, 14, 0.92) 0%, rgba(27, 48, 34, 0.72) 56%, rgba(6, 27, 14, 0.38) 100%),
    linear-gradient(0deg, rgba(6, 27, 14, 0.45), transparent 42%);
}

.hero-content {
  width: min(820px, 100%);
  max-width: calc(100vw - 4rem);
  color: var(--on-primary);
  min-width: 0;
}

.hero-glass {
  position: absolute;
  right: max(2rem, calc((100vw - 1280px) / 2));
  bottom: 7rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 360px;
  padding: 1.4rem 1.55rem;
  border: 1px solid rgba(6, 27, 14, 0.12);
  border-radius: 8px;
  background: rgba(249, 249, 249, 0.92);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero-glass-icon {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--primary);
}

.hero-glass small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d4540;
  opacity: 1;
}

.hero-glass strong {
  display: block;
  margin-top: 0.1rem;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--primary);
}

.eyebrow {
  margin: 0 0 1rem;
  color: currentColor;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

h1,
h2,
h3 {
  margin: 0;
  color: inherit;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0;
}

h1 {
  max-width: 850px;
  margin-bottom: 1.5rem;
  font-size: clamp(3.15rem, 7vw, 6.8rem);
}

h2 {
  margin-bottom: 1.6rem;
  color: var(--primary);
  font-size: clamp(2.25rem, 4.5vw, 4.75rem);
}

h3 {
  margin-bottom: 0.65rem;
  color: var(--primary);
  font-size: 1.35rem;
  line-height: 1.18;
}

.hero-content p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-weight: 300;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.hero-content a:not(.btn) {
  color: #d2f0dc;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.hero-content a:not(.btn):hover {
  color: var(--on-primary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.btn.primary,
.hero-content .btn.primary,
.btn.light {
  background: var(--surface-container-lowest);
  color: var(--primary);
}

.contact-form .btn.primary,
.cta-band .btn.light {
  background: var(--surface-container-lowest);
  color: var(--primary);
}

.btn.ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--on-primary);
  background: transparent;
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-text {
  color: var(--primary) !important;
  border-color: var(--outline-variant) !important;
}

.section {
  padding: 8rem max(2rem, calc((100vw - 1280px) / 2));
  background: var(--background);
}

.section.muted {
  background: var(--surface-container-low);
}

.section.dark {
  background: var(--primary);
  color: var(--on-primary);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(4rem, 7vw, 6rem);
}

.copy {
  max-width: 700px;
}

.copy p,
.section-head p,
.info-card p,
.info-panel p,
li {
  color: var(--on-surface-variant);
  font-size: 1.06rem;
  font-weight: 300;
}

.copy p {
  margin: 0 0 1.25rem;
}

.section.dark h2,
.section.dark h3 {
  color: var(--on-primary);
}

.section.dark .section-head p,
.section.dark .feature-list p,
.section.dark li {
  color: rgba(255, 255, 255, 0.92);
}

.section-head {
  max-width: 820px;
  margin: 0 auto 4rem;
  text-align: center;
}

.section-head .eyebrow {
  color: var(--primary);
}

.section.dark .section-head .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 1.8rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.text-link::after {
  content: "→";
  margin-left: 0.5rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  transition: transform 180ms ease;
}

.text-link:hover::after {
  transform: translateX(0.25rem);
}

.section.dark .text-link {
  color: var(--on-primary);
}

.media-card {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.media-card::before {
  content: "";
  position: absolute;
  inset: -1rem;
  z-index: 0;
  border-radius: 8px;
  background: var(--surface-container-low);
  transform: rotate(-1deg);
}

.media-card > img {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 500px;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.media-card .stat-grid {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  z-index: 2;
  width: min(580px, calc(100% - 1rem));
  padding: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(249, 249, 249, 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.stat-grid div {
  min-width: 0;
}

.stat-grid strong {
  display: block;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1;
  overflow-wrap: anywhere;
}

.stat-grid span {
  display: block;
  margin-top: 0.35rem;
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.price-grid {
  max-width: 1050px;
  margin: 0 auto;
}

.info-card {
  min-width: 0;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-container-lowest);
  padding: 2.5rem;
  box-shadow: 0 10px 40px -22px rgba(26, 28, 28, 0.2);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.info-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.info-card.highlight {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}

.price {
  margin: 1.25rem 0 1.4rem !important;
  color: var(--primary) !important;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 4.2vw, 3.7rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.floor-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.floor-card {
  overflow: hidden;
  padding: 0;
}

.floor-card img {
  width: 100%;
  height: 300px;
  padding: 1.2rem;
  background: #fff;
  object-fit: contain;
}

.floor-card div {
  padding: 1.8rem;
}

.metric {
  margin: 0 0 0.8rem !important;
  color: var(--secondary) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.section.split .feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 2.4rem 0 0;
}

.feature-list article {
  min-width: 0;
  border-top: 1px solid rgba(180, 205, 184, 0.5);
  padding-top: 1.2rem;
}

.section.dark .feature-list article {
  border-top-color: rgba(180, 205, 184, 0.6);
}

.gallery-strip,
.gallery-grid,
.plan-stack {
  display: grid;
  gap: 2rem;
}

.gallery-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-strip img,
.gallery-grid img {
  width: 100%;
  height: 22rem;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  transition: opacity 180ms ease;
}

.gallery-strip img:hover,
.gallery-grid img:hover {
  opacity: 0.9;
}

.gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-grid figure {
  margin: 0;
}

.gallery-grid figcaption {
  margin-top: 0.75rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.plan-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plan-stack img {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-soft);
}

.info-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 2.6rem;
  box-shadow: var(--shadow-soft);
}

.info-panel h3 {
  color: var(--on-primary);
}

.info-panel.soft {
  border-color: var(--outline-variant);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}

.info-panel.soft h3 {
  color: var(--primary);
}

.info-panel li,
.info-panel p {
  color: rgba(255, 255, 255, 0.9);
}

.info-panel.soft li,
.info-panel.soft p {
  color: var(--on-surface-variant);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--outline-variant);
}

.timeline div {
  min-width: 0;
  background: var(--surface-container-lowest);
  padding: 2rem;
}

.timeline strong {
  display: block;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
}

.timeline span {
  display: block;
  margin-top: 0.7rem;
  color: var(--on-surface-variant);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.faq-list {
  display: grid;
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--outline-variant);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 0 0 1rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.faq-question:focus-visible {
  outline-offset: 4px;
}

.faq-answer {
  display: none;
  padding: 0 0 1.5rem;
}

.faq-answer p {
  margin: 0;
  color: var(--on-surface-variant);
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-icon {
  transition: transform 180ms ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-preview {
  text-align: center;
}

.faq-preview > .text-link {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

.faq-static {
  display: grid;
  gap: 2.75rem;
  max-width: 860px;
  margin: 0 auto;
}

.faq-block {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--outline-variant);
}

.faq-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.faq-block h3 {
  margin: 0 0 1.1rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1.35;
}

.faq-block-body p {
  margin: 0 0 1rem;
  color: var(--on-surface-variant);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.75;
}

.faq-block-body p:last-child {
  margin-bottom: 0;
}

.section.longform,
article.longform {
  max-width: 820px;
  margin: 0 auto;
}

.longform h2,
.longform h3 {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: var(--primary);
}

.longform h2 {
  font-size: clamp(1.65rem, 2.5vw, 2rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
}

.longform h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}

.longform p {
  margin: 0 0 1.25rem;
  color: var(--on-surface-variant);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.75;
}

.longform p:last-child {
  margin-bottom: 0;
}

.contact-form {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-container-lowest);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

.form-row {
  display: grid;
  gap: 0.4rem;
}

.form-row label,
legend {
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font: inherit;
  padding: 0.9rem 1rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(6, 27, 14, 0.2);
  border-color: var(--primary);
}

.interest-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  padding: 1rem;
}

.interest-group label {
  color: var(--on-surface-variant);
}

.field-error {
  color: #93000a;
  font-size: 0.86rem;
}

.form-status {
  border-radius: 4px;
  padding: 0.9rem 1rem;
  font-weight: 700;
}

.form-status.success {
  background: #e5f3e7;
  color: #0f4f22;
}

.form-status.error {
  background: #ffdad6;
  color: #93000a;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8rem max(2rem, calc((100vw - 1280px) / 2));
}

.cta-band h2 {
  max-width: 820px;
  color: var(--on-primary);
}

.cta-band p:not(.eyebrow) {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  font-weight: 300;
}

.site-footer {
  border-top: 1px solid rgba(226, 226, 226, 0.6);
  background: #f3f3f3;
  color: var(--on-surface);
  padding: 5rem max(2rem, calc((100vw - 1280px) / 2)) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-logo {
  width: 150px;
  margin-bottom: 1.5rem;
}

.site-footer p {
  color: var(--secondary);
}

.site-footer a {
  display: block;
  margin: 0.8rem 0;
  color: var(--secondary);
  text-decoration: none;
  transition: color 180ms ease;
}

.site-footer a:hover {
  color: var(--primary);
}

.footer-network {
  margin: -1rem 0 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--outline-variant);
}

.footer-network-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  max-width: 920px;
}

.footer-network-links a {
  display: inline;
  margin: 0;
  color: #0a4a24;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.footer-network-links a:hover {
  color: var(--primary);
}

.section-head p a:not(.btn) {
  color: #0a4a24;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.section-head p a:not(.btn):hover {
  color: var(--primary);
}

.longform a:not(.btn),
.faq-block-body a:not(.btn),
.copy p a:not(.btn) {
  color: #0a4a24;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.longform a:not(.btn):hover,
.faq-block-body a:not(.btn):hover,
.copy p a:not(.btn):hover {
  color: var(--primary);
}

.section.dark .longform a:not(.btn) {
  color: #d8f0df;
}

.section.dark .longform a:not(.btn):hover {
  color: var(--on-primary);
}

.footer-heading {
  margin: 0 0 1.4rem;
  color: var(--primary) !important;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.related-projects[data-related-projects-section] {
  padding: 7rem max(2rem, calc((100vw - 1280px) / 2));
  background:
    radial-gradient(circle at top right, rgba(180, 205, 184, 0.38), transparent 34rem),
    var(--surface-container-low);
  color: var(--on-surface);
  border-top: 1px solid var(--outline-variant);
}

.related-projects[data-related-projects-section] .related-projects__inner {
  max-width: 1280px;
}

.related-projects[data-related-projects-section] .related-projects__header {
  max-width: none !important;
  margin: 0 auto 4rem;
  text-align: center;
  width: 100%;
}

.related-projects[data-related-projects-section] .related-projects__header::before {
  content: "Related Projects";
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.related-projects[data-related-projects-section] .related-projects__header h2 {
  margin: 0;
  color: var(--on-surface);
  max-width: none !important;
  display: block;
  width: 100%;
}

.related-projects[data-related-projects-section] .related-projects__header p {
  max-width: 720px;
  margin: 1.15rem auto 0;
  color: var(--on-surface-variant);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.78;
}

.related-projects[data-related-projects-section] .related-projects__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.related-projects[data-related-projects-section] .related-projects__card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-container-lowest);
  box-shadow: 0 10px 40px -22px rgba(26, 28, 28, 0.2);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.related-projects[data-related-projects-section] .related-projects__card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}

.related-projects[data-related-projects-section] .related-projects__image {
  aspect-ratio: 16 / 11;
  background: var(--surface-container);
}

.related-projects[data-related-projects-section] .related-projects__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.8rem;
}

.related-projects[data-related-projects-section] .related-projects__meta {
  margin-bottom: 0.65rem;
  color: var(--primary);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.related-projects[data-related-projects-section] .related-projects__body h3 {
  margin: 0;
  color: var(--on-surface);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
}

.related-projects[data-related-projects-section] .related-projects__body h3 a:hover {
  color: var(--primary);
  text-decoration: none;
}

.related-projects[data-related-projects-section] .related-projects__body p:last-child {
  margin-top: 0.9rem;
  color: var(--on-surface-variant);
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.72;
}

@media (max-width: 1024px) {
  .related-projects[data-related-projects-section] .related-projects__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .related-projects[data-related-projects-section] {
    padding: 4.5rem 1.25rem;
  }

  .related-projects[data-related-projects-section] .related-projects__header {
    margin-bottom: 2.5rem;
    text-align: left;
    max-width: none !important;
    width: 100%;
}

  .related-projects[data-related-projects-section] .related-projects__header p {
    margin-left: 0;
  }
}

.fineprint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--outline-variant);
  padding-top: 2rem;
  font-size: 0.88rem;
}

.fineprint p {
  max-width: 780px;
  margin: 0;
}

.not-found {
  min-height: 78vh;
  display: grid;
  place-content: center;
  padding: 10rem 2rem 5rem;
  text-align: center;
}

.not-found p {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--on-surface-variant);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .nav-menu {
    gap: 0.85rem;
  }

  .nav-link {
    font-size: 0.68rem;
  }

  .hero-glass {
    display: none;
  }
}

@media (max-width: 1024px) {
  .site-header {
    padding: 0 1.5rem;
  }

  .nav-menu,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    position: fixed;
    top: 37px;
    right: 1rem;
    z-index: 60;
    transform: translateY(-50%);
    display: block;
  }

  .nav-toggle::before {
    content: "";
    display: block;
    width: 25px;
    height: 18px;
    margin: 0 auto;
    background:
      linear-gradient(var(--primary), var(--primary)) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--primary), var(--primary)) 0 8px / 100% 2px no-repeat,
      linear-gradient(var(--primary), var(--primary)) 0 16px / 100% 2px no-repeat;
    color: var(--primary);
  }

  .nav-toggle span {
    display: none;
  }

  .nav-menu.open {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--outline-variant);
    background: rgba(255, 255, 255, 0.96);
    padding: 1.2rem 1.5rem 1.5rem;
  }

  .split,
  .footer-grid,
  .plan-stack,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .media-card {
    max-width: 100%;
  }

  .gallery-strip img,
  .gallery-grid img {
    max-width: 100%;
    height: auto;
    min-height: 14rem;
  }

  .card-grid,
  .feature-list,
  .section.split .feature-list,
  .gallery-strip,
  .gallery-grid,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-card .stat-grid {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: -3rem 1rem 0;
  }
}

@media (max-width: 1024px) {
  .site-header {
    height: 74px;
    padding: 0 1.1rem;
  }

  .brand img {
    width: 76px;
  }

  .brand span {
    font-size: 0.72rem;
  }

  .nav-menu.open {
    top: 74px;
  }

  .page-hero {
    min-height: min(100vh, 720px);
    padding: 8rem 1.25rem 4rem;
  }

  .hero-content {
    width: 100%;
    max-width: min(100%, 40rem);
  }

  h1 {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .section,
  .cta-band {
    padding: 4.5rem 1.25rem;
  }

  .card-grid,
  .feature-list,
  .section.split .feature-list,
  .gallery-strip,
  .gallery-grid,
  .timeline,
  .two-col,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    display: grid;
  }

  .media-card::before {
    inset: -0.6rem;
  }

  .media-card > img {
    min-height: 360px;
  }

  .media-card .stat-grid {
    margin: 1rem 0 0;
    padding: 1rem;
  }

  .info-card,
  .contact-form,
  .info-panel {
    padding: 1.5rem;
  }

  .gallery-strip img,
  .gallery-grid img {
    height: 260px;
  }

  .fineprint {
    display: block;
  }

  .fineprint p + p {
    margin-top: 1rem;
  }
}

/* Subpage inline FAQ (added by scripts/migration/inline-faqs.mjs) */
#faq > .container,
#faq > .container.prose {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
}

.faq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1rem 1.25rem;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(15, 23, 42, 0.25);
}

.faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
  list-style: none;
  padding-right: 1.5rem;
  position: relative;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid rgba(15, 23, 42, 0.6);
  border-bottom: 2px solid rgba(15, 23, 42, 0.6);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq-item > p {
  margin: 0.75rem 0 0;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.65;
}

#faq > .container.prose > h2 {
  color: #0f172a;
  margin-bottom: 0.5rem;
}

/* a11y: focus indicator + reduced-motion */
.faq-item > summary,
#faq details.faq-item > summary {
  display: block;
}

.faq-item > summary:focus-visible,
#faq details.faq-item > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  #faq details.faq-item,
  .faq-item > summary::after,
  #faq details.faq-item > summary::after {
    transition: none;
  }
}


/* phase-b brand-text */
.brand-logo-img { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; filter: none !important; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 0; margin-left: 0; color: inherit; text-decoration: none; }
.brand-developer { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.brand-project { font-size: 1rem; font-weight: 700; }
a:has(> .brand-text), a.nav-logo, a.footer-logo, a.footer-brand, a.navbar_logo-link, a.footer_logo-link, a.navbar__brand, a.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }

/* fleet: nav links title-case + 12px (2026-06-05) */
.nav-link{font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.nav-menu{display:flex !important}.nav-toggle{display:none !important}}
@media(max-width:1024px){.nav-menu{display:none !important}.nav-toggle{display:block !important}.nav-menu.is-open,.is-open .nav-menu,.nav-menu.open,.open .nav-menu,.nav-menu.active,.active .nav-menu,.nav-menu.w--open,.w--open .nav-menu,.nav-menu.on,.on .nav-menu,.nav-menu.visible,.visible .nav-menu,.nav-menu.is-visible,.is-visible .nav-menu,.nav-menu.expanded,.expanded .nav-menu,.nav-menu.show,.show .nav-menu,.nav-menu.shown,.shown .nav-menu,.nav-menu.opened,.opened .nav-menu,.nav-menu.menu-open,.menu-open .nav-menu,.nav-menu.nav-open,.nav-open .nav-menu,.nav-menu[data-nav-menu-open]{display:flex !important;flex-direction:column !important}}

/* fleet: nav brand text size cap — brand NAME <=15px so no logo text exceeds 16px (2026-06-06) */
[class*="brand-project"],[class*="brand-name"],[class*="brand-title"],[class*="brand-lockup__name"]{font-size:15px !important}
[class*="brand-developer"]{font-size:11px !important}
/* Brand lockup split-line convention */
.brand-text,
.footer-brand-text,
.sow-nav__brand-text,
.sow-footer__brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.08;
  min-width: 0;
}
/* Brand lockup hierarchy convention */
[class*="brand-developer"],
[class*="brand-title"],
[class*="brand-lockup__eyebrow"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

[class*="brand-project"],
[class*="brand-subtitle"],
[class*="brand-name"],
[class*="brand-lockup__name"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

/* Contrast fix: inline link was dark-green on the dark-green section. */
.section.dark a:not([class*=btn]) { color: #e8eee9; }


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal `* { margin: 0 }` resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: var(--primary, #061b0e);
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}


/* --- cta-row primary/secondary pair -------------------------------------
   Section CTA rows sit on LIGHT surfaces. The global .btn.ghost is built for
   the dark hero (white text + white border), so unscoped it rendered white-on-
   white — "Talk to Sales" was invisible on reviews/builder. Scope a light-safe
   pair here; .page-hero keeps the white variant. */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: stretch; }
.cta-row .btn { min-height: 50px; }
.cta-row .btn.primary,
.cta-row .header-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  border-color: transparent;
}
.cta-row .btn.primary:hover,
.cta-row .header-cta:hover { opacity: 0.92; }
.cta-row .btn.ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.cta-row .btn.ghost:hover { background: rgba(6, 27, 14, 0.06); }

/* Dark bands (.section.dark) invert the pair: light fill for primary, white
   outline for secondary — the light-surface colours vanish against #061b0e. */
.section.dark .cta-row .btn.primary {
  background: var(--surface-container-lowest);
  color: var(--primary);
  border-color: transparent;
}
.section.dark .cta-row .btn.ghost {
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.55);
}
.section.dark .cta-row .btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* --- sticky media column (desktop 2-col only) ---------------------------
   .split is a 2-col grid above 1024px and collapses to 1fr below it, so the
   image only pins where a second column actually exists. align-self:start is
   required — a stretched grid item fills the row and can never stick.
   Offset clears the 80px fixed header. */
@media (min-width: 1025px) {
  .split .media-card {
    position: sticky;
    top: calc(80px + 1.5rem);
    align-self: start;
  }
}

/* --- sticky fix: overflow-x on html/body ---------------------------------
   `overflow-x: hidden` forces overflow-y to compute to `auto`, which turns
   html/body into scroll containers. Sticky descendants then measure travel
   against a scrollport that never scrolls, so they never pin. `overflow-x:
   clip` clips the same way WITHOUT establishing a scroll container, which
   restores position:sticky. Keep both selectors in sync. */
html, body { overflow-x: clip; }

/* --- master plan renders square -----------------------------------------
   .media-card > img is a 4/5 portrait frame with object-fit:cover, which is
   right for the gallery scenes but destroys a site plan: it crops to the
   centre and discards the parcel boundary on both sides. The master plan
   asset is authored 1:1 for exactly this reason, so give it a matching frame
   and the whole plan survives. Scoped by filename — the master-plan-<slug>
   convention is stable, so no HTML hook is needed.

   height:auto is load-bearing: the width/height HTML attributes map to
   presentational `height: 1200px`, and an explicit height beats aspect-ratio,
   so without it the frame renders 480x1200 and the base 4/5 never applies
   either. Kept scoped rather than fixed on .media-card > img so the gallery
   scenes keep the framing they ship with today.

   min-height:0 clears the base 500px floor. That floor stops a media card
   collapsing, which a 1/1 ratio already guarantees; leaving it in letterboxes
   the plan whenever the column is under 500px wide (it is at most desktop
   widths), which is the one thing this rule exists to prevent. */
.media-card > img[src*="master-plan-"] {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  object-fit: contain;
  background: var(--surface-container-lowest);
}

/* --- section CTA row placement in split sections -------------------------
   .split is a 2-col grid and .cta-row is a direct child, so it auto-places as
   a third grid item into row 2 / column 1 — directly beneath the media card.
   Default it to the full row so it reads as a section footer, matching the
   non-split sections. The row gap is already 4-6rem, so drop the inline
   margin-top. */
.split > .cta-row {
  grid-column: 1 / -1;
  margin-top: 0 !important;
}

/* Full width is not enough where the section has a sticky media card. Chrome
   bounds a sticky grid item by the GRID CONTAINER's content box, not by its
   own grid area, so the pinned image keeps travelling down into row 2 and —
   being positioned — paints over the buttons sitting there. Confining the row
   to the column the media card does NOT occupy removes the overlap
   geometrically, so z-order never comes into it.

   The column order flips between sections (master plan leads with the image,
   overview and location lead with the copy), hence two rules keyed on where
   .media-card actually sits. Sections without one keep the full-row default.
   Desktop only: .split collapses to a single column at <=1024, where
   `grid-column: 2` would invent an implicit second column. */
@media (min-width: 1025px) {
  .split > .media-card:first-child ~ .cta-row {
    grid-column: 2;
  }

  .split > .media-card:nth-child(2) ~ .cta-row {
    grid-column: 1;
  }
}

/* --- single-column sections ---------------------------------------------
   #builder is a .split whose only children are the copy and the CTA row, so
   the second grid column has nothing to hold and renders as dead space for
   half the section width. Collapse those to one column. Written as a
   structural test rather than an id so it stays true if a media card is ever
   added back: any split carrying something else (media-card, card-grid, the
   contact form rows) keeps its two columns. */
.section.split:not(:has(> :not(.copy, .cta-row))) {
  grid-template-columns: 1fr;
}

/* .cta-band is `minmax(0,1fr) auto` — copy left, button right. Stack it. The
   button is a grid item, so it is blockified and would otherwise stretch the
   full row width; justify-self holds it at its intrinsic size, aligned to the
   copy above it.

   Desktop only: the band already collapsed to one column at <=1024, where the
   button has always rendered full-width. That is a good tap target, so leave
   the existing mobile behaviour alone. */
.cta-band {
  grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
  .cta-band > .btn {
    justify-self: start;
  }
}

/* --- footer logo aspect ------------------------------------------------
   The img carries width="96" height="96", which maps to presentational
   height:96px. `.footer-logo{width:150px}` overrode only the width, so the
   box rendered 150x96 against a 1:1 image and Lighthouse flagged
   image-aspect-ratio. height:auto lets the intrinsic ratio drive the height. */
.footer-logo {
  height: auto;
}