/* ==========================================================================
   Global footer. A heavy frosted slab that rises over the sky, carrying the
   site-wide call to action, the link columns and the brand.
   Tokens come from style.css; the only local tokens are motion and material.

   Apple-design notes
   - Press feedback is instant (:active on pointer-down); release springs back.
   - Motion is transform / opacity (plus grid-template-rows for the accordion).
   - Springs are critically damped (damping 1.0, response ~0.35s), sampled into
     linear(); no bounce, because nothing here is released from a flick.
   - Every transition is a CSS transition, so it is interruptible and restarts
     from the on-screen value.
   - Material: the bigger the surface, the heavier the blur and tint; a bright
     top edge; no light glass stacked on light glass.
   ========================================================================== */

.site-footer {
  --ft-overlap: clamp(40px, 6vw, 72px);   /* always smaller than .band's bottom padding (64px to 96px) */
  --ft-pad-top: clamp(56px, 7vw, 88px);
  --ft-dur: var(--dur-spring, 0.5s);
  --ft-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ft-spring: var(--ft-ease);
  --ft-press: var(--dur-press, 90ms);
  --ft-hover: var(--dur-hover, 0.25s);
  --ft-line: rgba(255, 255, 255, 0.16);
  --ft-text: rgba(255, 255, 255, 0.86);
  --ft-muted: rgba(255, 255, 255, 0.72);
  --ft-glow: rgba(255, 255, 255, 0.18);
  --ft-dot-x: 0px;

  position: relative;
  isolation: isolate;
  margin-top: calc(var(--ft-overlap) * -1);
  padding: var(--ft-pad-top) var(--gutter) 0;
  border-radius: 22px 22px 0 0;
  font-family: var(--font-body);
  color: var(--white);
  /* The overlap must never swallow clicks meant for the section above. */
  pointer-events: none;
}
/* Critically damped spring (damping 1.0, response 0.35s), sampled over 0.5s. */
@supports (transition-timing-function: linear(0, 1)) {
  .site-footer {
    --ft-spring: linear(0, 0.0416, 0.1356, 0.2502, 0.3669, 0.476, 0.5729, 0.656, 0.7257, 0.783, 0.8295, 0.8669, 0.8965, 0.9199, 0.9383, 0.9526, 0.9637, 0.9723, 0.9789, 0.9839, 0.9878, 0.9908, 0.993, 0.9947, 0.996, 0.997, 0.9978, 0.9983, 1);
  }
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .site-footer { --ft-glow: color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* Frosted slab: tinted light to heavy toward the bottom, bright top edge. */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--tint-rgb), 0.5) 0%, rgba(var(--tint-rgb), 0.8) 50%, rgba(var(--tint-rgb), 0.94) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
          backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 -30px 60px -40px rgba(var(--tint-rgb), 0.9);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .site-footer::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-deep) 52%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 82%, transparent) 50%,
      color-mix(in srgb, var(--bg-deep) 96%, transparent) 100%);
  }
}
/* One-pixel shimmer along the top edge. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
}

.ft-inner { position: relative; max-width: 72rem; margin: 0 auto; pointer-events: auto; }

.ft-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer p { margin: 0; }
.site-footer a, .site-footer button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* The global focus ring sets a 12px radius on focus; keep each shape's own. */
.site-footer :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.ft-btn:focus-visible, .ft-social__a:focus-visible { border-radius: 999px; }

/* ---------- Call to action ---------- */
.ft-cta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-cta__icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 50%;
  color: var(--white); background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 40px -8px var(--ft-glow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ft-cta__title {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem); line-height: 1; letter-spacing: var(--track-display); /* tight tracking at display size */
  text-wrap: balance; text-shadow: 0 2px 30px rgba(var(--tint-rgb), 0.45);
}
.ft-cta__l { display: block; }
.ft-cta__line { margin: 16px 0 0; max-width: 34ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.55; letter-spacing: 0; color: var(--ft-text); text-wrap: pretty; }
.ft-cta__actions { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 340px; margin: 28px 0 0; }

