/* ============================================================
   URHOM — SECTION 07 / FOOTER
   Five-column footer over a warm off-white, then a thin legal bar.
   Logo, buttons, tokens and type all come from the existing system.
   ============================================================ */

.footer{
  position:relative;
  background:
    radial-gradient(120% 90% at 86% 18%, rgba(255,248,232,.72) 0%, rgba(255,248,232,0) 58%),
    radial-gradient(90% 80% at 4% 92%, rgba(238,240,232,.62) 0%, rgba(238,240,232,0) 60%),
    #FAF8F5;
  overflow:hidden;
  isolation:isolate;
}

.footer__inner{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.05fr 1.2fr 1.3fr;
  padding:clamp(56px,5.2vw,96px) clamp(28px,7vw,130px) clamp(34px,3vw,56px);
  max-width:2000px;
  margin-inline:auto;
}

/* subtle vertical rules, as in the reference */
.fcol + .fcol{
  border-left:1px solid rgba(24,22,18,.10);
  padding-left:clamp(18px,2.6vw,52px);
}
.fcol + .fcol + .fcol{ padding-left:clamp(18px,2.4vw,46px); }


/* ---------------- brand column ---------------- */

.fbrand{ padding-right:clamp(20px,2.6vw,52px); }

.fbrand__mark{
  display:flex;
  align-items:center;
  gap:clamp(8px,.68vw,14px);
}
.fbrand__mark img{
  width:clamp(44px,3.2vw,62px);
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  transition:transform .5s var(--ease-soft);
}
.fbrand__mark:hover img{ transform:rotate(-6deg) scale(1.04); }

.fbrand__name{
  font-size:clamp(22px,1.75vw,34px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}

.fbrand__line{
  margin-top:clamp(16px,1.3vw,26px);
  font-size:clamp(14px,.99vw,19px);
  line-height:1.5;
  letter-spacing:-.004em;
  color:var(--ink-mute);
  max-width:24ch;
}

.fsocial{
  display:flex;
  gap:clamp(10px,.85vw,17px);
  margin-top:clamp(20px,1.86vw,36px);
}
.fsocial a{
  display:grid;
  place-items:center;
  width:clamp(40px,2.82vw,54px);
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(24,22,18,.10);
  color:var(--ink);
  box-shadow:0 2px 8px -5px rgba(40,32,18,.3);
  transition:background var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-soft);
}
.fsocial svg{ width:42%; height:42%; fill:currentColor; }
.fsocial a:hover{
  background:var(--yellow);
  border-color:var(--yellow);
  transform:translateY(-2px);
}


/* ---------------- link columns ---------------- */

.fcol__title{
  font-size:clamp(11px,.79vw,15px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

.flinks{ margin-top:clamp(16px,1.35vw,28px); }
.flinks li + li{ margin-top:clamp(8px,.73vw,15px); }

.flinks a{
  position:relative;
  display:inline-block;
  font-size:clamp(14px,.99vw,19px);
  font-weight:400;
  letter-spacing:-.006em;
  color:var(--ink-mute);
  transition:color var(--t-fast) var(--ease-out),
             transform var(--t-med) var(--ease-soft);
}
.flinks a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:1.5px;
  border-radius:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--ease-soft);
}
.flinks a:hover{ color:var(--ink); transform:translateX(2px); }
.flinks a:hover::after{ transform:scaleX(1); }


/* ---------------- contact column ---------------- */

.fcontact{ margin-top:clamp(16px,1.35vw,28px); }
.fcontact li + li{ margin-top:clamp(10px,.9vw,18px); }

.fcontact a,
.fcontact span.fcontact__row{
  display:flex;
  align-items:center;
  gap:clamp(10px,.85vw,17px);
  font-size:clamp(14px,.99vw,19px);
  letter-spacing:-.006em;
  color:var(--ink);
  transition:color var(--t-fast) var(--ease-out);
}
.fcontact a:hover{ color:#000; }
.fcontact a:hover .fcontact__icon{ transform:scale(1.07); }

.fcontact__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:clamp(34px,2.48vw,48px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:0 3px 10px -5px rgba(140,100,0,.5);
  transition:transform var(--t-med) var(--ease-soft);
}
.fcontact__icon svg{ width:46%; height:46%; fill:currentColor; }

.fcta{ margin-top:clamp(22px,1.86vw,36px); }


/* ============================================================
   LEGAL BAR
   ============================================================ */

.flegal{
  border-top:1px solid rgba(24,22,18,.10);
}
.flegal__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,2vw,40px);
  padding:clamp(18px,1.63vw,32px) clamp(28px,7vw,130px);
  max-width:2000px;
  margin-inline:auto;
  font-size:clamp(12.5px,.9vw,17px);
  color:var(--ink-mute);
}

.flegal__links{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.3vw,26px);
}
.flegal__links a{
  position:relative;
  transition:color var(--t-fast) var(--ease-out);
}
.flegal__links a:hover{ color:var(--ink); }
.flegal__links li + li::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(6px,.65vw,13px));
  top:50%;
  transform:translateY(-50%);
  width:1px; height:14px;
  background:rgba(24,22,18,.18);
}
.flegal__links li{ position:relative; }

.flegal__sign{
  justify-self:end;
  letter-spacing:-.004em;
}
.flegal__sign em{ font-style:normal; color:var(--yellow); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1280px){
  .footer__inner{
    grid-template-columns:1.4fr 1fr 1fr;
    row-gap:clamp(30px,4vw,52px);
  }
  .fcol + .fcol + .fcol + .fcol{
    border-left:0;
    padding-left:0;
  }
  .fbrand{ grid-column:1 / -1; padding-right:0; }
  .fcol:nth-child(2){ border-left:0; padding-left:0; }
}

@media (max-width:860px){
  .footer__inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(28px,5vw,44px);
    column-gap:clamp(20px,4vw,40px);
  }
  /* `.fcol + .fcol + .fcol` sets its own padding-left further up and was not
     being reset here, so the third column (Company) sat indented from the
     rest once the footer stacked. Reset every variant, and the brand
     column's right padding too, so both gutters match. */
  .fcol,
  .fcol + .fcol,
  .fcol + .fcol + .fcol{ border-left:0; padding-left:0; padding-right:0; }
  .fbrand{ padding-right:0; }
  .fcontact{ grid-column:1 / -1; }

  .flegal__inner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:12px;
  }
  .flegal__sign{ justify-self:center; }
}

@media (max-width:560px){
  .footer__inner{
    grid-template-columns:1fr;
    padding-inline:24px;
  }
  .fbrand__line{ max-width:34ch; }
  .flinks a,
  .fcontact a{ font-size:16px; }
  .fcta .btn--lg{ width:100%; height:52px; font-size:15px; }
  .flegal__inner{ padding-inline:24px; }
  .flegal__links{ flex-wrap:wrap; justify-content:center; row-gap:8px; }
}