/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER-2027  —  "F27"  ·  site-wide footer redesign layer
   ---------------------------------------------------------------------------
   The 2026 footer was a flat navy slab with four equal link stacks — it read
   as an afterthought and gave the page no ending. F27 rebuilds it as the
   page's final ACT, in the same editorial language as home-2027 (H27):

     · a closing CTA slab in oversized DM Serif display type, left-anchored,
       with the reassurance rail underneath (no dead-end scroll)
     · a deep void→navy ink ramp with a masked hairline grid and one soft
       pointer-reactive aurora — depth without gradients-as-decoration
     · a ghost "Platinum" watermark letterform bleeding off the base edge
     · link rows that resolve on hover with a persimmon tick, not a colour flip
     · a live status pill + hairline trust rail in the base bar
     · mobile: the four directory columns collapse into real accordions
       (footer-2027.js), so a 24-link footer is no longer a 6-screen scroll

   RULES IT KEEPS (non-negotiable brand):
     · palette locked — navy #0D1B3E · persimmon #E8593A · sky #3B86BC ·
       sage #7A9E8E. No new hues. Persimmon stays a tick-and-CTA accent.
     · DM Serif Display owns the closing H2 (enforced by brand-2026.css);
       Inter owns every label, link and control.
     · eyebrows keep the Round-6 corner-bracket (viewfinder) standard —
       persimmon ticks, coral-light #FFAB96 label on dark. No pill, no dot.
     · surfaces on dark are the ink ramp only — never the retired warm stone.

   LOADING: linked from base_public.html AFTER ux-2027.css, so it is the last
   stylesheet in the cascade. Every rule is scoped under `.f27` (the footer
   root keeps `.footer-v2` only so the existing print-hide rules on
   privacy_policy/terms_of_service still match it); all child classes are new,
   so nothing in styles.css / ux-2027.css / responsive-refinement.css can
   reach them. !important is used only where the enforcement layer forces a
   value we must reclaim on a dark surface.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ §0 · TOKENS ═════════════════════════════════════════════════════════ */

.f27 {
  /* ink ramp — deeper than brand navy so the navy reads as a raised plane */
  --f27-void:    #060C1E;
  --f27-ink:     #0A1330;
  --f27-navy:    #0D1B3E;
  --f27-navy-up: #14244F;

  /* accents (brand-locked) */
  --f27-coral:    #E8593A;
  --f27-coral-dk: #C94A2D;
  --f27-coral-lt: #FFAB96;
  --f27-sky:      #3B86BC;
  --f27-sage:     #7A9E8E;

  /* text on ink */
  --f27-on:      #FFFFFF;
  --f27-on-1:    rgba(255,255,255,.82);
  --f27-on-2:    rgba(255,255,255,.58);
  /* .40 gave 3.78:1 on the #060D20 base — a WCAG AA fail for the 12px legal
     links and the 13px copyright line, which are the only text this tier
     paints (its third user is the accordion caret icon). .56 clears 4.5:1
     without brightening the footer's quiet bottom edge noticeably. */
  --f27-on-3:    rgba(255,255,255,.56);
  --f27-hair:    rgba(255,255,255,.11);
  --f27-hair-2:  rgba(255,255,255,.06);
  --f27-plate:   rgba(255,255,255,.035);

  /* type scale */
  --f27-d1:   clamp(30px, 4.4vw, 60px);   /* closing headline */
  --f27-lead: clamp(15px, 1.1vw, 17px);
  --f27-link: 14.5px;

  /* rhythm */
  --f27-pad: clamp(20px, 4vw, 56px);
  --f27-rail: 1320px;

  --f27-ease:   cubic-bezier(.16, 1, .3, 1);
  --f27-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ══ §1 · SHELL ══════════════════════════════════════════════════════════ */

.f27 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--f27-on-1);
  background:
    var(--f27-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-inline: 0;   /* the rail owns horizontal padding, not the shell */
}

/* neutralise the ux-2027 grid overlay — F27 ships its own, better masked */
.f27::after { content: none !important; }

/* hairline seam that separates the footer from whatever page ends above it */
.f27::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  z-index: 3;
  background: rgba(255,255,255,.16);
  opacity: .55;
}

/* — masked hairline grid: structure you feel, not read — */
.f27__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 78% at 18% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 78% at 18% 0%, #000 0%, transparent 72%);
}

