/* assets/css/footer.css */
/* ============================================================
   SECTION 08 — Footer
   Ink ground, to bookend the hero. Their tagline gets to be the
   closing line rather than a broken marquee at the very bottom.
   ============================================================ */

.foot{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  padding:clamp(72px,11vh,140px) 0 0;
}
.foot::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(75% 60% at 8% 0%, rgba(70,106,96,.28), transparent 60%),
    radial-gradient(55% 50% at 96% 24%, rgba(184,82,44,.14), transparent 62%);
}
.foot__inner{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;padding:0 var(--pad);
}

/* ------------------------------------------------------------
   Closing call to action
   ------------------------------------------------------------ */
.foot__cta{
  display:grid;grid-template-columns:minmax(0,1.35fr) auto;
  align-items:end;gap:clamp(24px,4vw,64px);
  padding-bottom:clamp(40px,6vh,72px);
  border-bottom:1px solid var(--cream-14);
}
.foot__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(32px,5.2vw,86px);line-height:.98;letter-spacing:-.02em;
  margin-top:clamp(14px,2vh,24px);
}
.foot__title .l{display:block;overflow:hidden;padding-bottom:.03em}
.foot__title .l span{display:inline-block;will-change:transform}
.foot__actions{display:flex;gap:10px;flex-wrap:wrap}
.foot__actions .btn{flex:none;padding:14px 22px}

/* ------------------------------------------------------------
   The seven addresses
   ------------------------------------------------------------ */
.foot__storesHead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:clamp(34px,5vh,58px) 0 clamp(18px,2.4vh,26px);
}
.foot__storesHead h3{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terracotta-lift);
  font-weight:400;
}
.foot__storesHead span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-45)}

.foot__stores{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2vw,34px) clamp(18px,2.4vw,44px);
  padding-bottom:clamp(34px,5vh,58px);
  border-bottom:1px solid var(--cream-08);
}
.store{min-width:0}
.store__name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(17px,1.5vw,23px);line-height:1.05;margin-bottom:9px;
}
.store__kind{
  display:inline-block;margin-bottom:10px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-lift);
}
.store address{
  font-style:normal;font-size:12px;line-height:1.6;font-weight:300;color:var(--cream-70);
}
.store__links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.store__links a{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.store__links a:hover{color:var(--cream);border-color:var(--terracotta)}

/* ------------------------------------------------------------
   Brand · nav · social
   ------------------------------------------------------------ */
.foot__cols{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,54px);
  padding:clamp(34px,5vh,58px) 0;
}
.foot__brand{font-weight:500;font-size:13px;letter-spacing:.34em;text-indent:.34em}
.foot__blurb{
  margin-top:16px;max-width:34ch;
  font-size:12.5px;line-height:1.65;font-weight:300;color:var(--cream-70);
}
.foot__mail{
  display:inline-block;margin-top:16px;font-size:12.5px;color:var(--cream);
  box-shadow:inset 0 -1px 0 var(--cream-28);
  transition:box-shadow .35s var(--ease);
}
.foot__mail:hover{box-shadow:inset 0 -1px 0 var(--terracotta)}

.foot__col h4{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-45);font-weight:400;margin-bottom:16px;
}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot__col a{
  position:relative;font-size:13px;color:var(--cream-70);
  transition:color .35s var(--ease);
}
.foot__col a::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--terracotta);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.foot__col a:hover{color:var(--cream)}
.foot__col a:hover::after{transform:scaleX(1);transform-origin:left}
.foot__col a svg{width:9px;height:9px;margin-left:5px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:middle}

/* ------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------ */
.foot__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:clamp(18px,2.6vh,26px) 0 clamp(24px,3.4vh,36px);
  border-top:1px solid var(--cream-08);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45);
}
.foot__bar b{font-weight:400;color:var(--cream-70)}

/* ------------------------------------------------------------
   Tablet / mobile
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .foot__cta{grid-template-columns:1fr;align-items:start}
  .foot__stores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .foot__stores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__actions .btn{flex:1 1 auto}
}
@media (max-width:460px){
  .foot__stores{grid-template-columns:1fr;gap:22px}
  .foot__cols{grid-template-columns:1fr;gap:30px}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .foot__col a::after,.foot__mail,.store__links a{transition:none}
}

/* tap targets: every inline link in the footer */
.foot__mail,.foot__stores a,.foot__cols a,.foot__bar a{
  display:inline-flex;align-items:center;min-height:44px;
}