:root {
      --c-bg:       #F8F9FA;
      --c-surface:  #FFFFFF;
      --c-gold:     #C9942F;
      --c-gold-dim: rgba(201,148,47,.12);
      --gr1p-black:    #1A1A1A;
      --c-muted:    rgba(0,0,0,.55);
      --c-border:   rgba(0,0,0,.08);
      --c-dark:     #2C2C2E;
      

      /* ── NEW: client-provided color-blocking palette ───────────── */
      --gr1p-primary-gold:   #f2b334;
      --gr1p-secondary-gray: #a7a9ac;
      --gr1p-footer-black:      #0F0F10;

      /* text tones to use ON TOP of the gold / gray blocks */
      --c-on-color-text:     #1A1A1A;              /* dark text on gold/gray */
      --c-on-color-muted:    rgba(26,26,26,.65);    /* dark muted text on gold/gray */
      --c-on-color-divider:  #1A1A1A;               /* divider color on gold/gray */
      --c-on-black-text:     #FFFFFF;               /* text on black footer */
      --c-on-black-muted:    rgba(255,255,255,.6);


      --f-display: 'Eurostile Extended Regular', sans-serif;
      --f-body:    'DM Sans', sans-serif;

      --radius-card: 12px;
      --transition:  .3s ease;
      --transition-smooth: .45s cubic-bezier(.22, 1, .36, 1);
    }

.gr1p-fullwidth-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}