/* — aurora: one soft light source, nudged by the pointer (JS sets --mx/--my) — */
.f27__aurora {
  position: absolute;
  inset: -20% -10% auto;
  height: 78%;
  z-index: 0;
  pointer-events: none;
  background:
    none;
  filter: blur(18px);
  transition: background-position 600ms linear;
  will-change: background;
}

/* — ghost wordmark bleeding off the base edge — */
.f27__mark {
  position: absolute;
  left: 50%;
  bottom: -.44em;              /* only the shoulders of the letters surface */
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(120px, 20vw, 288px);
  line-height: .8;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.045);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
}

.f27__rail {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--f27-rail);
  margin-inline: auto;
  padding-inline: var(--f27-pad);
}

/* ══ §2 · EYEBROW — Round-6 corner-bracket standard, dark variant ════════ */

.f27-eyebrow {
  position: relative;
  display: inline-block;
  padding: 7px 14px;
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f27-coral-lt);
  background: none;
  border: 0;
}
.f27-eyebrow::before,
.f27-eyebrow::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-style: solid;
  border-color: var(--f27-coral);
}
.f27-eyebrow::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.f27-eyebrow::after  { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* ══ §3 · ACT 0 — CLOSING CTA SLAB ═══════════════════════════════════════ */

.f27-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(56px, 7vw, 104px) 0 clamp(44px, 5vw, 72px);
}

/* the slab sits on a faintly raised plane so it separates from the directory */
.f27-cta::before {
  content: '';
  position: absolute;
  inset: clamp(28px, 3.4vw, 48px) calc(var(--f27-pad) * -1) 0;
  z-index: -1;
  border-radius: 28px 28px 0 0;
  background:
    rgba(255,255,255,.045);
  border: 1px solid var(--f27-hair-2);
  border-bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

.f27-cta__title {
  margin: 0 0 16px;
  font-size: var(--f27-d1);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--f27-on) !important;   /* reclaim from the global heading colour */
  text-wrap: balance;
}
/* dark-surface accent word: coral-light, per the Round-5/6 dark standard —
   the enforcement layer paints h2 em persimmon, which is too dim on ink */
.f27-cta__title em,
.f27-cta__title i { font-style: italic; color: var(--f27-coral-lt) !important; }

.f27-cta__lead {
  margin: 0;
  max-width: 46ch;
  font-size: var(--f27-lead);
  line-height: 1.62;
  color: var(--f27-on-2);
}

.f27-cta__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.f27-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* — buttons — */
.f27-btn {
  --_bg: transparent;
  --_fg: var(--f27-on);
  --_bd: var(--f27-hair);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--_bd);
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_fg);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 420ms var(--f27-ease),
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 420ms var(--f27-ease);
}
.f27-btn svg { flex: none; transition: transform 420ms var(--f27-spring); }
.f27-btn:hover { transform: translateY(-2px); }
.f27-btn:hover svg { transform: translateX(4px); }

.f27-btn--primary {
  --_bg: var(--f27-coral);
  --_bd: var(--f27-coral);
  box-shadow: 0 10px 30px -12px rgba(232,89,58,.72);
}
.f27-btn--primary:hover {
  --_bg: var(--f27-coral-dk);
  --_bd: var(--f27-coral-dk);
  box-shadow: 0 18px 40px -14px rgba(232,89,58,.85);
}

.f27-btn--ghost { --_bg: rgba(255,255,255,.04); }
.f27-btn--ghost:hover {
  --_bg: rgba(255,255,255,.09);
  --_bd: rgba(255,255,255,.26);
}

/* — reassurance rail under the actions — */
.f27-cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.f27-cta__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--f27-on-2);
}
.f27-cta__meta li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--f27-sage);
  flex: none;
}

/* ══ §4 · ACT 1 — DIRECTORY ══════════════════════════════════════════════ */

.f27-body {
  display: grid;
  grid-template-columns: minmax(260px, .92fr) minmax(0, 2.5fr);
  gap: clamp(32px, 5vw, 88px);
  padding: clamp(44px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--f27-hair-2);
}

/* ── 4.1 Brand column ── */
.f27-brand { display: flex; flex-direction: column; align-items: flex-start; }

.f27-brand__logo {
  display: inline-flex;
  margin-bottom: 20px;
  border-radius: 6px;
  transition: opacity 260ms ease;
}
.f27-brand__logo:hover { opacity: .82; }
/* the shipped lockup is the blue-on-transparent asset — inverted to the white
   lockup for the navy surface, same treatment the 2026 footer used */
