/* ============================================================
   GTC CRANEX — footer (single source for every page, incl. index)
   Matched to the Figma frame: navy blueprint ground, 36/40 tagline
   with 3% tracking, Book-weight link lists on a 24px rhythm,
   hook cards with the overhanging hook, faint hook watermark.
   ============================================================ */
.site-footer{
  position:relative;
  overflow:hidden;
  background:radial-gradient(115% 135% at 70% 30%, #1D3352 0%, #16273F 58%, #132238 100%);
  color:#F2F4F7;
  border-radius:var(--radius);
  padding:clamp(36px,4vw,64px) var(--gutter) clamp(18px,2vw,28px);
  margin-top:clamp(56px,7vw,110px);
}

/* layers behind the content: giant hook watermark + the crane sketch */
.site-footer__wm{
  position:absolute;
  top:8%;
  right:5%;
  width:clamp(300px,34vw,540px);
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.02;
  pointer-events:none;
  user-select:none;
}
.site-footer__art{
  position:absolute;
  right:clamp(-220px,-9vw,-40px);   /* jib tip runs off the edge; head clears the columns */
  bottom:0;
  width:min(58%,1140px);      /* the Figma scale — head just under the tagline */
  height:auto;                /* natural ratio keeps the original thin strokes */
  max-width:none;
  opacity:.92;
  pointer-events:none;
  user-select:none;
  /* dissolves toward the columns: quiet at top-left, full at bottom-right */
  -webkit-mask-image:linear-gradient(135deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.7) 46%,#000 78%);
  mask-image:linear-gradient(135deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.7) 46%,#000 78%);
}

.site-footer__inner{position:relative;z-index:1;}

/* ---- head: logo + tagline on one line ---- */
.site-footer__head{
  display:flex;
  align-items:center;
  gap:clamp(22px,2.8vw,44px);
  margin-bottom:clamp(38px,4.4vw,68px);
}
.site-footer__logo img{
  height:clamp(36px,3.1vw,48px);
  width:auto;                        /* the lockup ships white + red — use as is */
}
.site-footer__tag{
  margin:0;
  font-size:clamp(22px,2.5vw,38px);
  line-height:1.12;
  font-weight:350;
  letter-spacing:.03em;
  color:#fff;
}
.site-footer__tag .y{color:#fff;font-weight:700;}

/* ---- link columns ---- */
.site-footer__cols{
  display:flex;
  align-items:flex-start;
  gap:clamp(36px,5vw,90px);
  margin-bottom:clamp(38px,4.4vw,68px);
  max-width:64%;
}
.site-footer h4{
  display:flex;
  align-items:center;
  margin:0 0 clamp(14px,1.6vw,22px);
  font-size:clamp(14px,1.05vw,17px);
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  white-space:nowrap;
}
.site-footer h4 .tri{width:.42em;height:.72em;}
.site-footer ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:clamp(3px,.4vw,6px);
}
.site-footer li a{
  font-size:clamp(12px,.88vw,14px);
  font-weight:350;
  letter-spacing:.02em;
  line-height:1.45;
  white-space:nowrap;
  color:rgba(240,244,250,.92);
  transition:color .2s ease;
}
.site-footer li a:hover,
.site-footer li a.is-current{color:var(--yellow);}

/* ---- location cards: the hook hangs over the top edge ---- */
.site-footer__locs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  max-width:min(100%,940px);
  margin-bottom:clamp(30px,3.4vw,52px);
}
.loc{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:clamp(148px,12vw,180px);
  padding:clamp(18px,1.9vw,26px);
  background:#fff;
  color:#1A2A44;
  border-radius:12px;
}
.loc h5{
  margin:0;
  font-size:clamp(17px,1.35vw,21px);
  font-weight:700;
  max-width:58%;
}
.loc__hook{
  position:absolute;
  top:0;                       /* flush to the card's top edge — no gap */
  right:clamp(12px,1.2vw,18px);
  width:clamp(46px,4vw,60px);
  height:auto;
}
.loc__tel{
  margin-top:auto;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:700;
  color:#1A2A44;
  font-variant-numeric:tabular-nums;
}
.loc__tel:hover{color:rgba(26,42,68,.6);}
.loc__addr{
  margin:6px 0 0;
  max-width:22ch;
  font-size:clamp(12px,.92vw,14px);
  font-weight:350;
  line-height:1.5;
  color:rgba(26,42,68,.62);
}

/* ---- bottom line: no rule, just quiet text ---- */
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:10px clamp(48px,9vw,150px);
  font-size:clamp(11px,.85vw,13px);
  font-weight:350;
  letter-spacing:.02em;
  color:rgba(240,244,250,.62);
}
.site-footer__bottom a{color:var(--yellow);}
.site-footer__bottom a:hover{color:var(--yellow-hi);}

@media (max-width:1180px){
  .site-footer__cols{max-width:70%;}
  .site-footer__art{opacity:.45;}
}
@media (max-width:960px){
  .site-footer__cols{max-width:100%;flex-wrap:wrap;gap:clamp(32px,5vw,48px);}
  .site-footer li a{white-space:normal;}
  .site-footer__art{opacity:.2;}
  .site-footer__wm{display:none;}
  .site-footer__locs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(34px,5vw,44px);}
}
@media (max-width:560px){
  .site-footer__head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:clamp(40px,10vw,56px);}
  .site-footer__locs{grid-template-columns:1fr;row-gap:34px;}
}