/* =========================================================
   FOOTER.CSS — Footer redesign (v5), loaded on every page right
   after main.css (markup lives in partials/footer.html, injected once
   via components.js; footer.js drives the mobile-only accordion
   toggle). No card, no border, no backdrop-blur box — full-bleed
   section that continues the page. The v4 layout (narrow ~20% left
   rail + five short nav columns) left a visibly empty band across the
   right side because the nav content didn't fill the space it was
   given — fixed here by widening the left rail to a true 35% (so its
   own content — logo/description/contact grid — has room to spread
   out instead of stacking tall) and splitting the remaining 65% into
   SIX shorter, denser columns (added a Legal column) so nav height
   roughly matches the left rail's. A wide (1900px) inner measure keeps
   every column's longest item on one line at 15px despite six columns
   now needing the room five did before.
   The logo sits directly on the dark background (no white plate) —
   its navy has almost no luminance contrast against --ink at this
   size, and a glow behind fully-opaque letter pixels can't help
   (nothing shows through), so legibility comes entirely from a
   brightness/contrast filter on the image itself — non-destructive,
   same source SVG, no recoloring or box.
   Built entirely from existing tokens — no new colors introduced.
   ========================================================= */

/* ---------- Footer shell + ambient background (full-bleed, no box) ---------- */
.site-footer{
  position:relative; overflow:hidden; background: var(--ink); color: rgba(247,245,240,.62);
  padding:96px 0 0; border-top:1px solid var(--ink-line);
}
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 62% at 8% 6%, rgba(10,154,144,.22), transparent 64%),
    radial-gradient(55% 68% at 94% 94%, rgba(13,48,90,.58), transparent 66%),
    radial-gradient(42% 52% at 55% 40%, rgba(10,154,144,.1), transparent 72%);
  animation: footerBgDrift 18s ease-in-out infinite alternate;
}
@keyframes footerBgDrift{ from{ background-position: 0% 0%, 100% 100%, 50% 50%; } to{ background-position: 6% 4%, 94% 96%, 55% 45%; } }
.site-footer::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.36;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.6) 20%, rgba(0,0,0,.6) 85%, transparent);
}
.footer-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.footer-particles span{
  position:absolute; width:4px; height:4px; border-radius:50%; background: var(--teal-soft); opacity:.35;
  filter: blur(.5px); animation: footerParticleDrift linear infinite;
}
@keyframes footerParticleDrift{ 0%{ transform: translateY(0) translateX(0); opacity:0; } 10%{ opacity:.4; } 90%{ opacity:.4; } 100%{ transform: translateY(-90px) translateX(14px); opacity:0; } }
.footer-shape{ position:absolute; border-radius:50%; filter: blur(44px); pointer-events:none; z-index:1; opacity:.7; animation: footerShapeFloat 13s ease-in-out infinite; }
.footer-shape.fs-1{ width:240px; height:240px; top:-70px; left:-50px; background: radial-gradient(circle at 35% 35%, rgba(10,154,144,.3), transparent 70%); }
.footer-shape.fs-2{ width:280px; height:280px; bottom:-90px; right:-70px; background: radial-gradient(circle at 35% 35%, rgba(13,48,90,.5), transparent 70%); animation-duration:16s; animation-delay:-4s; }
@keyframes footerShapeFloat{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(14px,-16px); } }

.site-footer .container{ position:relative; z-index:2; }

/* ---------- Shared ambient float keyframes ----------
   Three near-identical drifts (different axis mix) so sibling
   elements never move in lockstep — each consumer picks one and sets
   its own duration/negative delay to desync further. All translate3d
   so the browser promotes a compositor layer (GPU, not layout/paint). */
@keyframes footerDriftA{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,-3px,0); } }
@keyframes footerDriftB{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(1.5px,-4px,0); } }
@keyframes footerDriftC{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(-1.5px,-2.5px,0); } }
@keyframes footerBreathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.006); } }

