/* ================================================================
   About Us — Our Story  |  CC-AboutUs.css
   REDP Brand: #d9b888 gold · #252525 dark · #fafafa background
   ================================================================ */

   .redp-about *, .redp-about *::before, .redp-about *::after { box-sizing: border-box; }
   .redp-about { background: none; }
   
   /* ================================================================
      HERO
      ================================================================ */
   .redp-about-hero {
       position: relative;
       width: 100%;
       background-image: url('/pages/aboutus/images/mainBanner.jpg');
       background-color: #252525;
       background-size: cover;
       background-position: center 30%;
       overflow: hidden;
   }
   
   .redp-about-hero-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(105deg, rgba(20,17,14,0.92) 0%, rgba(20,17,14,0.62) 55%, rgba(20,17,14,0.28) 100%);
   }
   
   .redp-about-hero-inner {
       position: relative;
       z-index: 2;
       max-width: 760px;
       padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
   }
   
   .redp-about-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 0.6rem;
       font-family: 'citrfontbold';
       font-size: 0.68rem;
       letter-spacing: 0.28em;
       text-transform: uppercase;
       color: #d9b888;
       margin-bottom: 1rem;
   }
   
   .redp-about-eyebrow::before {
       content: '';
       display: inline-block;
       width: 28px;
       height: 1px;
       background: #d9b888;
       opacity: 0.7;
   }
   
   .redp-about-hero-inner h1 {
       font-family: 'citrfontbold';
       color: #fff;
       font-size: clamp(1.8rem, 4vw, 3.2rem);
       line-height: 1.1;
       margin: 0 0 1rem;
       letter-spacing: -0.01em;
   }
   
   .redp-about-hero-inner h1 em {
       font-style: normal;
       color: #d9b888;
   }
   
   .redp-about-hero-desc {
       font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
       color: rgba(255,255,255,0.75);
       line-height: 1.78;
       max-width: 580px;
       margin: 0;
   }
   
   .redp-about-stats {
       position: relative;
       z-index: 2;
       display: flex;
       border-top: 1px solid rgba(217,184,136,0.2);
   }
   
   .redp-about-stat {
       flex: 1;
       padding: 1.1rem clamp(1rem, 3vw, 2rem);
       border-right: 1px solid rgba(217,184,136,0.2);
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
   }
   
   .redp-about-stat:last-child { border-right: none; }
   
   .redp-about-stat-value {
       font-family: 'citrfontbold';
       font-size: clamp(1.1rem, 2vw, 1.4rem);
       color: #d9b888;
       line-height: 1;
   }
   
   .redp-about-stat-label {
       font-size: 0.7rem;
       color: rgba(255,255,255,0.52);
       letter-spacing: 0.07em;
       text-transform: uppercase;
   }
   
   /* ================================================================
      QUICK TIMELINE — sticky interactive bar
      ================================================================ */
   .redp-about-quick-tl {
       background: #252525;
       padding: 0 clamp(1.5rem, 4vw, 4rem);
       display: flex;
       align-items: stretch;
       gap: 1.5rem;
       position: sticky;
       top: 0;
       z-index: 40;
       border-bottom: 1px solid rgba(217,184,136,0.12);
       float: left;
       width: 100%;
   }
   
   .redp-about-qt-label {
       font-family: 'citrfontbold';
       font-size: 0.62rem;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       color: rgba(217,184,136,0.5);
       white-space: nowrap;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       padding: 1rem 1.5rem 1rem 0;
       border-right: 1px solid rgba(217,184,136,0.12);
   }
   
   .redp-about-qt-track {
       display: flex;
       align-items: stretch;
       flex: 1;
       overflow-x: auto;
       scrollbar-width: none;
   }
   
   .redp-about-qt-track::-webkit-scrollbar { display: none; }
   
   a.redp-about-qt-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       flex: 1;
       min-width: 76px;
       text-decoration: none;
       padding: 0.85rem 0.4rem;
       border-bottom: 2px solid transparent;
       transition: border-color 0.25s ease, background 0.25s ease;
   }
   
   a.redp-about-qt-item:hover { background: rgba(217,184,136,0.06); }
   a.redp-about-qt-item.active { border-bottom-color: #d9b888; background: rgba(217,184,136,0.08); }
   
   .redp-about-qt-yr {
       font-family: 'citrfontbold';
       font-size: 0.72rem;
       color: rgba(217,184,136,0.65);
       white-space: nowrap;
       line-height: 1;
       margin-bottom: 0.3rem;
       transition: color 0.25s ease;
   }
   
   a.redp-about-qt-item:hover .redp-about-qt-yr,
   a.redp-about-qt-item.active .redp-about-qt-yr { color: #d9b888; }
   
   .redp-about-qt-desc {
       font-size: 0.6rem;
       color: rgba(255,255,255,0.35);
       text-align: center;
       line-height: 1.35;
       max-width: 72px;
       transition: color 0.25s ease;
   }
   
   a.redp-about-qt-item:hover .redp-about-qt-desc,
   a.redp-about-qt-item.active .redp-about-qt-desc { color: rgba(255,255,255,0.6); }
   
   /* ================================================================
      MAIN TIMELINE
      ================================================================ */
   .redp-about-tl {
       float: left;
       width: 100%;
       background: #fafafa;
       position: relative;
   }
   
   /* Continuous vertical line running through the full timeline */
   .redp-about-tl::before {
       content: '';
       position: absolute;
       left: 50%;
       -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
       top: 0;
       bottom: 0;
       width: 8px;
       background: #f0ebe3;
       pointer-events: none;
   }
   
   /* Override old platform fixed-height rule */
   #redpost_story section.redp-about-tl-section { height: auto; }
   
   /* ---- Section ---- */
   .redp-about-tl-section {
       display: -webkit-flex;
       display: flex;
       -webkit-flex-flow: row wrap;
       flex-flow: row wrap;
       -webkit-justify-content: center;
       justify-content: center;
       -webkit-align-content: center;
       align-content: center;
       min-height: 70vh;
       position: relative;
       background: transparent;
       scroll-margin-top: 58px;
   }
   
   /* ---- Year badge ---- */
   .redp-about-tl-section::before {
       content: attr(data-year);
       width: 100px;
       height: 100px;
       -webkit-flex-shrink: 0;
       flex-shrink: 0;
       border-radius: 100%;
       background: var(--mf3, #d9b888);
       color: #fff;
       display: -webkit-flex;
       display: flex;
       -webkit-justify-content: center;
       justify-content: center;
       -webkit-align-items: center;
       align-items: center;
       font-family: 'citrfontbold';
       font-size: 1rem;
       letter-spacing: 0.1rem;
       text-transform: uppercase;
       line-height: initial;
       position: relative;
       z-index: 2;
       margin-bottom: 2rem;
       opacity: 0;
       -webkit-transform: scale(0.8);
       transform: scale(0.8);
       -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
       transition: opacity 0.45s ease, transform 0.45s ease;
   }
   
   .redp-about-tl-section.tl-visible::before {
       opacity: 1;
       -webkit-transform: scale(1);
       transform: scale(1);
   }
   
   /* ---- H2 — full-width row, centred ---- */
   .redp-about-tl-section h2 {
       -webkit-flex-basis: 100%;
       flex-basis: 100%;
       order: 1;
       text-align: center;
       font-family: 'citrfontbold';
       font-size: clamp(1.4rem, 2.5vw, 2.2rem);
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: #252525;
       margin: 0;
       padding: 0.5rem 3rem 2rem;
       background: #fafafa;
       position: relative;
       z-index: 1;
       opacity: 0;
       -webkit-transform: translateY(-1rem);
       transform: translateY(-1rem);
       -webkit-transition: opacity 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s;
       transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
   }
   
   .redp-about-tl-section.tl-visible h2 {
       opacity: 1;
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }
   
   /* ---- Image (40%) ---- */
   .redp-about-tl-img {
       -webkit-flex-basis: 40%;
       flex-basis: 40%;
       order: 2;
       padding: 1rem;
       display: -webkit-flex;
       display: flex;
       -webkit-align-items: center;
       align-items: center;
       opacity: 0;
       -webkit-transform: translateY(-1rem);
       transform: translateY(-1rem);
       -webkit-transition: opacity 0.5s ease 0.6s, -webkit-transform 0.5s ease 0.6s;
       transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
   }
   
   .redp-about-tl-section.tl-visible .redp-about-tl-img {
       opacity: 1;
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }
   
   .redp-about-tl-img img {
       display: block;
       max-width: 100%;
       height: auto;
       margin: 0 auto;
   }
   
   /* ---- Content (60%) ---- */
   .redp-about-tl-content {
       -webkit-flex-basis: 60%;
       flex-basis: 60%;
       order: 3;
       padding: 2rem 3rem;
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: column;
       flex-direction: column;
       -webkit-justify-content: center;
       justify-content: center;
       text-align: left;
       opacity: 0;
       -webkit-transform: translateY(-1rem);
       transform: translateY(-1rem);
       -webkit-transition: opacity 0.5s ease 0.9s, -webkit-transform 0.5s ease 0.9s;
       transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
       height: auto;
   }
   
   .redp-about-tl-section.tl-visible .redp-about-tl-content {
       opacity: 1;
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }
   
   .redp-about-tl-content p {
       font-size: 0.9375rem;
       line-height: 1.8;
       color: #5a5450;
       margin: 0 0 0.85rem;
       background: #fafafa;
   }
   
   .redp-about-tl-content p:last-child { margin-bottom: 0; }
   
   /* ---- Alternating: odd sections flip image to right ---- */
   @media screen and (min-width: 1025px) {
       .redp-about-tl-section:nth-child(odd) .redp-about-tl-img {
           order: 4;
       }
   }
   
   /* ================================================================
      BODY — panels wrapper
      ================================================================ */
   .redp-about-body {
       float: left;
       max-width: 100%;
       width: 100%;
       padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
       margin: 0 auto;
       background: #fafafa;
   }
   
   /* ================================================================
      INFO PANELS — 2 × 2 grid, square angular icons
      ================================================================ */
   .redp-about-panels {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.5px;
       background: #e8e2d9;
       border: 1.5px solid #e8e2d9;
       border-radius: var(--global-radius, 4px);
       overflow: hidden;
       width: 100%;
   }
   
   .redp-about-panel {
       background: #fff;
       padding: 2rem;
       transition: background 0.22s ease;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
   }
   
   .redp-about-panel:hover { background: #faf8f5; }
   
   .redp-about-panel-icon {
       width: 44px;
       height: 44px;
       background: #252525;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       margin-bottom: 1rem;
   }
   
   .redp-about-panel-icon svg { width: 22px; height: 22px; display: block; }
   
   .redp-about-panel-eyebrow {
       font-family: 'citrfontbold';
       font-size: 0.63rem;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       color: #d9b888;
       margin-bottom: 0.4rem;
   }
   
   .redp-about-panel h2 {
       font-family: 'citrfontbold';
       color: #252525;
       font-size: clamp(0.95rem, 1.6vw, 1.1rem);
       margin: 0 0 0.65rem;
       letter-spacing: -0.01em;
       line-height: 1.2;
       /* Reset timeline h2 rules */
       -webkit-flex-basis: auto;
       flex-basis: auto;
       order: unset;
       text-transform: none;
       text-align: left;
       padding: 0;
       opacity: 1;
       -webkit-transform: none;
       transform: none;
       -webkit-transition: none;
       transition: none;
       background: transparent;
       width: 100%;
   }
   
   .redp-about-panel p {
       font-size: 0.875rem;
       line-height: 1.78;
       color: #5a5450;
       margin: 0 0 0.5rem;
   }
   
   .redp-about-panel p:last-child { margin-bottom: 0; }
   
   .redp-about-awards {
       display: flex;
       flex-wrap: wrap;
       gap: 0.4rem;
       margin-top: 0.85rem;
   }
   
   .redp-about-award-pill {
       background: #f5f2ee;
       border: 1px solid #e8e2d9;
       color: #3b3b3b;
       font-family: 'citrfontbold';
       font-size: 0.65rem;
       letter-spacing: 0.04em;
       padding: 0.25rem 0.65rem;
       border-radius: 2px;
       white-space: nowrap;
       line-height: 1.5;
   }
   
   /* ================================================================
      RESPONSIVE
      ================================================================ */
   @media screen and (max-width: 1024px) {
       .redp-about-tl-section {
           -webkit-flex-direction: column;
           flex-direction: column;
           min-height: auto;
           -webkit-align-items: center;
           align-items: center;
           padding: 3rem 1.5rem;
       }
   
       .redp-about-tl-section::before {
           margin-bottom: 1.5rem;
       }
   
       .redp-about-tl-section h2 {
           padding: 0 0 1.5rem;
       }
   
       .redp-about-tl-img,
       .redp-about-tl-section:nth-child(odd) .redp-about-tl-img {
           -webkit-flex-basis: auto;
           flex-basis: auto;
           width: 100%;
           order: 2;
           padding: 0 0 1rem;
       }
   
       .redp-about-tl-content,
       .redp-about-tl-section:nth-child(odd) .redp-about-tl-content {
           -webkit-flex-basis: auto;
           flex-basis: auto;
           width: 100%;
           order: 3;
           padding: 1rem 0 0;
           text-align: center;
       }
   
       .redp-about-tl::before { display: none; }
   }
   
   @media screen and (max-width: 768px) {
       .redp-about-stats { flex-wrap: wrap; }
       .redp-about-stat { flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(217,184,136,0.2); }
       .redp-about-stat:nth-child(odd) { border-right: 1px solid rgba(217,184,136,0.2); }
       .redp-about-stat:last-child { border-bottom: none; }
       .redp-about-panels { grid-template-columns: 1fr; }
   }
   
   @media screen and (max-width: 560px) {
       .redp-about-qt-label { display: none; }
       .redp-about-quick-tl { padding: 0 1rem; }
   }