/* =============================================================
   JAZWARES SITE FOOTER
   ----------------------------------------------------------------
   IN PLAIN TERMS
   Styles the footer at the bottom of every page and keeps it looking
   right from a small phone up to an ultra-wide monitor.

   HOW RESPONSIVENESS WORKS HERE — two complementary tools:

   1) FLUID SIZING with clamp().  Widths, paddings, font-sizes and gaps
      are written as clamp(min, formula, max) so they grow/shrink smoothly
      as the screen changes — sizes never "jump". You rarely hand-edit the
      numbers: they're derived from two design widths so the value matches
      the design at each end and slides in a straight line between them.

        clamp(70px, calc(26.25vw - 308px), 196px)
              ^never below   ^grows with width   ^never above
        (`vw` = 1% of the screen width.)

   2) CONTAINER QUERIES for layout SWITCHES.  A handful of changes can't be
      done by sizing alone — the three link columns turning into tap-to-open
      accordions, the desktop row becoming a stacked mobile layout, and the
      decorative "pill" swapping to a different image. Those live in
      `@container footer (...)` blocks. They respond to the width of the
      footer's OWN container (`.site-footer`, declared below) rather than the
      raw browser window, so the footer is self-contained: place it in a
      narrower slot and it adapts to that slot.

   WHY KEEP `vw` INSTEAD OF CONTAINER UNITS (`cqi`)?
   `.site-footer` is always full-width, so its container width equals the
   window width — `cqi` would resolve to the same value as `vw` here, only
   with more risk when recalibrating. The centering gutter is also inherently
   window-based (it splits the leftover window space into two side margins),
   which a container unit can't express without sizing itself off itself. So
   the *sizing* stays in `vw`; only the *layout switches* became container-
   driven. (Note: container width excludes a classic scrollbar, so on such
   systems a switch can trigger ~15px earlier than a viewport media query —
   harmless here, but worth knowing.)

   READING ORDER — widest → narrowest. A block lower in the file wins on a
   smaller screen, so KEEP THIS ORDER (moving a block can silently change
   how the footer looks at some sizes):

     Base  ≥ 1920   fluid scaling 1920 → 2560
     ≤ 1919         1440 design anchor
     ≤ 1439         fluid 1024 → 1440 (sign-up form stacks)
     ≤ 1023         columns → accordion, layout stacks, brand centres
      = 768         768 tablet design
     ≤ 767          phone (390 pattern, fluid up to 768)
     ≤ 360          smallest phones
   ============================================================= */

/* -------------------------------------------------------------
   MAP OF THIS FILE  (top → bottom)
   -------------------------------------------------------------
   1. Colour palette (:root variables)
   2. Reset + .site-footer (the query container)
   3. BASE STYLES — the widest-desktop defaults, one section per
      piece of the footer, in visual order:
        · main wrapper + content box
        · newsletter (headline, body, form, legal, )
        · social icons
        · nav columns (+ desktop "always open" accordion)
        · brand overlay (pill, logo, region button)
        · legal bar (links + copyright)
   4. RESPONSIVE TIERS — one @container block per breakpoint,
      widest → narrowest (each breakpoint appears exactly ONCE):
        ≥1920 · ≥2560 · ≤1919 · ≤1439 · (1024–1439) ·
        ≤1023 · (769–1023) · =768 · ≤767 · ≤360
   5. prefers-reduced-motion (accessibility)
   ------------------------------------------------------------- */

:root {
  --footer-bg:            #071A56;
  --footer-bg-bottom:     #02113C;
  --footer-text:          #ffffff;
  --footer-text-muted:    rgba(255, 255, 255, 0.75);
  --footer-btn-bg:        #1d52e1;
  --footer-btn-hover:     #1644c0;
  --footer-region-border: #54C8E8;
}

/* ── Reset scoped to footer ──────────────────────────────────── */
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.site-footer {
  width: 100%;

  /* Make the footer a QUERY CONTAINER named "footer". Every `@container
     footer (...)` block below sizes/switches layout against THIS element's
     width. Because the footer is full-width, that width tracks the window —
     but keying off the container (not the window) keeps the footer portable
     if it's ever placed in a narrower region. `inline-size` only contains the
     horizontal axis, so vertical bleed (e.g. the logo overhang) is unaffected. */
  container-type: inline-size;
  container-name: footer;

  /* Clip the decorative pill's rightward bleed so it can never spill past
     the viewport edge (prevents a white overflow sliver on narrow screens).
     Uses clip-path (not overflow-x: clip) because Safari clips BOTH axes when
     overflow-x is clip and overflow-y is visible, which cut off the logo's
     upward overhang. inset() clips only the left/right edges (0) and leaves the
     vertical axis unbounded (-9999px), so the straddling logo bleeds up freely. */
  clip-path: inset(-9999px 0 -9999px 0);
  /* Back the whole footer with the section navy so a sub-pixel right-edge
     seam from the clipped pill can never expose the light page background
     (the faint white line seen on narrow screens). */
  background-color: var(--footer-bg);
  font-family: 'Comfortaa', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--footer-text);
}

/* =============================================================
   MAIN FOOTER SECTION — BASE ≥ 1920
   ============================================================= */
