.site-footer-phone-row {
  font-family: var(--script);
  font-style: italic;
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.45;
  margin: 0;
  color: var(--color-shell);
}

/* Migrated active styles from styles.css for Footer active base block. */
/* ============================================================================
   Scene 11 Footer — editorial off-grid (epic bayside-0tj)
   ============================================================================
   Layout: BAYSIDE wordmark anchors the left ~48%; three small content
   columns (Visit / Quick Links / Connect) sit right ~52%; partners line
   below; bottom-left disclaimer strip with EHO + inline Terms/Privacy;
   bottom-right meta strip with renderings disclaimer + copyright.
   ============================================================================ */

.site-footer {
  position: relative;
  display: grid;
  /* 48/52 split (was 60/40) gives the three content columns more breathing
     room without making the brand wordmark feel cramped. Pairs with the
     wordmark size cap below. (Reviewed 2026-05-08.) */
  grid-template-columns: 48% 52%;
  grid-template-areas:
    "brand columns"
    "partners partners"
    "disclaimer meta";
  align-items: start;
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 48px);
  padding: clamp(56px, 7vw, 96px) clamp(20px, 6vw, 88px);
  background-color: var(--color-teal-cyan);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color: var(--color-shell);
  overflow: hidden;
  /* Skip render of the footer until it nears the viewport (bayside-8gao).
     `auto` remembers actual size after first render so the SVG noise
     background paint doesn't compete with above-the-fold work. */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.site-footer-brand {
  grid-area: brand;
  display: grid;
  gap: 18px;
  align-self: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.site-footer-logo-link {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
  color: inherit;
}

.site-footer-logo-link:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 6px;
}

[data-footer-wordmark] {
  display: inline-block;
  font-family: var(--display);
  font-weight: var(--w-display);
  /* Capped to 124px (bayside-rxoh, 2026-05-13 review). Earlier 144px /
     9.5vw scale was bench-tested behind the watercolor wash, which hid
     SARASOTA bleeding 175px past the 48% brand cell into the Visit
     column. With the wash gone the overflow becomes visible chaos.
     7vw + 124px cap keeps the line inside the brand cell from 769px up
     through 1920px while preserving the editorial scale. */
  font-size: clamp(48px, 7vw, 124px);
  letter-spacing: 0.04em;
  line-height: 0.85;
  color: var(--color-shell);
}

.site-footer-wordmark-line { display: block; }

.site-footer-columns {
  grid-area: columns;
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
  align-self: center;
  padding-top: clamp(40px, 5vw, 72px);
  position: relative;
  z-index: 1;
}

.site-footer-column {
  display: grid;
  gap: 10px;
}

.site-footer-column-heading {
  margin: 0 0 6px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: var(--w-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-shell);
  opacity: 0.92;
}

.site-footer-column .site-footer-contact {
  margin: 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-shell);
}

.site-footer-contact .site-footer-address {
  display: block;
}

.site-footer-column a {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-shell);
  text-decoration: none;
  transition:
    color 180ms var(--ease-out),
    text-decoration-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.site-footer-column a:hover,
.site-footer-column a:focus-visible {
  color: var(--color-turquoise);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.site-footer-column a:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 4px;
}

/* "Get Directions" link sits below the Visit address (2026-05-08 review).
   Visually inherits the column's body copy weight but adds a small arrow
   that nudges on hover so the affordance reads as outbound, not in-app.
   Selectors are scoped to .site-footer-column to overpower the existing
   .site-footer-column a base rule (specificity 0,2,1) — without that
   scope this link's color, font-size, gap, and underline-on-hover would
   be silently overridden by the column-link cascade. */
.site-footer-column a.site-footer-directions-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(247, 243, 238, 0.78);
  text-decoration: none;
  width: fit-content;
  transition:
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.site-footer-column a.site-footer-directions-link:hover,
.site-footer-column a.site-footer-directions-link:focus-visible {
  color: var(--color-turquoise);
  /* Override the column-link underline rule: the arrow chip is the
     outbound affordance here, not an underline. */
  text-decoration: none;
}

.site-footer-directions-arrow {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transition: transform 220ms var(--ease-out);
}

