/* ============================================================================
   SaraPath — FOOTER, STORY CARDS, DOCUMENT SILOS, TRUST STRIP
   The bottom of the building: four registers stacked like floors, each with
   its own reveal, sitting on the deepest glass in the system.
   ============================================================================ */

/* ================================================================ 1. Footer */
/* `overflow: hidden` is load-bearing: the curve below is absolutely positioned
   and hangs past the footer's foot. Without clipping it, that overhang extends
   the document's scroll height and leaves a dead band of page background under
   the whole site. */
.foot {
  position: relative;
  overflow: hidden;
  color: #B6C3D5;
  border-top: var(--line-parapet) solid var(--c-brand-navy);
}
/* The footer stands on deep glass; every register is veiled enough to read. */
.foot.glazing::after {
  background: linear-gradient(168deg, rgba(0,20,54,.86) 0%, rgba(6,12,24,.95) 60%);
}

/* The mark, once more, at the base — small, white, and the last thing on the
   page. It carries the wordmark's rollover in miniature: the logo lifts on a
   soft cast, no filter or tint on the artwork itself. */
.foot__bar-mark {
  flex: 0 0 auto; display: block; margin-right: var(--sp-6);
  padding-block: var(--sp-2);
}
.foot__bar-mark img {
  display: block; height: 40px; width: 116px; object-fit: contain;
  opacity: .82;
  transition: opacity var(--dur-hover) var(--ease),
              transform var(--dur-slide) var(--ease),
              filter var(--dur-slide) var(--ease);
}
@media (hover: hover) {
  .foot__bar-mark:hover img {
    opacity: 1; transform: translateY(-2px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
  }
}
@media (max-width: 1100px) {
  .foot__bar-mark { min-height: 44px; margin-right: 0; }
}
@media (max-width: 820px) {
  /* the mark leads the bar on its own line, centred with everything else */
  .foot__bar-in { flex-direction: column; }
  .foot__bar-in > span:not(.lk) { margin-right: 0; }
  .foot__bar-mark img { height: 44px; width: 128px; margin-inline: auto; }
}

/* --- register one: the promise ------------------------------------------ */
.foot__top {
  background: linear-gradient(168deg, rgba(46,76,130,.34), rgba(12,21,38,0) 70%);
  border-bottom: var(--line-hair) solid rgba(255,255,255,.12);
  padding-block: var(--sp-8);
}
/* Logo on the left; the copy takes the full width beside it and the actions sit
   below the copy — the old three-column grid squeezed the longer approved copy
   into a tall skinny column with the buttons floating beside it (client
   2026-09-04). */
.foot__brandrow {
  padding-inline: var(--layout-gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo copy"
    "logo act";
  column-gap: var(--sp-8); row-gap: var(--sp-6);
  align-items: start;
}
.foot__logo { grid-area: logo; height: 62px; width: auto; align-self: start; }
.foot__promise {
  grid-area: copy;
  margin: 0; max-width: 78ch;
  font-size: var(--fs-xs); line-height: 1.7; color: #C6D2E2;
  border-left: var(--line-hair) solid rgba(255,255,255,.16);
  padding-left: var(--sp-6);
}
.foot__act { grid-area: act; display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* --- register two: licensing -------------------------------------------- */
.foot__lic {
  padding-block: var(--sp-8);
  border-bottom: var(--line-hair) solid rgba(255,255,255,.12);
}
.foot__lic > .frame { padding-inline: var(--layout-gutter); }
.foot__lic h3 {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-family: var(--font-display); font-style: italic;
  font-size: 1.375rem; color: var(--c-white);
}
.foot__lic h3 i { height: var(--line-hair); flex: 1; background: rgba(255,255,255,.18); }
.foot__lic-note {
  font-family: var(--font-body); font-style: normal;
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-2);
}

/* Accreditation plates. Three across so each has room to breathe — five in a
   row read as a mishmash. Generous padding, one clear hierarchy: mark, then
   name, then the numbers. */
.fbadges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.fbadge {
  display: flex; flex-direction: column; gap: var(--sp-5);
  background-color: var(--c-white);
  background-image: var(--sheen-light);
  padding: var(--sp-6);
  box-shadow: var(--sheen-edge), var(--cast-3);
}
.fbadge__head { display: flex; align-items: center; gap: var(--sp-5); }
.fbadge__mark {
  flex: 0 0 76px; height: 76px;
  display: grid; place-items: center;
  background: var(--c-white);
  border: var(--line-hair) solid var(--c-cement-3);
  box-shadow: var(--cast-1), inset 0 1px 0 rgba(255,255,255,.9);
}
.fbadge__mark img { max-height: 60px; max-width: 62px; width: auto; object-fit: contain; }
.fbadge__mark--type {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.375rem; font-weight: var(--fw-bold);
  letter-spacing: 0; color: var(--c-glass-2);
}
.fbadge__id { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fbadge__id b {
  font-size: var(--fs-sm); font-weight: var(--fw-black);
  color: var(--c-brand-navy); line-height: 1.15;
}
.fbadge__id s {
  font-size: var(--fs-label); font-weight: var(--fw-black); text-decoration: none;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-4);
  line-height: 1.3;
}
.fbadge__lines {
  list-style: none; margin: 0; padding: var(--sp-4) 0 0;
  border-top: var(--line-hair) solid var(--c-cement-3);
  display: grid; gap: var(--sp-2);
  font-size: var(--fs-2xs); line-height: 1.6; color: var(--c-muted);
  text-wrap: pretty;
}
.fbadge__lines b {
  font-weight: var(--fw-bold); color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.foot__pt {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-2xs); line-height: 1.7; color: #93A4BB;
  display: grid; gap: 2px;
}
.foot__pt b { color: var(--c-gold-2); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-label); }

/* Compact licensing marks (client 2026-09-04) — one tidy row, smaller marks,
   no per-mark number lines. The numbers live on an internal licensing page. */
.fbadges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fbadge--compact { padding: var(--sp-5) var(--sp-4); }
.fbadge--compact .fbadge__mark { flex: 0 0 54px; height: 54px; }
.fbadge--compact .fbadge__mark img { max-height: 40px; max-width: 44px; }
.fbadge--compact .fbadge__mark--type { font-size: 1.1rem; }

/* --- register three: the whole sitemap ---------------------------------- */
.foot__map { padding-block: var(--sp-8); border-bottom: var(--line-hair) solid rgba(255,255,255,.12); }
.foot__map > .frame { padding-inline: var(--layout-gutter); }
.foot__cols {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-7);
}
.fcol { display: flex; flex-direction: column; gap: var(--sp-3); }
.fcol__h {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-2);
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid rgba(186,151,101,.42);
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fcol li a {
  display: block; padding: 5px 0 5px var(--sp-4);
  position: relative;
  font-size: var(--fs-xs); color: #BCC9DA; line-height: 1.35;
}
/* a small square marker, not a bullet — the mount blocks again */
.fcol li a::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 5px; background: rgba(255,255,255,.28);
  transition: background var(--dur-hover) var(--ease);
}
.fcol li a:hover { color: var(--c-white); }
.fcol li a:hover::before { background: var(--c-gold-3); }