.footer-main {
  position: relative;
  /* A secondary (nested) container. The footer's responsive SWITCHES are all
     keyed off `.site-footer` (named "footer") above; this inner container is
     kept available for any future rule that needs to size against the main
     block specifically. Named container queries (`@container footer …`) skip
     past this one to `.site-footer`, so it doesn't affect current behaviour. */
  container-type: inline-size;
  container-name: footer-main;
  background-color: var(--footer-bg);

  /* 1920 values: 50px top / 55px bottom */
  padding-block: 50px 55px;

  /* Ultra-wide: content capped at 1530px, gutter = half the rest.
     At 1920 this resolves to 196px; at 2560 → 515px.
     Tiers below step it to fixed values. */
  padding-inline: max(196px, calc((100vw - 1530px) / 2));

  min-height: 480px;

  /* Distance from content-left to the nav's right edge.
     Logo overlay anchors its left to this. Updated per tier. */
  --brand-x: 1368px;   /* 426 newsletter + 942 nav @1920 */

  /* clip-path (not overflow-x: clip) so Safari keeps the vertical axis visible
     for the logo's upward bleed — see .site-footer note above. */
  clip-path: inset(-9999px 0 -9999px 0);
}

/* Content box, left-aligned inside the gutter. */
.footer-main__inner {
  container-type: inline-size;
  container-name: footer-inner;
  width: min(1368px, 100%);
  margin-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;      /* row-gap when stacked; overridden per stacked tier */
  column-gap: 0;  /* horizontal newsletter↔nav gap = nav's left-padding */
}

/* =============================================================
   NEWSLETTER COLUMN — BASE ≥ 1920
   ============================================================= */
.footer-newsletter {
  flex: 0 0 auto;
  width: 426px;
  min-height: 264.5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* Figma desktop-footer-signup (identical @1440/1920/2560):
   Comfortaa Bold 30px, 27px text box · heading → body gap 16 */
.footer-newsletter__headline {
  font-family: 'Comfortaa', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--footer-text);
  margin-top: 0;
}

.footer-newsletter__body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 25px;
  letter-spacing: 0;
  margin-top: 26px;      /* headline → body (wireframe 26px) */
  margin-bottom: 22px;   /* body → form (wireframe 22px) */
}

.footer-newsletter__label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.footer-newsletter__form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 426px;
  margin-bottom: 16px;   /* form → legal @1920 */
}

.footer-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #333333;
  font-size: 16px;
  line-height: 25px;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  outline: none;
  transition: box-shadow 0.2s;
}

.footer-newsletter__input::placeholder { color: #767b8a; }

.footer-newsletter__input:focus {
  box-shadow: 0 0 0 3px rgba(29, 82, 225, 0.40);
}

.footer-newsletter__btn {
  flex: 0 0 107px;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--footer-btn-bg);
  color: #ffffff;
  font-size: 16px;
  line-height: 25px;
  font-weight: 700;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.12s;
}

.footer-newsletter__btn:hover {
  background: var(--footer-btn-hover);
  transform: translateY(-1px);
}

.footer-newsletter__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
  background: var(--footer-btn-hover);
}

.footer-newsletter__legal {
  width: 424px;
  max-width: 100%;
  font-size: 10px;
  font-weight: 400;
  color: var(--footer-text);
  line-height: 14px;      /* Figma caption-2 */
  margin-bottom: 22px;    /* legal → social */
}

.footer-newsletter__legal a {
  color: inherit;
  text-decoration: underline;
}

.footer-newsletter__legal a:hover { opacity: 0.85; }

/* =============================================================
   SOCIAL ICONS — BASE ≥ 1920
   ============================================================= */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 33px;   /* 2560 wireframe: 33px; ≥1920 block narrows to 29px */
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--footer-text);
  opacity: 0.85;
  width: 26px;   /* Figma icon 26.048 */
  height: 26px;
  transition: opacity 0.18s, transform 0.15s;
}

.footer-social__link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-social__link:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
  border-radius: 4px;
}

.footer-social__link img,
.footer-social__link svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-social__link img { filter: brightness(0) invert(1); }
.footer-social__link svg { fill: currentColor; }

/* =============================================================
   NAVIGATION GROUP — BASE ≥ 1920
   Figma "Footer Links" instance: 3 × 180px cols · 91px gap ·
   col height 347px · newsletter→nav gap 127px @1920 and @2560.
   ============================================================= */
/* ── Links Container to Legal Bar Gap (49px spec) ──────────── */
.footer-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 180px);
  column-gap: 91px;
  row-gap: 32px;
  align-items: start;
  /* 127px at both 1920 and 2560 anchors */
  padding: 0 0 0 127px;
  position: relative;
  z-index: 2;
}

.footer-nav-col {
  min-width: 0;
  min-height: 358px;
}

.footer-nav-col__heading,
.footer-nav-col__list a {
  overflow-wrap: break-word;
}

