/* ========== ABOUT ========== (styles for this section live under .about-section below) */

    .about-container {
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-visual {
      position: relative;
      height: 520px;
    }

    .about-img-block {
      width: 100%;
      height: 100%;
      background: var(--dark);
      position: relative;
      overflow: hidden;
      clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    }

    .about-img-block::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 50%, var(--orange-dark) 100%);
      opacity: 0.9;
    }

    .about-grid-anim {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 1px;
      padding: 32px;
    }

    .about-grid-cell {
      border: 1px solid rgba(255, 69, 19, 0.08);
      transition: all 0.8s ease;
    }

    .about-grid-cell.active {
      background: rgba(255, 69, 19, 0.12);
      border-color: rgba(255, 69, 19, 0.35);
    }

    .about-floating-text {
      position: absolute;
      bottom: 44px;
      left: 36px;
      z-index: 2;
    }

    .about-floating-text .year {
      font-family: 'Sequel Sans Display', 'Aptos Display', Arial, sans-serif;
      font-size: 88px;
      font-weight: 700;
      color: var(--orange);
      line-height: 1;
      letter-spacing: -4px;
    }

    .about-floating-text .since {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      letter-spacing: 6px;
      text-transform: uppercase;
    }

    .about-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 360px;
      height: 360px;
      margin: -180px 0 0 -180px;
      border: 1px solid rgba(255, 69, 19, 0.06);
      border-radius: 50%;
      pointer-events: none;
      animation: orbitSpin 25s linear infinite;
    }

    .about-orbit::after {
      content: '';
      position: absolute;
      top: -3px;
      left: 50%;
      width: 6px;
      height: 6px;
      background: var(--orange);
    }

    @keyframes orbitSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .about-text-block .section-desc {
      margin-bottom: 36px;
    }

    .about-values {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .about-value {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 15px;
      font-weight: 400;
      color: var(--black);
      opacity: 0;
      transform: translateX(30px);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about-value.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .about-value-dot {
      width: 8px;
      height: 8px;
      background: var(--orange);
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .about-value:hover .about-value-dot {
      transform: scale(1.3);
    }

    /* ========== SECTION 2 — PARALLAX GALLERY ========== */
    /* ========== SECTION — ABOUT ========== */
    /* Natural-flow section. Intentionally NOT creating a stacking context (no z-index, no transform)
       so descendants with z-index propagate to root — letting .about-content sit above #cubeCanvas.
       Also transparent: body bg (driven by scroll handler) shows through here. */
    .about-section {
      padding: 20vh 5% 110vh 5%;
      position: relative;
    }

    /* The text elements (.about-title, .about-subtitle, .about-desc) carry their own
       z-index (100006) so they sit above the fixed cube canvas (100002) — the cube passes
       BEHIND them. Each also hosts a white .about-cube copy clipped to the cube silhouette
       (see cube-hero.js) so the text turns white only over the cube. */
    .about-content {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8vw;
      min-height: 70vh;
    }

    /* Diagonal composition: title pinned to top-left, body pinned to bottom-right,
       with the cube floating between them via its fixed canvas. */
    .about-col-left {
      align-self: start;
    }

    /* top (not translateY) — a transform would create a stacking context that traps the
       child text's mix-blend-mode and break the cube blend. position:relative without a
       z-index does NOT create a stacking context, so the blend still reaches the canvas. */
    .about-col-right {
      align-self: end;
      justify-self: end;
      max-width: 65%;
      position: relative;
      top: 20vh;
    }

    /* ===== CUBE MASK (clipped white overlay) =====
       Each text line is normal dark ink (.about-ink) PLUS a white copy (.about-cube) that
       cube-hero.js clones in and clips to the live cube silhouette every frame. So the text
       reads dark on the cream bg and turns white-with-shadow only where the cube passes
       behind it — no photographic inversion. position:relative + z-index 100006 keep both the
       ink and the overlay above the fixed cube canvas (100002); the overlay's inset:0 box
       matches the ink exactly so the white copy lines up glyph-for-glyph. The JS body-bg flip
       at the section seams still drives the ink colour (black on cream, white on the dark
       seams) — see scroll-effects.js. */
    .about-title {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(36px, 8dvh, 80px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin: 0;
      position: relative;
      z-index: 100006;
      color: var(--black);
      transition: color 0.6s ease;
    }

    .about-title .orange { color: var(--orange); }

    /* font-size set on the PARENT (not on .about-ink) so the white .about-cube clone — which
       only inherits, it doesn't carry the .about-ink class — gets the same size and the mask
       overlay stays aligned glyph-for-glyph. Setting it on .about-ink alone would desync them. */
    .about-subtitle {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 22px;
      font-weight: 400;
      position: relative;
      z-index: 100006;
      color: var(--black);
      line-height: 1.5;
      margin-bottom: 28px;
      transition: color 0.6s ease;
    }

    .about-desc {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 18px;
      font-weight: 300;
      position: relative;
      z-index: 100006;
      color: #666;
      line-height: 1.8;
      margin-bottom: 40px;
      transition: color 0.6s ease;
    }

    /* White copy overlaid on the ink, clipped to the cube silhouette by cube-hero.js.
       Hidden by default (degenerate clip) until the first cube projection runs, so it
       never flashes as full-width white text. Its own colours override the parent's
       (JS-driven) ink colour via the cascade, so it stays white regardless of the seam flip. */
    .about-cube {
      position: absolute;
      inset: 0;
      color: #fff;
      pointer-events: none;
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
    .about-cube .orange { color: var(--orange); }

    /* Lighter weight for the about text — applied to both the ink and its white clone so
       they stay identical (same weight = same wrapping/metrics, overlay aligns glyph-for-glyph). */
    /* No font-weight here on purpose: .about-ink and its white clone .about-cube both INHERIT
       the weight from their parent (.about-title / .about-subtitle / .about-desc). Setting it
       per-parent keeps each ink/cube pair identical so the mask overlay stays aligned, and lets
       the desc be lighter (300) while the title/subtitle stay 400. */

    .about-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
      z-index: 100006;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--black);
      text-decoration: none;
      padding: 14px 32px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 0;
      transition: background 0.3s ease, border-color 0.6s ease, color 0.6s ease;
    }

    .about-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.5);
    }

    /* While the orange cube face is behind the button (toggled by cube-hero.js): solid white
       button on the orange. Smooth via the .about-btn background/color/border transitions.
       !important overrides the inline color/border that scroll-effects.js sets on the button. */
    .about-btn.on-orange {
      background: #ffffff !important;
      border-color: #ffffff !important;
      color: #000000 !important;
    }