.faddr {
  display: flex; flex-direction: column; gap: 1px;
  font-style: normal; font-size: var(--fs-xs); color: #BCC9DA;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-left: 3px solid rgba(186,151,101,.42);
}
.faddr__label {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-2);
}
.faddr__street { color: var(--c-white); font-weight: var(--fw-semi); }
/* Client 2026-09-11: the licence numbers were 11px and read as fine print.
   They are the column's substance, so they now sit at the column's own size. */
.faddr__clia { font-size: var(--fs-xs); color: #A9B7CA; }
.faddr__status { font-size: 11px; font-style: italic; color: var(--c-gold-2); }
/* Underlined on sight, per the client note — a download, not a hover trick. */
.faddr__cert {
  margin-top: 2px;
  font-size: var(--fs-2xs); color: var(--c-gold-2);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dur-hover) var(--ease);
}
.faddr__cert:hover { color: var(--c-white); }
.faddr--cap { font-style: normal; }
.faddr__tel {
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-bold);
  color: var(--c-white);
}
.faddr__tel:hover { color: var(--c-gold-2); }

/* --- register four: community ------------------------------------------- */
.foot__comm { padding-block: var(--sp-6); border-bottom: var(--line-hair) solid rgba(255,255,255,.12); }
.foot__comm > .frame {
  padding-inline: var(--layout-gutter);
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
}
.foot__comm-h {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-2);
}
.foot__marks { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-left: auto; }
.fmark {
  --mark-h: 68px;
  --mark-w: 116px;
  --mark-pad: 12px;
  display: flex; align-items: center; justify-content: center;
  width: var(--mark-w); height: var(--mark-h); padding: var(--mark-pad);
  overflow: visible;                 /* a partner mark is never cropped */
  background-color: var(--c-white);
  background-image: var(--sheen-light);
  box-shadow: var(--sheen-edge), var(--cast-1);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.fmark:hover { transform: translateY(-2px); box-shadow: var(--sheen-edge), var(--cast-3); }
/* Every mark floats at its own aspect ratio inside the box — the near-square
   United Way roundel and the 2.7:1 SMH lockup alike — and none is cropped.

   The limits are computed from the box tokens rather than written as
   percentages: a percentage height resolves against an auto-sized track, falls
   back to the intrinsic size, and the square marks spill straight out of the
   box. Changing --mark-h at a breakpoint carries the image with it. */
.fmark img {
  max-width: calc(var(--mark-w) - var(--mark-pad) * 2);
  max-height: calc(var(--mark-h) - var(--mark-pad) * 2);
  width: auto; height: auto;
  object-fit: contain;
}

/* --- legal --------------------------------------------------------------- */
.foot__bar { padding-block: var(--sp-5); }
/* mark, then the notice, then the legal run — one row, closing on the right */
.foot__bar-in {
  padding-inline: var(--layout-gutter);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-2xs); color: #7C8CA3;
}
.foot__bar-in > span:not(.lk) { margin-right: auto; }
.foot__bar a { color: #7C8CA3; }
.foot__bar a:hover { color: var(--c-white); }
.foot__bar .lk { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
/* Client 2026-09-11: the legal run was dropping to a line of its own. It holds
   the first row with the copyright, closing on the right edge. The gaps come in
   far enough that the whole row fits from 1100px up, which is where the bar
   stacks anyway. */
@media (min-width: 1101px) {
  .foot__bar-in { flex-wrap: nowrap; }
  .foot__bar-in > span:not(.lk) { white-space: nowrap; }
  .foot__bar .lk { flex-wrap: nowrap; gap: var(--sp-4); }
}

/* ========================================================== 2. Trust strip */
/* A cement curb under the band. The bar itself is the recess — a graded
   stucco ground with the band's shadow falling into its head — and each mark
   stands on it as its own cast panel, held off its neighbours. Flat white
   with hairlines read as a spreadsheet; this reads as five blocks set into a
   wall. (Rules live here, not in components.css: this file loads last.) */
.trust {
  background-color: #E7EBEF;
  background-image:
    radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #DFE4EA 0%, #EFF2F5 44%, #E4E9EE 100%);
  border-top: var(--line-fin) solid var(--c-brand-gold);
  border-bottom: var(--line-hair) solid var(--c-cement-4);
  box-shadow:
    inset 0 12px 20px -12px rgba(16, 25, 42, .48),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(16,25,42,.10);
}
.trust__in {
  max-width: var(--frame-max); margin-inline: auto;
  padding: var(--sp-7) var(--layout-gutter);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
.trust__pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center;
  min-height: 150px; padding: var(--sp-6) var(--sp-5);
  gap: var(--sp-4);
  /* A cement face, not a white box: the light comes in at the upper left,
     a specular band lies across the smooth part of it, the face falls away
     to the sill, and the edge is a change in light rather than a drawn
     border. The band slides on approach. */
  background-color: var(--c-white);
  background-image: var(--specular-band), var(--stucco);
  background-size: 200% 100%, auto, auto;
  background-position: -26% 0, center, center;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: var(--edge-fine), var(--cast-fine);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-navy);
  line-height: 1.5;
  transition: box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease),
              background-position .7s var(--ease);
}
.trust__pill:hover {
  transform: translateY(-2px);
  background-position: 126% 0, center, center;
  box-shadow: var(--edge-fine), var(--cast-fine-lift);
}
.trust__pill img { height: 44px; width: auto; object-fit: contain; }
/* when there is no logo file, a typographic lockup — never a fake badge */
.trust__type {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.75rem; font-weight: var(--fw-bold);
  letter-spacing: 0; text-transform: none; color: var(--c-gold-4); line-height: 1;
}