.f27-brand__logo img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.f27-brand__desc {
  margin: 0 0 24px;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--f27-on-2);
  text-wrap: pretty;
}

/* trust rail — hairline chips, no fill, no shadow */
.f27-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.f27-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--f27-hair);
  border-radius: 999px;
  background: var(--f27-plate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--f27-on-2);
  transition: color 240ms ease, border-color 240ms ease, transform 380ms var(--f27-ease);
}
.f27-trust__item svg { width: 14px; height: 14px; color: var(--f27-sky); }
.f27-trust__item:hover {
  color: var(--f27-on);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
}

/* social — square hairline tiles that fill persimmon on hover */
.f27-social { display: flex; gap: 10px; }
.f27-social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--f27-hair);
  border-radius: 12px;
  background: var(--f27-plate);
  color: var(--f27-on-2);
  transition:
    color 240ms ease, background-color 240ms ease,
    border-color 240ms ease, transform 420ms var(--f27-spring);
}
.f27-social__link:hover {
  color: var(--f27-on);
  background: var(--f27-coral);
  border-color: var(--f27-coral);
  transform: translateY(-3px);
}

/* ── 4.2 Link columns ── */
.f27-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.f27-col { min-width: 0; }

/* the heading is <h3><button> — a real heading for the a11y outline, wrapping a
   real button so the mobile accordion is keyboard-operable. On desktop the
   button is inert (JS strips its aria/handler) and reads as a plain label. */
.f27-col__title { margin: 0; padding: 0; font: inherit; }
.f27-col__title--mt { margin-top: 32px; }

.f27-col__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--f27-on);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  cursor: default;
}

.f27-col__head svg.f27-col__ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--f27-coral-lt);
  transition: transform 380ms var(--f27-spring);
}
.f27-col:hover .f27-col__ico { transform: translateY(-2px) rotate(-6deg); }

/* the caret only exists in accordion mode */
.f27-col__caret {
  margin-left: auto;
  display: none;
  flex: none;
  transition: transform 320ms var(--f27-ease);
}

.f27-col__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f27-col__list a {
  position: relative;
  display: block;
  padding: 6px 0 6px 0;
  font-size: var(--f27-link);
  line-height: 1.45;
  color: var(--f27-on-2);
  text-decoration: none;
  transition: color 220ms ease, padding-left 380ms var(--f27-ease);
}
/* persimmon tick grows in from the gutter instead of a colour flip */
.f27-col__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--f27-coral);
  transform: translateY(-50%);
  transition: width 380ms var(--f27-ease);
}
.f27-col__list a:hover,
.f27-col__list a:focus-visible {
  color: var(--f27-on);
  padding-left: 20px;
}
.f27-col__list a:hover::before,
.f27-col__list a:focus-visible::before { width: 13px; }

/* current page marker */
.f27-col__list a[aria-current="page"] { color: var(--f27-on); padding-left: 20px; }
.f27-col__list a[aria-current="page"]::before { width: 13px; background: var(--f27-sky); }

/* ══ §5 · BASE BAR ═══════════════════════════════════════════════════════ */

.f27-base {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px clamp(20px, 3vw, 40px);
  padding: 22px 0 30px;
  border-top: 1px solid var(--f27-hair-2);
}

.f27-base__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.f27-base__copy {
  margin: 0;
  font-size: 13px;
  color: var(--f27-on-3);
}

.f27-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 2px;
}
.f27-legal a {
  position: relative;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--f27-on-3);
  text-decoration: none;
  transition: color 220ms ease, background-color 220ms ease;
}
.f27-legal a:hover { color: var(--f27-on-1); background: rgba(255,255,255,.06); }
.f27-legal span[aria-hidden] { color: rgba(255,255,255,.18); font-size: 11px; }

/* back to top — circular hairline, arrow lifts out on hover */
.f27-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--f27-hair);
  border-radius: 999px;
  background: var(--f27-plate);
  color: var(--f27-on-2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 240ms ease, border-color 240ms ease, transform 420ms var(--f27-ease);
}
.f27-top__ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  transition: background-color 240ms ease, transform 420ms var(--f27-spring);
}
.f27-top:hover {
  color: var(--f27-on);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-3px);
}
.f27-top:hover .f27-top__ico { background: var(--f27-coral); transform: translateY(-2px); }

/* ══ §6 · FOCUS ══════════════════════════════════════════════════════════ */

