/* Shared navigation, footer and button components */
:root {
  --component-display: var(--font-display, var(--display, "Melodrama", Georgia, serif));
  --component-sans: var(--font-text, var(--sans, "Switzer", Arial, sans-serif));
  --component-ease: cubic-bezier(.16, 1, .3, 1);
  --component-pad: clamp(20px, 3.35vw, 48px);
}

site-navigation,
site-footer {
  display: contents;
}

/* Buttons: override --button-bg, --button-ink and --button-hover-bg per use. */
.ui-button {
  --button-bg: var(--coral-500);
  --button-ink: var(--neutral-900);
  --button-hover-bg: var(--neutral-900);
  --button-hover-ink: var(--butter-50);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  border: 1px solid var(--button-bg);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-family: var(--component-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none; /* labels are written in sentence case */
  text-decoration: none;
  transition: color .4s var(--component-ease), border-color .4s var(--component-ease), transform .2s var(--component-ease);
  will-change: transform;
}

.ui-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--button-hover-bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--component-ease);
}

.ui-button:hover {
  color: var(--button-hover-ink);
  border-color: var(--button-hover-bg);
}

.ui-button:hover::before {
  transform: scaleY(1);
}

.ui-button:active {
  transform: scale(.97);
}

/* Masked arrow swap: wrapper clips two stacked glyphs. On hover the front one
   flies out to the top-right and a duplicate flies in from the bottom-left. */
.ui-arrow-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ui-arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--component-ease);
}

.ui-arrow-swap .ui-arrow {
  position: absolute;
  inset: 0;
}

/* Second glyph waits below-left, ready to slide in. */
.ui-arrow-swap .ui-arrow:last-child {
  transform: translate(-110%, 110%);
}

.ui-button:hover .ui-arrow-swap .ui-arrow:first-child {
  transform: translate(110%, -110%);
}

.ui-button:hover .ui-arrow-swap .ui-arrow:last-child {
  transform: translate(0, 0);
}

/* Each copy wears its own ink, like the label roll: the outgoing arrow
   leaves in the resting ink and the incoming one arrives ALREADY in the
   hover ink — instead of both sharing currentColor, which made the new
   arrow land dark and then fade light once it had settled. */
.ui-button .ui-arrow-swap .ui-arrow:first-child {
  stroke: var(--button-ink);
}

.ui-button .ui-arrow-swap .ui-arrow:last-child {
  stroke: var(--button-hover-ink);
}

/* Shared masked label roll: the ink copy rises out of a one-line mask and
   the hover-ink copy follows it up from below, letter by letter. */
.ui-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
}

.ui-roll-row {
  display: block;
  white-space: pre;
  color: var(--button-ink);
}

.ui-roll-row:last-child {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--button-hover-ink);
}

/* 5ms a letter: just enough offset that the line reads as rolling, not
   so much that it ripples in steps (14ms spread a 15-letter label over
   ~210ms and looked stuttered) */
.ui-roll-char {
  display: inline-block;
  transition: transform .55s var(--component-ease);
  transition-delay: calc(var(--i) * 5ms);
}

.ui-button:hover .ui-roll-char,
.ui-button:focus-visible .ui-roll-char {
  transform: translateY(-100%);
}

.ui-button--outline {
  --button-bg: transparent;
  --button-ink: var(--neutral-900);
  --button-hover-bg: var(--coral-500);
  border-color: currentColor;
}

.ui-button--underline {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--button-ink);
}

.ui-button--underline::before {
  top: auto;
  height: 1px;
  transform: scaleX(.3);
  transform-origin: left;
  background: currentColor;
}

.ui-button--underline:hover::before {
  transform: scaleX(1);
}

/* =========================================================
   Navigation — one bar, two states.
   Expanded: no chrome — logo left, a segmented link control centred,
   one action right. On the home film it reads light-on-film.
   Condensed: the same three parts gather into a floating paper bar
   inset by the page gutter. A paper "thumb" slides between links
   (hover / focus), resting on the current page.
   ========================================================= */
