/* ==========================================================================
   Living Stone Homes, Inc. — site.css
   One stylesheet for the whole site. No build step, no framework, no CDN.

   HOW TO EDIT THIS FILE
   - Colors live in the :root block below. Change them there, nowhere else.
   - Do not add colors. This is a two-color brand (navy + green) and it stays
     one. No orange, terracotta, gold, red, or gradients.
   - Read the CONTRAST RULES comment before using green anywhere new.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted, no CDN call.
   Files live in assets/fonts/. latin-ext covers Spanish accents.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-400-normal.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-700-normal.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext-600-normal.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;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette — locked. Sampled from the approved logo.
     logo_full.png contains exactly two colors: #002F44 and #3E6E3F. */
  --navy:        #002F44;  /* headings, footer ground, primary buttons */
  --green:       #3E6E3F;  /* accent rules, links on light. Sparingly. */
  --green-light: #7BAE6C;  /* dark grounds only */
  --paper:       #F2F1F0;  /* page background, from the logo's own ground */
  --white:       #FFFFFF;  /* cards that lift off --paper */
  --ink:         #1A2A31;  /* body text */

  /* Derived border neutral. --paper is hue 30 deg, sat 3.4%, light 94.5%.
     --edge holds hue at exactly 30 deg and moves only the other two:
     hue 30, sat 8%, light 76%. No new hue enters the system. */
  --edge:        #C7C2BD;

  /* CONTRAST RULES — verified, do not violate
     --ink on --paper .............. 12.97:1  AAA
     --navy on --paper ............. 12.50:1  AAA
     --green on --paper ............  5.35:1  AA
     --green on --white ............  6.03:1  AA
     --paper on --navy ............. 12.50:1  AAA
     --green-light on --navy .......  5.39:1  AA
     --green on --navy .............  2.34:1  FAILS — never do this.
                                      Green on dark is --green-light, always.
     --green-light on --paper ......  2.32:1  FAILS — dark grounds only. */

  /* Type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --measure: 68ch;
  /* 980px, not 1120px. Body copy is capped at 68ch (~640px) for readability,
     so a wider container just parks empty space on the right of every text
     block and makes the page look lopsided rather than spacious. */
  --container: 980px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);

  /* Logo. Clear space equals the height of the green roof stroke, which is
     26px in a 352px-tall mark = 7.4% of lockup height. Floored at 8px so it
     never collapses at small sizes. Minimum lockup width is 180px; below
     that the header switches to the mark. */
  --logo-h: 92px;   /* 92 x (698/352) = 182px wide, clearing the 180px minimum */
  --logo-clear: max(8px, calc(var(--logo-h) * 0.074));
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* 18px base, not 16px. Much of this audience reads on an older phone in
     bright Florida sun. */
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin-top: 0; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.125rem; }

p, ul, ol, dl, table { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .45em; }

a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

strong { font-weight: 700; }

blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--green);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--navy);
}

hr { border: 0; border-top: 1px solid var(--edge); margin: var(--section-y) 0; }

/* --------------------------------------------------------------------------
   4. FOCUS + MOTION — accessibility floor
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.band :focus-visible,
.site-footer :focus-visible { outline-color: var(--green-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--paper);
  padding: .85rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--paper);
}

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

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
/* Vertical rhythm comes from bottom padding only, so consecutive sections
   (and a section following the hero) never double up their spacing. */
.section + .section,
.hero + .section { padding-top: 0; }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }

.eyebrow {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 .4rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--green);
  margin-top: .55rem;
}
.on-dark .eyebrow, .band .eyebrow { color: var(--green-light); }
.on-dark .eyebrow::after, .band .eyebrow::after { background: var(--green-light); }

.lead { font-size: clamp(1.2rem, 2.2vw, 1.3rem); line-height: 1.5; }
.small { font-size: .95rem; }
.note {
  font-size: .95rem;
  color: var(--ink);
  border-left: 2px solid var(--edge);
  padding-left: 1rem;
  margin-block: 1.5rem;
}

/* --------------------------------------------------------------------------
   6. THE ROOFLINE
   The one idea from the mark worth extending: an open green outline sitting
   on a solid navy mass. Line over weight.

   It appears exactly TWICE per page, and only where a boundary is crossed:
     1. under the header      (chrome  -> content)
     2. above the Foundation Band (content -> commitment)
   If you find yourself adding a third, delete it instead.

   The apex angle is 42.3 deg, measured off logo_mark.png: the roof rises
   15.4px for every 17px of run. Below 700px it becomes a plain rule, because
   an apex needs width to read as anything other than a rendering defect.
   -------------------------------------------------------------------------- */

.roofline {
  display: flex;
  align-items: flex-end;
  color: var(--green);
  width: 100%;
}
.roofline__rule { flex: 1 1 auto; height: 2px; background: currentColor; }
.roofline__apex { flex: 0 0 auto; width: 36px; height: 18px; overflow: visible; }
.roofline--light { color: var(--green-light); }