/* ======================================================== 3. Story cards */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.story {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: var(--line-hair) solid var(--c-cement-3);
  background-image: var(--sheen-light);
  box-shadow: var(--sheen-edge), var(--cast-3);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.story:hover { transform: translateY(-3px); box-shadow: var(--sheen-edge), var(--cast-4); }
.story__art { display: block; position: relative; border-bottom: 4px solid var(--c-mullion-alu); }
.story__art--mark {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: var(--sp-6);
}
/* A card-sized loop. Same frame as a photograph — the motion is incidental. */
.surface--film {
  aspect-ratio: 16 / 9; display: block;
  --surface-veil:
    radial-gradient(120% 90% at 20% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(16,25,42,.04) 0%, rgba(16,25,42,.16) 100%);
}
.surface--film .surface__video { opacity: 1; }
.tile__film { display: block; aspect-ratio: 16 / 9; border-bottom: 4px solid var(--c-mullion-alu); }
.story__art--mark img { max-height: 68px; width: auto; object-fit: contain; }
.story__body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5); flex: 1;
}
.story__tag {
  align-self: flex-start;
  background: var(--c-gold-wash);
  border: var(--line-hair) solid var(--c-gold-2);
  color: var(--c-gold-4);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 4px var(--sp-3); margin-bottom: var(--sp-1);
}
.story__title {
  font-family: var(--font-display); font-size: 1.3125rem;
  font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.2;
}
.story__blurb { font-size: var(--fs-xs); line-height: 1.55; color: var(--c-muted); }
.story__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: var(--line-hair) solid var(--c-cement-2);
}
.story__date { font-size: var(--fs-label); color: var(--c-muted); }
.story__go {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4);
}
.story:hover .story__go { color: var(--c-brand-navy); }

