/** Shopify CDN: Minification failed

Line 492:0 Expected "}" to go with "{"

**/
/* Outfit — used for the newsletter heading + subhead (matches Figma's
   "Display small" + "Body medium" type styles). Loaded inline here so
   this section is self-contained. Browser dedupes if Outfit is also
   loaded elsewhere (e.g. social_feed). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Brand Footer — three stacked rows, each toggleable.
 *
 *   Row 1 (.fb__row--newsletter) : statement-typography email + mobile inputs
 *   Row 2 (.fb__row--links)      : brand symbol + legal links | Follow + social icons
 *   Row 3 (.fb__row--wordmark)   : oversized opacity-25 brand watermark closer
 *
 * Matches the one8 C02 Footer structure: rows are separated by 1px
 * --fb-divider rules, accent color drives the newsletter CTA pill.
 */

.fb {
  background-color: var(--fb-bg, #1A1A1A);
  color: var(--fb-text, #FFF);
  box-sizing: border-box;
}

.fb__row {
  border-top: 1px solid var(--fb-divider, #666);
  box-sizing: border-box;
}
.fb__row:first-of-type { border-top: 0; }

.fb__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Row 1: Newsletter ─────────────────────────────────────────────── */

.fb__row--newsletter {
  /* Cascade:
       1. --fb-ns-pt / --fb-ns-pb (granular knobs, if set)
       2. --fb-ns-pad-block (legacy combined knob, if set)
       3. 80px default
     Each side falls back independently — set just one side without
     affecting the other. */
  padding-block:
    var(--fb-ns-pt, var(--fb-ns-pad-block, 80px))
    var(--fb-ns-pb, var(--fb-ns-pad-block, 80px));
  padding-inline: var(--fb-ns-pad-inline, 48px);
}

.fb__ns-header {
  margin-block-end: var(--fb-ns-header-mb, 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb__ns-heading {
  margin: 0;
  align-self: stretch;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: var(--fb-ns-heading-size, 48px);
  font-weight: var(--fb-ns-heading-weight, 700);
  line-height: var(--fb-ns-heading-lh, 1.16);
  color: var(--fb-text, #FFF);
  letter-spacing: -0.01em;
}
.fb__ns-subhead {
  margin: 0;
  align-self: stretch;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: var(--fb-ns-subhead-size, 18px);
  font-weight: var(--fb-ns-subhead-weight, 400);
  line-height: var(--fb-ns-subhead-lh, 1.44);
  color: var(--fb-text, #FFF);
}
.fb__ns-form { margin: 0; }
.fb__ns-fields {
  display: flex;
  align-items: center;
  gap: 24px;
}
.fb__ns-field {
  flex: 1 1 0;
  min-width: 0;
  border-bottom: 1px solid var(--fb-divider, #666);
}
.fb__ns-input {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--fb-text, #FFF);
  caret-color: var(--fb-ns-cta-bg, #00FFFF);
  font-size: var(--fb-ns-placeholder-size, 60px);
  font-weight: var(--fb-ns-placeholder-weight, 700);
  line-height: 1.15;
  padding-block: 12px;
  padding-inline: 0;
  outline: none;
}
/* Text-selection highlight — without this the highlight is invisible against
   the dark footer background. Use the brand accent so ctrl+A is obvious. */
.fb__ns-input::selection {
  background: var(--fb-ns-cta-bg, #00FFFF);
  color: var(--fb-ns-cta-fg, #1A1A1A);
}
.fb__ns-input::-moz-selection {
  background: var(--fb-ns-cta-bg, #00FFFF);
  color: var(--fb-ns-cta-fg, #1A1A1A);
}
.fb__ns-input::placeholder {
  color: var(--fb-text, #FFF);
  opacity: 1;
}
.fb__ns-input:focus { border-bottom-color: var(--fb-ns-cta-bg, currentColor); }
/* Inline validation state. Only fires after blur (set by JS); we don't use
   :invalid alone because that paints fields red on page load before the
   user has typed anything. */
.fb__ns-input--invalid { border-bottom-color: #FF6B6B; }
.fb__ns-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  line-height: 1.3;
}

.fb__ns-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 16px 32px;
  gap: 10px;
  border-radius: 37px;
  background: var(--fb-ns-cta-bg, #00FFFF);
  color: var(--fb-ns-cta-fg, #1A1A1A);
  border: 0;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 200ms ease, transform 200ms ease;
}
.fb__ns-cta:hover { opacity: 0.85; transform: translateY(-1px); }
.fb__ns-cta:focus-visible {
  outline: 2px solid var(--fb-ns-cta-bg, #00FFFF);
  outline-offset: 3px;
}

/* ── Row 2: Links + Follow ────────────────────────────────────────── */

.fb__row--links {
  padding-block: var(--fb-links-pad-block, 40px);
  padding-inline: var(--fb-links-pad-inline, 24px);
}
.fb__links-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.fb__col { display: flex; align-items: center; }
.fb__col--left {
  flex: 1 1 0;
  gap: 24px;
  align-items: flex-start !important;
}
.fb__col--right { flex: 0 0 auto; flex-wrap: wrap; flex-direction: column; align-items: flex-start; gap: 8px; }

.fb__symbol {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fb__symbol-img {
  width: var(--fb-symbol-w, 24px);
  height: auto;
  display: block;
}

.fb__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
  flex: 1 1 0;
  justify-content: center;
}
.fb__legal-link {
  color: var(--fb-text, #FFF);
  text-decoration: none;
  font-size: var(--fb-link-size, 14px);
  line-height: 22px;
  transition: opacity 200ms ease;
}
.fb__legal-link:hover { opacity: 0.7; }

.fb__divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: var(--fb-divider, #666);
}

.fb__follow-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.fb__follow-subhead {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.85;
}

.fb__social {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fb__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #FFF;
  color: #1A1A1A;
  border-radius: 999px;
  transition: opacity 200ms ease;
}
.fb__social-link:hover { opacity: 0.75; }
.fb__social-link svg { width: 60%; height: 60%; }

/* ── Row 3: Wordmark band ─────────────────────────────────────────── */

.fb__row--wordmark {
  padding-block: var(--fb-wm-pad-block, 32px);
  padding-inline: 80px;
}
.fb__wm-inner {
  display: flex;
  justify-content: center;
  width: 100%;
  opacity: var(--fb-wm-opacity, 0.25);
}
@media (max-width: 900px) {
  .fb__wm-img {
    width: 325px;
    height: 102px;
    max-width: 100%;
    object-fit: contain;
    margin-inline: auto;
  }
}

/* Glyph mode — each vector piece is positioned by Figma-style insets
   (top / right / bottom / left as % of the container). Container has
   a fixed HEIGHT (user-controllable knob); width auto-derives from
   the aspect ratio so the wordmark scales predictably regardless of
   viewport width. Centered horizontally. */
.fb__wm-glyphs {
  position: relative;
  height: var(--fb-wm-band-h, 180px);
  aspect-ratio: var(--fb-wm-aspect-w, 1572) / var(--fb-wm-aspect-h, 519);
  max-width: 100%;
  margin-inline: auto;
}
.fb__wm-glyph {
  position: absolute;
  display: block;
}
.fb__wm-glyph-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fb__wm-text {
  font-size: clamp(80px, 18vw, 320px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: currentColor;
  text-transform: lowercase;
  width: var(--fb-wm-max-width, 80%);
  text-align: center;
}

@media (max-width: 900px) {
  /* Tighten the newsletter row so placeholder text doesn't clip on narrow
     viewports. Both padding-inline AND the input font-size come down. */
 .fb__row--newsletter {
  padding-inline: var(--fb-ns-mobile-pad-inline, 20px);
  padding-block:
    var(--fb-ns-mobile-pt, var(--fb-ns-mobile-pad-block, var(--fb-ns-pt, var(--fb-ns-pad-block, 80px))))
    var(--fb-ns-mobile-pb, var(--fb-ns-mobile-pad-block, var(--fb-ns-pb, var(--fb-ns-pad-block, 80px))));
}
  .fb__ns-fields { flex-direction: column; align-items: stretch; gap: 16px; }
  .fb__ns-input { font-size: var(--fb-ns-mobile-placeholder-size, 22px); }
  /* Inputs can't outgrow their parent — guards against any horizontal overflow
     from extra-long placeholders. */
  .fb__ns-input,
  .fb__ns-field { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .fb__ns-heading {
    font-size: var(--fb-ns-mobile-heading-size, var(--fb-ns-heading-size, 48px));
  }
  .fb__ns-subhead {
    font-size: var(--fb-ns-mobile-subhead-size, var(--fb-ns-subhead-size, 18px));
  }
  .fb__ns-header {
    margin-block-end: var(--fb-ns-mobile-header-mb, var(--fb-ns-header-mb, 40px));
  }
  .fb__ns-cta {
    height: var(--fb-ns-mobile-cta-height, 50px);
  }
  /* Links row → vertical stack on mobile:
   symbol on top → legal links each on own row → divider → Follow + socials. */
  .fb__links-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .fb__row--links {
    --fb-mobile-rhythm: 28px;
    padding-block: var(--fb-mobile-rhythm);
  }

  .fb__col--left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fb-mobile-rhythm);
    width: 100%;
    padding-block-end: var(--fb-mobile-rhythm);
  }

  .fb__legal-links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--fb-mobile-rhythm);
    width: 100%;
  }
  .fb__legal-link {
    font-size: 18px;
    line-height: 28px;
  }

    /* Same rhythm for the social icons row below the Follow heading */
  .fb__col--right .fb__social {
    margin-block-start: var(--fb-mobile-rhythm);
  }

  .fb__col--right {
    width: 100%;
    align-items: flex-start;
    border-top: 1px solid var(--fb-divider, #666);
    padding-block-start: var(--fb-mobile-rhythm);
  }

  /* Vertical divider gone — horizontal divider above Follow instead */
  .fb__divider { display: none; }
  .fb__col--right {
    width: 100%;
    align-items: flex-start;
    border-top: 1px solid var(--fb-divider, #666);
    padding-block-start: 28px;
  }
  .fb__symbol-img { width: 16px; }
  /* Wordmark band — mobile knobs (all fall back to desktop if 0/unset). */
  .fb__row--wordmark {
    padding-block:
      var(--fb-wm-mobile-pad-block, var(--fb-wm-pad-block, 32px));
    padding-inline: var(--fb-wm-mobile-pad-inline, 24px);
  }
  .fb__row--wordmark .fb__wm-inner {
    opacity: var(--fb-wm-mobile-opacity, var(--fb-wm-opacity, 0.25));
  }
  .fb__row--wordmark .fb__wm-glyphs {
    height: var(--fb-wm-mobile-band-h, var(--fb-wm-band-h, 180px));
      border-top: 0;

  }
    .fb__ns-cta {
  justify-content: center;
  text-align: center;
}
  .fb__row--links { padding-block: var(--fb-m-links-pad-block, 28px); }
  .fb__col--left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fb-m-symbol-gap, 24px);
    width: 100%;
    padding-block-end: var(--fb-m-links-to-divider, 28px);
  }
  .fb__legal-links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--fb-m-between-links, 12px);
    width: 100%;
  }
 .fb__col--right {
  
  width: calc(100% + 2 * var(--fb-links-pad-inline, 24px));
  margin-inline: calc(-1 * var(--fb-links-pad-inline, 24px));
  padding-inline: var(--fb-links-pad-inline, 24px);
  align-items: flex-start;
  border-top: 1px solid var(--fb-divider, #666);
  padding-block-start: 28px;
}
  .fb__col--right .fb__social {
    margin-block-start: var(--fb-m-follow-to-social, 28px);
  }
  .fb .fb__row--wordmark {
  border-top: 0 !important;
}
}
/* Desktop wordmark image — exact Figma 1572 × 519.
   Scales down proportionally on viewports narrower than 1572px so the
   wordmark never overflows the container, but stays at its design size
   on wide screens. */
@media (min-width: 901px) {
  .fb__wm-img {
    width: 1572px;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1572 / 519;
    margin-inline: auto;
    object-fit: contain;
    display: block;
  }


  .fb__links-inner { align-items: stretch; }
  .fb__col--left { align-items: center; }
  .fb__col--right { justify-content: center; }

  /* Stretch the divider beyond the row's padding-block so it touches
     the horizontal dividers above and below. Negative margin equal to
     the row's vertical padding does the trick. */
  .fb__divider {
    margin-block: calc(-1 * var(--fb-links-pad-block, 40px));
  }
}
.fb__ns-input {
  /* Blinking caret in the section accent color. Native browser caret
     blink already runs — we just make sure the color is visible. */
  caret-color: var(--fb-ns-cta-bg, #00FFFF);
  /* Tap-highlight (mobile Chrome / Safari) — no flash on tap. */
  -webkit-tap-highlight-color: transparent;
}

.fb__ns-input:focus,
.fb__ns-input:focus-visible {
  /* Kill the default focus ring / "white box" from the browser. */
  outline: none !important;
  box-shadow: none !important;
}

/* Chrome / Safari autofill paints a yellow/white background — undo it
   so the input keeps the section's dark background. */
.fb__ns-input:-webkit-autofill,
.fb__ns-input:-webkit-autofill:hover,
.fb__ns-input:-webkit-autofill:focus,
.fb__ns-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--fb-bg, #1A1A1A) inset !important;
  -webkit-text-fill-color: var(--fb-text, #FFFFFF) !important;
  caret-color: var(--fb-ns-cta-bg, #00FFFF) !important;
  transition: background-color 9999s ease-in-out 0s;
  

.fb__ns-error { color: var(--fb-ns-error-color, #999999); }