/* Pills: same shape language as the frosted slab. */
.ft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center;
  text-transform: uppercase; letter-spacing: 0.12em;
  transition: transform var(--ft-dur) var(--ft-spring), box-shadow var(--ft-dur) var(--ft-spring),
              background-color var(--ft-hover) var(--ft-ease), color var(--ft-hover) var(--ft-ease);
}
.ft-btn svg { flex: none; }
.ft-btn--primary { background: var(--white); color: var(--ink-soft); box-shadow: 0 10px 36px -14px rgba(255, 255, 255, 0.38); }
.ft-btn--glass {
  color: var(--white); background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ft-btn--ghost { color: var(--white); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
@media (hover: hover) and (pointer: fine) {
  .ft-btn:hover { transform: translateY(-2px); }
  .ft-btn--primary:hover { box-shadow: 0 16px 40px -12px rgba(255, 255, 255, 0.5); }
  .ft-btn--glass:hover { background: rgba(255, 255, 255, 0.2); }
  .ft-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
}
/* Pointer-down: respond now, no wait for release. With main.js running (html.js-press) the press scale is a spring on
   the independent `scale` property (so it composes with the hover lift); the CSS scale below is only the fallback. */
.ft-btn:active { transition-duration: var(--ft-press); }
html:not(.js-press) .ft-btn:active { transform: scale(0.97); }

/* ---------- Link columns ---------- */
.ft-col__title { display: none; }
.ft-col__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: var(--track-body); text-align: left; color: rgba(255, 255, 255, 0.92);
}
.ft-col__chev { flex: none; color: var(--ft-muted); transition: transform var(--ft-dur) var(--ft-spring); }
.ft-col__toggle[aria-expanded='true'] .ft-col__chev { transform: rotate(180deg); }
.ft-col__clip { min-height: 0; }

.ft-link {
  position: relative; display: flex; align-items: center; min-height: 48px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.3; letter-spacing: 0; color: var(--ft-text);
  transform-origin: left center;
  transition: transform var(--ft-hover) var(--ft-ease), color var(--ft-hover) var(--ft-ease), background-color var(--ft-hover) var(--ft-ease);
}
.ft-link[target='_blank']::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-left: 7px; background: currentColor; opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--ft-hover) var(--ft-ease);
}
/* Wayfinding: the page you are on. */
.ft-link[aria-current='page'] { color: var(--white); }
.ft-link[aria-current='page']::before {
  content: ''; position: absolute; left: var(--ft-dot-x); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--ft-glow);
}
@media (hover: hover) and (pointer: fine) {
  .ft-link:hover { color: var(--white); transform: translateX(2px); }
  .ft-link:hover::after { opacity: 0.9; }
}
.ft-link:active { color: var(--white); transition-duration: var(--ft-press); }
html:not(.js-press) .ft-link:active { transform: scale(0.97); }

/* ---------- Brand ---------- */
.ft-brand__lockup { display: flex; align-items: center; gap: 14px; }
.ft-brand__logo { flex: none; width: 52px; height: auto; background: var(--white); border-radius: 12px; padding: 4px; }
.ft-brand__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.12; letter-spacing: var(--track-title); color: var(--white); }
.ft-brand__dmv { display: block; margin-top: 5px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ft-muted); }
.ft-brand__about { margin-top: 16px; max-width: 30ch; font-size: 16px; line-height: 1.55; color: var(--ft-text); text-wrap: pretty; }
.ft-brand__mail { margin-top: 6px; font-size: 16px; line-height: 1.55; }
.ft-brand__mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ft-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--ft-hover) var(--ft-ease); }
@media (hover: hover) and (pointer: fine) { .ft-brand__mail a:hover { color: var(--white); } }