.site-footer-column a.site-footer-directions-link:hover .site-footer-directions-arrow,
.site-footer-column a.site-footer-directions-link:focus-visible .site-footer-directions-arrow {
  transform: translate(2px, -2px);
}

.site-footer-column a.site-footer-directions-link:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 4px;
}

.site-footer-cta {
  margin: 14px 0 0;
}

.site-footer-cta a {
  --footer-cta-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Strengthened for the 2026-05-08 review: was min-height 38px / font 11px
     / padding 9px → too whisper-quiet for the page's last conversion
     beat. Pushes to a 48px touch-target floor (matches the mobile clamp)
     and bumps the type one full step. */
  min-height: 48px;
  /* Right padding leaves room for the 36px nested icon flush with the
     anchor's right inner edge (4px breathing room from the border). */
  padding: 13px 56px 13px 22px;
  border: 1px solid rgba(247, 243, 238, 0.55);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition-property: transform, color, border-color, background-color;
  transition-duration: 280ms;
  transition-timing-function: var(--footer-cta-ease);
}

.site-footer-cta a:hover,
.site-footer-cta a:focus-visible {
  border-color: var(--color-turquoise);
  color: var(--color-turquoise);
}

/* Nested island button — circular trailing arrow flush with the CTA's
   right inner padding. Renders the Button-in-Button signal from
   high-end-visual-design §"Nested CTA & Island Button Architecture". */
.site-footer-cta-icon {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(247, 243, 238, 0.55);
  border-radius: 9999px;
  background-color: transparent;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-50%);
  transition-property: transform, color, border-color, background-color;
  transition-duration: 280ms;
  transition-timing-function: var(--footer-cta-ease);
}

/* Arrow glyph rendered via pseudo-element so it does not contribute to
   the anchor's accessible name / textContent (A9 acceptance lock). */
.site-footer-cta-icon::before {
  content: "\2192";
  display: block;
  line-height: 1;
}

/* Magnetic hover: nested icon nudges up-and-right, scales 1.05. The
   parent anchor's color/border swap to turquoise is inherited via the
   existing :hover rule above. */
.site-footer-cta a:hover [data-footer-cta-icon] {
  transform: translate(2px, calc(-50% - 1px)) scale(1.05);
  border-color: var(--color-turquoise);
  color: var(--color-turquoise);
}

.site-footer-cta a:focus-visible [data-footer-cta-icon] {
  transform: translate(2px, calc(-50% - 1px)) scale(1.05);
  border-color: var(--color-turquoise);
  color: var(--color-turquoise);
}

.site-footer-cta a:active {
  transform: scale(0.98);
}

.site-footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(247, 243, 238, 0.35);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-shell);
}

.site-footer-partners {
  grid-area: partners;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 56px);
  /* B7 (bayside-dfgz.17): hairline alpha bumped 0.18 → 0.35 so the rule
     reads above WCAG 1.4.11 non-text 3:1 against --green-deep footer. */
  border-top: 1px solid rgba(247, 243, 238, 0.35);
  position: relative;
  z-index: 1;
}

.site-footer-partners a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
}

.site-footer-partners img {
  max-width: 200px;
  max-height: 56px;
  object-fit: contain;
  opacity: 0.78;
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}

