/* Footer "curtain": the footer waits under the page and is revealed as the last section lifts away.
   Fits one screen so the whole footer is visible once revealed. Black, site pills, Mona Sans. */
/* Normal footer by default. The curtain (sticky, one screen tall) only runs when the whole footer fits the window;
   on a short window a pinned footer would hide its own top under the nav with no way to scroll to it. */
.mf { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end;
  background: #000000; color: #ffffff; overflow: hidden; font-family: "Mona Sans", sans-serif; padding-top: 90px; box-sizing: border-box; }
.mf.is-pinned { position: sticky; bottom: 0; height: 100vh; }  /* js/footer-curtain.js adds this only when the footer fits */
*:has(+ .mf):not(:has(.header-position-absolute-wrapper)) { position: relative; z-index: 1; }  /* the section before the footer slides over it.
   Never the wrapper that holds the nav: z-index 1 there trapped the nav under the fixed nav blur (z 999), blurring it (websites, 2026-10-05) */
.mf .container-default { width: 100%; }

.mf-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; padding-bottom: 36px; }
/* longer headline: smaller and wider so the footer still fits one screen */
.mf-title { margin: 0; max-width: 19ch; font-size: clamp(34px, 3.8vw, 64px); line-height: .96; font-weight: 500; letter-spacing: -.04em; color: #ffffff; }
.mf-contact { display: grid; gap: 10px; margin-top: 22px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; }
.mf-contact a, .mf-copy { color: #ffffff; text-decoration: none; }
.mf-copy { position: relative; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.mf-copy .tip { position: absolute; left: 0; top: 100%; margin-top: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: #9a9a9a; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s cubic-bezier(.7, 0, .3, 1); white-space: nowrap; }
.mf-copy:hover .tip, .mf-copy.done .tip { opacity: 1; transform: none; }

.mf-cols { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 120px; row-gap: 32px;  /* Services, Studio */ padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.mf-cols h4 { margin: 0 0 16px; font-size: 15px; font-weight: 400; color: #9a9a9a; }
.mf-cols ul { list-style: none; margin: 0; padding: 0; }
.mf-cols li { margin: 0; padding: 0; }  /* reset the site's default li spacing */
.mf-cols li + li { margin-top: 6px; }
.mf-cols li, .mf-cols a { line-height: 1.35; }
.mf-cols h4 { line-height: 1.3; }
.mf-cols a { position: relative; font-size: clamp(18px, 1.5vw, 22px); color: #ffffff; text-decoration: none; }
.mf-cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.7, 0, .3, 1); }
.mf-cols a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.mf-cols.is-aligned { display: block; position: relative; height: 82px; padding: 0; }
.mf-cols.is-aligned h4 { display: none; }
.mf-cols.is-aligned > div, .mf-cols.is-aligned ul, .mf-cols.is-aligned li { display: contents; }
.mf-cols.is-aligned a { position: absolute; top: 28px; transform: translateX(-50%); white-space: nowrap; }  /* left is set per link, on its letter's center */

/* MERIDIAN° edge to edge; js/footer-curtain.js sets --ms so it fills the width exactly */
/* MERIDIAN, centered with equal space each side (it spans exactly the content width); the degree sign rides the N like N°.
   js/footer-curtain.js splits the word into letters and sets --ms so the word fills that width. */
.mf-mark { display: flex; justify-content: center; margin: 0 0 14px; padding-top: .06em; font-size: var(--ms, 14vw); font-weight: 500; line-height: .8; text-transform: uppercase; white-space: nowrap;
  clip-path: inset(-2em -1em 0 -1em); }  /* letters rise out of the line below them; the degree sign may overhang the top */
/* As the footer is revealed (--rev 0 to 1, set by js/footer-curtain.js) each letter rises in turn, M first, N° last,
   eased out. It follows the scroll, so scrolling back up sinks them again. --i is the letter's index. */
.mf-mark .L { --p: clamp(0, calc((var(--rev, 1) - var(--i, 0) * .07) / .51), 1); transform: translateY(calc((1 - var(--p) * (2 - var(--p))) * 110%)); }
.mf-mark > span:not(.L) { display: inline-block; margin-left: .02em; font-size: .6em; transform: translateY(-.32em); }  /* before the script runs */
.mf-mark .L { position: relative; display: inline-block; }
.mf-mark .L + .L { margin-left: .12em; }  /* spacing between letters only, so nothing trails after the N */
.mf-mark .deg { position: absolute; left: 100%; top: -.12em; margin-left: .16em; font-size: .42em; line-height: 1; }  /* "N°": raised at the N's upper right, like the logo; outside the width math so the word stays centered */

.mf-legal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 16px 0 18px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #9a9a9a; }
/* Social icons on the bottom line: white circles, each mark in its brand color (Evan, 2026-10-01).
   No href yet = shown but not clickable; adding the URL makes each one live. */
.mf-social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* bigger marks inside the same 40px circles; sizes differ per logo so they look even */
.mf-social a[title="X"] svg { width: 19px; height: 19px; }
.mf-social a[title="LinkedIn"] svg { width: 21px; height: 21px; }
.mf-social a[title="Facebook"] svg, .mf-social a[title="TikTok"] svg, .mf-social a[title="YouTube"] svg { width: 24px; height: 24px; }
.mf-social li { margin: 0; padding: 0; }
.mf-social a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; color: var(--mark);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s cubic-bezier(.34, 1.56, .64, 1); }  /* quick spring with a slight overshoot */
.mf-social a:not([href]) { cursor: default; }
.mf-social svg { display: block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.mf-social a[title="X"] { --mark: #000000; --glow: rgba(255, 255, 255, .35); }
.mf-social a[title="LinkedIn"] { --mark: #0a66c2; --glow: rgba(10, 102, 194, .6); }
.mf-social a[title="Facebook"] { --mark: #1877f2; --glow: rgba(24, 119, 242, .6); }
.mf-social a[title="Instagram"] { --mark: #d6249f; --glow: rgba(214, 36, 159, .55); }
.mf-social a[title="YouTube"] { --mark: #ff0000; --glow: rgba(255, 0, 0, .5); }
.mf-social a[title="TikTok"] { --mark: #000000; --glow: rgba(160, 160, 160, .5); }
.mf-social a[title="TikTok"] svg { filter: drop-shadow(-1.3px -1.3px 0 #25f4ee) drop-shadow(1.3px 1.3px 0 #fe2c55); }  /* TikTok's look on white */
/* Instagram: its full gradient painted through the glyph shape */
.mf-social a[title="Instagram"] svg { opacity: 0; }
.mf-social a[title="Instagram"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22/%3E%3Ccircle%20cx%3D%2217.4%22%20cy%3D%226.6%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22/%3E%3Ccircle%20cx%3D%2217.4%22%20cy%3D%226.6%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20stroke%3D%22none%22/%3E%3C/svg%3E") center / contain no-repeat; }
/* Hover: the circle lifts and glows in its own color, the mark pops. */
.mf-social a:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 0 0 4px var(--glow), 0 16px 28px -8px var(--glow); }
.mf-social a:hover svg { transform: scale(1.22) rotate(-8deg); }
.mf-social a[title="Instagram"]:hover::before { transform: translate(-50%, -50%) scale(1.22) rotate(-8deg); }
.mf-social a:active { transform: translateY(-2px) scale(.94); transition-duration: .12s; }  /* press */
@media (prefers-reduced-motion: reduce) { .mf-social a:hover, .mf-social a:hover svg { transform: none; } .mf-social a[title="Instagram"]:hover::before { transform: translate(-50%, -50%); } }
/* "Miami. Working everywhere." with the live time, stacked above Book a call */
.mf-side { display: grid; justify-items: end; gap: 18px; text-align: right; }
.mf-now { display: grid; justify-items: end; gap: 4px; margin: 0; font-variant-numeric: tabular-nums; }
.mf-where { font-size: 15px; color: #9a9a9a; }
.mf-now .mf-time { font-size: clamp(26px, 2.2vw, 36px); line-height: 1; font-weight: 500; letter-spacing: -.02em; color: #ffffff; }
@media (min-width: 768px) { .mf-side .btn-primary { display: none; } }  /* the nav already shows Book a call on desktop */
.mf-now .colon { animation: mf-blink 2s steps(1) infinite; }
@keyframes mf-blink { 50% { opacity: .25; } }

@media (max-width: 767px) {
  .mf { padding-top: 80px; }
  .mf-head { grid-template-columns: 1fr; gap: 28px; }
  .mf-contact { font-size: 18px; overflow-wrap: anywhere; }
  .mf-cols { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .mf-legal { grid-template-columns: 1fr; gap: 14px; }
  .mf-side, .mf-now { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-mark .L { transform: none; }
  .mf-now .colon { animation: none; }
}
/* X has no account link yet (Evan, 2026-10-05: "leave it out for now"). Remove this line to show it again. */
.mf-social li:has(> a[title="X"]) { display: none; }
/* "Terms" link at the end of the copyright line (Evan approved 2026-10-05, option A). */
.mf-legal .mf-terms { margin-left: 20px; color: #9a9a9a; text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.mf-legal .mf-terms:hover { color: #fff; }
@media (max-width: 767px) { .mf-legal .mf-terms { display: table; margin: 8px 0 0; } }