/* Ported from about/index.html - 1 <style> block(s), in document order.
   Cascade order is preserved: a later block in the source is a later rule
   here, which is what several of these rely on to override the shared
   layer. */

/* ============================================================
       ABOUT PAGE — page-specific
       ============================================================ */

    /* Hero: pure black, no gradient. Full-pink H1. Text fade-in-up on load. */
    .about-hero {
      padding-top: 178px;
      padding-bottom: 138px;
      background: var(--ink);
    }
    .about-hero .lede { max-width: 42ch; }
    .about-hero h1.display { color: var(--accent); }

    /* NeeDoh branding-pattern overlay — cover + center left, 7% opacity */
    .about-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../images/branding-patterns/needoh-branding-pattern-2.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center left;
      opacity: 0.07;
      pointer-events: none;
      z-index: 0;
    }
    /* Ink sweep — fades the pattern away toward the hero text on the left */
    .about-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        var(--ink) 0%,
        var(--ink) 32%,
        rgba(35,31,32,0) 62%
      );
      pointer-events: none;
      z-index: 1;
    }

    @keyframes about-hero-in {
      0%   { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .about-hero .hero-split-text > * {
      animation: about-hero-in 700ms cubic-bezier(.2,.7,.2,1) both;
    }
    .about-hero .hero-split-text > *:nth-child(1) { animation-delay:  60ms; }
    .about-hero .hero-split-text > *:nth-child(2) { animation-delay: 160ms; }
    .about-hero .hero-split-text > *:nth-child(3) { animation-delay: 280ms; }
    .about-hero .hero-split-text > *:nth-child(4) { animation-delay: 380ms; }
    .about-hero .hero-split-text > *:nth-child(5) { animation-delay: 480ms; }
    @media (prefers-reduced-motion: reduce) {
      .about-hero .hero-split-text > * { animation: none; }
    }

    /* Straighten the tile stack — two overlapping tiles, no rotation.
       Blue nudged up, pink nudged down for a taller diagonal stagger.
       Scroll-parallax drift is applied via JS as translateY on top of these. */
    .about-hero .tile-stack { min-height: 440px; }
    .about-hero .tile-stack .tile.stack-a {
      top: -32px; right: 0; width: 64%; z-index: 2;
      transform: translateY(0);
      will-change: transform;
    }
    .about-hero .tile-stack .tile.stack-b {
      bottom: -32px; left: 0; width: 64%; z-index: 3;
      transform: translateY(0);
      will-change: transform;
    }
    .about-hero .tile-stack .tile.stack-c { display: none; }
    /* Mobile: pull the two tiles into a diagonal overlap so they don't read as
       two separate stacked squares. Container height shrinks so tile heights
       (aspect-ratio 1/1) meet in the middle. */
    @media (max-width: 640px) {
      .about-hero .tile-stack { min-height: 320px; }
      .about-hero .tile-stack .tile.stack-a {
        top: 0; right: 0; width: 68%;
      }
      .about-hero .tile-stack .tile.stack-b {
        bottom: 0; left: 0; width: 68%;
      }
    }

    /* Company: empty yellow tile (placeholder for photo) */
    .company-tile {
      background: var(--brand-yellow);
      border-radius: 32px;
      aspect-ratio: 1 / 1;
      box-shadow: 0 14px 32px -16px rgba(35,31,32,0.28);
    }

    /* Origin + How It's Made — dark narrative sections */
    .story-dark {
      background: var(--ink);
      color: #fff;
    }
    .story-dark .eyebrow      { color: rgba(255,255,255,0.65); }
    .story-dark h2.display    { color: #fff; }
    .story-dark p             { color: rgba(255,255,255,0.88); }

    /* Origin tile — holds the Collective NeeDoh photograph */
    .origin-tile {
      background: var(--brand-green);
      border-radius: 32px;
      aspect-ratio: 1 / 1;
      box-shadow: 0 14px 32px -16px rgba(0,0,0,0.4);
      overflow: hidden;
      position: relative;
    }
    .origin-tile img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    /* Empty blue How-It's-Made tile */
    .made-tile {
      background: var(--brand-blue);
      border-radius: 32px;
      aspect-ratio: 1 / 1;
      box-shadow: 0 14px 32px -16px rgba(35,31,32,0.22);
    }

    /* People — centered intro, larger avatar circles */
    .people-intro { text-align: center; }
    .people-intro h2.display {
      max-width: none;
      margin: 0 0 20px;
      white-space: nowrap;
    }
    .people-intro .text-soft {
      max-width: 56ch;
      margin: 0 auto;
    }
    @media (max-width: 720px) {
      .people-intro h2.display { white-space: normal; }
    }

    .people-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }
    @media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .people-grid { grid-template-columns: 1fr; } }
    .person-card {
      border-radius: var(--radius-lg);
      padding: 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      color: #fff;
      min-height: 320px;
      justify-content: space-between;
      transition: transform 260ms cubic-bezier(.4,0,.2,1);
    }
    .person-card:hover { transform: translateY(-6px); }
    .person-card.pink   { background: var(--accent); }
    .person-card.blue   { background: var(--brand-blue); }
    .person-card.orange { background: var(--brand-orange); }
    .person-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 34px;
      color: #fff;
    }
    .person-name {
      font-family: var(--font-display);
      font-size: 28px;
      color: #fff;
      line-height: 1.05;
      margin-top: 20px;
    }
    .person-role {
      font-family: var(--font-body);
      font-size: 12.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      margin-top: 6px;
    }
    .person-placeholder {
      font-size: 14px;
      color: rgba(255,255,255,0.9);
      font-style: italic;
      line-height: 1.5;
    }

    /* Real Thing band — button states reversed:
       static = ink bg + accent text, hover = white bg + accent text */
    .real-thing-band {
      background: var(--accent);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .real-thing-band h2 { color: #fff; }
    .real-thing-band p  { color: rgba(255,255,255,0.95); }
    .real-thing-band .btn-primary { background: var(--ink); color: var(--accent); }
    .real-thing-band .btn-primary:hover { background: #fff; color: var(--accent); }

    /* NeeDoh branding-pattern overlay — same treatment as hero, on pink */
    .real-thing-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../images/branding-patterns/needoh-branding-pattern-3.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center left;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }
    /* Accent sweep — fades the pattern away toward the section text on the left */
    .real-thing-band::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) 32%,
        rgba(255,64,180,0) 62%
      );
      pointer-events: none;
      z-index: 1;
    }
    .real-image {
      position: absolute;
      right: clamp(100px, 16vw, 280px);
      bottom: 0;
      width: clamp(240px, 26vw, 380px);
      height: auto;
      display: block;
      pointer-events: none;
      z-index: 2;
    }
    @media (max-width: 900px) { .real-image { display: none; } }