/* ---------- Social ---------- */
.ft-social { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ft-social__a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--ft-dur) var(--ft-spring), background-color var(--ft-hover) var(--ft-ease), color var(--ft-hover) var(--ft-ease), box-shadow var(--ft-hover) var(--ft-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ft-social__a:hover { transform: translateY(-2px); color: var(--white); background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 24px -8px var(--ft-glow); }
}
.ft-social__a:active { background: rgba(255, 255, 255, 0.2); transition-duration: var(--ft-press); }
html:not(.js-press) .ft-social__a:active { transform: scale(0.94); }

/* ---------- Small print ---------- */
.ft-copy, .ft-credit { font-size: 14px; line-height: 1.5; letter-spacing: 0; color: var(--ft-muted); }
.ft-credit a { text-decoration: underline; text-underline-offset: 3px; color: var(--ft-text); transition: color var(--ft-hover) var(--ft-ease); }
.ft-credit a:hover { color: var(--white); }

/* ==========================================================================
   Mobile (under 768px): stacked, accordion
   ========================================================================== */
@media (max-width: 767.98px) {
  .ft-inner { display: flex; flex-direction: column; }
  .ft-bottom { display: contents; }

  .ft-cta { order: 0; }
  .ft-nav { order: 1; width: 100%; margin-top: 40px; border-top: 1px solid var(--ft-line); }
  .ft-social { order: 2; margin-top: 32px; }
  .ft-brand { order: 3; margin-top: 28px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .ft-copy { order: 4; margin-top: 24px; text-align: center; }
  .ft-credit { order: 5; margin-top: 6px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); text-align: center; }

  .ft-col { border-bottom: 1px solid var(--ft-line); }
  /* Rows bleed 8px past the text so the pressed highlight has room. */
  .ft-col__toggle { width: calc(100% + 16px); margin-inline: -8px; padding-inline: 8px; border-radius: 12px; transition: background-color var(--ft-hover) var(--ft-ease); }
  .ft-col__toggle:active { background: rgba(255, 255, 255, 0.08); transition: none; }
  .ft-link { width: calc(100% + 16px); margin-inline: -8px; padding-inline: 8px; border-radius: 10px; }
  .ft-link:active { background: rgba(255, 255, 255, 0.08); }
  /* The panel is clipped, so rings sit inside the row instead of outside it. */
  .ft-col__panel .ft-link:focus-visible { outline-offset: -3px; border-radius: 10px; }

  /* Accordion: 0fr to 1fr; closed links are visibility:hidden so Tab skips them. */
  .ft-col__panel {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--ft-dur) var(--ft-spring), visibility 0s linear var(--ft-dur);
  }
  .ft-col__clip { overflow: hidden; }
  .ft-col__list { padding-bottom: 12px; opacity: 0; transform: translateY(-6px); transform-origin: top;
    transition: opacity var(--ft-hover) var(--ft-ease), transform var(--ft-dur) var(--ft-spring); }
  .ft-col__toggle[aria-expanded='true'] + .ft-col__panel { grid-template-rows: 1fr; visibility: visible;
    transition: grid-template-rows var(--ft-dur) var(--ft-spring), visibility 0s; }
  .ft-col__toggle[aria-expanded='true'] + .ft-col__panel .ft-col__list { opacity: 1; transform: none; }

  .ft-brand__about { max-width: none; font-size: 15px; }
}

/* ==========================================================================
   Tablet and up (768px+): headline row, four columns, bottom bar
   ========================================================================== */