.site-footer-partners a:hover img,
.site-footer-partners a:focus-visible img {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.site-footer-disclaimer-strip {
  grid-area: disclaimer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
  padding-top: clamp(20px, 2.4vw, 32px);
  /* B7 (bayside-dfgz.17): hairline alpha bumped 0.18 → 0.35 so the rule
     reads above WCAG 1.4.11 non-text 3:1 against --green-deep footer. */
  border-top: 1px solid rgba(247, 243, 238, 0.35);
  position: relative;
  z-index: 1;
}

/* EHO paragraph is now a layout wrapper. Eyebrow + body each carry their
   own typography (bayside-pn9f) so the strip reads as editorial hierarchy
   instead of a wall of uppercase microcopy. */
.site-footer-eho {
  margin: 0;
  color: rgba(247, 243, 238, 0.82);
  max-width: 64ch;
}

/* HUD EHO logo (bayside-dfgz.27 / D1).
   The mark itself is the federal compliance signal — black field, paper
   house silhouette with an equal sign — rendered inline at 24×24 next
   to the EHO eyebrow text. */
.site-footer-eho-emblem {
  float: left;
  display: block;
  margin: 1px 12px 4px 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
  /* Lift the black square slightly so it pops on the teal-cyan ground
     without introducing a paper halo around the emblem. */
  background-color: var(--color-shell);
  border-radius: 2px;
  padding: 1px;
}

/* Eyebrow + body spans intentionally do NOT carry opacity; they inherit the
   parent rgba color directly so no element-level opacity multiplies contrast. */
.site-footer-eho-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.site-footer-eho-body {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
}

/* Renderings disclaimer mirrors the EHO eyebrow + body split (bayside-pn9f).
   The parent <p> sets the rgba color once; child spans only set typography. */
.site-footer-disclaimer {
  color: rgba(247, 243, 238, 0.78);
}

.site-footer-renderings-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.site-footer-renderings-body {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
}

.site-footer-meta {
  grid-area: meta;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  padding-top: clamp(20px, 2.4vw, 32px);
  /* B7 (bayside-dfgz.17): hairline alpha bumped 0.18 → 0.35 so the rule
     reads above WCAG 1.4.11 non-text 3:1 against --green-deep footer. */
  border-top: 1px solid rgba(247, 243, 238, 0.35);
  text-align: right;
  position: relative;
  z-index: 1;
}

.site-footer-meta p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  /* B7 (bayside-dfgz.17): meta-copy alpha 0.62 → 0.82 so body text
     reads above WCAG 1.4.3 4.5:1 against --green-deep footer. */
  color: rgba(247, 243, 238, 0.82);
}

/* ============================================================================
   bayside-dfgz.9 (A9) — Reasonable-accommodation contact line, Connect column.
   ADA Title III: places of public accommodation must surface a working
   accommodation-request channel. Sits below the phone, above the CTA.
   ============================================================================ */
.site-footer-column .site-footer-accommodation {
  margin: 14px 0 0;
  color: rgba(247, 243, 238, 0.82);
  font-style: normal;
}

.site-footer-accommodation-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--color-shell);
}

.site-footer-accommodation-body {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.55;
}

.site-footer-column .site-footer-accommodation a {
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.site-footer-column .site-footer-accommodation a:hover,
.site-footer-column .site-footer-accommodation a:focus-visible {
  color: var(--color-shell);
}

/* ============================================================================
   bayside-dfgz.10 (A10) — Inline TERMS · PRIVACY strip, footer bottom-left.
   Routes will resolve once D2/D3 (privacy.html, accessibility.html) ship.
   ============================================================================ */
.site-footer-legal-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.82);
}

.site-footer-legal-strip a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms var(--ease-out);
}

.site-footer-legal-strip a:hover,
.site-footer-legal-strip a:focus-visible {
  color: var(--color-shell);
}

.site-footer-legal-strip a:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 3px;
}

.site-footer-legal-strip span[aria-hidden] {
  opacity: 0.6;
}

/* ============================================================================
   bayside-dfgz.25 (C7) — "Pause background motion" toggle, bottom-left strip.
   WCAG 2.2.2 (Pause Stop Hide, Level A). The toggle reads aria-pressed,
   ambient-pause-toggle.js owns the label swap. Style is intentionally
   restrained so it does not visually compete with the legal microcopy.
   ============================================================================ */
.site-footer-motion-row {
  margin: 0;
}

.site-footer-motion-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 0;
  margin: 0;
  color: rgba(247, 243, 238, 0.82);
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 24px;
  transition: color 180ms var(--ease-out);
}

.site-footer-motion-toggle:hover,
.site-footer-motion-toggle:focus-visible {
  color: var(--color-shell);
}

.site-footer-motion-toggle:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 3px;
}

.site-footer-motion-toggle[aria-pressed="true"] {
  color: var(--color-shell);
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.985);
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease);
  transition-delay: var(--delay, 0ms);
  /* will-change absent (bayside-opp): the [data-reveal] system fires once
     per element when it enters the viewport (see app.js IntersectionObserver
     adding .is-visible). Promoting every reveal target to its own GPU layer
     for the entire session — when the animation runs once and never again —
     is the "use sparingly" rule's textbook violation. */
}