/* ===================================================== 4. Document silos */
.silos { display: grid; gap: var(--sp-6); }
.silo { padding: 0; }
.silo__head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 4px solid var(--c-mullion-alu);
  background: var(--c-cement-1);
}
.silo__label {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-navy);
}
.silo__note { font-size: var(--fs-2xs); color: var(--c-muted); }
.silo__count {
  margin-left: auto;
  font-family: var(--font-display); font-size: 1.25rem;
  font-weight: var(--fw-bold); color: var(--c-gold-4);
}
.silo__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.doc-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border-bottom: var(--line-hair) solid var(--c-cement-2);
  border-left: 4px solid transparent;
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.silo__list .doc-row:nth-child(odd) { border-right: var(--line-hair) solid var(--c-cement-2); }
.doc-row:hover { border-left-color: var(--c-gold-3); background: var(--c-cement-1); }
.doc-row__icon { flex: 0 0 auto; display: block; filter: drop-shadow(2px 2px 0 rgba(16,25,42,.12)); }
.doc-row__txt { min-width: 0; }
.doc-row__name { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.3; }
.doc-row__meta {
  display: block; font-size: 11px; color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-row__go {
  margin-left: auto; white-space: nowrap;
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4);
}
.doc-row:hover .doc-row__go { color: var(--c-brand-navy); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .foot__cols { grid-template-columns: repeat(3, 1fr); }
  .fbadges { grid-template-columns: repeat(2, 1fr); }
  .trust__in { grid-template-columns: repeat(3, 1fr); }
  .stories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .foot__brandrow { grid-template-columns: 1fr; grid-template-areas: none; gap: var(--sp-5); }
  /* Clear the named placements or the undefined logo/copy/act idents spawn
     phantom columns and stack the copy and buttons in one cell (client
     2026-09-04: mobile overlap). Auto-placement makes them flow: logo, copy,
     actions. */
  .foot__brandrow > * { grid-area: auto; }
  .foot__promise { border-left: 0; padding-left: 0; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .fbadges { grid-template-columns: 1fr; }
  .trust__in { grid-template-columns: 1fr 1fr; }
  .stories { grid-template-columns: 1fr; }
  .silo__list { grid-template-columns: 1fr; }
  .foot__marks { margin-left: 0; }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: 1fr; }
}

/* Six legal links since 2026-09-25: each link stays whole; the row wraps. */
.foot__bar .lk a { white-space: nowrap; }
@media (min-width: 1101px) {
  .foot__bar-in { flex-wrap: wrap; row-gap: var(--sp-3); }
  .foot__bar .lk { flex-wrap: wrap; row-gap: var(--sp-2); }
}