@media (min-width: 768px) {
  .ft-inner {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cta' 'nav' 'brand' 'bottom';
  }
  .ft-cta {
    grid-area: cta; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: 'title line' 'title actions';
    column-gap: clamp(32px, 5vw, 72px); row-gap: 22px; align-items: end; text-align: left;
    padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--ft-line);
  }
  .ft-cta__icon { display: none; }
  .ft-cta__title { grid-area: title; font-size: clamp(2.4rem, 0.9rem + 3.2vw, 4rem); }
  .ft-cta__line { grid-area: line; margin: 0; max-width: 40ch; }
  .ft-cta__actions { grid-area: actions; flex-direction: row; flex-wrap: wrap; gap: 10px; width: auto; max-width: none; margin: 0; }
  .ft-btn { min-height: 54px; padding: 0 24px; }

  .ft-nav { grid-area: nav; display: grid; grid-template-columns: 1.1fr 1fr 1fr; column-gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
  .ft-col__title {
    display: block; margin: 0 0 14px; font-family: var(--font-body); font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ft-muted);
  }
  .ft-col__toggle { display: none; }
  .ft-col__panel { display: block; }
  .ft-col__clip { overflow: visible; }
  .ft-col__list li { display: flex; }
  .ft-link { display: inline-flex; min-height: 40px; --ft-dot-x: -14px; }

  .ft-brand { grid-area: brand; margin-top: clamp(40px, 5vw, 64px); }
  .ft-brand__about { max-width: 34ch; }

  .ft-bottom {
    grid-area: bottom; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
    margin-top: clamp(48px, 6vw, 80px); padding: 26px 0 calc(38px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ft-line);
  }
  .ft-social__a { width: 44px; height: 44px; }
  .ft-social { gap: 12px; }
}
@media (min-width: 768px) and (pointer: coarse) {
  .ft-link { min-height: 44px; }
}

@media (min-width: 1024px) {
  .ft-inner {
    grid-template-columns: minmax(0, 3.1fr) minmax(0, 1.5fr); column-gap: clamp(32px, 4vw, 56px);
    grid-template-areas: 'cta cta' 'nav brand' 'bottom bottom';
  }
  .ft-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
  .ft-credit { justify-self: end; text-align: right; }
}

/* ==========================================================================
   Reveal on view (footer.js adds .is-armed, then .is-in per element)
   ========================================================================== */
.site-footer.is-armed [data-ft-r] { opacity: 0; transform: translateY(20px); }
.site-footer.is-armed [data-ft-r].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ft-spring), transform 0.8s var(--ft-spring);
  transition-delay: var(--ft-d, 0s);
}

/* ==========================================================================
   Accessibility preferences
   ========================================================================== */
/* Reduced motion: cross-fades only. Nothing slides, rotates or scales. */
@media (prefers-reduced-motion: reduce) {
  .site-footer.is-armed [data-ft-r] { transform: none; }
  .site-footer.is-armed [data-ft-r].is-in { transition: opacity 240ms linear !important; transition-delay: 0s !important; }
  .ft-btn, .ft-btn:hover, .ft-btn:active, .ft-link, .ft-link:hover, .ft-link:active,
  .ft-social__a, .ft-social__a:hover, .ft-social__a:active { transform: none !important; }
  .ft-btn:active, .ft-social__a:active { opacity: 0.8; }
  .ft-col__chev { transition: none !important; }
  .ft-col__panel { transition: none !important; }
  .ft-col__list { transform: none !important; transition: opacity 200ms linear !important; }
}

/* Reduced transparency: solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  .site-footer::after { background: var(--bg-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ft-cta__icon, .ft-social__a, .ft-brand { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ft-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-mid); }
  .ft-cta__icon, .ft-social__a, .ft-brand { background: var(--bg); }
}

/* Increased contrast: near-solid fills and defined borders. */
@media (prefers-contrast: more) {
  .site-footer { --ft-line: rgba(255, 255, 255, 0.7); --ft-text: var(--white); --ft-muted: var(--white); }
  .site-footer::after { background: var(--bg-deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 2px 0 var(--white); }
  .ft-cta__icon, .ft-social__a, .ft-brand, .ft-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); box-shadow: inset 0 0 0 2px var(--white); }
  .ft-btn--ghost { box-shadow: inset 0 0 0 2px var(--white); }
  .ft-link[target='_blank']::after { opacity: 1; }
}

@media (forced-colors: active) {
  .ft-btn { border: 1px solid ButtonText; }
  .site-footer::after { border: 1px solid CanvasText; }
}