/* The footer every page shares (footer.js). Phone first: who we are, the ways to reach us as real buttons,
   then everything on the site in thumb-sized rows. On a laptop the same blocks sit side by side. */
.ft{position:relative;z-index:1;display:grid;gap:36px;padding:52px 16px 26px;color:#F2EFE9;text-align:left;
  font-family:'Work Sans',system-ui,sans-serif;border-top:1px solid rgba(255,255,255,.08)}
.ft a{border:0!important;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.ft p{margin:0}

.ft-id .flock{--wm:17px;display:inline-flex;align-items:center;gap:calc(var(--wm) * .6)}
.ft .flock .fl-i{height:calc(var(--wm) * 1.5);width:auto;display:block}
.ft .flock .fl-w{height:var(--wm);width:auto;display:block}
.ft-line{margin-top:18px!important;max-width:24em;font-size:var(--f3,15px);line-height:1.55;color:#b9b6ad}
.ft-hrs{display:flex;align-items:center;gap:9px;margin-top:12px!important;font-size:var(--f2,13px);color:#8a887f}
.ft-hrs i{flex:none;width:7px;height:7px;border-radius:50%;background:#55555e;transition:background .3s,box-shadow .3s}
.ft-hrs.on i{background:#FF2C93;box-shadow:0 0 8px #FF2C93}

.ft-act{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.ft-cta,.ft-btn{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:500;white-space:nowrap;
  transition:transform .12s,background .2s,color .2s,border-color .2s}
.ft-cta{flex:1 1 100%;height:54px;background:#FF2C93;color:#fff!important;font-size:var(--f4,18px);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 28px rgba(255,44,147,.35)}
.ft .ft-btn{flex:1 1 0;height:48px;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.04);font-size:var(--f3,15px)}
.ft-btn svg{width:17px;height:17px;fill:currentColor;opacity:.8}
.ft-cta:active,.ft-btn:active{transform:scale(.97)}
.ft-btn:active{background:rgba(255,255,255,.1)}

/* three groups; on a phone, Work and Services side by side and the studio's pages below in two columns */
.ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px}
.ft-col{display:flex;flex-direction:column;min-width:0}
.ft-col p{margin-bottom:6px!important;font-size:var(--f1,11px);letter-spacing:.14em;text-transform:uppercase;color:#6f6c75}
.ft-col a{display:flex;align-items:center;min-height:42px;font-size:var(--f3,15px);color:#d8d5ce;transition:color .2s}
.ft-col a:active{color:#FF2C93}
.ft-col:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.ft-col:last-child p{grid-column:1/-1}

.ft-bot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
  font-size:var(--f2,13px);color:#6f6c75}
.ft-soc{display:flex;gap:20px}
.ft-soc a{color:#8a887f;min-height:40px;display:inline-flex;align-items:center}
.ft-bot .ffuse{margin-left:auto;margin-right:0}
.ft a:focus-visible{outline:2px solid #FF2C93;outline-offset:3px;border-radius:6px}

@media (hover:hover){
  .ft-col a:hover,.ft-soc a:hover{color:#FF2C93}
  .ft .ft-btn:hover{border-color:rgba(255,44,147,.6)!important;color:#fff}
}

@media (min-width:821px){
  .ft{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:clamp(48px,7vw,120px);row-gap:40px;padding:80px clamp(24px,4vw,56px) 28px}
  .ft-id{grid-column:1;grid-row:1}
  .ft-act{grid-column:1;grid-row:2}
  .ft-cols{grid-column:2;grid-row:1/span 2;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .ft-col:last-child{grid-column:auto;display:flex}
  .ft-col a{min-height:34px}
  .ft-cta{flex:0 0 auto;height:50px;padding:0 28px;font-size:var(--f3,15px)}
  .ft .ft-btn{flex:0 0 auto;height:50px;padding:0 22px}
  .ft-bot{grid-column:1/-1}
}

/* 20 Oct: Instagram and LinkedIn as round glyph buttons, and the button icons sized to the label */
.ft-soc{gap:10px}
.ft .ft-soc a{width:42px;height:42px;min-height:0;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.14)!important;color:#b9b6ad;transition:color .2s,border-color .2s,transform .12s}
.ft-soc a svg{width:18px;height:18px;fill:currentColor}
.ft-soc a:active{transform:scale(.94)}
.ft .ft-btn svg{width:17px;height:17px;flex:none}
@media (hover:hover){.ft .ft-soc a:hover{color:#FF2C93;border-color:rgba(255,44,147,.6)!important}}