@media (max-width: 700px) {
  .roofline__apex { display: none; }
}

/* --------------------------------------------------------------------------
   7. HEADER + NAV
   -------------------------------------------------------------------------- */

.site-header { background: var(--paper); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: var(--logo-clear);
}

/* Logo. logo_full.png is navy + green artwork: LIGHT GROUNDS ONLY.
   Never place it on a dark ground; the navy wordmark disappears. */
.logo {
  display: inline-block;
  padding: var(--logo-clear);
  margin: calc(var(--logo-clear) * -1);
  /* flex-shrink: 0 is not optional. The header is a flex row; without this the
     logo is squeezed by the nav and the artwork is horizontally compressed,
     which is exactly the "never stretch or skew" rule being broken by default
     browser behaviour rather than by anyone's decision. */
  flex: 0 0 auto;
}
.logo img { height: var(--logo-h); width: auto; max-width: none; }
.logo__mark { display: none; }

/* Below 180px of lockup width the full lockup is not legible, so the header
   switches to the mark. The full nav also stops fitting beside the lockup
   around here, so both switch at the same breakpoint. */
@media (max-width: 1000px) {
  :root { --logo-h: 56px; }
  .logo__full { display: none; }
  .logo__mark { display: block; }
}

.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.4rem); }
.nav a {
  color: var(--navy);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--green); }
.nav a[aria-current="page"] { border-bottom-color: var(--green); }

.nav__cta {
  background: var(--navy);
  color: var(--paper) !important;
  padding: .55rem 1rem !important;
  border-radius: 2px;
  border-bottom: 0 !important;
}
.nav__cta:hover { background: var(--green); }

.nav__lang {
  font-size: .9rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: clamp(.5rem, 1vw, 1rem) !important;
  border-left: 1px solid var(--edge);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: 2px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: .5rem .9rem;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--edge);
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: .9rem 0;
    border-bottom: 1px solid var(--edge);
    white-space: normal;
  }
  .nav__cta { margin-top: 1rem; text-align: center; }
  .nav__lang { border-left: 0; padding-left: 0 !important; }
  .site-header { position: relative; }
}

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 2px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }

.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }

/* On navy grounds */
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn--light:hover { background: var(--green-light); border-color: var(--green-light); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-block: 1.75rem; }

.arrow-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { border-bottom-color: var(--navy); }
.on-dark .arrow-link, .band .arrow-link { color: var(--green-light); border-bottom-color: var(--green-light); }
.on-dark .arrow-link:hover, .band .arrow-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* --------------------------------------------------------------------------
   9. HERO
   No hero photograph behind the headline, and no dark overlay. The h1 is real
   text on --paper at 12.5:1 and never depends on an image loading.
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hero h1 { max-width: 16ch; margin-bottom: 1rem; }
.hero .lead { max-width: 46ch; }

/* --------------------------------------------------------------------------
   10. THE PRIMARY DOOR + THE SECONDARY PAIR
   Three audiences, but NOT three equal cards. A family whose roof is failing
   and a foundation officer doing due diligence are not equivalent visitors.
   Get Help takes the full-width slot; the other two sit below it, quieter.
   -------------------------------------------------------------------------- */

.door {
  background: var(--white);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--green);
  border-radius: 2px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.door h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .35rem; }
.door p { max-width: 52ch; }
.door > :last-child { margin-bottom: 0; }

.door-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.door-pair .door { border-left-width: 3px; }
.door-pair .door h3 { font-size: 1.35rem; margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   11. LISTS THAT CARRY CONTENT
   -------------------------------------------------------------------------- */

.deflist { margin: 0; }
.deflist > div {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--edge);
}
.deflist > div:first-child { border-top: 1px solid var(--edge); }
.deflist + p { margin-top: 1.15rem; }
.deflist dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .25rem;
}
.deflist dd { margin: 0; max-width: var(--measure); }

/* Role label beside a name — the title is metadata, not part of the name, so it
   gets the eyebrow treatment rather than equal weight. */
.deflist .role {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  vertical-align: middle;
  margin-left: .6rem;
  padding-left: .6rem;
  border-left: 1px solid var(--edge);
}
@media (max-width: 480px) {
  .deflist .role {
    display: block;
    margin: .2rem 0 0;
    padding: 0;
    border-left: 0;
  }
}

.inline-list { list-style: none; padding: 0; max-width: var(--measure); }
.inline-list li {
  padding: .55rem 0 .55rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--edge);
}
.inline-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 8px; height: 2px;
  background: var(--green);
}
.on-dark .inline-list li::before { background: var(--green-light); }
.on-dark .inline-list li { border-bottom-color: rgba(242, 241, 240, .22); }

/* Program blocks */
.program {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--edge);
}
.program:first-of-type { border-top: 0; }
.program p { max-width: var(--measure); }