/* Footer needs more horizontal room than the site's standard 1240px
   .container so six EQUAL-width nav columns can sit at 15px without
   ever wrapping — a dedicated wider measure, used only here. */
.footer-wide{ max-width:1900px; margin:0 auto; padding:0 32px; }
@media (max-width:1960px){ .footer-wide{ padding:0 24px; } }

/* ---------- Top area: no card — logo/social rail (left, ~35%) + nav
   grid (right, ~65%) — a 7:13 fr ratio is exactly 35%/65% ---------- */
.footer-main{ display:grid; grid-template-columns: minmax(320px, 7fr) 13fr; gap:48px; align-items:start; }
@media (max-width:992px){ .footer-main{ grid-template-columns:1fr; gap:44px; } }

/* ---------- Brand rail (left) ---------- */
.footer-brand-panel{ display:flex; flex-direction:column; align-items:flex-start; }
@media (max-width:992px){ .footer-brand-panel{ align-items:center; text-align:center; } }

.footer-logo-wrap{ position:relative; display:inline-block; margin-bottom:22px; }
.footer-logo-wrap::before{
  content:""; position:absolute; inset:-64px -90px; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(247,245,240,.14) 0%, rgba(10,154,144,.18) 42%, transparent 72%);
  filter: blur(28px); animation: footerLogoGlow 6s ease-in-out infinite;
}
@keyframes footerLogoGlow{ 0%,100%{ opacity:.6; transform: scale(1); } 50%{ opacity:1; transform: scale(1.06); } }
.footer-logo-wrap .lw-particle{
  position:absolute; width:3px; height:3px; border-radius:50%; background: var(--teal-soft); pointer-events:none; z-index:0;
  animation: lwParticleDrift linear infinite;
}
.footer-logo-wrap .lw-p1{ top:-18px; left:14%; animation-duration:7s; }
.footer-logo-wrap .lw-p2{ bottom:-14px; left:60%; animation-duration:8.5s; animation-delay:-3s; }
.footer-logo-wrap .lw-p3{ top:20%; right:-16px; animation-duration:6.5s; animation-delay:-1.5s; }
@keyframes lwParticleDrift{ 0%,100%{ opacity:.25; transform: translateY(0); } 50%{ opacity:.8; transform: translateY(-10px); } }
.footer-logo-wrap a{ position:relative; z-index:1; display:inline-block; }
.footer-logo-wrap img{
  position:relative; z-index:1; width:290px; max-width:100%; height:auto; display:block;
  filter: brightness(1.9) contrast(1.12) saturate(1.05) drop-shadow(0 6px 22px rgba(0,0,0,.45));
  animation: footerLogoFloat 7s ease-in-out infinite;
  transition: filter .3s;
}
.footer-logo-wrap a:hover img{ filter: brightness(2.05) contrast(1.14) saturate(1.1) drop-shadow(0 6px 22px rgba(0,0,0,.45)); }
@keyframes footerLogoFloat{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(1px,-4px,0); } }

.footer-statement{
  font-size:.95rem; line-height:1.65; color: rgba(247,245,240,.6); max-width:32ch; margin:0 0 26px;
  animation: footerDriftA 10s ease-in-out infinite;
}

