/*
 * Generated by scripts/port-css.mjs from the CSS Modules that preceded
 * this theme. Edit the rules here — the generator is kept for reference,
 * not re-run against a moved target.
 */

/* ─── components/sections/Footer.module.css ─────────────────────────────────────── */
.us-ft-footer { position: relative; background: var(--white); padding-top: clamp(4rem, 9vh, 7rem); overflow: hidden; }

.us-ft-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.us-ft-store {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--lilac-soft);
  overflow: hidden;
}
.us-ft-store:nth-child(2) { background: var(--pink-soft); }

.us-ft-store-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.us-ft-store-city { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; letter-spacing: -0.02em; }

.us-ft-open-dot { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.us-ft-dot { width: 6px; height: 6px; border-radius: 999px; background: #4fa895; }
.us-ft-dot-closed { background: var(--ink-30); }

.us-ft-store-line { font-size: 0.82rem; color: var(--ink-60); }

.us-ft-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.us-ft-blurb { font-size: 0.86rem; color: var(--ink-60); max-width: 24rem; }

.us-ft-col-title { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.9rem; }
.us-ft-col-list { display: flex; flex-direction: column; gap: 0.5rem; }
.us-ft-col-link { position: relative; font-size: 0.86rem; color: var(--ink-60); width: fit-content; transition: color 0.25s ease; }
.us-ft-col-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Placeholder socials carry the link's type but none of its affordance —
   no underline sweep, no pointer, no hover colour. */
.us-ft-col-link[data-placeholder] { cursor: default; }
.us-ft-col-link[data-placeholder]::after { display: none; }
.us-ft-col-link[data-placeholder]:hover { color: var(--ink-60); }

.us-ft-col-link:hover { color: var(--ink); }
.us-ft-col-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── the giant wordmark ── */
.us-ft-mark-wrap {
  position: relative;
  --charm-w: clamp(36px, 5.2vw, 82px);
  border-top: 1px solid var(--ink-12);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
  padding-inline: clamp(10px, 1.5vw, 22px) calc(var(--rail) + clamp(10px, 1.5vw, 22px));
  overflow: hidden;
}

.us-ft-mark {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.78;
  /* fitMark() in Footer.tsx overrides this to fill the line exactly. */
  font-size: 11vw;
  white-space: nowrap;
  display: block;
  text-align: center;
}

.us-ft-mark-charm {
  position: absolute;
  /* Width-driven, but the floor is set by *height*: these poses are full-body
     unicorns at 1.32 and 1.15 aspect, so they stand far taller than the
     head-and-shoulders cut-outs they replaced. At 390px the wordmark band is
     only 74px tall, and a 48px floor made them 68px — which clipped against
     .markWrap's `overflow: hidden` at both ends. 36px keeps them inside with
     room for the y:-18 drift.

     The size is a variable rather than a literal because the phone rule at the
     bottom of this file has to open a band tall enough to hold each of them,
     and that band is a function of exactly this number. */
  width: var(--charm-w);
  height: auto;
  pointer-events: none;
  z-index: 2;
  opacity: 0.92;
}
/* The charms scrub from y:60 down to y:-18 (Footer.tsx), so their resting
   position is 18px ABOVE whatever `top` resolves to — and .markWrap clips.
   `2%` of this band is only ~4px, which put 17px of the first unicorn outside
   the top edge. The px floor is what actually holds; the 2% only takes over on
   a tall band, where there is room to spare. Keep the floor > 18px + whatever
   the 6deg rotation adds to the box. */
.us-ft-mark-charm-a { left: 1%; top: clamp(30px, 2%, 44px); }
.us-ft-mark-charm-b { right: calc(var(--rail) + 1%); bottom: 6%; }

.us-ft-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  font-size: 0.74rem;
  color: var(--ink-30);
}

.us-ft-socials { display: flex; gap: 1rem; }

@media (max-width: 899px) {
  .us-ft-top { grid-template-columns: 1fr; }
  .us-ft-cols { grid-template-columns: repeat(2, 1fr); }

  /* Touch targets. These links render at 21px tall, which is a coin-flip to
     hit with a thumb; the padding takes them to ~44 without moving the text,
     and the reduced list gap keeps the column the same overall height. */
  .us-ft-col-list { gap: 0; }
  .us-ft-col-link { padding-block: 0.66rem; }
  /* The underline sweep is drawn on ::after at the text's baseline — it has to
     come back up to the text now the box is taller than the line. */
  .us-ft-col-link::after { bottom: calc(0.66rem - 2px); }
}

@media (max-width: 479px) {
  .us-ft-cols { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ── Decoration ──────────────────────────────────────────────────────
   The house art layer: absolutely placed, behind the content, inert to the
   pointer, and animated by the one `drawIn` in this section's `useGSAP`.
   `data-speed` is ScrollSmoother's own parallax and costs no ScrollTrigger.
   Same pattern as `BundleBuilder.module.css`. */
.us-ft-footer { isolation: isolate; }

.us-ft-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* `data-speed` moves these vertically; clip so the travel does not add to
     the section's own scroll height. */
  overflow: hidden;
}

.us-ft-deco > * { position: absolute; }

/* Placed in the zones the content actually leaves free. */
/* `top: 3%`, not 5%: the store cards' status line ("OPEN NOW" / "CLOSED") sits
   at the top right of the second card, and at 5% this landed on it at 1920 —
   the one overlap `stress:overlap` still reported after the placement pass.
   3% puts the cluster in the band above the cards. */
.us-ft-deco-a { top: 3%; right: 6%; opacity: 0.5; }
.us-ft-deco-b { top: 34%; right: 3%; opacity: 0.4; }

/* Content sits above the decoration. Every direct child of the section is a
   plain block, so one rule covers them without naming each. */
.us-ft-footer > *:not(.us-ft-deco) { position: relative; z-index: 1; }

@media (max-width: 899px) {
  /* At phone width the section is far narrower than it is tall and the content
     runs edge to edge; the extra marks land on the copy rather than beside it.
     `.decoA` goes for the same reason and it is measured, not assumed: the two
     store cards stack and fill the width here, so `top: 5%` is inside the
     first one — `stress:overlap` had it on "Open now" at every width from 320
     to 599, up to 27%. */
  .us-ft-deco-a, .us-ft-deco-b { display: none; }
}

/* ── The cast ────────────────────────────────────────────────────────
 * Two characters, at the two ends of the footer's own vertical run.
 */

/*
 * Baby Moana, reaching into the wordmark.
 *
 * She sits inside `.markWrap` and carries `.markCharm` as well as this class,
 * so everything that rule already settled applies to her too: the width floor
 * that keeps a full-body pose inside a 74px band at 390px, the z-index, and
 * the scrub the two unicorns ride. This class only says *where*.
 *
 * Between the two unicorns rather than beside them, and low: her raised arm
 * has to finish inside the letterforms for the reach to read, and `.markWrap`
 * clips, so anchoring her from the bottom is what guarantees the arm is the
 * part that ends up in the type rather than the part that gets cut off.
 */
.us-ft-deco-moana {
  left: 26%;
  bottom: 0;
  /* Narrower than the unicorns' floor: she is a small child beside two
     unicorns, and at the same width she read as the same size as them. */
  width: clamp(30px, 4vw, 62px);
}

/*
 * Pua, over the bottom edge of the page.
 *
 * The negative `bottom` is the placement: `.footer` is `overflow: hidden`, so
 * this is what cuts him off at the chest and turns a floating pig into one
 * looking over the edge of the page.
 *
 * Mid-row, not on the right. `.legal` is `space-between` with the copyright
 * hard left and the three social links hard right, so the middle is empty at
 * every width — while the right, where he was first placed, is exactly where
 * "TikTok" and "WhatsApp" sit.
 */
.us-ft-deco-pua {
  right: 42%;
  bottom: -4%;
  z-index: 2;
}

@media (max-width: 899px) {
  /*
   * The two unicorns come off the type entirely: one above the wordmark, one
   * below it.
   *
   * They are bookends on the mark's first and last letters, which works while
   * the mark is 1300px wide and they are 82px — a charm on the shoulder of a
   * U. Under 900px the mark still fills the line but the charms do not shrink
   * with it in the same proportion: at 899 the word is ~830px and they are
   * 47px, at 390 it is 340px and they are 36px, and at both ends each one sits
   * squarely *on* a letter. Pushing the word in front of them fixes the
   * legibility and not the picture — what is left is two unicorns half-buried
   * in the type.
   *
   * There is only one axis left to move them on, so they move on it. The
   * horizontal band is full — the mark is *set* to fill the width — and the
   * vertical band is `.markWrap`'s own padding, 24px at the top and 16px at
   * the bottom, which is not enough for a 47px unicorn. So the padding opens
   * to give each of them a lane.
   *
   * Both figures are derived, not chosen. The charms scrub from `y: 60` to
   * `y: -18` (Footer.tsx), so each one's resting box is 18px above wherever
   * its offset resolves, and `.markWrap` clips:
   *
   *   top    = 26px offset + the taller unicorn (1.32 x its width) + 16px
   *   bottom = 6px offset + 18px of drift + the shorter one (1.15 x) + 14px
   *
   * which leaves ~20px of clear air between each unicorn and the letters at
   * every width this rule covers.
   */
  .us-ft-mark-wrap {
    /*
     * Bigger than the desktop clamp gives them here.
     *
     * `5.2vw` is 20px at 390, so what rendered on a phone was the clamp's 36px
     * *floor* — a figure sized by a rule written for a band it no longer sits
     * in. That floor existed to keep a full-body pose inside a 74px wordmark
     * band; now each charm has a lane of its own, and the lane is derived from
     * this number, so it grows with them. At 52-74px they read as charms
     * flanking the mark rather than as two stickers.
     */
    --charm-w: clamp(52px, 9vw, 74px);
    padding-top: calc(42px + var(--charm-w) * 1.32);
    padding-bottom: calc(38px + var(--charm-w) * 1.1487);
  }
  .us-ft-mark-charm-a { top: 26px; bottom: auto; left: 4%; }
  .us-ft-mark-charm-b { bottom: 6px; top: auto; right: 4%; }

  /*
   * Moana stays in the letters, and this is what keeps her there.
   *
   * Her `bottom: 0` was measured against a band whose padding was 16px; the
   * rule above makes it ~90px, which would drop her out of the type and into
   * the unicorn's new lane. Re-anchoring her to the same expression puts her
   * feet back on the mark's own bottom edge, so the raised arm still finishes
   * inside the letterforms — which is the whole read. Below 600 she comes off
   * entirely; see the block further down.
   */
  .us-ft-deco-moana { bottom: calc(38px + var(--charm-w) * 1.1487); }
}

@media (max-width: 599px) {
  /*
   * Moana comes off the wordmark on a phone.
   *
   * Her placement is a reach *into* the letterforms — her raised arm finishing
   * inside them is the whole read, and it needs the mark to be much taller
   * than she is. At 390px `.markWrap` is 74px tall and the letters fill it, so
   * a 30px-wide figure is not reaching into the type, she is standing on top
   * of it: reported as the logo being covered, and correctly.
   *
   * There is no clear zone in that band to move her to — the mark is set to
   * fill the width and the two unicorn charms already hold both ends — so she
   * comes off, and `moana-oar` takes over the licence's presence here in the
   * empty column below 480px (above).
   */
  .us-ft-deco-moana { display: none; }
}


@media (max-width: 899px) {
  /* `.legal` wraps to two lines here and the gap Pua sits in closes up. */
  .us-ft-deco-pua { display: none; }
}


/*
 * Moana, standing in the gap under the link columns.
 *
 * Positioned from the wordmark rule upward rather than from the footer's top:
 * `.top` and `.cols` both grow with their content, so anything measured from
 * above drifts as the store cards or link lists change. `.markWrap` is the
 * fixed landmark near the bottom.
 *
 * On the right, under the HELP column — the first column's blurb caps at 24rem
 * and the three link lists are short, so the deepest clear space is the right
 * half of that band.
 */
.us-ft-deco-oar {
  bottom: 27%;
  right: calc(var(--rail) + 4%);
}

@media (max-width: 899px) {
  /* `.cols` goes to two columns and closes the gap she stood in. */
  .us-ft-deco-oar { display: none; }
}

@media (max-width: 479px) {
  /*
   * And opens a much bigger one: below 480px `.cols` collapses to a *single*
   * column, so the four link lists stack down the left and the entire right
   * half of an 870px-tall band is empty — the largest dead area anywhere on
   * the phone layout. She goes back in, standing in it.
   *
   * `bottom` is measured against the footer, whose bottom is `.legal` and
   * `.markWrap` below her; 18% clears both. The link text runs to about 186px
   * at 390, so `right: 6%` leaves ~80px between her and the last word.
   */
  /* `min-width`, not a bigger clamp on the component: `Cast` writes `width` as
     an inline style, which no stylesheet rule can override, and raising the
     clamp's floor to suit this column made her 96px at 940 too — where
     `stress:overlap` immediately put her on "Gift wrapping". `min-width` wins
     over `width` by the box-sizing rules rather than by specificity, so the
     desktop size is untouched. */
  .us-ft-deco-oar { display: block; bottom: 18%; right: 6%; min-width: 104px; }
}