/* Page-specific styles for about.html.
   Shared layout, colours and components live in brand-shared.css — this
   file only holds what's unique to this page. */
/* ---------- about page ---------- */
  /* The top of the page is the shared .hero (brand-shared.css), with the
     fragment graphic beside it. It sits at the top of a normal page here,
     not filling the window as a home-page hero would. */
  .about-top{ padding: 56px 0 24px; }

  .about-section{ padding: 40px 0; border-top: 1px solid var(--line); }
  .about-section a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
  .about-section h2{
    font-size: 22px;
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
  }
  .about-section p{
    color: var(--slate);
    font-size: 15.5px;
    max-width: 640px;
    margin-bottom: 14px;
  }
  .about-section p:last-child{ margin-bottom: 0; }

  .value-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
  }
  .value-card{
    background: #fff;
    border: 1px solid var(--line);
    padding: 26px 24px;
    border-radius: 4px;
    position: relative;
  }
  .value-card::before{
    content: '';
    position: absolute;
    top: -1px; left: 22px;
    width: 14px; height: 5px;
    background: var(--brown);
    transform: skewX(-12deg);
  }
  .value-card h3{
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-bottom: 8px;
  }
  .value-card p{
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 0;
  }

  .about-cta{
    padding: 48px 0 64px;
    text-align: left;
  }
  .about-cta h2{
    font-size: 24px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-bottom: 10px;
  }
  .about-cta p{
    color: var(--slate);
    font-size: 15.5px;
    max-width: 520px;
    margin-bottom: 22px;
  }

  @media (max-width: 780px){
    .value-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- the fragment graphic: each piece fades in a moment after
     the one before, and settles at its own strength, so the scattered
     pieces resolve into the solid block (the animation itself is shared,
     in brand-shared.css; 404.css and 500.css stagger their own graphics) */
  .frag-1{ --target-opacity:.35; animation-delay:0ms; }
  .frag-2{ --target-opacity:.4; animation-delay:40ms; }
  .frag-3{ --target-opacity:.45; animation-delay:80ms; }
  .frag-4{ --target-opacity:.55; animation-delay:120ms; }
  .frag-5{ --target-opacity:.6; animation-delay:160ms; }
  .frag-6{ --target-opacity:.7; animation-delay:200ms; }
  .frag-7{ --target-opacity:.8; animation-delay:240ms; }
  .frag-8{ --target-opacity:.85; animation-delay:280ms; }
  .frag-9{ --target-opacity:.9; animation-delay:320ms; }
  .frag-10{ --target-opacity:1; animation-delay:360ms; }
  .frag-11{ --target-opacity:1; animation-delay:380ms; }