.global-nav {
  --nav-pad: var(--component-pad);
  --nav-ease: var(--component-ease);
  position: fixed;
  z-index: 800;
  inset: 0 0 auto;
  pointer-events: none;
  font-family: var(--component-sans);
}

.global-nav.is-home {
  --nav-pad: 4vw;
}

.global-nav-shell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 92px;
  padding: 0 var(--nav-pad);
  color: var(--neutral-900);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  transition:
    top .65s var(--nav-ease), left .65s var(--nav-ease), right .65s var(--nav-ease),
    height .65s var(--nav-ease), padding .65s var(--nav-ease), border-radius .65s var(--nav-ease),
    border-color .45s, background-color .45s, box-shadow .45s, color .45s,
    transform .55s var(--nav-ease), opacity .4s;
}

/* entrance — the parts drop in, staggered (home waits for the intro) */
.global-nav-shell > * {
  transition: opacity .6s var(--nav-ease), transform .7s var(--nav-ease);
}

.global-nav:not(.is-entered) .global-nav-shell > * {
  opacity: 0;
  transform: translateY(-10px);
}

.global-nav.is-entered .global-nav-links {
  transition-delay: .08s;
}

.global-nav.is-entered .global-nav-end {
  transition-delay: .16s;
}

/* ----- brand ----- */
.global-nav-brand {
  justify-self: start;
  display: grid;
  align-items: center;
  color: inherit;
}

/* Two real logo files stacked in one cell — the ink one for paper, the
   cream one (new-logo-light.svg) for the film — cross-faded by state,
   rather than recolouring one file with a filter. */
.global-nav-brand img {
  grid-area: 1 / 1;
}

.global-nav-logo--light {
  opacity: 0;
}

.global-nav.is-home:not(.is-condensed) .global-nav-logo:not(.global-nav-logo--light),
.global-menu-open .global-nav .global-nav-logo:not(.global-nav-logo--light) {
  opacity: 0;
}

.global-nav.is-home:not(.is-condensed) .global-nav-logo--light,
.global-menu-open .global-nav .global-nav-logo--light {
  opacity: 1;
}

.global-nav-brand img {
  display: block;
  width: 112px;
  height: auto;
  transform-origin: left center;
  transition: transform .65s var(--nav-ease), opacity .45s, width .65s var(--nav-ease);
}

/* over the hero film the logo sits a touch smaller (106px); the width
   eases back to 112px as the nav condenses, so the hand-off never jumps */
@media (min-width: 1101px) {
  .global-nav.is-home:not(.is-condensed) .global-nav-brand img {
    width: 106px;
  }
}

/* ----- segmented links ----- */
.global-nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutral-200) 70%, transparent);
  transition: background-color .45s, border-color .45s;
}

.global-nav-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--neutral-100);
  box-shadow: none;
  opacity: 0;
  transition: transform .5s var(--nav-ease), width .5s var(--nav-ease), opacity .3s, background-color .45s;
  pointer-events: none;
}

.global-nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 17px;
  border-radius: 999px;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color .35s var(--nav-ease);
}

.global-nav-link.is-thumb {
  color: var(--neutral-900);
}

.global-nav-link:focus-visible {
  outline: 2px solid var(--coral-600);
  outline-offset: 2px;
}

/* ----- action ----- */
.ui-button--nav {
  --button-bg: var(--sage-700);
  --button-ink: var(--neutral-100);
  --button-hover-bg: var(--coral-600);
  --button-hover-ink: var(--neutral-100);
  justify-self: end;
  height: 44px;
  padding: 0 18px 0 20px;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  text-transform: none;
  transition: color .4s var(--nav-ease), border-color .45s, background-color .45s, opacity .6s var(--nav-ease), transform .7s var(--nav-ease);
}

.ui-button--nav:focus-visible {
  outline: 2px solid var(--coral-600);
  outline-offset: 3px;
}

/* ----- right end: language switch + action (+ Menu on mobile) ----- */
.global-nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* EN / TR — the link control's grammar in miniature: a soft track, a
   paper thumb under the language on show (js/i18n.js owns the choice) */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutral-200) 70%, transparent);
  transition: background-color .45s, box-shadow .45s;
}

