/* ---------- FOOTER ---------- */
.ft{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--navy);border-top:4px solid var(--yellow)}
/* A soft yellow glow sits behind the contact block */
.ft::before{content:"";position:absolute;z-index:-1;width:560px;height:560px;left:-180px;top:-300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,193,7,.16),transparent 68%)}
/* Interactive background: a pool of light and a field of dots follow the pointer across the footer */
.ft::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle 340px at var(--mx,50%) var(--my,50%),rgba(255,193,7,.16),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.4) 1.2px,transparent 1.7px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(circle 400px at var(--mx,50%) var(--my,50%),#000,transparent 75%);
  mask:radial-gradient(circle 400px at var(--mx,50%) var(--my,50%),#000,transparent 75%)}
.ft.is-hot::after{opacity:1}
.ft-inner{max-width:1240px;margin:0 auto;padding:64px 24px 0;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}

/* ---------- contact ---------- */
.ft-live{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.ft-live i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0}
.ft-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ftPulse 2s ease-out infinite}
@keyframes ftPulse{to{transform:scale(3);opacity:0}}
.ft-phone{display:inline-block;margin-top:12px;font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;transition:color .2s}
.ft-phone:hover{color:var(--yellow)}
/* The script wraps each character so the number ripples on hover */
.ft-phone span{display:inline-block}
.ft-phone:hover span{animation:ftHop .5s calc(var(--c)*.03s) cubic-bezier(.3,.7,.3,1)}
@keyframes ftHop{40%{transform:translateY(-8px)}}
.ft-addr{margin-top:16px;max-width:360px;font-style:normal;font-size:15px;line-height:1.65;color:rgba(255,255,255,.72)}
.ft-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ft-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:background .25s,border-color .25s,color .25s,transform .2s}
.ft-btn svg{width:18px;height:18px;flex-shrink:0}
.ft-btn.green{background:var(--green);color:#fff}
.ft-btn.green svg{fill:currentColor}
.ft-btn.green:hover{background:#198f48}
.ft-btn.ghost{border:1px solid rgba(255,255,255,.3)}
.ft-btn.ghost:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy-dark)}
/* Buttons lean towards the pointer; the script sets --bx and --by */
.ft-btn{transform:translate(var(--bx,0px),var(--by,0px))}
.ft-btn:active{transform:translate(var(--bx,0px),var(--by,0px)) scale(.96)}
.ft-btn.green:hover svg{animation:ftWiggle .6s ease}
.ft-btn.ghost:hover svg{animation:ftHop .5s cubic-bezier(.3,.7,.3,1)}
@keyframes ftWiggle{20%{transform:rotate(-14deg)}45%{transform:rotate(12deg)}70%{transform:rotate(-6deg)}}

/* ---------- link columns ---------- */
.ft-label{margin-bottom:18px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ft-links{list-style:none;display:grid;gap:14px}
.ft-links a{position:relative;font-size:15px;font-weight:500;color:rgba(255,255,255,.82);transition:color .2s,padding .2s}
.ft-links a::before{content:"";position:absolute;left:0;top:50%;width:0;height:2px;background:var(--yellow);border-radius:2px;transition:width .2s}
.ft-links a:hover{color:var(--yellow);padding-left:16px}
.ft-links a:hover::before{width:10px}
/* The other links in a column dim while one is hovered */
.ft-links:hover a:not(:hover){color:rgba(255,255,255,.45)}

.ft a:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:4px}

/* ---------- wordmark ---------- */
/* Outlined name spans the full width and fills with yellow on hover */
.ft-word{display:block;max-width:1240px;margin:56px auto 0;padding:0 24px}
.ft-word svg{display:block;margin:0 auto;width:100%;max-width:1000px;height:auto;overflow:visible}
/* The navy fill hides the inner half of the stroke, so overlapping glyph contours don't show through */
.ft-word text{font-family:inherit;font-size:132px;font-weight:800;fill:var(--navy);stroke:rgba(255,255,255,.34);stroke-width:2px;paint-order:stroke fill;
  vector-effect:non-scaling-stroke;transition:fill .5s ease,stroke .5s ease}
.ft-word:hover text{fill:var(--yellow);stroke:var(--yellow)}
/* With a mouse, a yellow spotlight follows the pointer through the letters instead */
.ft.is-spot .ft-word text,.ft.is-spot .ft-word:hover text{fill:url(#ftSpot);stroke:url(#ftSpotLine)}

/* ---------- bottom bar ---------- */
.ft-bottom{margin-top:28px;background:var(--navy-dark)}
.ft-bottom > div{max-width:1240px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  font-size:13.5px;color:rgba(255,255,255,.65)}

/* ---------- reveal ---------- */
/* Columns rise in one after another, links slide in behind them and the name draws its own outline */
.ft.js .ft-rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*.1s)}
.ft.js.is-in .ft-rv{opacity:1;transform:none}
.ft.js .ft-links li{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(.25s + var(--i,0)*.1s + var(--n,0)*.05s)}
.ft.js.is-in .ft-links li{opacity:1;transform:none}
.ft.js .ft-word text{stroke-dasharray:1400;stroke-dashoffset:1400}
.ft.js.is-in .ft-word text{animation:ftDraw 2.4s .35s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ftDraw{to{stroke-dashoffset:0}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .ft-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px}
  .ft-contact{grid-column:1/-1}
}
@media (max-width:860px){
  .ft-inner{padding:48px 16px 0}
  .ft-word{margin-top:40px;padding:0 16px}
  .ft-bottom > div{padding:16px}
}
@media (max-width:520px){
  .ft-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .ft-actions .ft-btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ft-live i::after,.ft-phone:hover span,.ft-btn:hover svg{animation:none}
}