/* =========================================================================
   Spec Media — footer: credits left, big link columns right, a hairline,
   a full-width wordmark, then the clock and a round back-to-top button.
   When it follows the CTA the top fades from the CTA's grey into black.
   ========================================================================= */
.site-footer {
  --f-sans: var(--font, var(--sans, var(--h-font, 'Lama Sans', 'General Sans', 'Helvetica Neue', Arial, sans-serif)));
  --f-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; z-index: 6; overflow: hidden;
  background: #000; color: #fff;
  padding: clamp(46px, 5.6vw, 84px) clamp(18px, 3.4vw, 48px) 0;
  font-family: var(--f-sans); line-height: 1.5; text-align: start;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer h2, .site-footer p { margin: 0; }
/* after the light CTA the footer arrives as a clean black sheet with rounded top corners —
   no grey wash — overlapping the section above it */
.site-footer--cta { margin-top: calc(clamp(28px, 3vw, 46px) * -1); border-radius: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) 0 0; box-shadow: 0 -40px 80px rgba(10, 9, 9, .22); padding-top: clamp(64px, 7vw, 110px); }
.site-footer { background: radial-gradient(70% 55% at 50% 0%, #17171a 0%, #0b0b0c 55%, #050505 100%); border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer--cta { border-top-color: rgba(255, 255, 255, .14); }.site-footer > * { position: relative; z-index: 1; }

.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; padding-bottom: clamp(36px, 4.6vw, 70px); }
.foot-credit { font-size: .92rem; line-height: 1.35; color: #fff; font-weight: 500; letter-spacing: -.01em; max-width: 30ch; }
.foot-credit p + p { margin-top: 0; }
.foot-credit p:nth-child(n+2) { color: rgba(255, 255, 255, .78); }
.foot-cols { display: flex; gap: clamp(40px, 8vw, 150px); flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: clamp(1.2rem, 1.9vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: #fff; min-width: 7.5em; }
html.is-rtl .foot-col, html.is-rtl .foot-credit { letter-spacing: 0; }
.site-footer .foot-col p.foot-col-label { font-size: .8rem; font-weight: 500; letter-spacing: 0; color: #fff; margin: 0 0 14px; }
.foot-col span { color: rgba(255, 255, 255, .7); font-size: .72em; font-weight: 400; margin-top: 4px; }
.foot-col a { transition: opacity .25s ease, transform .4s var(--f-ease); }
.foot-col:hover a { opacity: .55; }
.foot-col a:hover { opacity: 1; transform: translateX(5px); }
html.is-rtl .foot-col a:hover { transform: translateX(-5px); }

.foot-rule { height: 1px; background: rgba(255, 255, 255, .18); }

/* the wordmark: JS sizes it so it spans the whole width */
.foot-word { overflow: hidden; padding: clamp(10px, 2vw, 30px) 0 0; }
.foot-word span { display: inline-block; white-space: nowrap; font-size: 17vw; font-weight: 500; letter-spacing: -.05em; line-height: .86; color: #e8e8e8; padding-bottom: .06em; transform: translateX(-.03em); }

.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 0 clamp(22px, 2.6vw, 38px); font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; }
.foot-clock { color: #fff; }
.foot-up { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #151515; border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .3s ease, transform .4s var(--f-ease); }
.foot-up:hover { background: #fff; color: #000; transform: translateY(-4px); }

@media (max-width: 860px) { .foot-cols { gap: 34px 48px; } }

/* ── colour + grunge ───────────────────────────────────────────────────────
   Deep wine and charcoal washes, then three overlays on top: fine film grain,
   large mottled stains, and a few hairline scratches. All inline SVG, no files. */
.site-footer {
  background:
    radial-gradient(70% 60% at 12% 105%, rgba(176, 20, 40, .55) 0%, rgba(176, 20, 40, 0) 62%),
    radial-gradient(55% 50% at 96% 78%, rgba(120, 12, 30, .5) 0%, rgba(120, 12, 30, 0) 66%),
    radial-gradient(80% 45% at 50% 0%, #1f1a1d 0%, rgba(31, 26, 29, 0) 70%),
    linear-gradient(180deg, #0c0a0b 0%, #130709 62%, #1d070b 100%);
}
.site-footer::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.52'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='700'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .04  0 0 0 0 .08  1.5 0 0 0 -.74'/></filter><rect width='100%' height='100%' filter='url(%23b)' opacity='.42'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='500'><g stroke='white' stroke-linecap='round' fill='none'><path d='M40 80 L310 60' stroke-opacity='.05' stroke-width='1'/><path d='M120 300 L560 330' stroke-opacity='.045' stroke-width='1'/><path d='M380 40 L420 460' stroke-opacity='.04' stroke-width='1'/><path d='M60 420 L200 380' stroke-opacity='.05' stroke-width='1'/><path d='M500 120 L660 100' stroke-opacity='.045' stroke-width='1'/></g></svg>");
  background-size: 160px 160px, 900px 700px, 700px 500px;
}
.foot-word span { background: linear-gradient(180deg, #ffffff 15%, #d8c3c6 62%, #9c6770 118%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-rule { background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .06)); }
.foot-col a:hover { color: #ff6b7a; }
/* four columns: site, two offices, language */
.foot-cols { gap: clamp(28px, 4vw, 72px); flex-wrap: nowrap; }
.foot-col { font-size: clamp(.95rem, 1.35vw, 1.3rem); min-width: 0; }
@media (max-width: 1000px) { .foot-cols { flex-wrap: wrap; } .foot-col { font-size: 1.1rem; } }

/* ── layout round 3: one clean grid — credit + four equal columns, shared top line, one type scale ── */
.foot-top { display: grid; grid-template-columns: minmax(200px, 1.25fr) repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 48px); row-gap: 34px; align-items: start; padding-bottom: clamp(34px, 4vw, 60px); }
.foot-cols { display: contents; }
.foot-credit { font-size: .92rem; line-height: 1.5; max-width: 28ch; }
.foot-credit p:first-child { font-weight: 600; margin-bottom: 8px; }
.foot-col { gap: 2px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.7; }
.site-footer .foot-col p.foot-col-label { font-family: var(--mono, monospace); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 14px; line-height: 1.4; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); width: 100%; }
html.is-rtl .site-footer .foot-col p.foot-col-label { font-family: var(--f-sans); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.foot-col a { overflow-wrap: anywhere; }
.foot-col span { font-size: .88rem; line-height: 1.5; margin-top: 6px; color: rgba(255, 255, 255, .6); }
.foot-base { border-top: 0; }
.foot-clock { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.foot-clock em { color: rgba(255, 255, 255, .6); margin-inline-end: 14px; }
@media (max-width: 1100px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-credit { grid-column: 1 / -1; max-width: 46ch; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .foot-col { font-size: .94rem; } }
/* the wordmark is now our logo: full width, same soft white-to-rose gradient, cut out of the logo artwork */
.foot-word--logo { padding: clamp(26px, 4vw, 64px) 0 clamp(8px, 1.4vw, 20px); overflow: visible; }
.foot-logo { display: block; width: 100%; aspect-ratio: 2206 / 250; background: linear-gradient(180deg, #ffffff 10%, #e8d3d6 62%, #b07b84 120%);
  -webkit-mask: url('/static/logo-white.png') center / 100% 100% no-repeat; mask: url('/static/logo-white.png') center / 100% 100% no-repeat; transition: transform .8s var(--f-ease), filter .6s ease; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
.foot-word--logo:hover .foot-logo { transform: scale(1.008); }
/* the logo is see-through: a pale glass fill that lets the grunge and colour show through, with a fine bright edge so it stays readable */
.foot-logo { background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 100%); filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .9)) drop-shadow(0 0 14px rgba(255, 255, 255, .12)); mix-blend-mode: screen; }
.foot-word--logo:hover .foot-logo { background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .22) 100%); }

/* the logo is hollow: only a crisp white outline, so the footer shows straight through the letters */
.foot-logo { background: linear-gradient(180deg, #ffffff 0%, #ffe6ea 100%); -webkit-mask: url('/static/logo-outline.png') center / 100% 100% no-repeat; mask: url('/static/logo-outline.png') center / 100% 100% no-repeat; mix-blend-mode: normal; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }
.foot-word--logo:hover .foot-logo { background: linear-gradient(180deg, #ffffff 0%, #ff9aa6 100%); }
/* the logo: solid pure white, just lowered opacity so the footer shows through it */
.foot-logo { background: #ffffff; -webkit-mask: url('/static/logo-white.png') center / 100% 100% no-repeat; mask: url('/static/logo-white.png') center / 100% 100% no-repeat; opacity: .22; filter: none; mix-blend-mode: normal; transition: opacity .5s ease, transform .8s var(--f-ease); }
.foot-word--logo:hover .foot-logo { background: #ffffff; opacity: .4; }
.foot-col p.foot-col-label a.foot-loc { color: inherit; text-decoration: none; }
.foot-col p.foot-col-label a.foot-loc:hover { color: #fff; opacity: 1; transform: none; }