.lang-switch-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--neutral-100);
  transition: transform .5s var(--nav-ease), background-color .45s;
  pointer-events: none;
}

.lang-switch[data-active="tr"] .lang-switch-thumb {
  transform: translateX(100%);
}

.lang-switch-opt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--neutral-700);
  font: 500 12px/1 var(--component-sans);
  letter-spacing: .04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .35s var(--nav-ease);
}

.lang-switch-opt[aria-pressed="true"] {
  color: var(--neutral-900);
}

.lang-switch-opt:focus-visible {
  outline: 2px solid var(--coral-600);
  outline-offset: 2px;
}

/* ----- mobile toggle (hidden on desktop) ----- */
.global-nav-toggle {
  display: none;
}

/* ----- home, over the film ----- */
.global-nav.is-home:not(.is-condensed) .global-nav-shell {
  color: var(--neutral-100);
}

.global-nav.is-home:not(.is-condensed) .global-nav-links {
  border-color: color-mix(in srgb, var(--neutral-100) 18%, transparent);
  background: color-mix(in srgb, var(--neutral-900) 30%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.global-nav.is-home:not(.is-condensed) .global-nav-link {
  color: color-mix(in srgb, var(--neutral-100) 80%, transparent);
}

.global-nav.is-home:not(.is-condensed) .global-nav-link.is-thumb {
  color: var(--neutral-900);
}

.global-nav.is-home:not(.is-condensed) .ui-button--nav {
  --button-bg: var(--neutral-100);
  --button-ink: var(--neutral-900);
}

.global-nav.is-home:not(.is-condensed) .lang-switch {
  background: color-mix(in srgb, var(--neutral-900) 30%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.global-nav.is-home:not(.is-condensed) .lang-switch-opt {
  color: color-mix(in srgb, var(--neutral-100) 80%, transparent);
}

.global-nav.is-home:not(.is-condensed) .lang-switch-opt[aria-pressed="true"] {
  color: var(--neutral-900);
}

/* ----- condensed: the floating paper bar ----- */
/* full-width paper band, attached to the top edge — a hairline foot sets it
   off the page */
.global-nav.is-condensed .global-nav-shell {
  height: 68px;
  border-color: transparent transparent var(--line-soft);
  background: color-mix(in srgb, var(--neutral-100) 90%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}

.global-nav.is-condensed .global-nav-brand img {
  transform: scale(.82);
}

.global-nav.is-condensed .global-nav-links {
  border-color: transparent;
}

/* hide on scroll-down, return on scroll-up */
.global-nav.is-pill-hidden .global-nav-shell {
  transform: translateY(calc(-100% - 16px));
  pointer-events: none;
}

@media (min-width: 901px) and (max-width: 1100px) {
  /* with the language switch the right end is ~250px wide: centre the
     links in the space between the ends (not the viewport) so they can
     never run into it */
  .global-nav-shell {
    grid-template-columns: auto 1fr auto;
    column-gap: 20px;
  }

  .global-nav-links {
    justify-self: center;
  }

  .global-nav-link {
    padding-inline: 12px;
  }

  .global-nav-brand img {
    width: 96px;
  }
}

/* ===========================================================
   Mobile — logo + Menu; the overlay menu holds the links
   =========================================================== */
.global-mobile-menu {
  display: none;
}

@media (max-width: 900px) {
  .global-nav,
  .global-nav.is-home {
    --nav-pad: 16px;
  }

  .global-nav-shell {
    grid-template-columns: 1fr auto;
    height: 76px;
    padding-inline: 24px;
  }

  .global-nav-links,
  .ui-button--nav {
    display: none;
  }

  .global-nav-brand img {
    width: 92px;
  }

  .global-nav.is-condensed .global-nav-shell {
    height: calc(62px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .global-nav.is-condensed .global-nav-brand img {
    transform: scale(.9);
  }

  .global-nav-toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto 18px;
    align-items: center;
    column-gap: 10px;
    height: 42px;
    padding: 0 14px 0 16px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--neutral-200) 70%, transparent);
    color: inherit;
    font: 500 13px/1 var(--component-sans);
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .45s, border-color .45s, color .45s, opacity .6s var(--nav-ease), transform .7s var(--nav-ease);
  }

  .global-nav-toggle i {
    grid-column: 2;
    grid-row: 1;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-3.5px);
    transition: transform .35s var(--nav-ease);
  }

  .global-nav-toggle i:last-child {
    transform: translateY(3.5px);
  }

  .global-nav.is-home:not(.is-condensed) .global-nav-toggle {
    border-color: color-mix(in srgb, var(--neutral-100) 22%, transparent);
    background: color-mix(in srgb, var(--neutral-900) 30%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .global-menu-open .global-nav-toggle i {
    transform: rotate(45deg);
  }

  .global-menu-open .global-nav-toggle i:last-child {
    transform: rotate(-45deg);
  }

  /* over the open (green) menu the bar sheds its chrome and goes light */
  .global-menu-open .global-nav .global-nav-shell {
    color: var(--neutral-100);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }

  .global-menu-open .global-nav .global-nav-toggle {
    border-color: color-mix(in srgb, var(--neutral-100) 30%, transparent);
    background: transparent;
  }

  /* the switch sits beside Menu, matched to its 42px height */
  .global-nav-end {
    gap: 8px;
  }

  .lang-switch-opt {
    width: 36px;
    height: 34px;
  }

  .global-menu-open .global-nav .lang-switch {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral-100) 30%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .global-menu-open .global-nav .lang-switch-opt {
    color: color-mix(in srgb, var(--neutral-100) 80%, transparent);
  }

  .global-menu-open .global-nav .lang-switch-opt[aria-pressed="true"] {
    color: var(--neutral-900);
  }

  /* Menu entrance — the green sheet wipes down from the bar, then the
     contents follow in reading order: kicker, each link rising out of its
     own mask (hairline drawing left → right beneath it, arrow sliding in
     the way the button arrows do), the action last. Closing is quicker
     and unstaggered: the contents drop away first, then the sheet lifts.
     The sheet sits OUTSIDE .global-nav, so it names its own eases (it
     can't inherit --nav-ease; undefined, every transition here was
     dropped and the menu snapped open). */
  .global-mobile-menu {
    --menu-out: cubic-bezier(.16, 1, .3, 1);
    --menu-in: cubic-bezier(.7, 0, .84, 0);
    --menu-step: .07s;
    position: fixed;
    z-index: 790;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    padding: 110px 24px 42px;
    background: var(--sage-700);
    color: var(--neutral-100);
    clip-path: inset(0 0 100%);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path .55s var(--menu-in) .14s, visibility 0s .69s;
  }

  .global-menu-open {
    overflow: hidden;
  }

  .global-menu-open .global-mobile-menu {
    clip-path: inset(0);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path .8s var(--menu-out), visibility 0s;
  }

  .global-mobile-kicker {
    color: var(--sage-200);
    font: 500 11px/1 var(--component-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s, transform .3s var(--menu-in);
  }

  .global-menu-open .global-mobile-kicker {
    opacity: 1;
    transform: none;
    transition: opacity .6s .22s, transform .9s var(--menu-out) .22s;
  }

  .global-mobile-menu nav {
    display: flex;
    flex-direction: column;
  }

  .global-mobile-menu nav a {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    color: inherit;
    font: 500 clamp(36px, 11vw, 58px)/calc(1 * var(--display-lh, 1)) var(--component-display);
    text-decoration: none;
    letter-spacing: var(--display-fit, 0em);
  }

  /* the row's hairline, drawn rather than shown */
  .global-mobile-menu nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, var(--neutral-100) 22%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--menu-in);
  }

  /* the mask is padded past the line box so accents and descenders
     (İ, ş, y) aren't sliced while the word travels */
  .gm-mask {
    display: block;
    overflow: hidden;
    padding: .16em 0 .18em;
    margin: -.16em 0 -.18em;
  }

  .gm-label {
    display: block;
    /* parked well past the mask's padded bottom: İ dots and accents
       ride above the line box, so 118% left their tips peeking */
    transform: translateY(calc(100% + .7em));
    transition: transform .35s var(--menu-in);
  }

  .global-mobile-menu nav a[aria-current="page"] {
    color: var(--coral-300);
  }

  .global-mobile-menu nav a .ui-arrow-swap,
  .global-mobile-menu nav a .ui-arrow {
    width: 24px;
    height: 24px;
  }

  /* the arrow arrives the way the button arrows swap: in from the lower left */
  .global-mobile-menu nav a .ui-arrow-swap .ui-arrow:first-child {
    transform: translate(-110%, 110%);
    transition: transform .3s var(--menu-in);
  }

  .global-menu-open .global-mobile-menu nav a::after {
    transform: scaleX(1);
    transition: transform 1.1s var(--menu-out) calc(.24s + var(--i, 0) * var(--menu-step));
  }

  .global-menu-open .gm-label {
    transform: none;
    transition: transform 1s var(--menu-out) calc(.28s + var(--i, 0) * var(--menu-step));
  }

  .global-menu-open .global-mobile-menu nav a .ui-arrow-swap .ui-arrow:first-child {
    transform: none;
    transition: transform .8s var(--menu-out) calc(.5s + var(--i, 0) * var(--menu-step));
  }

  .global-mobile-menu > .ui-button {
    align-self: flex-start;
    text-transform: none;
    --button-bg: var(--neutral-100);
    --button-ink: var(--neutral-900);
    --button-hover-bg: var(--coral-600);
    --button-hover-ink: var(--neutral-100);
    opacity: 0;
    transform: translateY(18px);
    transition: color .4s var(--menu-out), opacity .25s, transform .3s var(--menu-in);
  }

  .global-menu-open .global-mobile-menu > .ui-button {
    opacity: 1;
    transform: none;
    transition: color .4s var(--menu-out), opacity .6s .62s, transform 1s var(--menu-out) .62s;
  }
}

/* Homepage footer component, shared by every page. Fills the viewport:
   the CTA block takes the slack and centres itself, the contact rail and
   the bottom bar settle onto the fold. */
.site-footer {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 0 24px;
  overflow: hidden;
  background: var(--neutral-100);
  color: var(--neutral-900);
  font-family: var(--component-sans);
}

.footer-cta-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 32px var(--component-pad) 56px;
  text-align: center;
}

.footer-eyebrow {
  display: none;
  margin-bottom: 19px;
  color: var(--neutral-700);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.footer-bigwrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.footer-big {
  margin: 0;
  color: var(--neutral-900);
  font: 700 clamp(56px, 17vw, 256px)/.85 "Melodrama", Georgia, serif;
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-big .reveal-line {
  display: block;
  overflow: hidden;
  padding: .12em .06em;
  margin: -.12em -.06em;
}

.footer-big .reveal-line>span {
  display: inline-block;
}

/* The overlay centres on the wrap box; measured against the caps' own top
   and baseline, the button's optical middle is a hair below that. The
   font-size must match .footer-big or the em-based nudge resolves against
   the footer's body size and collapses to ~1px. */
.footer-big-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 clamp(56px, 17vw, 256px)/.85 "Melodrama", Georgia, serif;
  transform: none;
}

/* the nudge is the overlay's job — don't let it scale the button's own text */
.footer-big-overlay .footer-contact-btn {
  font: 600 clamp(14px, 1.3vw, 20px)/1 var(--component-sans);
}

.footer-contact-btn {
  --button-bg: var(--sage-600);
  --button-ink: var(--butter-50);
  --button-hover-bg: var(--coral-600);
  --button-hover-ink: var(--butter-50);
  font-size: clamp(14px, 1.3vw, 20px);
  text-transform: none;
}

/* Bigger, bolder arrow to match the footer CTA's scale. */
.footer-contact-btn .ui-arrow-swap {
  width: 24px;
  height: 24px;
}

.footer-contact-btn .ui-arrow {
  width: 24px;
  height: 24px;
  stroke-width: 1.9;
}

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Footer text links: same vertical text swap as the condensed nav links —
   the resting label rolls up and out while an accent duplicate rolls in. */
.footer-nav a {
  position: relative;
  overflow: hidden;
  color: transparent; /* keep the real text for sizing, but hide it */
  text-decoration: none;
}

.footer-nav a::before,
.footer-nav a::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transition: transform .5s var(--component-ease);
  will-change: transform;
}

/* Outgoing copy — what you see at rest. */
.footer-nav a::before {
  color: var(--neutral-900);
}

/* Incoming accent copy waits exactly one line below. */
.footer-nav a::after {
  color: var(--sage-700);
  transform: translateY(100%);
}

.footer-nav a:hover::before {
  transform: translateY(-100%);
}

.footer-nav a:hover::after {
  transform: translateY(0);
}

.fn-sep,
.fe-cross {
  color: var(--neutral-400);
}

.footer-top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--color-line-soft);
}

.footer-top::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: var(--color-line-soft);
}

