/* ==========================================================================
   New Age Landholdings, nalhs.com
   Single stylesheet, ordered to match the section order in index.html:
   tokens → base → utilities → header → hero → multifamily → medical →
   contact → footer → responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --green-900: #12271f;
  --green-800: #16311a;
  --green-700: #1c3b2f;   /* primary: dark forest green */
  --green-600: #2a5344;
  --green-100: #dfe7e1;

  /* Warm neutrals */
  --cream:     #faf7f1;
  --cream-2:   #f2ede3;
  --paper:     #ffffff;

  /* Stone / charcoal */
  --stone-700: #33322e;
  --stone-500: #5c5a53;
  --stone-300: #a8a49a;
  --stone-200: #d9d4c8;

  --ink:       var(--stone-700);
  --muted:     var(--stone-500);
  --rule:      var(--stone-200);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gutter: 24px;
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(18, 39, 31, .06);
  --shadow-md: 0 12px 32px -16px rgba(18, 39, 31, .28);

  /* Glass system.
     Frosted surfaces only read as glass when something coloured sits behind
     them, which is what .ambient provides. Keep panels translucent enough to
     pick up that wash, opaque enough to hold body-copy contrast. */
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-edge: rgba(18, 39, 31, .07);
  --glass-blur: 18px;
  --glass-shadow: 0 10px 34px -14px rgba(18, 39, 31, .22);
  --glass-shadow-lg: 0 22px 60px -24px rgba(18, 39, 31, .32);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  position: relative;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--green-900);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

img, svg { max-width: 100%; }

/* <picture> wraps every image for AVIF and WebP delivery. display:contents
   keeps the <img> as the effective child so existing flex and grid rules,
   which target `img` directly, continue to apply. */
picture { display: contents; }

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Ambient wash + glass surfaces
   -------------------------------------------------------------------------- */

/* Fixed, non-interactive colour behind everything. Without it the frosted
   panels would blur a flat cream field and just look grey. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Heavily blurred and low opacity on purpose. Tighter blobs render a
   discernible curved edge, which showed through the translucent top bar and
   read as an unintended shape rather than as ambient colour. */
.ambient__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .34;
}
.ambient__blob--a {
  width: 62vw; height: 62vw;
  top: -26vw; right: -18vw;
  background: radial-gradient(circle, rgba(42, 83, 68, .34), rgba(42, 83, 68, 0) 68%);
}
.ambient__blob--b {
  width: 56vw; height: 56vw;
  top: 42%; left: -24vw;
  background: radial-gradient(circle, rgba(168, 164, 154, .36), rgba(168, 164, 154, 0) 68%);
}
.ambient__blob--c {
  width: 52vw; height: 52vw;
  bottom: -20vw; right: -6vw;
  background: radial-gradient(circle, rgba(28, 59, 47, .26), rgba(28, 59, 47, 0) 68%);
}

/* The frosted surface itself. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Browsers without backdrop-filter get a solid panel rather than a
   washed-out translucent one that would fail contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .95); }
  .site-header { background: var(--cream); }
}

/* Respect a stated preference for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ambient { display: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Honeypot: hidden from everyone, including screen readers. Bots fill it. */
.honeypot { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green-700);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 600;
  margin: 0 0 .9rem;
}

.lede {
  font-size: 1.075rem;
  color: var(--muted);
  max-width: 62ch;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.btn--primary:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.btn--ghost {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .8);
  color: var(--green-900);
  box-shadow: var(--glass-shadow);
}
.btn--ghost:hover { border-color: var(--green-600); color: var(--green-700); background: rgba(255, 255, 255, .78); }
.btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--green-100);
  padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--green-600); }
.link-arrow span { transition: transform .18s ease; }
.link-arrow:hover span { transform: translateX(3px); }

/* Breadcrumb (subpages only) */
.breadcrumb { padding-top: 20px; }
.breadcrumb ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .82rem; color: var(--stone-500);
}
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumb a { color: var(--stone-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-700); text-decoration: underline; }

/* FAQ (subpages only) */
.section--faq { background: transparent; }
.faq { display: grid; gap: 12px; }
.faq__item { padding: 0; overflow: hidden; }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--green-900);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--green-600);
  flex: none;
  transition: transform .2s ease;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p {
  margin: 0;
  padding: 0 1.35rem 1.25rem;
  color: var(--muted);
  font-size: .97rem;
}