.footer-nav-col__acc > summary,
.footer-nav-col__heading,
.footer-nav-col__heading > span {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

.footer-nav-col__heading {
  font-size: 14px;
  line-height: 22px;
  color: var(--footer-text);
  /* wireframe: heading → first link gap 26px (all desktop breakpoints) */
  margin-bottom: 26px;
}

.footer-nav-col__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.footer-nav-col__list a {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.18s;
}

.footer-nav-col__list a:hover {
  color: var(--footer-text);
  text-decoration: underline;
}

.footer-nav-col__list a:focus-visible {
  color: var(--footer-text);
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── NAV ACCORDION — desktop: static columns (no toggle) ──── */
.footer-nav-col__acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.footer-nav-col__acc > summary::-webkit-details-marker { display: none; }
.footer-nav-col__chevron { display: none; }
.footer-nav-col__acc::details-content { content-visibility: visible; }

/* =============================================================
   BRAND OVERLAY — logo + region + deco
   ============================================================= */
.footer-brand {
  position: absolute;
  top: 0;
  left: max(196px, calc((100vw - 1530px) / 2));   /* mirrors padding-inline */
  right: auto;
  width: min(1368px, 100%);
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Decorative pill — base (≥1920 / intermediate tiers) */
.footer-brand__deco {
  position: absolute;
  top: 0;
  left: calc(var(--brand-x) - 469px);
  right: auto;
  width: 372px;
  aspect-ratio: 169 / 168;
  z-index: 0;
  pointer-events: auto;   /* override parent pointer-events:none so devtools can inspect */
}

.footer-brand__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Logo + region, stacked, anchored to --brand-x */
.footer-brand__logo-wrap {
  position: absolute;
  top: -80px;
  left: var(--brand-x);
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  pointer-events: auto;
  z-index: 3;
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 9px #ffffff,
    0 4px 20px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.footer-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-brand__region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 140.88219px;
  height: 43.34836px;
  flex-shrink: 0;
  padding: 0 18px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid var(--footer-region-border);
  border-radius: 98px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--footer-text);
  white-space: nowrap;
  cursor: pointer;
  /* TEMP: disable clicks until region feature launches — restore `pointer-events: auto;` to re-enable */
  pointer-events: none !important;
  transition: background 0.2s, border-color 0.2s;
}

.footer-brand__region:hover {
  background: rgba(0, 0, 0, 0.95);
  border-color: #7dd8ef;
}

.footer-brand__region:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

.footer-brand__region svg {
  width: 13px;
  height: 13px;
  fill: #ff3a3a;
  flex-shrink: 0;
}

/* =============================================================
   BOTTOM LEGAL BAR — BASE ≥ 1920
   Figma (2560px spec): bar 108px tall ·
   pad 28 top / 28 bottom · links row 22 · gap 32 · copyright 16.
   Bar sits flush below .footer-main (no outer margins).
   ============================================================= */
.footer-bottom {
  background: var(--footer-bg-bottom);
  min-height: 108px;
  padding-block: 28px 28px;
  padding-inline: max(196px, calc((100vw - 1530px) / 2));
  margin: 0; /* flush against footer-main — no dead space */
}

.footer-bottom__inner {
  width: min(1368px, 100%);
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px; /* links row → copyright (2560px spec: 30px) */
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.footer-bottom__links a {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--footer-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s;
}

.footer-bottom__links a:hover {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.footer-bottom__links a:focus-visible {
  color: var(--footer-text);
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-bottom__copyright {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--footer-text);
}


/* ── ≥ 1920px — clamp() fluid scaling 1920 → 2560 ──────────── */
@container footer (min-width: 1920px) {
  /* height 490px @ 1920 → 476px @ 2560
     calc: 532 - 2.1875vw  (532 - 42 = 490 @ 1920; 532 - 56 = 476 @ 2560) */
  .footer-main {
    min-height: clamp(476px, calc(532px - 2.1875vw), 480px);
    height: auto;
  }
  /* Gutter: base max(196px, calc((100vw - 1530px) / 2)) scales automatically —
     no override needed here; 196px @ 1920 → 515px @ 2560 */

  /* Decorative pill ─────────────────────────────────────────── */
  /* right formula is already viewport-relative; only width needs clamp
     width 493px @ 1920 → 576px @ 2560
     calc: 12.96875vw + 244px  (249 + 244 = 493 @ 1920; 332 + 244 = 576 @ 2560) */
  .footer-brand__deco {
    left: auto;
    right: calc(549px - 50vw);
    width: clamp(503px, calc(12.96875vw + 231px), 538px);
    height: 480px;
    aspect-ratio: 169 / 168;
  }

  /* Newsletter — Figma uses the SAME desktop-footer-signup instance
     (426 × 264.5, Comfortaa Bold 30/27) at 1440, 1920 and 2560:
     no fluid scaling between desktop anchors. */
  .footer-newsletter__headline {
    font-size: 30px;
    line-height: 27px;
    /* margin-top: 50px; */
  }

  /* Remaining newsletter, nav, social — unchanged between anchors */
  .footer-newsletter__body   { font-size: 16px; line-height: 25px; min-height: 50px; margin-top: 26px; margin-bottom: 22px; }
  .footer-newsletter__input  { flex: 0 0 307px; width: 307px; height: 48px; padding: 0 16px; }
  .footer-newsletter__legal  { width: 424px; min-height: 36px; font-size: 10px; margin-bottom: 32px; }
  .footer-social             { gap: 33px; align-self: stretch; margin-bottom: 55px; }
  .footer-social__link       { width: 22px; height: 22px; }
  .footer-nav {
    grid-template-columns: repeat(3, 180px);
    column-gap: 91px;
    row-gap: 32px;
    padding: 0px 0 0 127px;
    margin-bottom: 0;
  }
  .footer-nav-col            { min-height: 370px; }
  .footer-nav-col__heading   { font-size: 14px; line-height: 22px; margin-bottom: 26px; }
  .footer-nav-col__list      { gap: 26px; }
  .footer-nav-col__list a    { font-size: 14px; line-height: 22px; }

  .footer-brand__deco img {
    width: 490px;
    height: 481px;
    /* object-fit: contain; */
    /* display: block; */
  }

  /* Legal bar — 1920: 106px tall · 28px top · 30px links→copyright · 28px bottom · 32px link gap */
  .footer-bottom {
    padding-block: 28px 28px;
  }
  .footer-bottom__inner { gap: 30px; }
  .footer-bottom__links { gap: 32px; }
  .footer-bottom__copyright { width: 1188px; height: 16px; }
}

/* =============================================================
   2560px — fixed-pixel overrides (no clamp)
   Layered on top of the ≥1920 block above.
   ============================================================= */
@container footer (min-width: 2560px) {
  /* Let content height drive the footer rather than a fixed clamp.
     Nav (50px top-pad + 7-link col) exceeds the 476px clamp value. */
  .footer-main { height: auto; }

  .footer-brand__deco {
    width: 511px;
    height: 477px;
    aspect-ratio: unset;
    background: url(../assets/footer_decorative_pill_2560.png) center / contain no-repeat;
  }
  .footer-brand__deco img { display: none; }

  .footer-social { gap: 33px; align-self: stretch; }

  /* legal bar: 108px tall · 28px top · 30px links→copyright · 28px bottom · 32px link gap */
  .footer-bottom        { min-height: 108px; padding-block: 28px 28px; }
  .footer-bottom__inner { gap: 30px; }
  .footer-bottom__links { gap: 32px; }
  .footer-bottom__copyright { width: 1188px; height: 16px; }
}





/* =============================================================
   TIER 2 — ≤ 1919.98px  →  1440 anchor
   Side gutter 70px · height 506px · nav 31px gap / 40-44-40-56
   Newsletter 426px · brand-x 1128px · logo 161px
   ============================================================= */
@container footer (max-width: 1919.98px) {
  .footer-main,
  .footer-bottom {
    /* gutter 70px @ 1440 → 196px @ 1920: 26.25vw - 308px */
    padding-inline: clamp(70px, calc(26.25vw - 308px), 196px);
  }
  .footer-main {
    /* height 506px @ 1440 → 490px @ 1920: 524px - 3.3333vw */
    height: clamp(490px, calc(524px - 3.3333vw), 506px);
    --brand-x: 1128px;   /* 426 + 56 + 540 + 62 + 44 */
  }
  .footer-brand {
    left: clamp(70px, calc(26.25vw - 308px), 196px);
  }
  .footer-brand__deco {
    left: auto;
    right: clamp(-367px, calc(1093.4px - 76.0417vw), -2px);
    width: clamp(491.82px, calc(2.3292vw + 458.28px), 503px);
    height: clamp(480px, calc(542.52px - 2.6313vw), 490px);
    aspect-ratio: unset;
    background: url('../assets/footer_decorative_pill.png') center / contain no-repeat;
  }
  .footer-brand__deco img { display: none; }
  .footer-brand__logo { width: 160px; }
  .footer-newsletter  { width: 426px; }
  .footer-nav {
    grid-template-columns: repeat(3, 180px);
    column-gap: 31px;
    padding: 0 41px 0 55px;
    /* breathing room before legal bar: 24px @1440 → 49px @1920 */
    margin-bottom: clamp(24px, calc(5.2083vw - 51px), 49px);
  }
  .footer-newsletter__headline { font-size: 30px; line-height: 27px; }
  .footer-newsletter__body { font-size: 16px; line-height: 25px; margin-bottom: 22px; }
  .footer-newsletter__input { flex: 0 0 307px; width: 307px; height: 48px; padding: 0 16px; }
  .footer-newsletter__legal { width: 424px; min-height: 32px; font-size: 10px; margin-bottom: 32px; }
  .footer-newsletter__form { gap: 12px; margin-bottom: 16px; }
  .footer-social { gap: 33px; margin-bottom: 50.5px; }
  .footer-social__link { width: 26px; height: 26px; }
  .footer-nav-col { min-height: 371px; }
  .footer-nav-col__heading { font-size: 14px; line-height: 22px; margin-bottom: 26px; }
  .footer-nav-col__list { gap: 26px; }
  .footer-nav-col__list a { font-size: 14px; line-height: 22px; }
  .footer-bottom { min-height: 106px; padding-block: 28px 28px; }
  .footer-bottom__inner { gap: 30px; }
  .footer-bottom__links { gap: 32px; }
  .footer-bottom__copyright { width: 1188px; height: 20.5px; }
}

/* =============================================================
   TIER 3 — ≤ 1439.98px  →  clamp() fluid 1024 → 1440
   Gutter 40px → 70px · newsletter 308px → 426px
   Nav: 3×127px/20px gap @1024 → 3×180px/91px gap @1440
   brand-x 793px → 1128px · pill flush-right
   ============================================================= */
@container footer (max-width: 1439.98px) {
  .footer-main,
  .footer-bottom {
    /* gutter 40px @ 1024 → 70px @ 1440: 7.2115vw - 33.85px */
    padding-inline: clamp(40px, calc(7.2115vw - 33.85px), 70px);
  }
  .footer-main {
    height: auto;
    padding-block: 40px 20px;
    /* min-height fluid 1024 → 1440: 407px → 506px */
    min-height: clamp(407px, calc(23.798vw + 163.27px), 506px);
    /* --brand-x 793px @ 1024 → 1128px @ 1440: 80.529vw - 31.6px */
    --brand-x: clamp(793px, calc(80.529vw - 31.6px), 1128px);
  }
  .footer-brand {
    left: clamp(40px, calc(7.2115vw - 33.85px), 70px);
  }
  .footer-brand__deco {
    left: auto;
    right: clamp(-40px, calc(143.38px - 13.096vw), 40px);
    /* width 372px @ 1024 → 491.82px @ 1440 */
    width: clamp(372px, calc(28.803vw + 77.86px), 491.82px);
    height: auto;
    aspect-ratio: 169 / 168;
    background: url('../assets/footer_decorative_pill_1024.png') center / contain no-repeat;
  }
  .footer-brand__logo { width: 160px; }

  /* Newsletter — 308px @ 1024 → 426px @ 1440 */
  .footer-newsletter {
    width: clamp(308px, calc(28.365vw + 17.54px), 426px);
    min-height: clamp(264.5px, calc(612.4px - 24.159vw), 365px);
  }
  /* Headline 22px @ 1024 → 30px @ 1440 */
  .footer-newsletter__headline {
    margin-top: 0;
    font-size: clamp(22px, calc(1.9231vw + 2.31px), 30px);
    line-height: 27px;
  }
  /* headline→body 26px (same both anchors); body→form 20px @1024 → 22px @1440 */
  .footer-newsletter__body {
    margin-top: 26px;
    margin-bottom: clamp(20px, calc(0.4808vw + 15.08px), 22px);
  }
  /* Stacked form @1024: input full-width, button below; form→legal 22px */
  .footer-newsletter__form {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
  }
  .footer-newsletter__input { flex: 0 0 auto; width: 100%; }
  .footer-newsletter__btn   { flex: 0 0 auto; width: 106px; height: 48px; }
  .footer-newsletter__legal { width: auto; min-height: 69px; font-size: 10px; line-height: 14px; margin-bottom: clamp(22px, calc(2.4038vw - 2.63px), 32px); }
  /* Social gap 28.94px @ 1024 → 33px @ 1440; link height 46px → 26px
     margin-bottom 0 @1024 (legal-bar gap = 20px main pad) → 55px @1440 */
  .footer-social      { gap: clamp(28.94px, calc(0.976vw + 18.95px), 33px); margin-bottom: clamp(0px, calc(13.22vw - 135.4px), 55px); }
  .footer-social__link { width: 26px; height: clamp(26px, calc(95.2px - 4.808vw), 46px); }

  /* Nav — 3×127px / gap 20px @1024 → 3×180px / gap 91px @1440
     col width: 12.74vw - 3.45px  gap: 17.067vw - 154.77px
     newsletter→nav: 40px @1024 → 127px @1440: 20.913vw - 174.15px */
  .footer-nav {
    grid-template-columns: repeat(3, clamp(127px, calc(12.74vw - 3.45px), 180px));
    column-gap: clamp(20px, calc(2.644vw - 7.08px), 31px);
    padding: 0 0 0 clamp(40px, calc(3.606vw + 3.08px), 55px);
  }

  /* Legal bar — 30px/20px pad, 30px gap @1024 → 28px/28px, 30px @1440 */
  .footer-bottom {
    min-height: clamp(99px, calc(1.683vw + 81.76px), 106px);
    padding-block: clamp(28px, calc(34.92px - 0.481vw), 30px)
                   clamp(20px, calc(1.923vw + 0.31px), 28px);
  }
  .footer-bottom__inner     { gap: 30px; }
  .footer-bottom__links     { gap: clamp(20px, calc(2.885vw - 9.54px), 32px); }
  /* copyright: 916×13 @1024 → 1188×20.5 @1440 */
  .footer-bottom__copyright { color: #b3b3b3; width: clamp(916px, calc(65.385vw + 246.46px), 1188px); height: clamp(13px, calc(1.803vw - 5.46px), 20.5px); }
}

/* ── 1024–1439 · stretch newsletter to row height ──────────── */
@container footer (min-width: 1024px) and (max-width: 1439.98px) {
  .footer-main__inner { align-items: stretch; }
  .footer-newsletter  { justify-content: flex-start; }
}

/* ── ≥ 1024 · hide newsletter column, shift nav columns right ── */
@container footer (min-width: 1024px) {
  .footer-newsletter { display: none; }
  .footer-nav         { margin-left: 10%; }
}

/* ═════════════════════════════════════════════════════════════
   BREAKPOINT ≤ 1023.98px — TABLET & DOWN  (major layout switch)
   Everything for this width is in THIS one block, in two parts:
     1. STACK — side-by-side desktop layout collapses to a single
        vertical column; the brand overlay becomes a centred header
        and the decorative pill is hidden.
     2. NAV ACCORDION — the three always-open columns become
        tap-to-open <details> accordions (second half of the block).
   ═════════════════════════════════════════════════════════════ */
@container footer (max-width: 1023.98px) {
  .footer-main__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 40px;
  }
  .footer-nav {
    align-self: start;
  }
  .footer-brand {
    position: static;
    width: 100%;
    height: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
  }
  .footer-brand__logo-wrap { position: static; }
  .footer-brand__deco      { display: none; }


  /* ── 2. NAV ACCORDION — columns become tap-to-open on touch ── */

  .footer-nav {
    grid-template-columns: 1fr;
    width: min(352px, 100%);
    margin-inline: auto;
    row-gap: 0;
    padding: 0;
  }
  .footer-nav-col { width: 100%; min-height: 0; }

  .footer-nav-col__acc::details-content       { content-visibility: hidden; }
  .footer-nav-col__acc[open]::details-content { content-visibility: visible; }

  .footer-nav-col__acc {
    border-top: 0.75px solid rgba(255, 255, 255, 0.6);
  }
  .footer-nav-col--supp .footer-nav-col__acc {
    border-bottom: 0.75px solid rgba(255, 255, 255, 0.6);
  }
  .footer-nav-col__acc > summary {
    cursor: pointer;
    pointer-events: auto;
    height: 46px;
    padding: 0;
  }
  .footer-nav-col__acc > summary > span { width: 180px; height: 22px; }
  .footer-nav-col__heading {
    margin-bottom: 0;
    font-size: 15px;
  }
  .footer-nav-col__acc > summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .footer-nav-col__chevron {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #ffffff;
    transition: transform 0.2s ease;
  }
  .footer-nav-col__acc[open] .footer-nav-col__chevron { transform: rotate(180deg); }

  .footer-nav-col__list      { gap: 16px; padding-bottom: 0; padding-left: 16px; }
  .footer-nav-col__list a    { display: flex; align-items: center; height: 44px; padding: 0; }
}

/* ── 769–1023.98px — centred stacked, logo straddles top-right
  Figma anchors: logo 140px/right:40 @768 → 160px/right:31 @1024 */
@container footer (min-width: 769px) and (max-width: 1023.98px) {
  /* Same top padding as 768px — logo still straddles at y=0 */
  .footer-main {
    min-height: auto;
    padding-block: 153px clamp(20px, calc(132.43px - 10.98vw), 48px);
  }

  .footer-main__inner { align-items: center; row-gap: 28px; }

  /* Logo: straddle right-anchored (mirrors 768px and 1024 anchors).
     Both logo and region are absolute → brand collapses to 0 height. */
  .footer-brand { margin-bottom: 0; }
  .footer-brand__logo {
    position: absolute;
    top: 0;
    left: auto;
    /* right 40px @768 → 31px @1024 */
    right: clamp(31px, calc(67px - 3.5156vw), 40px);
    /* size 140px @768 → 160px @1024 */
    width: clamp(140px, calc(7.8125vw + 80px), 160px);
    height: clamp(140px, calc(7.8125vw + 80px), 160px);
    transform: translateY(-50%);
    z-index: 3;
  }
  .footer-brand__region {
    position: absolute;
    top: 44px;
    left: 50%;
    width: 178.75px;
    height: 55px;
    transform: translateX(-50%);
  }

  /* Newsletter: 600px centred · fluid spacing 768 → 1024 anchors */
  .footer-newsletter {
    width: min(600px, 100%);
    min-height: fit-content;
    text-align: center;
  }
  .footer-newsletter__headline { font-size: 30px; line-height: 27px; }
  .footer-newsletter__body {
    max-width: 484px;
    min-height: 50px;
    margin-inline: auto;
    /* headline→body 28px @768 → 26px @1024 */
    margin-top: clamp(26px, calc(34.03px - 0.784vw), 28px);
    /* body→form 24px @768 → 20px @1024 */
    margin-bottom: clamp(20px, calc(36.06px - 1.569vw), 24px);
  }
  .footer-newsletter__form {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    /* form→legal 24px @768 → 22px @1024 */
    margin-bottom: clamp(22px, calc(30.03px - 0.784vw), 24px);
  }
  .footer-newsletter__input  { flex: 0 0 303px; width: 303px; height: 48px; }
  .footer-newsletter__btn    { flex: 0 0 107px; width: 107px; height: 48px; }
  /* legal→social 28px @768 → 22px @1024 */
  .footer-newsletter__legal  { max-width: 398px; min-height: 45px; margin-inline: auto; margin-bottom: clamp(22px, calc(46.09px - 2.353vw), 28px); }
  /* social gap 28px @768 → 28.94px @1024; icon 47px @768 → 46px @1024 */
  .footer-social      { justify-content: center; gap: clamp(28px, calc(0.3672vw + 25.18px), 28.94px); }
  .footer-social__link { width: clamp(46px, calc(50px - 0.3906vw), 47px); height: clamp(46px, calc(50px - 0.3906vw), 47px); flex-shrink: 0; }

  /* Pill: same asset + geometry as the ≤768 tier (footer_decorative_pill_768) */
  .footer-brand__deco {
    display: block;
    top: 0;
    left: auto;
    right: 0;
    width: 280px;
    height: auto;
    aspect-ratio: 560 / 660;
    opacity: 1;
    transform: none;
    background: url('../assets/footer_decorative_pill_768.png') center / contain no-repeat;
    z-index: 0;
  }
  .footer-brand__deco img { display: none; }

  /* Footer bottom — fluid 768 → 1024:
     pad-top 34 → 30 · pad-bottom 18 → 20 · inner-gap 40 → 30 · min-h 172 → 118 */
  .footer-bottom {
    min-height: clamp(118px, calc(334.84px - 21.176vw), 172px);
    padding-block: clamp(30px, calc(46.07px - 1.569vw), 34px)
                   clamp(18px, calc(0.784vw + 11.97px), 20px);
  }
  .footer-bottom__inner  { align-items: center; gap: clamp(30px, calc(70.16px - 3.922vw), 40px); }
  .footer-bottom__links  { width: 100%; justify-content: center; gap: 20px 20px; }
  /* reset Tier 3 fixed 916px width so copyright stays centred, no overflow */
  .footer-bottom__copyright { width: auto; max-width: 100%; height: auto; text-align: center; }
}

/* =============================================================
   768px WIREFRAME TIER
   Logo straddles Y=0 (flush-right) · region centred at Y=44
   Newsletter 600px centred · horizontal form row
   ============================================================= */
@container footer (max-width: 768px) {
  .footer-main {
    /* 40px left/right gutter · bottom 48px = accordion → legal-bar gap @768 */
    padding-inline: 40px;
    padding-block: 153px 48px;
    min-height: auto;
  }
  .footer-newsletter__headline {
    margin-top: 0;
    font-size: 30px;
    line-height: 27px;
    min-height: 27px;
  }
  .footer-brand { margin-bottom: 0; }

  .footer-brand__logo {
    position: absolute;
    top: 0;
    left: auto;
    right: 40px;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    transform: translateY(-50%);
    z-index: 3;
  }
  .footer-brand__deco {
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 280px;
    height: auto;
    aspect-ratio: 560 / 660;
    opacity: 1;
    transform: none;
    background: url('../assets/footer_decorative_pill_768.png') center / contain no-repeat;
    z-index: 0;
  }
  .footer-brand__region {
    position: absolute;
    top: 44px;
    left: 294px;
    width: 180px;
    height: 55px;
    flex-shrink: 0;
    transform: none;
  }

  .footer-main__inner {
    align-items: center;
    row-gap: 28px;
  }
  .footer-newsletter {
    width: min(600px, 100%);
    min-height: 370px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
  }
  .footer-newsletter__body {
    max-width: 484px;
    min-height: 50px;
    margin-inline: auto;
    margin-top: 28px;    /* headline → body (768 wireframe) */
    margin-bottom: 24px; /* body → form */
  }
  .footer-newsletter__form {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin-bottom: 24px; /* form → legal */
  }
  .footer-newsletter__input  { flex: 0 0 303px; width: 303px; height: 48px; }
  .footer-newsletter__btn    { flex: 0 0 107px; width: 107px; height: 48px; }
  .footer-newsletter__legal {
    max-width: 398px;
    min-height: 45px;
    margin-inline: auto;
    margin-bottom: 28px; /* legal → social */
  }
  /* 768 wireframe: 47×47px icons, 28px gap */
  .footer-social {
    justify-content: center;
    gap: 28px;
  }
  .footer-social__link {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
  }

  /* 768 wireframe legal bar: 34px top · 18px bottom · 40px links→copyright
     row+col gap 20px · min-height 172px · 40px left/right gutter */
  .footer-bottom {
    min-height: 172px;
    padding-inline: 40px;
    padding-block: 34px 18px;
  }
  .footer-bottom__inner {
    align-items: center;
    gap: 40px;
  }
  .footer-bottom__links {
    width: 100%;
    justify-content: center;
    gap: 20px 20px;
  }
  /* 768 wireframe copyright: 239×16px, centred (reset Tier 3 fixed 916px) */
  .footer-bottom__copyright {
    color: #d9d9d9;
    width: auto;
    max-width: 100%;
    height: 16px;
    text-align: center;
  }
}

/* =============================================================
   MOBILE — ≤ 767px  (390 pattern scaled fluidly 390 → 767)
   (includes the phone nav-accordion sizing + stacked legal bar)
   Logo centred straddle · region centred Y=118 · stacked form
   Widths interpolate toward the 768 anchor; structure = 390.
   ============================================================= */
@container footer (max-width: 767px) {
  .footer-main,
  .footer-bottom {
    padding-inline: 16px;
  }
  .footer-main {
    /* accordion → legal-bar gap: 73px @390 (Figma) → 48px @767 (768 anchor) */
    padding-block: 217px clamp(48px, calc(98.86px - 6.6313vw), 73px);
    min-height: auto;
  }
  .footer-brand { margin-bottom: 0; }

  .footer-brand__logo {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .footer-brand__region {
    position: absolute;
    top: 118px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 2;
  }
  /* Pill: right -56px @390 → 0 @768 · width 320px @390 → 280px @768 */
  .footer-brand__deco {
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: clamp(-56px, calc(14.815vw - 113.78px), 0px);
    width: clamp(280px, calc(361.27px - 10.582vw), 320px);
    height: auto;
    aspect-ratio: 520 / 660;
    background: url('../assets/footer_decorative_pill_mobile.png') center / contain no-repeat;
    z-index: 0;
  }

  .footer-main__inner { row-gap: 44px; }
  /* Newsletter: 328px @390 → 600px @768 */
  .footer-newsletter {
    width: min(100%, clamp(328px, calc(71.958vw + 47.37px), 600px));
    min-height: 0;
  }
  .footer-newsletter__headline { font-size: 24px; line-height: 27px; min-height: 0; }
  /* Body: 294px @390 → 484px @768 · heading→body 14 · body→form 19 */
  .footer-newsletter__body {
    max-width: min(100%, clamp(294px, calc(50.265vw + 97.97px), 484px));
    min-height: 0;
    margin-top: 14px;
    margin-bottom: 19px;
  }
  .footer-newsletter__form {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;   /* form → legal @390 */
  }
  /* Input/button: 288px @390 → 560px @768 (newsletter − 40px) */
  .footer-newsletter__input,
  .footer-newsletter__btn {
    flex: 0 0 auto;
    width: min(100%, clamp(288px, calc(71.958vw + 7.37px), 560px));
    height: 48px;
  }
  /* Legal: 282×70 @390 → 398×45 @768 · legal→social 55 → 34 */
  .footer-newsletter__legal {
    max-width: clamp(282px, calc(30.688vw + 162.3px), 398px);
    min-height: clamp(45px, calc(95.79px - 6.6138vw), 70px);
    margin-bottom: clamp(34px, calc(76.71px - 5.5556vw), 55px);
  }
  /* Social (wireframe @390): 22px icons · 24.95px gap @390 →
     47px icons · 28px gap @768. Row @390 = 22×6 + 24.95×5 = 256.75px
     (fits the 358px content width). */
  .footer-social { gap: clamp(24.95px, calc(0.80688vw + 21.803px), 28px); }
  .footer-social__link {
    width: clamp(22px, calc(6.6138vw - 3.794px), 47px);
    height: clamp(22px, calc(6.6138vw - 3.794px), 47px);
    flex-shrink: 0;
  }


  /* ── LEGAL BAR + nav sizing — stack legal links into a centred column ── */

  .footer-nav {
    width: min(100%, clamp(248px, calc(27.778vw + 139.67px), 353px));
  }
  .footer-nav-col__acc > summary    { height: 47px; padding: 0; }
  .footer-nav-col--disc .footer-nav-col__acc > summary { height: 48px; }
  .footer-nav-col__acc > summary > span { width: 180px; height: 22px; }
  .footer-nav-col__list {
    padding-bottom: 0;
    padding-left: 16px;
    gap: 16px;
  }
  .footer-nav-col__list a    { display: flex; align-items: center; height: 44px; padding: 0; }

  /* 44px top gap above stacked legal links (spec) · 22px bottom (Figma) ·
     58px links-stack → copyright gap (Figma 390/360) */
  .footer-bottom             { min-height: auto; padding-block: 44px 22px; }
  .footer-bottom__inner      { align-items: center; gap: 58px; }
  .footer-bottom__links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .footer-bottom__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    white-space: normal;
    text-align: center;
  }
  .footer-bottom__copyright  { width: 240px; text-align: center; }
}





/* =============================================================
   360px MOBILE
   Same structure as the ≤767 mobile tier; gutter locked at 16px.
   Inner content = 360 − 32 = 328px — fluid clamps bottom out at
   their 390-anchor minimums. Pill slightly narrower to fit.
   ============================================================= */
@container footer (max-width: 360px) {
  .footer-main,
  .footer-bottom {
    padding-inline: 16px;
  }
  .footer-main {
    /* explicit re-declare: clamp above bottoms out at 73px ≤390 */
    padding-block: 217px 73px;
  }
  /* Fill the 328px inner width */
  .footer-newsletter         { width: 100%; }
  .footer-newsletter__input,
  .footer-newsletter__btn    { width: 100%; }
  /* Accordion stays 248px; legal stack spans full width (wireframe) */
  .footer-nav                { width: min(248px, 100%); }
  .footer-bottom__links      { width: 100%; }
  /* Narrower pill for 360px viewport */
  .footer-brand__deco        { right: -56px; width: 290px; }
}

/* =============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .footer-newsletter__input,
  .footer-newsletter__btn,
  .footer-social__link,
  .footer-nav-col__list a,
  .footer-nav-col__chevron,
  .footer-bottom__links a,
  .footer-brand__region,
  .footer-brand__logo {
    transition: none;
  }
  .footer-newsletter__btn:hover,
  .footer-social__link:hover {
    transform: none;
  }
}