.footer-cta {
  max-width: none;
  margin: 0;
  padding: 0 40px 0 var(--component-pad);
  color: var(--neutral-900);
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.4;
}

.footer-email {
  display: block;
  height: 100%;
  padding-left: 42px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.footer-email-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: inherit;
  font: 700 clamp(30px, 4.6vw, 67px)/calc(1.1 * var(--display-lh, 1)) var(--component-display);
  letter-spacing: calc(-.02em + var(--display-fit, 0em));
  animation: footer-marquee 16s linear infinite;
}

.fe-item {
  transition: opacity .3s;
}

.fe-item:hover {
  opacity: .55;
}

.fe-cross {
  margin: 0 22px;
  font-size: .5em;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 32px var(--component-pad) 0;
  border-top: 1px solid var(--color-line-soft);
}

.footer-mark {
  justify-self: start;
  width: 92px;
  filter: none;
}

.footer-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
}

.footer-pill {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--neutral-900);
  border-radius: 999px;
  color: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: color .4s var(--component-ease), border-color .4s var(--component-ease);
}

/* Black fill masks in from the bottom, matching .ui-button. */
.footer-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--neutral-900);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--component-ease);
}

.footer-pill:hover {
  color: var(--butter-50);
  border-color: var(--neutral-900);
}

