.site-footer-premium.footer-legal-v2 {
  --footer-edge-space: clamp(30px, 3vw, 44px);
  --footer-gutter: clamp(28px, 12vw, 180px);
  /* "Stay connected." sits between the footer's top rule and the rule that
     opens the contact list, and it is meant to sit centred between them. One
     token feeds both gaps so they cannot drift apart again: the inner
     padding above the heading and the contact list's margin below it. The
     value is the average of the two clamps they replaced, so the rules stay
     where they were and only the heading moves. */
  --closing-air: clamp(62px, 6.5vw, 92px);
  /* Side by side, each link has a rule above it and shares the rule below the
     list, and the text is meant to sit centred between the two. The same
     token sets the cell's top padding and the list's bottom padding. It is
     the average of the 22px and clamp(46px, 5vw, 68px) it replaced, so the
     rules stay put and only the text moves. No ink correction is needed
     here: the label's ink starts about 3px inside the top edge and the
     caption's ink ends about 3px inside the bottom edge. */
  --contact-air: clamp(34px, 11px + 2.5vw, 45px);
  width: 100%;
  min-height: auto !important;
  height: auto;
  display: block;
  padding: 0;
  color: var(--espresso, #231a10);
  background: var(--warm-ivory, #f3ede0);
  border-top: 1px solid rgba(60, 45, 35, 0.1);
  scroll-snap-align: start;
  text-align: left;
}

.footer-legal-v2 .legal-footer__inner {
  width: min(100%, 1540px);
  margin-inline: auto;
  /* 3px less than the gap below: the heading's 0.92 line-height leaves its
     cap tops about 0.04em inside the top of its box, while its baseline and
     descenders straddle the bottom of the box, so the ink reads centred when
     the box sits 3px high. Measured from 440px to 1920px the two gaps then
     agree within 2px, and within 4px on a 375px phone. */
  padding: calc(var(--closing-air) - 3px) var(--footer-gutter) 0;
}

.footer-legal-v2 .legal-footer__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Centring needs the box as well as the text. This header is capped at 980px
   and its h2 at 940px inside a content area of roughly 1094px at desktop, and
   neither carried an inline auto margin, so both boxes hugged the left edge.
   text-align on its own would have centred the words inside a box that was
   itself off-centre, which still reads as left-aligned.

   The auto margins are unconditional because they are provably inert on a
   phone: both caps exceed the 556px content width there, so the boxes are
   already full width and auto resolves to zero. Only the text-align is gated,
   in the block further down. */
.footer-legal-v2 .legal-footer__closing {
  max-width: 980px;
  margin-bottom: 0;
  margin-inline: auto;
}

.footer-legal-v2 .legal-footer__eyebrow,
.footer-legal-v2 .legal-footer__section-label {
  color: var(--bronze, #8c6240);
  font: var(--weight-label) var(--text-label) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer-legal-v2 .legal-footer__eyebrow {
  margin: 0 0 24px;
}

.footer-legal-v2 .legal-footer__closing h2 {
  max-width: 940px;
  margin: 0 auto;
  color: var(--espresso, #231a10);
  font: var(--weight-heading) var(--text-display-lg) / 0.92 var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.footer-legal-v2 .legal-footer__closing h2 span {
  color: var(--bronze, #8c6240);
  font-style: italic;
  white-space: nowrap;
}

/* Centred from small tablets upward, which covers desktop and both iPad
   orientations, the narrowest of those being 768px. Phones deliberately keep
   their existing ranged-left setting. This is gated rather than global because
   the heading never wraps: measured at 600px it is a single 463px line inside
   a 556px column, so it has 93px of slack and centring would visibly move it. */
@media (min-width: 721px) {
  .footer-legal-v2 .legal-footer__closing {
    text-align: center;
  }
}

.footer-legal-v2 .legal-footer__contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: var(--closing-air);
  padding-bottom: var(--contact-air);
  border-bottom: 1px solid rgba(60, 45, 35, 0.14);
}

/* The icon, the text and the arrow centre as ONE cluster rather than the text
   centring on its own. With the previous 18px / 1fr / 18px tracks the middle
   column spanned the full width, so centring only the text would have left the
   envelope icon stranded at the far left with the label floating away from it.
   Content-sized tracks plus justify-content keep the icon against the label and
   the arrow against the copy, and centre the whole group under the divider.
   The rule stays on .footer-legal-v2 for specificity: this file is pulled in by
   an @import at the top of public-refinements.css, so it is the FIRST
   stylesheet on every page and loses any tie. */
.footer-legal-v2 .legal-footer__contact {
  /* The value's size is held in a variable so the arrow's vertical offset can
     be derived from it below. The 720px block re-points this one property
     instead of restating the font rule, which keeps the two in step. */
  --contact-value-size: var(--text-heading-4);
  --contact-icon-size: 17px;
  min-width: 0;
  display: grid;
  /* Two tracks now, text and arrow. The icon used to be a third top-level
     track, which is what made the gap to each word unequal: the icon sat at
     the track's left edge while the label centred inside it, so a short word
     like Email drifted 94px away while Instagram sat at 52px. The icon now
     lives beside its label inside the content, so the two move as one. */
  grid-template-columns: minmax(0, auto) auto;
  justify-content: center;
  align-items: start;
  gap: 8px;
  padding: var(--contact-air) 4px 0;
  color: var(--espresso, #231a10);
  border-top: 1px solid rgba(60, 45, 35, 0.16);
  text-align: center;
  text-decoration: none;
  transition: color 320ms ease;
}

/* Icon and label as one centred unit, so the distance between them is this one
   gap on all three rather than a by-product of how wide each word happens to
   be. Residual difference is 0.35px, because the envelope is drawn on an 18
   unit rect and the other two on 17 within the same 24 unit viewBox, which is
   far below what sub-pixel rendering can show. */
.footer-legal-v2 .legal-footer__contact-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer-legal-v2 .legal-footer__contact-icon {
  width: var(--contact-icon-size, 17px);
  height: var(--contact-icon-size, 17px);
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--bronze, #8c6240);
}

.footer-legal-v2 .legal-footer__contact-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.footer-legal-v2 .legal-footer__contact-icon .legal-footer__contact-dot {
  fill: currentColor;
  stroke: none;
}

/* The label, the address and the caption are grid items, so they stretch to the
   track width by default and read as left-aligned. justify-items centres each
   one; text-align above handles wrapped lines within them. */
.footer-legal-v2 .legal-footer__contact-content {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.footer-legal-v2 .legal-footer__contact-label {
  color: var(--bronze, #8c6240);
  font: var(--weight-label) var(--text-label) / 1.2 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer-legal-v2 .legal-footer__contact strong {
  overflow-wrap: anywhere;
  font: var(--weight-heading) var(--contact-value-size) / var(--leading-heading-sm) var(--font-display);
}

.footer-legal-v2 .legal-footer__contact-copy {
  color: var(--text-secondary);
  font: var(--weight-body) var(--text-caption) / var(--leading-caption) var(--font-body);
}

/* The arrow sits level with the value line, e.g. hello@zuvanicollective.com,
   rather than up beside the EMAIL label. The offset is derived, not guessed:
   clear the label's own line box, then the content grid's 6px row gap, then
   centre the 18px arrow against the FIRST value line.

   It targets the first line deliberately. At 1100px the address wraps to two
   lines, measured 39.75px tall against a 19.87px line height, so centring on
   the value block as a whole would drop the arrow below the address whenever
   it wraps. Every input is a token, so this tracks the type scale on its own
   across breakpoints instead of needing a magic number per width. */
.footer-legal-v2 .legal-footer__contact-arrow {
  justify-self: end;
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: calc(
    max(var(--contact-icon-size), var(--text-label) * 1.2)
    + 6px
    + (var(--contact-value-size) * var(--leading-heading-sm) - 18px) / 2
  );
  color: var(--bronze, #8c6240);
  transition: transform 350ms var(--ease-out);
}

.footer-legal-v2 .legal-footer__contact-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.footer-legal-v2 .legal-footer__contact:hover,
.footer-legal-v2 .legal-footer__contact:focus-visible {
  color: var(--bronze, #8c6240);
}

.footer-legal-v2 .legal-footer__contact:hover .legal-footer__contact-arrow,
.footer-legal-v2 .legal-footer__contact:focus-visible .legal-footer__contact-arrow {
  transform: translateX(4px);
}

.footer-legal-v2 .legal-footer__identity {
  display: grid;
  /* Two items: the brand lockup and the Fora affiliation. The Financial
     protection column was removed on 16 September, so these are equal halves
     rather than the old narrow/wide split that made room for three. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: clamp(40px, 5vw, 96px);
  padding: clamp(50px, 5vw, 72px) 0;
  /* Both columns carry a logo and then a line of copy, but their internals
     differ: Zuvani stacks a sunmark over a wordmark, Fora sets a heading over
     a horizontal lockup. Giving each the same two rows — a fixed-height logo
     band with its contents centred, then the copy — is what puts the two
     logos on one line and starts both captions together, at any width. */
  --footer-lockup-height: clamp(96px, 8vw, 124px);
}

.footer-legal-v2 .legal-footer__brand-link,
.footer-legal-v2 .legal-footer__affiliation {
  grid-template-rows: var(--footer-lockup-height) auto;
}

.footer-legal-v2 .legal-footer__identity-lockup {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
}

.footer-legal-v2 .legal-footer__brand-link {
  width: min(100%, 360px);
  display: grid;
  justify-self: center;
  justify-items: center;
  gap: 10px;
  color: var(--espresso, #231a10);
  text-align: center;
  text-decoration: none;
}

.footer-legal-v2 .legal-footer__zuvani-mark {
  position: relative;
  width: clamp(78px, 6.5vw, 108px);
  aspect-ratio: 2.05 / 1;
  display: block;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at center, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 78% at center, #000 56%, transparent 100%);
}

.footer-legal-v2 .legal-footer__zuvani-mark img {
  position: absolute;
  top: 74%;
  left: 50%;
  width: 310%;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.footer-legal-v2 .legal-footer__zuvani-name {
  width: min(100%, 350px);
  display: grid;
  justify-items: center;
  gap: 9px;
  color: var(--espresso, #231a10);
  text-align: center;
}

.footer-legal-v2 .legal-footer__zuvani-word {
  font: var(--weight-heading) clamp(2.35rem, 3vw, 3.35rem) / 0.8 var(--font-display);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-legal-v2 .legal-footer__collective-word {
  color: var(--bronze, #8c6240);
  font: var(--weight-label) var(--text-caption) / 1 var(--font-body);
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
}

.footer-legal-v2 .legal-footer__brand-line,
.footer-legal-v2 .legal-footer__affiliation-copy,
.footer-legal-v2 .legal-footer__protection-copy {
  max-width: 46ch;
  color: var(--text-secondary);
  font: var(--weight-body) var(--text-body-sm) / var(--leading-body-sm) var(--font-body);
}

.footer-legal-v2 .legal-footer__brand-line,
.footer-legal-v2 .legal-footer__affiliation-copy {
  margin-top: 17px;
  text-align: center;
}

/* One column, centred. This held two columns until the Financial protection
   column was removed on 16 September; the leftover second track left
   Affiliations sitting in the first half of the row, 167px left of centre at
   820px, while the Zuvani lockup above it was centred. Above 1080px this grid
   becomes display: contents and the identity grid places the column instead,
   so only the stacked range between 721px and 1080px changes. Spacing is
   untouched: the distance to the lockup above comes from the identity grid. */
.footer-legal-v2 .legal-footer__credentials {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(44px, 5vw, 78px);
}

.footer-legal-v2 .legal-footer__section-label {
  margin: 0 0 22px;
}

/* Affiliations centres under its own heading. This is the same treatment the
   720px block already applies, lifted to every width so the column reads the
   same on a desktop as it does on a phone. The Fora lockup and the profile
   link are both width: fit-content, so justify-items is what centres them;
   text-align carries the copy beneath. Financial protection is deliberately
   left alone here, since it was not part of the request. */
.footer-legal-v2 .legal-footer__affiliation {
  /* Both of these feed the lockup's offset below as well as the icon's own
     size, so the two can never drift apart. */
  --fora-icon-size: clamp(42px, 4vw, 56px);
  --fora-lockup-gap: 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.footer-legal-v2 .legal-footer__fora-profile {
  width: fit-content;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* margin-inline is what actually centres the logo. justify-items on the
   affiliation grid centres the PROFILE LINK, not this lockup: the link is
   width: fit-content, so it sizes to its widest child, the 46ch copy
   paragraph, and this fit-content lockup then sits at that block's left edge.
   Measured without this, the lockup sat 44px left of centre at 1440px and 60px
   at 820px while every other element was within 0.01px. The 720px block below
   already pairs its centring with the same margin-inline: auto. */
/* The FORA TRAVEL wordmark sits directly under the Affiliations heading, with
   the icon hanging off to its left.

   Centring the lockup as a whole is what pushed the wordmark off: the box
   includes the icon, so the wordmark lands right of centre by exactly half the
   icon plus its gap. Measured at +35.00 against half(56+14), +29.01 against
   half(44+14) and +27.99 against half(42+14), so the correction is derived
   rather than eyeballed, and it follows the icon's clamp across breakpoints.

   This replaces a hand-tuned clamp(-36px, -8vw, -28px) that used to live in
   the 720px block. That value resolved to -36px where the geometry wanted
   -28px, leaving the wordmark 8px too far left on phones. */
.footer-legal-v2 .legal-footer__fora-lockup {
  position: relative;
  left: calc(-0.5 * (var(--fora-icon-size, 56px) + var(--fora-lockup-gap, 14px)));
  width: fit-content;
  display: flex;
  align-items: center;
  gap: var(--fora-lockup-gap, 14px);
  margin-inline: auto;
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.footer-legal-v2 .legal-footer__fora-profile:hover .legal-footer__fora-lockup {
  opacity: 0.72;
  transform: translateY(-2px);
}

.footer-legal-v2 .legal-footer__fora-icon {
  width: var(--fora-icon-size, clamp(42px, 4vw, 56px));
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.footer-legal-v2 .legal-footer__fora-wordmark {
  width: fit-content;
  display: grid;
  gap: 3px;
  color: #111;
  text-align: center;
  text-transform: uppercase;
}

.footer-legal-v2 .legal-footer__fora-name {
  font: var(--weight-heading) clamp(2.2rem, 3.1vw, 3.2rem) / 0.78 var(--font-display);
  letter-spacing: 0.14em;
}

.footer-legal-v2 .legal-footer__fora-travel {
  font: var(--weight-label) var(--text-caption)/1 var(--font-body);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

/* The affiliation caption keeps the 17px offset it now shares with the brand
   line, so both captions sit on one baseline. */
.footer-legal-v2 .legal-footer__protection-copy {
  margin: 0;
}

.footer-legal-v2 .legal-footer__protection {
  min-width: 0;
  padding-left: clamp(34px, 4vw, 62px);
  border-left: 1px solid rgba(60, 45, 35, 0.12);
}

/* The lower row adopts the contacts row's grid, so the columns line up:
   Zuvani under Email, Affiliations under Instagram, Financial protection
   under LinkedIn.

   The two rows were built on unrelated grids. Contacts is three equal tracks;
   this row was 0.7fr + 1.55fr with the credentials wrapper splitting that
   second track in two. Only the row's outer edges coincided, which is why the
   brand's left edge matched Email exactly while everything inside drifted.
   Measured at 1440px: Affiliations sat 35.83px right of Instagram and
   Financial protection 25.11px right of LinkedIn.

   display: contents dissolves the wrapper so its two sections become direct
   items of this grid and fall into tracks 2 and 3. The gap is the contacts
   gap verbatim, or the tracks would compute to different widths.

   Scoped to this breakpoint on purpose: below it the wrapper has to stay a
   real box, because the row collapses to one column at 1080px and the two
   credentials sit side by side until 720px. */
@media (min-width: 1081px) {
  .footer-legal-v2 .legal-footer__credentials {
    display: contents;
  }

  /* The inset and the rule would push this column's content clear of the
     track it is meant to sit under, so the gutter separates the two instead.
     Centred to match, since the column above it is centred: a left-aligned
     column would not read as sitting under LinkedIn even once the tracks
     agree. */
  .footer-legal-v2 .legal-footer__protection {
    display: grid;
    justify-items: center;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
}

.footer-legal-v2 .legal-footer__atol {
  display: inline-block;
  margin-top: 18px;
  color: var(--espresso, #231a10);
  font: var(--weight-label) var(--text-caption)/var(--leading-label) var(--font-body);
  letter-spacing: 0.13em;
}

.footer-legal-v2 .legal-footer__legal {
  border-top: 1px solid rgba(60, 45, 35, 0.12);
}

.footer-legal-v2 .legal-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px 18px;
  padding: clamp(20px, 2.2vw, 30px) 0;
}

.footer-legal-v2 .legal-footer__links a {
  color: var(--text-secondary);
  font: var(--weight-body) var(--text-legal) / 1.4 var(--font-body);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 300ms ease;
}

.footer-legal-v2 .legal-footer__links a + a::before {
  margin-right: 18px;
  color: rgba(35, 26, 16, 0.28);
  content: "·";
}

.footer-legal-v2 .legal-footer__links a:hover,
.footer-legal-v2 .legal-footer__links a:focus-visible {
  color: var(--bronze, #8c6240);
}

.footer-legal-v2 .legal-footer__company {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-inline: calc(-1 * var(--footer-gutter));
  padding: var(--footer-edge-space) var(--footer-gutter);
  color: var(--text-secondary);
  background: rgba(35, 26, 16, 0.035);
  text-align: center;
}

.footer-legal-v2 .legal-footer__company p {
  max-width: 1080px;
  margin: 0;
  font-size: var(--text-legal);
  line-height: var(--leading-legal);
  letter-spacing: var(--tracking-legal);
}

.footer-legal-v2 .legal-footer__copyright {
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
}

.footer-legal-v2 a:focus-visible {
  outline: 2px solid var(--bronze, #8c6240);
  outline-offset: 6px;
}

.footer-motion-ready .legal-footer__reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 240ms var(--ease-out) var(--footer-reveal-delay, 0ms),
    transform 240ms var(--ease-out) var(--footer-reveal-delay, 0ms);
}

.footer-motion-ready .legal-footer__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .footer-legal-v2 .legal-footer__identity {
    grid-template-columns: minmax(0, 1fr);
    gap: 58px;
  }

  /* Stacked, there is no second column to align against, so the logo band
     goes back to its content height rather than reserving a fixed one. */
  .footer-legal-v2 .legal-footer__brand-link,
  .footer-legal-v2 .legal-footer__affiliation {
    grid-template-rows: auto auto;
  }

  .footer-legal-v2 .legal-footer__brand-link {
    width: min(100%, 420px);
  }
}

@media (max-width: 900px) {
  /* Stacked layouts had 62px above the heading and 36px below it; 51px each
     keeps the same overall height and centres the heading between the rules. */
  .site-footer-premium.footer-legal-v2 {
    --closing-air: 51px;
  }

  /* Once the links stack, each carries its own bottom padding, and that is
     what sets the distance from a caption to the rule beneath it. The
     container's bottom padding would add to it on the last link only, which
     measured 55px under LinkedIn against 24px under the other two on a
     phone, and 73px against 26px on a tablet. Zero it, so the bottom rule
     sits at the same distance as every rule between the links. */
  .footer-legal-v2 .legal-footer__contacts {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
  }

  .footer-legal-v2 .legal-footer__contact {
    padding: 24px 4px 24px;
  }
}

@media (max-width: 720px) {
  .site-footer-premium.footer-legal-v2 {
    --footer-edge-space: 30px;
    --footer-gutter: 22px;
    min-height: auto !important;
    scroll-snap-align: none;
  }

  .footer-legal-v2 .legal-footer__closing {
    margin-bottom: 0;
  }

  .footer-legal-v2 .legal-footer__closing h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .footer-legal-v2 .legal-footer__closing h2 span {
    white-space: normal;
  }

  /* This block used to restate minmax(0, 1fr) for the middle track, which
     silently undid the centring above: a 1fr track fills the row, so the icon
     and arrow were pinned to opposite edges even though the cluster's midpoint
     still measured dead centre. Content-sized tracks here too, so a phone gets
     the same centred cluster a desktop does. The value size moves to the
     variable so the derived arrow offset above stays correct at this width. */
  .footer-legal-v2 .legal-footer__contact {
    --contact-value-size: clamp(1.18rem, 6vw, 1.45rem);
    grid-template-columns: minmax(0, auto) auto;
    gap: 8px;
    padding: 22px 0 22px;
  }

  .footer-legal-v2 .legal-footer__credentials {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 34px;
    text-align: center;
  }

  .footer-legal-v2 .legal-footer__affiliation,
  .footer-legal-v2 .legal-footer__protection {
    width: 100%;
    display: grid;
    justify-items: center;
  }

  .footer-legal-v2 .legal-footer__fora-profile,
  .footer-legal-v2 .legal-footer__fora-lockup,
  .footer-legal-v2 .legal-footer__affiliation-copy,
  .footer-legal-v2 .legal-footer__protection-copy {
    margin-inline: auto;
  }

  /* The lockup's leftward offset is derived in the base rule now and follows
     the icon's clamp on its own, so the hand-tuned value that used to sit here
     is gone. It resolved to -36px at this width where the geometry wants -28px,
     which is why the wordmark read 8px left of the heading on a phone. */

  .footer-legal-v2 .legal-footer__identity {
    gap: 54px;
    padding: 44px 0;
  }

  .footer-legal-v2 .legal-footer__brand-link {
    justify-self: center;
  }

  .footer-legal-v2 .legal-footer__brand-link,
  .footer-legal-v2 .legal-footer__zuvani-name {
    justify-items: center;
    text-align: center;
  }

  .footer-legal-v2 .legal-footer__zuvani-word {
    font-size: clamp(2.7rem, 14vw, 3.5rem);
  }

  .footer-legal-v2 .legal-footer__protection {
    padding: 34px 0 0;
    border-top: 1px solid rgba(60, 45, 35, 0.12);
    border-left: 0;
  }

  .footer-legal-v2 .legal-footer__links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 4px;
    padding: 18px 0;
  }

  .footer-legal-v2 .legal-footer__links a {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    font-size: var(--text-legal);
  }

  .footer-legal-v2 .legal-footer__links a::before {
    flex: 0 0 auto;
    margin-right: 10px;
    color: rgba(35, 26, 16, 0.38);
    content: "·";
  }

  .footer-legal-v2 .legal-footer__links a + a::before {
    margin-right: 10px;
    content: "·";
  }

  .footer-legal-v2 .legal-footer__company {
    justify-items: start;
    margin-inline: calc(-1 * var(--footer-gutter));
    padding: 26px var(--footer-gutter) var(--footer-edge-space);
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-legal-v2 .legal-footer__contact,
  .footer-legal-v2 .legal-footer__contact-arrow,
  .footer-legal-v2 .legal-footer__links a,
  .footer-motion-ready .legal-footer__reveal {
    transition: none;
  }
  /* The rise is gone; the block is never hidden. public-refinements.js still
     marks it as it arrives, and public-refinements.css cross-fades it. */
  .footer-motion-ready .legal-footer__reveal {
    opacity: 1;
    transform: none;
  }
}