/* ==========================================================================
   Homepage-only styles — ashleybhopkins.com
   ==========================================================================
   Extracted verbatim from index.html's previous inline <style> block.

   NOT merged into case-study.css: this page reuses several of the same
   class/element names as the case studies (.hero, .hero-left, .hero-eyebrow,
   nav, body, footer, .footer-name, .gradient-band) with genuinely different
   rule bodies. Diffing them during this extraction found the two versions
   disagree on nearly every one of those shared names (different padding,
   different accent color, a 1-character-different gradient purple stop,
   etc.) — see DESIGN.md -> Inconsistencies. Combining them into one file
   would have silently broken whichever page loaded second, so the homepage
   keeps its own file instead.

   Requires tokens.css + styles.css to be linked first, same as case-study
   pages, for --ink / --muted / --rule / --bg / --serif / --mono and the
   shared reset / :focus-visible / reduced-motion rules.

   One safe rename made during extraction: every var(--cream) became
   var(--bg) — same value (#faf7f3) as the case studies' token of the same
   name, just a different name for it. Zero rendering change; logged in
   DESIGN.md.
   ========================================================================== */

:root {
      --accent: #c8573a;
      --grad-a: #f7c59f;
      --grad-b: #e8a0c4;
      --grad-c: #a0c4e8;
      --grad-d: #f9e4b7;
      --serif-light: 'Cormorant Garamond', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;

      /* Hero label color. The global --muted (#756e66) is only 4.71:1 on flat
         cream, so it has almost no headroom — over the hero's grainient it
         measured 3.05:1, below WCAG AA's 4.5:1 for text under 24px. Darkened
         13% (same hue) and paired with .hero-grainient's 0.6 opacity below to
         clear 4.5:1. Applies to .hero-eyebrow and .hero-status only; the rest
         of the site keeps --muted. See DESIGN.md. */
      --muted-on-gradient: #666059;
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--serif-light);
      font-weight: 300;
      font-size: 17px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      cursor: none;
    }

    /* Custom cursor */
    .cursor {
      width: 8px; height: 8px;
      background: var(--ink);
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s;
    }
    .cursor-ring {
      width: 32px; height: 32px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: all .12s ease-out;
      opacity: 0.5;
    }
    body:has(a:hover) .cursor { background: var(--accent); width: 12px; height: 12px; }
    body:has(a:hover) .cursor-ring { border-color: var(--accent); width: 44px; height: 44px; }

    /* Nav */
    /* Nav sits in place over the hero and only becomes fixed once the user has
       scrolled past it — it then slides back down. Previously it was fixed from
       the start, so it hovered over the hero permanently. The .scrolled class is
       applied by the inline script in index.html at a 120px threshold (chosen so
       the bar is genuinely off-screen before it re-enters, otherwise it appears
       to jump). */
    nav {
      position: absolute; top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 48px;
      mix-blend-mode: multiply;
      background: rgba(250, 247, 243, 0);
      /* NO backdrop-filter here on purpose. It used to be `blur(0)` so the blur
         could transition in on scroll — a harmless no-op in Chrome, but in Safari
         ANY backdrop-filter value (zero included) promotes the element to its own
         compositing layer and makes it sample the backdrop. Paired with the
         mix-blend-mode above, WebKit then multiplied that sampled rectangle against
         the page and the nav showed up as a dark band across the top of the hero.
         Invisible in Chrome, obvious in Safari and on iPhone. The blur now only
         appears on .scrolled, where mix-blend-mode is switched to normal so the two
         never coexist. Do not re-add a zero-value backdrop-filter here. */
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s;
    }
    nav.scrolled {
      position: fixed;
      animation: navSlideDown .3s ease-out;
      mix-blend-mode: normal;
      background: rgba(250, 247, 243, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom-color: var(--rule);
    }
    @keyframes navSlideDown {
      from { transform: translateY(-100%); }
      to   { transform: translateY(0); }
    }
    .nav-name {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-decoration: none;
      color: var(--ink);
    }
    .nav-links {
      display: flex; gap: 40px;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      /* 0.6 measured 4.16:1 against the hero gradient; 0.63 is the minimum
         that clears WCAG AA. Don't lower this. */
      opacity: 0.63;
      transition: opacity .2s;
    }
    .nav-links a:hover { opacity: 1; }

    /* Hero */
    .hero {
      min-height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 140px 48px 64px;
      position: relative;
      overflow: hidden;
      gap: 48px;
      background: var(--bg);
    }

    /* Grainient-style moving grain gradient (palette: peach / pink / blue) */
    .hero-grainient {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      z-index: 0;
      /* Softened from full strength so hero label text clears WCAG AA — see
         --muted-on-gradient above. Raising this darkens the backdrop and will
         push those labels back below 4.5:1. */
      opacity: 0.6;
    }
    .hero-grainient.is-fallback {
      background:
        radial-gradient(ellipse 70% 80% at 18% 55%, rgba(247, 197, 159, 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 55% 60% at 78% 25%, rgba(232, 160, 196, 0.45) 0%, transparent 58%),
        radial-gradient(ellipse 50% 55% at 55% 85%, rgba(160, 196, 232, 0.4) 0%, transparent 60%),
        var(--bg);
    }

    /* Soft fade into the page below — same idea as case-study hero-right::after */
    .hero-fade {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: min(55%, 420px);
      background: linear-gradient(
        0deg,
        var(--bg) 0%,
        rgba(250, 247, 243, 0.92) 22%,
        rgba(250, 247, 243, 0.55) 48%,
        rgba(250, 247, 243, 0.18) 72%,
        transparent 100%
      );
      pointer-events: none;
      z-index: 1;
    }

    .hero-left,
    .hero-right {
      position: relative;
      z-index: 2;
    }
    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
    }
    .hero-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted-on-gradient);
      margin-bottom: 32px;
    }
    .hero-headline {
      font-family: var(--serif);
      font-size: 65px;
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 0;
      max-width: 18ch;
    }
    .hero-headline em {
      font-style: italic;
      background: linear-gradient(135deg, #e8834a 0%, #c8573a 30%, #c456a0 65%, #7b6fe8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    /* Gradient on a few plain words too for richness */
    .hero-headline .grad-word {
      background: linear-gradient(135deg, #c8573a 0%, #c456a0 60%, #7b6fe8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    /* Pixel sprite at the end of the headline. Sized in em so it tracks the
       headline clamp on mobile; image-rendering keeps the pixels hard rather
       than letting the browser smooth-scale them into mush on Retina. */
    /* Sprite wrapper: positioning context for the hearts. inline-block so it
       sits in the text flow exactly as the bare <img> did. */
    .hero-pixel-wrap {
      position: relative;
      display: inline-block;
      line-height: 0;
    }
    /* Pixel hearts. Inline SVG (built in hearts.js) rather than a mask, because
       a mask is alpha-only and this style needs three colours — outline, fill
       and highlight. Being DOM rather than a fetched image, img-src doesn't
       apply, so _headers needs no change. */
    .hero-heart {
      position: absolute;
      left: calc(50% + var(--x, 0em));
      top: 0;
      width: 0.22em;
      pointer-events: none;
      will-change: transform, opacity;
      opacity: 0;
      line-height: 0;
    }
    .hero-heart svg {
      display: block;
      width: 100%;
      height: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-heart { display: none; }
    }
    .hero-pixel {
      display: inline-block;
      /* em still tracks the headline, but the clamp puts a floor under it:
         .hero-headline drops to 34px on phones, and a pure em shrank her to
         ~27px there. Floor 38px / ceiling 60px. */
      height: clamp(38px, 0.9em, 60px);
      width: auto;
      margin-left: 0.08em;
      vertical-align: -0.08em;
      image-rendering: crisp-edges;  /* Firefox */
      image-rendering: pixelated;    /* Chrome/Safari — wins where supported */
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 8px;
      width: 100%;
    }
    .hero-bio {
      font-family: var(--sans);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.65;
      color: var(--ink);
      width: 100%;
      max-width: 760px;
      margin-bottom: 0;
    }
    .hero-bio strong {
      font-weight: 500;
    }
    .hero-status {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--muted-on-gradient);
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4caf50;
      animation: pulse 2.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* Divider */
    .rule {
      width: 100%; height: 1px;
      background: var(--rule);
      margin: 0 48px;
      width: calc(100% - 96px);
    }

    /* Work section */
    .section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 48px 48px 24px;
      margin-bottom: 0;
    }
    .section-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .section-count {
      font-family: var(--serif);
      font-size: 13px;
      font-style: italic;
      color: var(--muted);
    }

    /* ── WORK GRID ── */
    .work-list {
      padding: 0 48px 48px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 32px;
      row-gap: 64px;
    }

    /* First card spans full width */
    .case-study:first-child {
      grid-column: 1 / -1;
    }

    .case-study {
      display: block;
      text-decoration: none;
      color: inherit;
      position: relative;
      background: var(--bg);
    }

    /* The image */
    .case-img {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      position: relative;
    }
    /* First card taller */
    .case-study:first-child .case-img {
      aspect-ratio: 21 / 9;
    }

    .case-img-inner {
      position: absolute;
      inset: 0;
      z-index: 1;
      transition: transform .6s cubic-bezier(.25,.46,.45,.94);
    }
    .case-img-inner img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .case-study:hover .case-img-inner { transform: scale(1.04); }

    /* Branded gradients */
    .img-oura        { background: linear-gradient(135deg, #0f1218 0%, #1a2436 40%, #1e3a5f 70%, #2a4a6b 100%); }
    .img-instacart-home { background: linear-gradient(135deg, #003d00 0%, #0a5c0a 40%, #1a8a1a 70%, #43b02a 100%); }
    .img-spotify     { background: linear-gradient(135deg, #121212 0%, #1a1a1a 40%, #1DB954 80%, #158f3f 100%); }
    .img-voice       { background: linear-gradient(135deg, #191414 0%, #1a1a2e 50%, #1DB954 100%); }
    .img-instacart   { background: linear-gradient(135deg, #0a3d0a 0%, #43b02a 60%, #c8f59f 100%); }
    .img-soundcloud  { background: linear-gradient(135deg, #1e1e1e 0%, #ff5500 60%, #ff8c00 100%); }
    .img-paypal      { background: linear-gradient(135deg, #003087 0%, #009cde 60%, #012169 100%); }
    .img-beast       { background: linear-gradient(135deg, #1a0000 0%, #8b0000 50%, #c0392b 100%); }
    .img-vibes       { background: linear-gradient(135deg, #2d1b69 0%, #c456a0 50%, #f7c59f 100%); }

    /* Orb shapes — only on cards WITHOUT a real image (e.g. Vibes).
       Cards with an <img> hide them so the photo reads crisp edge-to-edge. */
    .case-img:not(:has(img))::before {
      content: '';
      position: absolute;
      width: 55%; height: 70%;
      border-radius: 50%;
      top: -15%; right: -10%;
      background: rgba(255,255,255,0.07);
      filter: blur(32px);
      z-index: 0;
      pointer-events: none;
    }
    .case-img:not(:has(img))::after {
      content: '';
      position: absolute;
      width: 40%; height: 55%;
      border-radius: 50%;
      bottom: -10%; left: 5%;
      background: rgba(255,255,255,0.05);
      filter: blur(24px);
      z-index: 0;
      pointer-events: none;
    }

    /* Company chip over image — sibling of zoom layer so it stays pinned */
    .case-img-label {
      position: absolute;
      top: 16px; left: 16px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      background: rgba(0,0,0,0.28);
      backdrop-filter: blur(8px);
      padding: 5px 10px;
      border-radius: 100px;
      z-index: 3;
      border: 1px solid rgba(255,255,255,0.12);
      pointer-events: none;
    }

    /* Text block below image */
    .case-body {
      padding: 20px 0 0;
    }

    .case-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .tag {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .tag + .tag::before {
      content: '·';
      margin-right: 6px;
      color: var(--muted);
    }

    .case-footer {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .case-title {
      font-family: var(--serif);
      font-size: clamp(20px, 2.2vw, 30px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.01em;
      transition: color .2s;
      flex: 1;
    }
    /* First card gets bigger title */
    .case-study:first-child .case-title {
      font-size: clamp(26px, 3.2vw, 44px);
    }

    .case-study:hover .case-title {
      background: linear-gradient(135deg, #e8834a 0%, #c456a0 55%, #7b6fe8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .case-index {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      flex-shrink: 0;
      padding-top: 4px;
    }
    .case-footer-arrow {
      font-family: var(--serif);
      font-size: 28px;
      color: var(--muted);
      flex-shrink: 0;
      transition: transform .3s, color .2s;
      line-height: 1;
      position: relative;
      z-index: 1;
    }
    .case-study:hover .case-footer-arrow {
      transform: translate(4px, -4px);
      background: linear-gradient(135deg, #e8834a, #c456a0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* About section */
    .about {
      display: grid;
      grid-template-columns: minmax(0, 850px) minmax(320px, 1fr);
      gap: 40px;
      padding: 100px 48px;
    }
    .about-left {
      max-width: 770px;
    }
    /* Pixel sprite above the About heading. Its own clamp at 1.5x the heading's
       (which is clamp(40px, 5vw, 68px)) so the two scale together, rather than
       an em that would resolve against .about-left's body font-size. */
    .about-pixel {
      display: block;
      height: clamp(60px, 7.5vw, 102px);
      width: auto;
      margin-bottom: 12px;
      image-rendering: crisp-edges;  /* Firefox */
      image-rendering: pixelated;    /* Chrome/Safari — wins where supported */
    }
    .about-heading {
      font-family: var(--serif);
      font-size: clamp(40px, 5vw, 68px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 40px;
    }
    .about-heading em {
      font-style: italic;
      background: linear-gradient(135deg, #e8834a 0%, #c456a0 55%, #7b6fe8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .about-text {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 18px;
      line-height: 1.75;
      color: var(--ink);
      margin-bottom: 24px;
    }
    .about-right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-width: 0;
    }
    .about-logos {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 100px;
      column-gap: 20px;
      width: 100%;
      margin-left: -20px;
      align-items: center;
      justify-items: center;
    }
    .about-logo {
      background-color: var(--ink);
      mask-image: var(--logo);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      -webkit-mask-image: var(--logo);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      transition: transform 0.3s ease-out;
    }
    .about-logo:hover {
      transform: scale(1.06);
    }
    .about-logo--netflix {
      --logo: url('/assets/img/logos/netflix.svg');
      width: min(124px, 100%); aspect-ratio: 124 / 34; height: auto;
    }
    .about-logo--oura {
      --logo: url('/assets/img/logos/oura.svg');
      width: min(64px, 100%); aspect-ratio: 64 / 64; height: auto;
    }
    .about-logo--instacart {
      --logo: url('/assets/img/logos/instacart.svg');
      width: min(158px, 100%); aspect-ratio: 158 / 25; height: auto;
    }
    .about-logo--spotify {
      --logo: url('/assets/img/logos/spotify.svg');
      width: min(61px, 100%); aspect-ratio: 61 / 61; height: auto;
    }
    .about-logo--soundcloud {
      --logo: url('/assets/img/logos/soundcloud.svg');
      width: min(78px, 100%); aspect-ratio: 78 / 78; height: auto;
    }
    .about-logo--paypal {
      background-color: transparent;
      background-image: url('/assets/img/logos/paypal.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      mask-image: none;
      -webkit-mask-image: none;
      width: min(45px, 100%); aspect-ratio: 45 / 56; height: auto;
    }
    .about-logo--amex {
      --logo: url('/assets/img/logos/amex.svg');
      width: min(72px, 100%); aspect-ratio: 72 / 64; height: auto;
    }
    .about-logo--newsweek {
      --logo: url('/assets/img/logos/newsweek.svg');
      width: min(130px, 100%); aspect-ratio: 130 / 22; height: auto;
    }
    .about-logo--dailybeast {
      --logo: url('/assets/img/logos/dailybeast.svg');
      width: min(135px, 100%); aspect-ratio: 135 / 30; height: auto;
    }

    /* Writing — section removed from index.html 2026-07-29 (Phase 9B).
       Rules deleted with it; restore from git history if the section returns. */

    /* Gradient band */
    .gradient-band {
      height: 0.5px;
      background: linear-gradient(90deg, #f7c59f, #e8834a, #c456a0, #7b6fe8, #a0c4e8, #f7c59f);
      background-size: 300% 100%;
      animation: gradShift 8s linear infinite;
    }
    @keyframes gradShift {
      0%   { background-position: 0% 50%; }
      100% { background-position: 300% 50%; }
    }

    /* Footer */
    footer {
      padding: 60px 48px;
      border-top: 1px solid var(--rule);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 140%, rgba(232,160,196,0.18) 0%, rgba(160,196,232,0.14) 45%, transparent 70%);
      pointer-events: none;
    }
    .footer-name {
      font-family: var(--serif);
      font-size: 28px;
      font-style: italic;
      font-weight: 400;
      background: linear-gradient(135deg, #e8834a 0%, #c456a0 50%, #7b6fe8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .footer-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }
    .footer-links a {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
    }
    .footer-links a:hover { color: var(--ink); }
    .footer-copy {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.08em;
    }

    /* Fade-in animation */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger children */
    .stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

    @media (max-width: 900px) {
      .work-list { grid-template-columns: 1fr; padding: 0 24px 32px; }
      .case-study:first-child { grid-column: 1; }
      .case-study:first-child .case-img { aspect-ratio: 16/9; }
    }
    @media (max-width: 768px) {
      nav { padding: 16px 24px; }
      .hero { grid-template-columns: 1fr; padding: 120px 24px 60px; gap: 32px; }
      .hero-right { margin-top: 0; }
      .section-header { padding-left: 24px; padding-right: 24px; }
      .about { grid-template-columns: 1fr; padding: 60px 24px; gap: 40px; }
      /* Headline: the desktop clamp bottoms out at 52px, which stays huge on a
         phone and wraps into a wall of type. Re-clamped for small screens. */
      .hero-headline { font-size: clamp(34px, 8.5vw, 52px); }

      /* margin-left:-20px is a desktop optical tweak for the right-hand column.
         Once the About section collapses to one column the logos sit under the
         body copy, where that negative margin pushed them 20px left of every
         other element (text starts at 24px, logos started at 4px).
         column-gap was also 40px: with 3 columns on a 390px phone that leaves
         ~87px per column, but instacart/newsweek/dailybeast are 96–112px wide,
         so they overflowed their own column. Tighter gap + max-width caps it. */
      .about-logos { row-gap: 28px; column-gap: 16px; max-width: 100%; margin-left: 0; justify-items: center; }
      .about-logo { max-width: 100%; }
      .about-logo--netflix { width: 88px; height: 24px; }
      .about-logo--oura { width: 48px; height: 48px; }
      .about-logo--instacart { width: 112px; height: 18px; }
      .about-logo--spotify { width: 44px; height: 44px; }
      .about-logo--soundcloud { width: 56px; height: 56px; }
      .about-logo--paypal { width: 34px; height: 42px; }
      .about-logo--amex { width: 50px; height: 45px; }
      .about-logo--newsweek { width: 96px; height: 16px; }
      .about-logo--dailybeast { width: 96px; height: 22px; }
      footer { flex-direction: column; gap: 24px; padding: 40px 24px; text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; }
    }