.footer-social{ display:flex; gap:12px; margin-bottom:18px; }
.footer-social a{
  position:relative; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; color: rgba(247,245,240,.75); font-size:.95rem;
  transition: transform .35s var(--ease), color .3s, border-color .3s, background .3s, box-shadow .35s var(--ease);
  animation: footerDriftA 8s ease-in-out infinite;
}
.footer-social a:nth-child(1){ animation-name: footerDriftA; animation-delay:0s; }
.footer-social a:nth-child(2){ animation-name: footerDriftB; animation-duration:9s; animation-delay:-1.5s; }
.footer-social a:nth-child(3){ animation-name: footerDriftC; animation-duration:7.5s; animation-delay:-3s; }
.footer-social a:nth-child(4){ animation-name: footerDriftB; animation-duration:10s; animation-delay:-4.5s; }
.footer-social a:nth-child(5){ animation-name: footerDriftA; animation-duration:8.5s; animation-delay:-6s; }
.footer-social a:nth-child(6){ animation-name: footerDriftC; animation-duration:9.5s; animation-delay:-2.5s; }
.footer-social a::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--teal); opacity:0; transform: scale(1);
  pointer-events:none;
}
.footer-social a:hover{
  transform: translateY(-4px) scale(1.06) rotate(3deg) !important; color: var(--ink); background: var(--teal); border-color: var(--teal);
  box-shadow: 0 16px 34px -10px rgba(10,154,144,.65);
}
.footer-social a:hover::after{ animation: footerSocialPulse 1s ease-out infinite; }
@keyframes footerSocialPulse{ 0%{ opacity:.7; transform: scale(1); } 100%{ opacity:0; transform: scale(1.35); } }

.footer-trust-badge{
  display:flex; align-items:center; gap:8px; font-size:.78rem; color: rgba(247,245,240,.42);
  animation: footerDriftC 9s ease-in-out infinite; animation-delay:-2s;
}
.footer-trust-badge i{ color: var(--teal-soft); font-size:.85rem; }

/* ---------- Nav grid (right): six content-sized (auto) columns.
   Forcing these six specific labels ("Accounting & Bookkeeping",
   "Terms & Conditions"...) into truly EQUAL-width tracks needs a
   ~2300px viewport before the widest one stops overflowing into its
   neighbor — not viable on real screens. Auto-sized columns give each
   just the width its own longest item needs, which guarantees zero
   wrap *and* zero overflow at any realistic width; justify-content
   spreads the six across the full row so it still reads as one
   deliberate, evenly-distributed grid rather than a left-packed list. */
.footer-nav-grid{ display:grid; grid-template-columns: repeat(6, auto); column-gap:28px; justify-content:space-between; }
@media (max-width:1500px){ .footer-nav-grid{ column-gap:20px; } }
@media (max-width:1300px){ .footer-nav-grid{ grid-template-columns: repeat(3, auto); row-gap:34px; column-gap:56px; justify-content:flex-start; } }
@media (max-width:640px){ .footer-nav-grid{ grid-template-columns: 1fr; row-gap:0; } }

/* Each column drifts on its own cycle (different keyframe + duration +
   negative delay) so the six columns never rise/fall together. */
.footer-nav-col{ animation: footerDriftA 10s ease-in-out infinite; }
.footer-nav-col:nth-child(1){ animation-name: footerDriftA; animation-duration:10s; animation-delay:0s; }
.footer-nav-col:nth-child(2){ animation-name: footerDriftB; animation-duration:11s; animation-delay:-2s; }
.footer-nav-col:nth-child(3){ animation-name: footerDriftC; animation-duration:9s; animation-delay:-4s; }
.footer-nav-col:nth-child(4){ animation-name: footerDriftB; animation-duration:12s; animation-delay:-6s; }
.footer-nav-col:nth-child(5){ animation-name: footerDriftC; animation-duration:10.5s; animation-delay:-3s; }
.footer-nav-col:nth-child(6){ animation-name: footerDriftA; animation-duration:9.5s; animation-delay:-5s; }
@media (max-width:640px){ .footer-nav-col{ animation:none; } }

/* Desktop/tablet (down to 641px — "balanced columns"): heading is a
   plain (non-interactive-looking) label, content is just always-there.
   Only true phone widths (≤640px) get the accordion, where footer.js
   adds a click-to-expand behavior (same max-height technique main.css
   already uses for the FAQ accordion elsewhere on the site). Columns
   are NOT forced to min-width:0 — letting each size to its own
   content's natural minimum is exactly what prevents the text-overflow
   bug the earlier equal-1fr layout had. */