.f27 a:focus-visible,
.f27 button:focus-visible {
  outline: 2px solid var(--f27-coral-lt);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ══ §7 · SCROLL REVEAL (JS adds .is-in) ═════════════════════════════════ */

.f27 [data-f27-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 700ms var(--f27-ease),
    transform 700ms var(--f27-ease);
  transition-delay: var(--f27-delay, 0ms);
}
.f27 [data-f27-reveal].is-in { opacity: 1; transform: none; }
/* never let the reveal hide content if JS fails */
.no-js .f27 [data-f27-reveal],
.f27.f27--ready-fallback [data-f27-reveal] { opacity: 1; transform: none; }

/* ══ §8 · RESPONSIVE ═════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .f27-body { grid-template-columns: 1fr; gap: 40px; }
  .f27-brand__desc { max-width: 52ch; }
  .f27-nav { gap: 32px clamp(20px, 4vw, 40px); }
}

/* the base bar needs ~1400px to hold copy + 6 legal links + Top on one line
   (the rail caps at 1320px, so the wide layout has ~1208px to work with);
   below that the legal nav takes its own row instead of wrapping raggedly */
@media (max-width: 1400px) {
  .f27-base {
    grid-template-columns: 1fr auto;
    row-gap: 14px;
  }
  .f27-legal {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 4px;
    border-top: 1px solid var(--f27-hair-2);
  }
}

@media (max-width: 900px) {
  .f27-cta {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
  }
  .f27-cta__side { align-items: flex-start; }
  .f27-base {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
  }
  .f27-base__left { justify-content: center; }
  .f27-legal { justify-content: center; }
}

/* ── 8.1 Accordion mode ── */
@media (max-width: 720px) {
  .f27-nav {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .f27-col {
    border-top: 1px solid var(--f27-hair-2);
  }
  .f27-col:first-child { border-top: 0; }

  .f27-col__head {
    margin: 0;
    padding: 18px 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .f27-col__title--mt { margin-top: 0; border-top: 1px solid var(--f27-hair-2); }
  .f27-col__caret { display: block; color: var(--f27-on-3); }
  .f27-col__head[aria-expanded="true"] .f27-col__caret { transform: rotate(180deg); }

  /* 0fr → 1fr keeps the transition honest without measuring heights.
     JS owns [data-open]; the collapsed state only applies once it has run
     (see the [data-f27-accordion] guard below), so a JS failure leaves every
     panel open rather than sealed shut. */
  .f27-nav[data-f27-accordion="on"] .f27-col__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 420ms var(--f27-ease);
  }
  /* min-height:0 — without it the grid item keeps its auto minimum and the
     collapsed panel still reserves the list's padding */
  .f27-nav[data-f27-accordion="on"] .f27-col__panel > * { overflow: hidden; min-height: 0; }
  .f27-nav[data-f27-accordion="on"] .f27-col__panel[data-open="true"] { grid-template-rows: 1fr; }

  /* the closing gap lives on the last row, not on the <ul> — a clipped element's
     own padding still paints, so ul padding would leave 14px in a shut panel */
  .f27-col__list { gap: 0; padding-bottom: 0; }
  .f27-col__list li:last-child { padding-bottom: 14px; }
  .f27-col__list a { padding-block: 9px; font-size: 15px; }

  /* touch targets */
  .f27-social__link { width: 46px; height: 46px; }
  .f27-btn { width: 100%; justify-content: center; }
  .f27-cta__actions { width: 100%; }
}

@media (max-width: 480px) {
  .f27__mark { font-size: 26vw; }
  .f27-trust { gap: 6px; }
  .f27-legal a { padding: 4px 7px; }
}

/* ══ §9 · MOTION / CONTRAST / PRINT ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .f27 *,
  .f27 *::before,
  .f27 *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .f27 [data-f27-reveal] { opacity: 1 !important; transform: none !important; }
  .f27__aurora { display: none; }
}

@media (prefers-contrast: more) {
  .f27 { --f27-on-2: rgba(255,255,255,.85); --f27-on-3: rgba(255,255,255,.72); }
  .f27-col__list a { color: var(--f27-on-1); }
  .f27__grid, .f27__mark { display: none; }
}

@media print {
  .f27 { background: none !important; color: #000 !important; }
  .f27__aurora, .f27__grid, .f27__mark, .f27-cta, .f27-top { display: none !important; }
}