/*
 * Maksh Architects — site footer (footer#contact.mf), the same on every page.
 * The original maksharchitects.com footer: four columns split by thin rules — Locations,
 * Services, Contact Us, Follow Us — with its addresses, service names, phone, e-mail
 * addresses and social accounts, then a full-width MAKSH ARCHITECTS wordmark (as the
 * reference footer, aparnakaushik.com) and the copyright line.
 * Two columns on tablets, one on phones, in the same order.
 * The newsletter form is not yet connected: the original posts to its WordPress Mailchimp
 * plugin, which this site does not have. Setting data-endpoint on the form connects it.
 */
.mf{
  --mf-copper:#B87333;--mf-cream:#E6D6B8;--mf-rule:rgba(255,255,255,.14);
  background:#000;color:#fff;font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  border-top:1px solid var(--mf-rule)
}
.mf *,.mf *::before,.mf *::after{box-sizing:border-box}
.mf a{color:inherit;text-decoration:none;transition:color .3s}
.mf a:focus-visible,.mf button:focus-visible{outline:1px solid var(--mf-copper);outline-offset:4px}
.mf svg{flex:none}
.mf-cols{display:grid;grid-template-columns:1.6fr 1fr 1.25fr 1.05fr}
.mf-col{min-width:0;padding:clamp(48px,4.4vw,80px) clamp(24px,2.7vw,52px) clamp(44px,3.6vw,64px)}
.mf-col+.mf-col{border-left:1px solid var(--mf-rule)}
.mf-h{margin:0 0 clamp(24px,2.2vw,36px);font-weight:300;font-size:clamp(30px,2.4vw,46px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--mf-cream)}
.mf-col p,.mf-col ul{margin:0}
.mf-txt{font-weight:400;font-size:clamp(16px,1vw,18px);line-height:1.6}

/* Locations: copper studio name, pin beside the address */
.mf-loc{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px}
.mf-loc+.mf-loc{margin-top:14px}
.mf-loc h3{grid-column:2;margin:0 0 2px;font-weight:600;font-size:clamp(16px,1vw,18px);line-height:1.5;color:var(--mf-copper)}
.mf-loc svg{grid-column:1;margin-top:.3em;color:var(--mf-copper)}

/* Services: copper arrow before each name */
.mf-list{list-style:none;padding:0}
.mf-list li{display:flex;align-items:baseline;gap:12px}
.mf-list li+li{margin-top:6px}
.mf-list svg{position:relative;top:2px;color:var(--mf-copper)}
.mf-list a:hover{color:var(--mf-copper)}

/* Contact: copper icon and label, white value */
.mf-contact li{display:flex;align-items:flex-start;gap:12px;overflow-wrap:anywhere}
.mf-contact li+li{margin-top:12px}
.mf-contact svg{margin-top:.25em;color:var(--mf-copper)}
.mf-contact span{color:var(--mf-copper)}
.mf-contact a:hover{color:var(--mf-copper)}

/* Follow Us: copper circles, white marks */
.mf-social{display:flex;gap:clamp(6px,.6vw,10px)}
.mf-social a{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#8C5A2E;color:#fff;transition:background .3s,color .3s,transform .3s}
.mf-social a:hover,.mf-social a:focus-visible{background:var(--mf-copper);transform:translateY(-2px)}
/* site.js initNewsletter: checks the address; sends it only when data-endpoint is set */
.mf-news{display:grid;justify-items:start;gap:20px;margin-top:clamp(24px,2.4vw,40px);max-width:260px}
.mf-news input{width:100%;height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.4);border-radius:0;background:#2a2a2a;color:#fff;font:inherit;font-size:16px;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color .3s}
.mf-news input::placeholder{color:#a6a6a6;opacity:1}
.mf-news input:focus{border-color:var(--mf-copper);background:#2a2a2a}
.mf-news input[aria-invalid="true"]{border-color:#d9826b}
/* browser autofill would otherwise paint the field yellow/orange */
.mf-news input:-webkit-autofill,.mf-news input:-webkit-autofill:hover,.mf-news input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 100px #2a2a2a inset;transition:background-color 9999s}
.mf-news button{height:46px;padding:0 16px;border:0;border-radius:0;background:#3d3d3d;color:#fff;font:inherit;font-size:14px;font-weight:500;text-transform:uppercase;cursor:pointer;transition:background .3s}
.mf-news button:hover{background:var(--mf-copper)}
.mf-news button:disabled{cursor:wait;opacity:.6}
.mf-news-msg{margin:0;font-size:14px;line-height:1.5;color:#cfcfcf}
.mf-news-msg:empty{display:none}
.mf-news-msg.is-err{color:#e8a08c}

/* logo and copyright */
.mf-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:22px clamp(24px,2.7vw,52px);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.56)}
/* Wordmark: MAKSH ARCHITECTS across the footer, sized by site.js to fill the width (the
   font-size here is the starting guess). Each letter sits in a clipping box; site.js moves it
   up into the box with the scroll (the reference footer's rise, aparnakaushik.com), the centre
   letters first and the outer ones after, and back down when scrolling up. Without JS the
   word is simply shown. */
.mf-word{margin:clamp(28px,3vw,56px) clamp(24px,2.7vw,52px) 0;font-weight:500;font-size:9.9vw;line-height:.86;letter-spacing:-.01em;text-transform:uppercase;color:var(--mf-copper);white-space:nowrap;text-align:center;user-select:none;overflow:hidden}
.mf-word .mf-l{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.mf-word .mf-l>span{display:inline-block;will-change:transform}
.mf-word .mf-sp{display:inline-block;width:.24em}
.mf-bottom p{margin:0}

/* tablet: Locations + Services, then Contact + Follow */
@media (max-width:1100px){
  .mf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-col:nth-child(3){border-left:0}
  .mf-col:nth-child(n+3){border-top:1px solid var(--mf-rule)}
}
/* phones: one column, same order */
@media (max-width:640px){
  .mf-cols{grid-template-columns:minmax(0,1fr)}
  .mf-col+.mf-col{border-left:0;border-top:1px solid var(--mf-rule)}
  .mf-col{padding:40px 20px}
  .mf-news{max-width:none}
  .mf-bottom{padding:22px 20px}
  .mf-word{margin:24px 20px 0}
}