/* ==========================================================================
   Footer — reference: assets/footer.png (1666×364)
   1 design px = var(--u) (width-driven, capped like the other sections).
   Logo is ours (assets/img/logo.*), not the roof mark from the mock.
   Text face: the mock uses a wide geometric sans; Manrope is kept for the
   whole page (as in the CTA) and line widths are matched with tracking.
   ========================================================================== */

.footer{
  --u:min(100cqw / 1666,1.25px);
  --f-bg:#f6f2eb;
  --f-head:#16150a;
  --f-text:#56523c;
  --f-soft:#6c6855;
  --f-gold:#ad7d38;
  --f-icon:#a5712b;
  --f-line:#dcd8cf;
  --f-chip:#f2e1c7;
  position:relative;
  background:var(--f-bg);
  border-top:1px solid #e6d2c2; /* the warm hairline at the top of the mock */
  color:var(--f-text);
}
.footer__inner{
  position:relative;
  width:calc(1666 * var(--u));
  margin:0 auto;
  padding:calc(var(--f-top,40) * var(--u)) 0 calc(var(--f-bot,30) * var(--u));
}

/* columns start at the mock's x: 111 · 603 · 976 · 1406 */
.footer__top{
  display:grid;
  grid-template-columns:calc(492 * var(--u)) calc(373 * var(--u)) calc(430 * var(--u)) auto;
  padding-left:calc(111 * var(--u));
}

/* ------------------------------------------------------------- brand */
.footer__logo{display:block;width:calc(var(--f-logo,111) * var(--u));border-radius:50%}
.footer__logo img{width:100%;height:auto}
.footer__about{
  margin-top:calc(var(--f-about,15) * var(--u));
  font-size:max(13px,calc(var(--f-about-fs,18.3) * var(--u)));
  line-height:calc(26 * var(--u));
  letter-spacing:var(--f-about-ls,.014em);
  color:var(--f-text);
}
.footer__about span{display:block}

/* ----------------------------------------------------------- columns */
.footer__col{padding-top:calc(var(--f-title-top,2.5) * var(--u))}
.footer__title{
  font-size:max(14px,calc(var(--f-title-fs,18.7) * var(--u)));
  line-height:calc(26 * var(--u));
  font-weight:700;
  letter-spacing:var(--f-title-ls,.012em);
  color:var(--f-head);
}
.footer__rule{
  display:block;
  width:calc(47 * var(--u));height:max(1.5px,calc(2 * var(--u)));
  margin-top:calc(var(--f-rule,20) * var(--u));
  background:var(--f-gold);
  transform-origin:left center;
}

.footer__links{display:grid;margin-top:calc(var(--f-links,23) * var(--u))}
.footer__link{
  position:relative;display:inline-block;
  font-size:max(13px,calc(var(--f-link-fs,18.5) * var(--u)));
  line-height:calc(29.75 * var(--u));
  letter-spacing:var(--f-link-ls,.042em);
  color:var(--f-text);
  transition:color .3s var(--ease-out);
}
.footer__link::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(3 * var(--u));
  height:1px;background:var(--f-gold);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease-out);
}
.footer__link:hover{color:var(--f-head)}
.footer__link:hover::after{transform:scaleX(1);transform-origin:left center}

/* contacts: icon column + text, rows 38.4 design px apart */
.footer__contacts{display:grid;margin-top:calc(var(--f-contacts,20) * var(--u));font-style:normal}
.contact{
  display:flex;align-items:center;gap:calc(var(--f-icon-gap,19) * var(--u));
  height:calc(38.4 * var(--u));
  margin:0;
  font-size:max(13px,calc(var(--f-contact-fs,18.7) * var(--u)));
  letter-spacing:var(--f-contact-ls,.012em);
  color:var(--f-text);
}
.contact__icon{
  flex:none;margin-left:calc(-2 * var(--u)); /* the drawings carry inner padding */width:calc(29 * var(--u));height:calc(29 * var(--u));
  fill:none;stroke:var(--f-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out);
}
.contact__icon .contact__fill{fill:var(--f-icon);stroke:none}
a.contact .contact__text{position:relative}
a.contact .contact__text::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--f-gold);
  transform:scaleX(0);transform-origin:right center;transition:transform .45s var(--ease-out);
}
a.contact:hover{color:var(--f-head)}
a.contact:hover .contact__text::after{transform:scaleX(1);transform-origin:left center}
a.contact:hover .contact__icon{transform:translateX(calc(2 * var(--u))) rotate(-6deg)}