@media (max-width:640px){ .footer-nav-col{ min-width:0; } }
.footer-nav-heading{
  width:100%; background:none; border:0; padding:0; margin:0 0 24px; cursor:default; font-family: var(--f-body);
  color: var(--paper); font-size:16px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.footer-nav-col .acc-chev{ display:none; font-size:.7rem; color: rgba(247,245,240,.5); transition: transform .3s var(--ease); }

.footer-nav-col ul{ display:flex; flex-direction:column; gap:5px; }
.footer-nav-col ul li a{
  position:relative; display:inline-flex; align-items:center; gap:.5em; padding:8px 0;
  font-size:15px; font-weight:500; color: rgba(247,245,240,.58); white-space:nowrap;
}
.footer-nav-col ul li a::after{
  content:""; position:absolute; left:0; bottom:4px; height:1px; width:0; background: var(--teal);
  transition: width .35s var(--ease);
}
.footer-nav-col ul li a:hover{ color: var(--paper); }
.footer-nav-col ul li a:hover::after{ width:100%; }
.footer-nav-col ul li a i{ font-size:.7em; opacity:0; transform: translateX(-4px); transition: opacity .25s, transform .25s; color: var(--teal); flex-shrink:0; }
.footer-nav-col ul li a:hover i{ opacity:1; transform:none; }

/* Current-page highlight (set by main.js on load, matching the current
   filename) — a permanently "grown" underline in the brand teal rather
   than the muted default, so the active legal/nav page reads at a glance. */
.footer-nav-col ul li a.active{ color: var(--teal-soft); font-weight:600; }
.footer-nav-col ul li a.active::after{ width:100%; }

/* Mobile (phones only): real click-to-expand accordion (footer.js
   toggles .open and sets an inline max-height, mirroring main.css's
   .acc-item pattern) */
@media (max-width:640px){
  .footer-nav-col{ border-top:1px solid var(--ink-line); padding:18px 0; text-align:center; }
  .footer-nav-col:last-child{ border-bottom:1px solid var(--ink-line); }
  .footer-nav-heading{ cursor:pointer; justify-content:center; margin:0; }
  .footer-nav-col .acc-chev{ display:inline-block; }
  .footer-nav-col.open .acc-chev{ transform: rotate(180deg); }
  .footer-nav-col ul{ max-height:0; overflow:hidden; align-items:center; transition: max-height .4s var(--ease); }
  .footer-nav-col.open ul{ margin-top:16px; }
}

/* ---------- Contact info bar: a single full-width glass strip below
   all footer columns (replaces the old 2x2 card grid that used to sit
   in the brand rail — that alone made the left column run taller than
   the nav columns beside it, and the email value wrapped onto a
   second line at the cell's fixed width). Items are plain icon+text
   pairs inside one shared glass surface, so long values like the
   email address just need room on a single row instead of wrapping
   inside a narrow card. ---------- */
.footer-contact-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 8px; max-width:1180px; margin:52px auto 0; padding:20px 30px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: footerBreathe 9s ease-in-out infinite;
}
/* All four items — the three links and the static Business Hours span
   alike — share one selector so hover styling, transitions and the
   idle float apply identically regardless of tag. */