.status-tag {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--white);
  color: var(--navy);
}
.status-tag--open { border-color: var(--green); color: var(--green); }

/* Two-column can / cannot */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.split > div { min-width: 0; }

/* Sequential process. Numbered markers are used here and ONLY here, because
   this content is genuinely sequential. */
.steps { list-style: none; counter-reset: step; padding: 0; max-width: var(--measure); }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.4rem 3.2rem;
  border-left: 2px solid var(--edge);
  margin-left: 1rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -1.05rem; top: -.15rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--navy);
  color: var(--paper);
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. TABLES
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; max-width: var(--measure); font-size: 1rem; }
th, td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { font-weight: 700; color: var(--navy); }
thead th { border-bottom: 2px solid var(--edge); }

.record-table td:first-child, .record-table th:first-child { width: 42%; color: var(--navy); font-weight: 700; }

/* --------------------------------------------------------------------------
   13. CALLOUTS
   -------------------------------------------------------------------------- */

.callout {
  background: var(--white);
  border: 1px solid var(--edge);
  border-top: 4px solid var(--navy);
  border-radius: 2px;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2rem;
  max-width: var(--measure);
}
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { margin-top: 0; }

.callout--green { border-top-color: var(--green); }

.pending {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .25rem .55rem;
  border: 1px dashed var(--edge);
  border-radius: 2px;
  color: var(--ink);
  background: var(--white);
}
.on-dark .pending, .site-footer .pending, .band .pending {
  color: var(--paper);
  background: transparent;
  border-color: rgba(242, 241, 240, .4);
}

/* --------------------------------------------------------------------------
   14. STATEMENT PANELS
   These occupy the two slots a hero photograph would have taken, on the home
   page and on About.

   They are not placeholders and they are not decoration. There is no
   photography yet, and flat vector illustration of houses reads as clip art
   and cheapens everything around it. So the visual weight goes to the two
   sentences the organization actually has — the mission and the vision — set
   at the scale a photograph would have occupied.

   When real photographs exist (see README), a photo can replace either panel,
   or sit beside it. Nothing else on the site is waiting on images.
   -------------------------------------------------------------------------- */

.statement {
  background: var(--navy);
  color: var(--paper);
  border-radius: 2px;
  padding: clamp(2rem, 5vw, 4rem);
  margin-block: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(16rem, 34vw, 24rem);
}
.statement p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--paper);
  max-width: 26ch;
  margin: 0;
}
.statement--wide p { max-width: 32ch; }
.statement cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .95rem;
  font-weight: 400;
  color: var(--green-light);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */

.form { max-width: 34rem; }
.field { margin-bottom: 1.35rem; }
.field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
.field .hint { display: block; font-weight: 400; font-size: .95rem; color: var(--ink); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: .8rem .9rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); }
textarea { min-height: 9rem; resize: vertical; }
select { appearance: none; background-image: none; }

.form-status {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--green);
  border-radius: 2px;
  background: var(--white);
  font-size: 1rem;
}
.form-status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. THE FOUNDATION BAND — the site's signature element
   Every page ends the same way: a navy band, notched at its top edge with the
   green roofline apex, carrying two things and only two things:
     1. the page's single primary action
     2. one line of current, literal organizational status

   THE STATUS LINE IS THE SAME STRING ON EVERY PAGE.
   Search the build for "band__status" and change all of them together when
   the first project breaks ground.
   -------------------------------------------------------------------------- */

/* No extra margin here: the preceding .section already carries a bottom
   padding of --section-y, and doubling it leaves a dead gap above the band. */
.band-wrap { margin-top: 0; }

.band {
  background: var(--navy);
  color: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.band h2 { color: var(--paper); margin-bottom: 1rem; }
.band p { max-width: 52ch; }
.band a:not(.btn) { color: var(--green-light); }
.band a:not(.btn):hover { color: var(--white); }

.band__status {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(242, 241, 240, .22);
  color: var(--green-light);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: none;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1rem;
  border-top: 1px solid rgba(242, 241, 240, .18);
}
.site-footer a { color: var(--green-light); }
.site-footer a:hover { color: var(--white); }

/* logo_full_reverse.png / logo_mark_reverse.png ONLY on this ground.
   Height is inherited from --logo-h so the footer lockup clears the same
   180px minimum as the header, and drops to the mark at the same breakpoint. */
.site-footer .logo { margin-bottom: 1.25rem; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.footer-legal p { margin-bottom: .35rem; }
.footer-legal .pending { margin-top: .5rem; margin-right: .4rem; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }

.footer-bottom {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(242, 241, 240, .22);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  align-items: center;
  font-size: .95rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }

/* --------------------------------------------------------------------------
   18. EMPTY STATE (projects.html)
   -------------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding-block: clamp(3rem, 9vw, 7rem);
  max-width: 46ch;
  margin-inline: auto;
}
.empty-state h1 { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   19. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav, .nav-toggle, .band-wrap, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #999; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}