/* social chips */
.footer__social{display:flex;gap:calc(28 * var(--u));margin-top:calc(var(--f-social,21) * var(--u))}
.footer__col--social .footer__title{--f-title-ls:.05em}
.social{
  position:relative;display:grid;place-items:center;
  width:calc(60 * var(--u));height:calc(60 * var(--u));min-width:44px;min-height:44px;
  border-radius:50%;
  background:var(--f-chip);
  color:#211f0b;
  isolation:isolate;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),color .35s var(--ease-out);
}
/* gold fill rises from the bottom on hover */
.social::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,#c99a52,#a9782f);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.social svg{width:calc(33 * var(--u));height:calc(33 * var(--u));min-width:22px;min-height:22px}
.social__stroke{fill:none;stroke:currentColor;stroke-width:2.6}
.social__dot,.social__fill{fill:currentColor}
.social:hover{transform:translateY(calc(-3 * var(--u)));color:#fffaf0;box-shadow:0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-12 * var(--u)) rgba(130,90,30,.55)}
.social:hover::before{transform:translateY(0)}

/* ------------------------------------------------------------ bottom */
.footer__bottom{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  margin:calc(var(--f-divider,24) * var(--u)) calc(99 * var(--u)) 0 calc(111 * var(--u));
  padding-top:calc(var(--f-bottom-pad,19) * var(--u));
}
.footer__divider{position:absolute;left:0;right:0;top:0;height:1px;background:var(--f-line);transform-origin:left center}
.footer__copy,.footer__legal .footer__link{
  font-size:max(12px,calc(var(--f-small-fs,15.5) * var(--u)));
  line-height:calc(22 * var(--u));
  letter-spacing:var(--f-small-ls,.03em);
  color:var(--f-soft);
}
.footer__copy{--f-small-ls:.064em} /* «FAYMAN GROUP» in caps is much wider in the mock face */
.footer__legal{display:flex;gap:calc(54 * var(--u))}

/* ------------------------------------------------- motion start states */
.motion [data-f-reveal]{visibility:hidden}

/* ===================================================================
   Stacked layout — same breakpoints as the rest of the page
   =================================================================== */
@media (max-width:1023.98px),(max-aspect-ratio:6/5){
  .footer{--u:1px}
  .footer__inner{width:auto;padding:48px 20px max(28px,env(safe-area-inset-bottom))}
  .footer__top{grid-template-columns:1fr 1fr;row-gap:40px;column-gap:24px;padding:0}
  .footer__brand{grid-column:1 / -1}
  .footer__logo{width:96px}
  .footer__about{max-width:30em;font-size:15.5px;line-height:1.6}
  .footer__about span{display:inline}
  .footer__col{padding-top:0}
  .footer__title{font-size:16px;line-height:1.4}
  .footer__rule{margin-top:12px}
  .footer__links{margin-top:14px}
  .footer__link{font-size:15.5px;line-height:2}
  .footer__col--nav{order:1}
  .footer__col--social{order:2}
  .footer__col--contacts{grid-column:1 / -1;order:3}
  .footer__contacts{margin-top:10px}
  .contact{height:44px;gap:14px;font-size:15.5px}
  .contact__icon{width:22px;height:22px}
  .footer__social{margin-top:16px;gap:14px}
  .social{width:52px;height:52px}
  .social svg{width:26px;height:26px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:14px;margin:36px 0 0;padding-top:20px}
  .footer__legal{flex-wrap:wrap;gap:6px 22px}
  .footer__copy,.footer__legal .footer__link{font-size:13.5px;line-height:1.6}
}
@media (min-width:640px) and (max-width:1023.98px),(min-width:640px) and (max-aspect-ratio:6/5){
  .footer__inner{padding:64px 32px 32px}
  .footer__top{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) auto;column-gap:32px}
  .footer__brand{grid-column:1 / -1}
  .footer__col--nav,.footer__col--social,.footer__col--contacts{grid-column:auto;order:0}
  .contact{white-space:nowrap}
}
@media (min-width:900px) and (max-width:1023.98px){
  .footer__bottom{flex-direction:row;align-items:center}
}