@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,500,600,700,900');


/* ── Figma colour tokens ── */
  :root {
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --slate-400:  #94a3b8;
    --slate-500:  #64748b;
    --zinc-100:   #f4f4f5;
    --zinc-200:   #e4e4e7;
    --zinc-600:   #52525b;
    --zinc-700:   #3f3f46;
    --zinc-900:   #18181b;
  }

  /* ── Page body override for white bg ── */
  body.pageabout #main {
    background: #ffffff;
  }

  /* ─────────────────────────────────────────
     ABOUT PAGE WRAPPER
     min-h-screen py-24 px-4 bg-white
  ───────────────────────────────────────── */
  .page-block, .entry-content > div{ width: auto;}
  .entry-header{ display: none;}
  .page-text-php .site-content .hentry{ padding-top: 0;}
  /* .page-text-php .site-content .entry-content p, .page-text-php .site-content .entry-content li{ font-size: 1.25em;} */
  .about-page {
    background: #ffffff;
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: 'Poppins', sans-serif;
    border-top: solid 4px var(--zinc-900);
  }
  .about-inner {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* ─────────────────────────────────────────
     HERO  — text-center mb-24
  ───────────────────────────────────────── */
  .about-hero-section {
    text-align: center;
    margin-bottom: 6rem;
  }
  .about-hero-section h1 {
    font-size: clamp(4rem, 10vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
    color: var(--zinc-900);
    line-height: 1;
  }
  .page-text-php .site-content .entry-content .about-hero-section p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zinc-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }

  /* ─────────────────────────────────────────
     STATS GRID  — grid-cols-2 md:grid-cols-4 gap-6 mb-24
  ───────────────────────────────────────── */
  .stats-grid {
    margin-bottom: 6rem;
  }
  .stat-card {
    padding: 2rem;
    border: 4px solid var(--zinc-900);
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    text-align: center;
  }
  .stat-card.orange  { background: var(--orange-500); }
  .stat-card.slate   { background: var(--slate-500);  }
  .stat-card.zinc    { background: var(--zinc-600);   }
  .stat-card.orange2 { background: var(--orange-400); }

  .stat-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--zinc-900);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    flex-shrink: 0;
  }
  .stat-icon-box i {
    font-size: 1.5rem;
    color: #ffffff;
  }
  .stat-value {
    font-size: 2.25rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1;
  }
  .stat-label {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--zinc-100);
  }

  /* ─────────────────────────────────────────
     STORY  — grid-cols-1 lg:grid-cols-2 gap-12 mb-24
  ───────────────────────────────────────── */
  .story-section {
    margin-bottom: 6rem;
  }
  .page-text-php .site-content .entry-content .story-section h2 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
    color: var(--zinc-900);
    line-height: 1;
  }
  .page-text-php .site-content .entry-content .story-text p {
    font-weight: 600;
    color: var(--zinc-700);
    line-height: 1.75;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }
  .story-text p:last-child { margin-bottom: 0; }

  .story-image-placeholder {
    aspect-ratio: 16 / 9;
    background: var(--slate-500);
    border: 4px solid var(--zinc-900);
    box-shadow: 12px 12px 0px 0px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-image-placeholder i {
    font-size: 8rem;
    color: var(--zinc-900);
  }

  /* ─────────────────────────────────────────
     VALUES  — grid-cols-1 md:grid-cols-3 gap-6 mb-24
  ───────────────────────────────────────── */
  .values-section {
    margin-bottom: 6rem;
  }
  .values-section > h2 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.05em;
    margin-bottom: 4rem;
    color: var(--zinc-900);
    line-height: 1;
  }
  .value-card {
    padding: 2.5rem;
    border: 4px solid var(--zinc-900);
    height: 100%;
  }
  .value-card.slate  { background: var(--slate-400); }
  .value-card.orange { background: var(--orange-500); }
  .value-card.dark   { background: var(--zinc-700); }

  .value-icon-box {
    width: 4rem;
    height: 4rem;
    background: var(--zinc-900);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  .value-icon-box i {
    font-size: 1.75rem;
    color: #ffffff;
  }
  .page-text-php .site-content .entry-content .value-card h3 {
    font-size: 1.875rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.2;
  }
  .value-card.slate h3  { color: var(--zinc-900); }
  .value-card.orange h3 { color: #ffffff; }
  .value-card.dark h3   { color: #ffffff; }

  .value-card p {
    font-weight: 600;
    line-height: 1.75;
    margin-bottom: 0;
  }
  .value-card.slate  p { color: var(--zinc-900); }
  .value-card.orange p { color: #ffffff; }
  .value-card.dark   p { color: #ffffff; }

  /* ─────────────────────────────────────────
     CTA  — bg-zinc-900 p-16 border-4 shadow-[12px…]
  ───────────────────────────────────────── */
  .cta-section {
    background: var(--zinc-900);
    padding: 4rem;
    border: 4px solid var(--zinc-900);
    box-shadow: 12px 12px 0px 0px rgba(0,0,0,1);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-shape-square {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    width: 8rem;
    height: 8rem;
    background: var(--orange-500);
    transform: rotate(45deg);
  }
  .cta-shape-circle {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    width: 6rem;
    height: 6rem;
    background: var(--slate-500);
    border-radius: 50%;
  }
  .cta-inner {
    position: relative;
    z-index: 10;
  }
  .page-text-php .site-content .entry-content .cta-section h2 {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin-bottom: 1.5rem;
    color: #ffffff;
    line-height: 1;
  }
  .page-text-php .site-content .entry-content .cta-section p {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: #ffffff;
    text-transform: uppercase;
  }
  .page-text-php .site-content .entry-content .cta-btn {
    display: inline-block;
    padding: 1.5rem 3rem;
    background: var(--orange-500);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 4px solid #ffffff;
    box-shadow: 6px 6px 0px 0px rgba(255,255,255,1);
    transition: background 0.2s;
    font-size: 1rem;
  }
.page-text-php .site-content .entry-content .cta-btn:hover {
    background: var(--orange-600);
    color: #ffffff;
    text-decoration: none;
  }

  /* ── Fade-in animation (replaces framer-motion initial/animate) ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .fade-up      { animation: fadeUp 0.6s ease forwards; }
  .fade-up.d1   { animation-delay: 0.1s; opacity: 0; }
  .fade-up.d2   { animation-delay: 0.2s; opacity: 0; }
  .fade-up.d3   { animation-delay: 0.3s; opacity: 0; }
  .fade-up.d4   { animation-delay: 0.4s; opacity: 0; }
  .fade-up.d5   { animation-delay: 0.5s; opacity: 0; }
  .fade-up.d6   { animation-delay: 0.8s; opacity: 0; }