.fcb-item{
  display:flex; align-items:center; gap:10px; padding:9px 20px; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fcb-item:nth-child(1){ animation: footerDriftA 8s ease-in-out infinite; animation-delay:0s; }
.fcb-item:nth-child(2){ animation: footerDriftB 9s ease-in-out infinite; animation-delay:-2s; }
.fcb-item:nth-child(3){ animation: footerDriftC 8.5s ease-in-out infinite; animation-delay:-4s; }
.fcb-item:nth-child(4){ animation: footerDriftB 10s ease-in-out infinite; animation-delay:-6s; }
.fcb-item:hover{
  transform: translateY(-2px) !important; background: rgba(255,255,255,.06); border-color: rgba(10,154,144,.45);
  box-shadow: 0 14px 30px -14px rgba(10,154,144,.45);
}
.fcb-icon{
  flex-shrink:0; width:32px; height:32px; border-radius:9px; background: rgba(10,154,144,.14);
  color: var(--teal-soft); display:grid; place-items:center; font-size:.82rem;
  transition: transform .35s var(--ease), background .3s, color .3s;
}
.fcb-item:hover .fcb-icon{ transform: scale(1.1) !important; background: var(--teal); color: var(--ink); }
.fcb-text{ font-size:.85rem; font-weight:600; color: rgba(247,245,240,.85); white-space:nowrap; }

@media (max-width:1240px){ .footer-contact-bar{ max-width:100%; } }
@media (max-width:992px){ .footer-contact-bar{ margin-top:44px; } }
@media (max-width:760px){
  .footer-contact-bar{ flex-direction:column; align-items:stretch; gap:8px; padding:18px; }
  .fcb-item{ justify-content:center; }
}
@media (max-width:400px){ .fcb-text{ font-size:.8rem; white-space:normal; text-align:center; } }

/* ---------- Bottom bar ---------- */
.footer-divider{ position:relative; height:1px; margin-top:56px; overflow:hidden; background: var(--ink-line); }
.footer-divider::after{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(10,154,144,.7), transparent);
  animation: footerDividerSweep 6s linear infinite;
}
@keyframes footerDividerSweep{ from{ left:-30%; } to{ left:100%; } }

/* True three-column grid (not flex space-between) so the legal links
   sit at the actual horizontal center of the bar regardless of how
   wide the copyright/credit text on either side happens to be. */
.footer-bottom{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap:18px;
  padding:26px 0 34px; font-size:.8rem; color: rgba(247,245,240,.48);
}
.fb-copyright{ justify-self:start; animation: footerDriftB 10s ease-in-out infinite; animation-delay:-1s; }
.fb-legal{ display:flex; gap:22px; flex-wrap:wrap; justify-self:center; animation: footerDriftA 9s ease-in-out infinite; animation-delay:-3.5s; }
.fb-legal a{ color: rgba(247,245,240,.48); transition: color .25s; }
.fb-legal a:hover{ color: var(--teal-soft); }
.fb-legal a.active{ color: var(--teal-soft); font-weight:600; }
.fb-credit{ justify-self:end; animation: footerDriftC 11s ease-in-out infinite; animation-delay:-6s; }

.fb-credit{ display:flex; align-items:center; gap:.4em; }
.fb-credit-link{
  position:relative; display:inline-flex; align-items:center; gap:.4em; font-weight:700; color: rgba(247,245,240,.75);
  transition: color .3s;
}
.fb-credit-link .fb-credit-text{
  background: linear-gradient(90deg, var(--teal-soft), var(--teal), var(--teal-soft));
  background-size:200% auto; background-position:0% center;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition: background-position .5s var(--ease);
}
.fb-credit-link::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background: var(--teal);
  transition: width .35s var(--ease);
}
.fb-credit-link i{ font-size:.75em; opacity:0; transform: translateX(-4px); transition: opacity .25s, transform .25s; color: var(--teal); }
.fb-credit-link:hover{ color: var(--paper); }
.fb-credit-link:hover .fb-credit-text{ background-position:100% center; }
.fb-credit-link:hover::after{ width:100%; }
.fb-credit-link:hover i{ opacity:1; transform:none; }

@media (max-width:760px){
  .footer-bottom{ grid-template-columns:1fr; row-gap:14px; text-align:center; }
  .fb-copyright, .fb-legal, .fb-credit{ justify-self:center; }
}

/* ---------- Reduced motion: turn off every ambient/idle animation in
   the footer (hover feedback and the mobile accordion still work) ---------- */
@media (prefers-reduced-motion: reduce){
  .footer-logo-wrap img, .footer-logo-wrap::before, .footer-logo-wrap .lw-particle,
  .footer-shape, .footer-particles span, .site-footer::before,
  .footer-statement, .footer-social a, .footer-trust-badge, .footer-nav-col,
  .footer-contact-bar, .fcb-item, .fb-copyright, .fb-legal, .fb-credit{
    animation: none;
  }
}