/* Section rhythm */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section__head { max-width: 68ch; margin-bottom: clamp(36px, 5vw, 56px); }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo { display: inline-block; color: var(--green-700); text-decoration: none; }
.logo__svg { display: block; width: 190px; height: auto; }
.logo__tier1 {
  font-family: var(--serif);
  font-size: 30px;
  fill: currentColor;
}
.logo__tier2 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 4.4px;
  fill: currentColor;
}
.logo__rule { stroke: currentColor; stroke-width: 1; opacity: .55; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, .72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-edge);
}

/* Fully opaque. At 92% the ambient wash bled through and its blurred edge
   showed as a faint curve across the bar. Translucency buys nothing on a solid
   dark strip. */
.topbar {
  background: var(--green-900);
  color: var(--green-100);
  font-size: .8rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  flex-wrap: wrap;
}
.topbar__region { letter-spacing: .06em; opacity: .8; }
.topbar__contact { display: flex; align-items: center; gap: .5rem; }
.topbar a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.topbar a:hover { color: #fff; border-bottom-color: #fff; }
.topbar__sep { opacity: .5; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 16px;
}
.nav__menu { display: flex; align-items: center; gap: 2rem; }
.nav__menu ul {
  display: flex;
  align-items: center;
  gap: 1.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Scoped to list links only. Applying this to every <a> in the nav gave the
   CTA a 3px bottom padding that overrode the button's own, pushing its label
   off centre inside the green pill. */
.nav__menu ul a {
  text-decoration: none;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav__menu ul a:hover { color: var(--green-700); border-bottom-color: var(--green-700); }
.nav__cta { color: #fff; text-decoration: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--green-900);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Section tints are translucent, never opaque. An opaque background would
   block the ambient wash and flatten the glass treatment entirely. */
.hero { background: transparent; }
.hero__inner {
  padding-block: clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(32px, 5vw, 72px);
}
.hero__text { min-width: 0; }
.hero h1 {
  font-size: clamp(2rem, 4.1vw, 2.95rem);
  max-width: 17ch;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 52ch;
  margin-top: 1.25rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2.25rem;
}

.hero__media {
  margin: 0;
  min-width: 0;
  padding: 10px 10px 4px;
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.hero__media img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 440px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.hero__media figcaption {
  margin: .75rem .25rem .5rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* --------------------------------------------------------------------------
   Portfolio stats
   -------------------------------------------------------------------------- */
.section--stats {
  padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 72px);
  background: transparent;
}

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat {
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.4vw, 3.2rem);
  line-height: 1;
  color: var(--green-800);
  letter-spacing: -.02em;
}
.stat__plus { font-size: .6em; vertical-align: super; margin-left: 1px; }

/* A word rather than a figure. Sized down so it sits on the same optical
   line as the numerals beside it instead of towering over them. */
.stat--text .stat__num { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.stat__unit {
  margin-top: .55rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 600;
}
.stat__label { font-size: .93rem; color: var(--muted); }

.stats__note {
  max-width: 68ch;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: 1.02rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Multifamily
   -------------------------------------------------------------------------- */
/* Banding alternates warm against near-white. Tinting white on cream, as the
   first attempt did, is invisible: both composite to roughly the same value. */
.section--multifamily {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
  border-block: 1px solid rgba(18, 39, 31, .07);
}

/* Featured project */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
  margin-bottom: 24px;
}
.project__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 400px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.project__body { min-width: 0; padding-right: clamp(0px, 1.5vw, 20px); }
.project__body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .25rem; }
.project__addr {
  color: var(--stone-500);
  font-size: .92rem;
  margin-bottom: 1rem;
}
.project__body > p { color: var(--muted); font-size: .98rem; }

.project__meta {
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: .85rem;
}
.project__meta > div { display: flex; flex-direction: column; gap: .1rem; }
.project__meta dt {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 600;
}
.project__meta dd { margin: 0; font-size: .95rem; color: var(--green-900); }

/* Photo gallery */
.gallery {
  list-style: none;
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery li {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 8px 8px 4px;
}
.gallery img {
  display: block;
  width: 100%;
  height: clamp(180px, 20vw, 240px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.gallery span {
  font-size: .82rem;
  color: var(--stone-500);
  padding: 0 .35rem .35rem;
}

.phases {
  list-style: none;
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.phase { padding: 26px 24px 28px; }
.phase__num {
  display: block;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--green-600);
  letter-spacing: .08em;
  margin-bottom: 1.1rem;
}
.phase h3 { margin-bottom: .5rem; }
.phase p { font-size: .93rem; color: var(--muted); }

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  background: linear-gradient(135deg, rgba(28, 59, 47, .93), rgba(18, 39, 31, .93));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--green-100);
  padding: clamp(32px, 4.5vw, 48px);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.callout__minor {
  margin-top: .85rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .62);
}
.callout h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.callout p { color: rgba(255,255,255,.82); max-width: 62ch; font-size: .98rem; }
.callout .btn--primary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-900);
  white-space: nowrap;
}
.callout .btn--primary:hover { background: #fff; border-color: #fff; color: var(--green-900); }
.callout :focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   Medical
   -------------------------------------------------------------------------- */
.section--medical {
  background: linear-gradient(180deg, rgba(240, 235, 224, .78), rgba(240, 235, 224, .58));
  border-block: 1px solid rgba(18, 39, 31, .08);
}

/* Owned properties */
.property {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.property--reverse .property__media { order: 2; }
.property__media {
  padding: 9px;
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.property__media img {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 330px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.property__body { min-width: 0; }
.property__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .25rem; }
.property__addr {
  color: var(--stone-500);
  font-size: .92rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--stone-200);
}

.property__body > p:last-child { color: var(--muted); font-size: .98rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: clamp(40px, 5vw, 64px);
}
.card {
  position: relative;
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  overflow: hidden;
}
/* Accent kept as an overlay so it does not fight the glass border radius. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--green-600));
}
.card__tag {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone-500);
  font-weight: 600;
  margin: 0;
}
.card h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0; }
.card p { color: var(--muted); font-size: .98rem; }
.card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .5rem; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.section--contact {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5));
  border-top: 1px solid rgba(18, 39, 31, .07);
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact__details {
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.1rem;
}
.contact__details > div { display: flex; flex-direction: column; gap: .15rem; }
.contact__details dt {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 600;
}
.contact__details dd { margin: 0; font-size: 1.02rem; color: var(--green-900); }

.form {
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.form__row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.05rem; }
.form label { font-size: .85rem; font-weight: 600; color: var(--green-900); letter-spacing: .01em; }
.form .opt { font-weight: 400; color: var(--stone-500); }

.form input,
.form select,
.form textarea {
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(18, 39, 31, .12);
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form input:hover,
.form select:hover,
.form textarea:hover { background: rgba(255, 255, 255, .8); }
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(42, 83, 68, .12);
}
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c5a53' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.25rem;
}

.form__status {
  margin: 1rem 0 0;
  font-size: .92rem;
  min-height: 1.4em;
}
.form__status[data-state="ok"]    { color: var(--green-700); font-weight: 500; }
.form__status[data-state="error"] { color: #9a3412; }

.form__fallback {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-900);
  color: rgba(223, 231, 225, .78);
  padding: clamp(48px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
  font-size: .92rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
.site-footer .logo__svg--footer { color: var(--cream); width: 180px; margin-bottom: 1.1rem; }
.site-footer__note { max-width: 46ch; }
.site-footer__meta { display: grid; gap: .35rem; justify-items: start; }
.site-footer__meta p { margin: 0; }
.site-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.site-footer a:hover { border-bottom-color: #fff; }
.site-footer__areas {
  max-width: 42ch;
  margin-top: .4rem !important;
  font-size: .84rem;
  opacity: .9;
}
.site-footer__legal { margin-top: 1rem !important; opacity: .9; font-size: .84rem; }
.site-footer :focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .phases { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stat { padding: 22px 18px; }
  .callout { flex-direction: column; align-items: flex-start; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }

  .hero__inner { grid-template-columns: 1fr; row-gap: 36px; }
  .hero h1 { max-width: 18ch; }
  .hero__media img { height: clamp(260px, 40vw, 360px); }

  .project { grid-template-columns: 1fr; }
  .project__body { padding-right: 0; }
  .property { grid-template-columns: 1fr; gap: 20px; }
  .property--reverse .property__media { order: 0; }
}

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; }
  .stat { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .1rem 1rem; }
  .stat__num { font-size: 2.4rem; }
  .stat__unit { margin-top: 0; }
  .stat__label { flex-basis: 100%; }

  .nav { position: relative; flex-wrap: wrap; }
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-top: 8px;
    margin-top: 12px;
    border-top: 1px solid var(--rule);
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__menu li { border-bottom: 1px solid var(--rule); }
  .nav__menu ul a { display: block; padding: 14px 2px; border-bottom: 0; }
  .nav__cta { margin: 14px 0 4px; }

  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__region { display: none; }

  .hero__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .logo__svg { width: 158px; }
  .phases { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery li:last-child { grid-column: auto; }
  .gallery img { height: 220px; }
}