/* Each section background extends full viewport width */
.page-template-page-about-gr1p .gr1p-page > section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}


    /* ─── RESET / BASE ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--c-bg);
      color: var(--c-white);
      font-family: var(--f-body);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; display: block; }

    a { color: var(--c-gold); text-decoration: none; }
    a:hover { color: #000; }

    .section-label {
      font-family: var(--f-body);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--c-gold);
      margin-bottom: .75rem;
      display: block;
    }

    .section-title {
      font-family: var(--f-display);
      letter-spacing: .04em;
      line-height: 1.05;
    }

    /* ─── DIVIDER ────────────────────────────────────────────────── */
    .gold-divider {
      width: 48px;
      height: 3px;
      background: var(--c-gold);
      border: none;
      margin: 1.5rem 0;
      border-radius: 2px;
    }

    /* ═══════════════════════════════════════════════════════════════
       COLOR BLOCKING — SECTION BACKGROUND ASSIGNMENTS
       Pattern: white → gold → white → gray → white → gold → (black footer)
       This gives the page visible rhythm instead of white-on-white.
       ═══════════════════════════════════════════════════════════════ */

    .hero      { background: var(--c-bg); }                    /* 1. off-white */
    .mission   { background: linear-gradient(135deg, var(--gr1p-primary-gold) 0%, #e6a324 100%); }  /* 2. gold block */
    .features  { background: var(--c-surface); }                /* 3. white */
    .audience  { background: linear-gradient(135deg, #f2b334 0%, #c98b20 100%); } /* 4. gray block */
    .story     { background: var(--c-bg); }                     /* 5. off-white */
    .values    { background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.18), transparent 40%), linear-gradient(135deg, var(--gr1p-primary-gold) 0%, #e6a324 100%); }  /* 6. gold block */

    /* ─────────────────────────────────────────────────────────────── */
    /* 1. HERO SECTION                                                */
    /* ─────────────────────────────────────────────────────────────── */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 0px;
    }


    /* Signature element: diagonal gold stripe behind logo 
    .hero::before {
      content: '';
      position: absolute;
      top: -10%;
      right: -5%;
      width: 52%;
      height: 130%;
      background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
      clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
      z-index: 0;
    } */

    .about-banner {
      width: 100%;
      aspect-ratio: 1920 / 820;
    }

    .about-banner img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
    }



    .hero-scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      color: var(--c-muted);
      font-size: .7rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      z-index: 2;
      animation: bounce 2s infinite;
    }

    .hero-scroll-hint svg { opacity: .5; }

    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(6px); }
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 2. MISSION STATEMENT — GOLD BLOCK                              */
    /* ─────────────────────────────────────────────────────────────── */
    .mission {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .mission::before {
      content: 'MISSION';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--f-display);
      font-size: clamp(6rem, 14vw, 14rem);
      color: rgba(0,0,0,.06);
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: .05em;
    }

    /* On gold: swap label / heading / divider / text to dark tones for contrast */
    .mission .section-label { color: var(--c-on-color-text); }
    .mission .gold-divider  { background: var(--c-on-color-divider); }

    .mission-heading {
      font-size: clamp(2.2rem, 4vw, 3rem) !important;
      color: var(--c-on-color-text);
    }

    .mission-text {
      font-size: 1.1rem;
      color: var(--c-on-color-muted);
      max-width: 720px;
      line-height: 1.9;
    }

    .mission-text strong {
      color: var(--c-on-color-text);
      font-weight: 700;
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 3. KEY FEATURES — WHITE + HEX BOLT PATTERN                     */
    /* ─────────────────────────────────────────────────────────────── */
    .features {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .features::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32' viewBox='0 0 56 32'%3E%3Cpolygon points='14,0 28,8 28,24 14,32 0,24 0,8' fill='none' stroke='rgba(201,148,47,0.16)' stroke-width='1'/%3E%3Cpolygon points='42,0 56,8 56,24 42,32 28,24 28,8' fill='none' stroke='rgba(201,148,47,0.16)' stroke-width='1'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 56px 32px;
      pointer-events: none;
      z-index: 0;
    }

    .features .container {
      position: relative;
      z-index: 1;
    }

    .features-heading {
      font-size: clamp(2.2rem, 4vw, 3rem) !important;
    }

    .feature-card {
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-card);
      padding: 2rem 1.75rem;
      transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
      height: 100%;
    }

    .feature-card:hover {
      border-color: var(--c-gold);
      transform: translateY(-6px) scale(1.015);
      box-shadow: 0 14px 30px rgba(0,0,0,.12);
    }

    .feature-number {
      font-family: var(--f-display);
      font-size: 3.5rem;
      color: var(--c-gold-dim);
      line-height: 1;
      margin-bottom: .75rem;
      transition: color var(--transition-smooth), transform var(--transition-smooth);
    }

    .feature-card:hover .feature-number {
      color: var(--c-gold);
      transform: translateX(4px);
    }

    .feature-name {
      font-family: var(--f-body);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--c-gold);
      margin-bottom: .6rem;
    }

    .feature-desc {
      font-size: .88rem;
      color: var(--c-muted);
      line-height: 1.8;
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 4. TARGET AUDIENCE — GRAY BLOCK                               */
    /* ─────────────────────────────────────────────────────────────── */
    .audience {
      padding: 100px 0;
      position: relative;
    }

    .audience::before {
      content: '';
      position: absolute;
      inset: 0;

      background: linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 80px 80px;

      opacity: .4;
    }

    .audience .section-label { color: var(--c-on-color-text); }
    .audience .gold-divider  { background: var(--c-on-color-divider); }

    .audience-heading {
      font-size: clamp(2.2rem, 4vw, 3rem) !important;
      color: var(--c-on-color-text);
    }

    /* Cards float white on top of the gray block for a clean "card pop" effect */
    .audience-card {
      background: var(--gr1p-black);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-card);
      padding: 2.5rem 2rem;
      transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
      height: 100%;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0,0,0,.2);
    }

    .audience-card:nth-child(2) {
      background: var(--gr1p-primary-gold);
    }

    .audience-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 100%; height: 3px;
      background: var(--c-gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-smooth);
    }

    .audience-card:hover {
      border-color: var(--c-gold);
      box-shadow: 0 16px 36px rgba(0,0,0,.35);
      transform: translateY(-6px);
    }

    .audience-card:hover::before { transform: scaleX(1); }


    .audience-icon {
      width: 52px;
      height: 52px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.4rem;
      transition: transform var(--transition-smooth), background var(--transition-smooth);
    }

    .audience-card:hover .audience-icon {
      transform: rotate(-8deg) scale(1.08);
      background: rgba(242,179,52,.12);
    }

    .audience-icon i {
      font-size: 1.4rem;
      color: var(--c-gold);
    }

    .value-icon i {
      font-size: 1.4rem;
      color: var(--c-dark);
    }

    .audience-card-title {
      font-family: var(--f-display);
      font-size: 1.7rem;
      letter-spacing: .04em;
      margin-bottom: .75rem;
      color: #FFFFFF;
    }

    .audience-card-desc {
      font-size: .88rem;
      color: rgba(255,255,255,.65);
      line-height: 1.8;
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 5. OUR STORY — OFF-WHITE                                      */
    /* ─────────────────────────────────────────────────────────────── */
    .story {
      padding: 100px 0;
      position: relative;
    }

    .story-heading {
      font-size: clamp(2.2rem, 4vw, 3rem) !important;
    }

    .story-body p {
      color: var(--c-muted);
      margin-bottom: 1.25rem;
      font-size: .95rem;
      line-height: 1.9;
    }

    .story-body p strong {
      color: var(--gr1p-primary-gold);
      font-weight: 600;
    }

    .story-accent {
      background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ea 100%);
      border-left: 3px solid var(--gr1p-primary-gold);
      border-radius: 0 var(--radius-card) var(--radius-card) 0;
      padding: 1.75rem 1.5rem;
      font-style: italic;
      color: var(--c-muted);
      font-size: .95rem;
      line-height: 1.9;
      margin: 2rem 0;
    }

    .story-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--c-border);
      border-radius: var(--radius-card);
      overflow: hidden;
      margin-top: 3rem;
    }

    .story-stat {
      background: var(--c-surface);
      padding: 2rem 1.5rem;
      text-align: center;
    }

    .story-stat-num {
      font-family: var(--f-display);
      font-size: 2.8rem;
      color: var(--gr1p-primary-gold);
      line-height: 1;
    }

    .story-stat-label {
      font-size: .75rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--c-muted);
      margin-top: .4rem;
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 6. CORE VALUES — GOLD BLOCK                                   */
    /* ─────────────────────────────────────────────────────────────── */
    .values {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
      border-bottom: 8px solid var(--c-footer-black);
    }



    .values::after {
      content: '';
      position: absolute;
      inset: 0;

      background:
      /* engineering grid */
      linear-gradient(rgba(26,26,26,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(26,26,26,.06) 1px, transparent 1px),
      /* vertical crosshair */
      linear-gradient(rgba(26,26,26,.08), rgba(26,26,26,.08)) center / 1px 100% no-repeat,
      /* horizontal crosshair */
      linear-gradient(90deg, rgba(26,26,26,.08), rgba(26,26,26,.08)) center / 100% 1px no-repeat;

      /*
      background-image:
        linear-gradient(rgba(26,26,26,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,26,26,.06) 1px, transparent 1px); */

      background-size:64px 64px,64px 64px, 1px 100%, 100% 1px;
      background-position: 30px 20px, 30px 20px, center center, center center;

      opacity: .45;
      pointer-events: none;
      z-index: 0;
    }
    /* ── IMPORTANT: upload gr1p-wheel-sketch.webp to the WP Media Library
       first, then replace the URL below with the actual media URL
       (e.g. content_url('/uploads/2026/08/gr1p-wheel-sketch.webp') if
       referenced from PHP, or the direct /wp-content/uploads/... path
       here since this is a plain CSS file). */
    .values::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(70vw, 820px);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      background-image: url('/wp-content/themes/porto-child/assets/images/about/GR1P-sahara-sketch.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      mix-blend-mode: multiply;
      filter: blur(12px);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      animation: wheelReveal 1.6s cubic-bezier(.22,1,.36,1) forwards;
    }

    @keyframes wheelReveal {
      from {
        opacity: 0;

        transform:
        translate(-50%, -50%) scale(.92);
        filter: blur(16px);
      }

      to {
        opacity: .20;
        transform:
        translate(-50%, -50%) scale(1);

        filter: blur(0px);
      }
    }


    @media (prefers-reduced-motion: reduce) {
      .values::before { animation: none; }
    }

    .values .container {
      position: relative;
      z-index: 2;
    }

    .values .container::before{
      content:'';
      position:absolute;

      left: 50%;top: 50%;
      width: 720px;height: 720px;

      transform: translate(-50%,-50%);

      border: 1px solid rgba(26,26,26,.08);
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
    }




    .values .section-label { color: var(--c-on-color-text); }
    .values .gold-divider  { background: var(--c-on-color-divider); }

    .values-heading {
      font-size: clamp(2.2rem, 4vw, 3rem) !important;
      color: var(--c-on-color-text);
    }

    /* Cards float white on top of the gold block, same "pop" treatment as audience */
    .value-card {
      background: var(--c-surface);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: var(--radius-card);
      padding: 2rem 1.75rem;
      transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      box-shadow: 0 4px 18px rgba(0,0,0,.08);
    }

    .value-card:hover {
      transform: translateY(-6px) scale(1.015);
      box-shadow: 0 18px 38px rgba(0,0,0,.18);
    }

    .value-icon {
      width: 44px;
      height: 44px;
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform var(--transition-smooth), background var(--transition-smooth);
    }

    .value-card:hover .value-icon {
      transform: rotate(8deg) scale(1.08);
      background: var(--c-gold-dim);
    }

    /* .value-icon svg { color: var(--c-gold); } */

    .value-title {
      font-family: var(--f-display);
      font-size: 1.6rem;
      letter-spacing: .04em;
    }

    .value-desc {
      font-size: .875rem;
      color: var(--c-muted);
      line-height: 1.8;
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* 7. FOOTER — BLACK BLOCK                                       */
    /* Client asked for black footer to close out the color rhythm.  */
    /* Add this class to your footer wrapper (e.g. via theme/footer.php) */
    /* ─────────────────────────────────────────────────────────────── */

    .gr1p-footer a,
    .page-template-page-about-gr1p footer a {
      color: var(--gr1p-primary-gold);
    }

    .gr1p-footer a:hover,
    .page-template-page-about-gr1p footer a:hover {
      color: #fff;
    }

    .gr1p-footer .section-label,
    .page-template-page-about-gr1p footer .section-label {
      color: var(--gr1p-primary-gold);
    }

    .gr1p-footer p,
    .page-template-page-about-gr1p footer p {
      color: var(--c-on-black-muted);
    }

    /* ─────────────────────────────────────────────────────────────── */
    /* RESPONSIVE                                                    */
    /* ─────────────────────────────────────────────────────────────── */
    @media (max-width: 991.98px) {
      .about-banner{ aspect-ratio: 2 / 1; overflow: hidden; }
      .about-banner img { object-position: 95% center; object-fit: cover; }
      .hero { min-height: 0; padding: 0; }
      .story-stats { grid-template-columns: 1fr 1fr; }
      .features, .mission, .audience, .story, .values { padding: 70px 0; }
    }

    @media (max-width: 767.98px) {
      .about-banner{ aspect-ratio: 2 / 1; overflow: hidden; }
      .about-banner img { object-position: 95% center; object-fit: cover; }

      .hero { min-height: 0; height: auto; padding: 0;}
      .hero-scroll-hint { display: none; }

      .features, .mission, .audience, .story, .values { padding: 50px 0; }

      .mission-text { font-size: .95rem; }
      .story-stats { grid-template-columns: 1fr; }
      .feature-card { padding: 1.5rem 1.25rem; }
      .audience-card { padding: 1.75rem 1.25rem; }
      .value-card { padding: 1.5rem 1.25rem; }

      .story-body p { font-size: .88rem; }
      .story-accent { padding: 1.25rem 1rem; font-size: .88rem; }
      .story-stat { padding: 1.5rem 1rem; }
      .story-stat-num { font-size: 2.2rem; }

      .audience-card-title { font-size: 1.3rem; }
      .value-title { font-size: 1.3rem; }

      .section-title { font-size: 1.8rem !important; }

    }