.about {
      --cream: #f6f2ea;
      --cream-soft: #fff6ee;
      --brand-cream: #F6F2EA;
      --charcoal: #2c2c2c;
      --red: #a32626;
      --red-dark: #8e1f1f;
      --gold: #fcb832;
      --blue: #6fa7cc;
      --gray: #6b6b6b;
      --white: #ffffff;
      --overlay: rgba(0,0,0,.52);
      --border: rgba(44,44,44,.18);
      --shadow: 0 24px 70px rgba(44,44,44,.14);
    }

    .about, .about * {
      box-sizing: border-box;
      font-family: 'EB Garamond', Georgia, serif;
    }

    .about {
      color: var(--charcoal);
      /* live: a fixed white layer covers the viewport, so sections without their own bg read white */
      background: #fff;
      font-size: 18px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .about a { color: inherit; text-decoration: none; }
    .about img { max-width: 100%; display: block; }

    .about h1,
    .about h2,
    .about h3 {
      line-height: 1.05;
      margin: 0;
    }

    .about p { margin: 0; }

    .about .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      background: var(--red);
      color: var(--cream-soft);
      border: none;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .03em;
      transition: all .3s ease;
      cursor: pointer;
      animation: buttonPulseGlow 2.6s infinite;
    }

    .about .button:hover {
      background: var(--red-dark);
      transform: translateY(-2px);
      box-shadow:
        0 8px 30px rgba(163,38,38,.35),
        0 0 25px rgba(252,184,50,.22);
    }

    .about .button.secondary {
      background: transparent;
      color: var(--red);
      border-color: var(--red);
      animation: none;
    }

    .about .button.secondary:hover {
      background: var(--red);
      color: var(--white);
    }

    @keyframes buttonPulseGlow {
      0% { box-shadow: 0 0 0 0 rgba(163,38,38,.42); }
      70% { box-shadow: 0 0 0 16px rgba(163,38,38,0); }
      100% { box-shadow: 0 0 0 0 rgba(163,38,38,0); }
    }

    .about .hero {
      min-height: 650px;
      display: grid;
      place-items: center;
      padding: 150px 20px 110px;
      color: var(--white);
      text-align: center;
      background:
        linear-gradient(var(--overlay), var(--overlay)),
        url('../assets/img/about-hero.webp') center/cover fixed;
      position: relative;
      overflow: hidden;
    }

    .about .hero::after {
      content: '';
      position: absolute;
      left: -10%;
      right: -10%;
      bottom: -45px;
      height: 100px;
      background: var(--red); /* the red media section now follows the hero */
      border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    }

    .about .hero-content {
      max-width: 920px;
      position: relative;
      z-index: 1;
      transform: translateY(-45px);
    }

    .about .hero h1 {
      font-size: 65px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .about .hero p {
      font-size: 30px;
      font-weight: 600;
      max-width: 860px;
      margin: 28px auto 36px;
      line-height: 1.35;
    }

    .about section {
      padding: 86px clamp(18px, 5vw, 72px);
    }

    .about .container {
      max-width: 1180px;
      margin: 0 auto;
    }

    .about .section-intro {
      max-width: 900px;
      margin: 0 auto 52px;
      text-align: center;
    }

    .about .section-intro h2,
    .about .split-copy h2,
    .about .media-section h2,
    .about .beliefs-section h2,
    .about .statement h2,
    .about .cta-section h2 {
      font-size: 34px;
      font-weight: 600;
      line-height: 1.3;
    }

    .about .section-intro h2,
    .about .split-copy h2,
    .about .beliefs-section h2,
    .about .cta-section h2 {
      color: var(--red);
    }

    .about .section-intro p {
      color: var(--gray);
      font-size: 21px;
      max-width: 760px;
      margin: 14px auto 0;
    }

    .about .split-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 42px;
      max-width: 1120px;
      margin: 0 auto;
      align-items: center;
    }

    .about .split-image {
      width: 100%;
      height: 560px;
      object-fit: cover;
      border: 10px solid var(--white);
      box-shadow: var(--shadow);
      border-radius: 5px;
    }

    .about .split-copy {
      background: var(--white);
      padding: 46px;
      border: 2px solid rgba(163,38,38,.16);
      box-shadow: var(--shadow);
      border-radius: 5px;
    }

    .about .split-copy h2 {
      margin-bottom: 22px;
    }

    .about .split-copy p {
      font-size: 22px;
      color: var(--charcoal);
      margin-bottom: 18px;
    }

    .about .split-copy p:last-child {
      margin-bottom: 0;
    }

    .about .media-section {
      background: var(--red);
      color: var(--white);
      text-align: center;
    }

    .about .media-section h2 {
      color: var(--white);
      margin-bottom: 14px;
    }

    .about .media-section .section-intro p {
      color: rgba(255,255,255,.84);
    }

    .about .media-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1080px;
      margin: 0 auto;
      align-items: stretch;
    }

    .about .media-card {
      background: var(--cream-soft);
      border: 1px solid rgba(255,255,255,.3);
      padding: 28px;
      display: grid;
      place-items: center;
      min-height: 250px;
      box-shadow: 0 18px 45px rgba(0,0,0,.18);
      border-radius: 5px;
      transition: all .3s ease;
    }

    .about .media-card:hover {
      transform: translateY(-8px);
      border-color: var(--gold);
      box-shadow:
        0 24px 60px rgba(0,0,0,.26),
        0 0 0 2px rgba(252,184,50,.35),
        0 0 28px rgba(252,184,50,.24);
    }

    .about .media-card img {
      max-height: 190px;
      width: 100%;
      object-fit: contain;
      border-radius: 5px;
    }

    .about .beliefs-section {
      background: var(--cream);
    }

    .about .beliefs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1180px;
      margin: 0 auto;
    }

    .about .belief-card {
      background: var(--cream-soft);
      border: 1px solid var(--border);
      padding: 24px;
      text-align: center;
      box-shadow: 0 12px 30px rgba(44,44,44,.07);
      border-radius: 5px;
      transition: all .3s ease;
    }

    .about .belief-card:hover {
      transform: translateY(-8px);
      background: var(--white);
      border-color: rgba(163,38,38,.45);
      box-shadow:
        0 22px 55px rgba(44,44,44,.16),
        0 0 0 2px rgba(163,38,38,.12),
        0 0 26px rgba(163,38,38,.16);
    }

    .about .belief-card img {
      width: 100%;
      height: 245px;
      object-fit: cover;
      margin-bottom: 24px;
      border-radius: 5px;
    }

    .about .belief-card h3 {
      color: var(--red);
      font-size: 34px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .about .belief-card p {
      color: var(--gray);
      font-size: 20px;
    }

    .about .statement {
      min-height: 470px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--white);
      background:
        linear-gradient(var(--overlay), var(--overlay)),
        url('../assets/img/about-statement.webp') center/cover fixed;
      position: relative;
      overflow: hidden;
    }

    .about .statement::before {
      content: '';
      position: absolute;
      left: -10%;
      right: -10%;
      top: -45px;
      height: 100px;
      background: var(--red);
      border-radius: 0 0 50% 50% / 0 0 70% 70%;
    }

    .about .statement::after {
      content: '';
      position: absolute;
      left: -10%;
      right: -10%;
      bottom: -45px;
      height: 100px;
      background: var(--cream);
      border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    }

    .about .statement h2 {
      max-width: 900px;
      position: relative;
      z-index: 1;
      color: var(--white);
      text-shadow: 0 3px 20px rgba(0,0,0,.35);
    }

    .about .cta-section {
      background: var(--cream);
      text-align: center;
      padding-top: 90px;
      padding-bottom: 100px;
    }

    .about .cta-section h2 {
      color: var(--red);
      margin-bottom: 8px;
    }

    .about .cta-section p {
      color: var(--gray);
      font-size: 22px;
      max-width: 760px;
      margin: 24px auto 36px;
    }

    .about .button-row {
      display: flex;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .about .copyright {
      max-width: 1180px;
      margin: 34px auto 0;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.16);
      color: rgba(255,246,238,.7);
    }

    @media (max-width: 900px) {
      .about .hero {
        background-attachment: scroll;
        min-height: 590px;
      }

      .about .hero-content {
        transform: translateY(-20px);
      }

      .about .hero h1 {
        font-size: 42px;
      }

      .about .hero p {
        font-size: 24px;
      }

      .about .split-grid,
      .about .media-grid,
      .about .beliefs-grid,
      .about .footer-grid {
        grid-template-columns: 1fr;
      }

      .about .split-image {
        height: 420px;
      }

      .about .statement {
        background-attachment: scroll;
      }

      .about .split-copy {
        padding: 32px 26px;
      }
    }

    @media (max-width: 520px) {
      .about section {
        padding-top: 64px;
        padding-bottom: 64px;
      }

      .about .hero h1 {
        font-size: 36px;
      }

      .about .hero p {
        font-size: 21px;
      }

      .about .section-intro h2,
      .about .split-copy h2,
      .about .media-section h2,
      .about .beliefs-section h2,
      .about .statement h2,
      .about .cta-section h2,
      .about .belief-card h3 {
        font-size: 30px;
      }
    }