.footer-pill:hover::before {
  transform: scaleY(1);
}

.footer-credit {
  justify-self: end;
  color: var(--neutral-700);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@keyframes footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  /* On mobile the footer sizes to its content — the full-viewport min-height
     is a desktop framing device and only leaves dead space on a phone. */
  .site-footer {
    min-height: 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-top::after {
    display: none;
  }

  .footer-email {
    width: 100%;
    height: auto;
    margin-top: 26px;
    padding: 26px 0 0;
    border-top: 1px solid var(--color-line-soft);
  }

  .footer-bigwrap {
    flex-direction: column;
    align-items: center;
  }

  /* Equal 32px gap above (button → links) and below (links → divider line);
     more air between the button and the section above it. */
  .footer-cta-block {
    padding-top: 72px;
    padding-bottom: 32px;
  }

  /* the four links on one line: tighter tracking and gaps */
  .footer-nav {
    flex-wrap: nowrap;
    gap: 9px;
    margin-top: 32px;
    font-size: clamp(11px, 3.3vw, 15px);
    letter-spacing: .03em;
    white-space: nowrap;
  }

  .footer-nav a {
    flex-shrink: 0;
  }

  .footer-big {
    display: none;
  }

  .footer-big-overlay {
    position: relative;
    transform: none;
  }

  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 22px;
  }

  .footer-socials {
    grid-column: 1 / -1;
    justify-content: center;
    order: -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .global-nav-shell,
  .global-nav-shell > *,
  .global-nav-brand img,
  .global-nav-thumb,
  .global-nav-link,
  .ui-button--nav,
  .global-nav-toggle,
  .global-mobile-menu,
  .global-mobile-menu nav a,
  .global-mobile-menu nav a::after,
  .global-mobile-menu .ui-arrow,
  .global-mobile-menu > .ui-button,
  .global-mobile-kicker,
  .gm-label {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .footer-email-track {
    animation: none;
  }

  .ui-button::before {
    transition: none;
  }

  .ui-roll-char {
    transition: none;
  }
}