/* ============================================================
   ABOUT.CSS — About Page-Specific Styles
   
   Production CSS for the Sai Agency About Us page.
   Works alongside the global design system:
   variables.css, global.css, components.css, homepage.css,
   navigation.css, footer.css, utilities.css, responsive.css
   ============================================================ */

/* ─── ABOUT HERO ─── */
.about-hero {
   position: relative;
   min-height: 60vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding-top: var(--space-3xl);
   padding-bottom: var(--space-2xl);
   overflow: hidden;
 }
 
 .about-hero .hero__content {
   position: relative;
   z-index: 10;
   max-width: 820px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-lg);
 }
 
 .about-hero .hero__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 /* ─── DISTRIBUTION FLOW ─── */
 .about-flow {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
   position: relative;
   align-items: stretch;
 }
 
 .about-flow__card {
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-smooth);
   text-align: center;
   position: relative;
 }
 
 .about-flow__card:hover {
   box-shadow: var(--shadow-card-hover);
   transform: translateY(-4px);
 }
 
 .about-flow__card--center {
   border-color: var(--brand-amber);
   box-shadow: var(--shadow-xl);
 }
 
 .about-flow__connector {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--brand-amber);
   font-size: 24px;
 }
 
 .about-flow__connector-line {
   display: none;
 }
 
 /* ─── BACKBONE SPLIT ─── */
 .about-backbone {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-2xl);
   align-items: start;
 }
 
 .about-backbone__headline {
   max-width: 500px;
 }
 
 .about-backbone__principles {
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
 .about-backbone__principle {
   display: flex;
   gap: var(--space-lg);
   padding: var(--space-xl) 0;
   border-bottom: 1px solid var(--border-subtle);
   align-items: flex-start;
 }
 
 .about-backbone__principle:first-child {
   padding-top: 0;
 }
 
 .about-backbone__principle:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }
 
 .about-backbone__principle-number {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: rgba(241, 158, 31, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-heading);
   font-size: 16px;
   font-weight: 700;
   color: var(--brand-amber);
 }
 
 /* ─── REGIONAL ROOTS ─── */
 .about-region {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-2xl);
   align-items: center;
 }
 
 .about-region__coverage {
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
 }
 
 .about-region__item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--space-md) 0;
   border-bottom: 1px solid var(--border-subtle);
 }
 
 .about-region__item:last-child {
   border-bottom: none;
 }
 
 /* ─── AUDIENCE CARDS ─── */
 .about-audience {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
 }
 
 .about-audience__card {
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-smooth);
   position: relative;
   overflow: hidden;
 }
 
 .about-audience__card--retailers:hover {
   border-color: var(--brand-amber);
 }
 
 .about-audience__card--brands:hover {
   border-color: var(--brand-navy);
 }
 
 .about-audience__card:hover {
   box-shadow: var(--shadow-card-hover);
   transform: translateY(-4px);
 }
 
 .about-audience__checklist {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
   margin-top: var(--space-lg);
 }
 
 .about-audience__check {
   display: flex;
   gap: var(--space-sm);
   align-items: flex-start;
   line-height: 1.5;
 }
 
 .about-audience__check-icon {
   flex-shrink: 0;
   font-weight: 700;
   line-height: 1.5;
 }
 
 /* ─── PHILOSOPHY SECTION ─── */
 /* Reuses .about-section + .about-section__skew from homepage.css */
 .about-philosophy {
   position: relative;
   z-index: 10;
   text-align: center;
   max-width: 820px;
   margin: 0 auto;
 }
 
 /* ─── PRINCIPLES GRID ─── */
 .about-principles {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
 }
 
 .about-principle-card {
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-smooth);
   position: relative;
   overflow: hidden;
 }
 
 
 .about-principle-card:hover {
   box-shadow: var(--shadow-card-hover);
   transform: translateY(-4px);
 }
 
 .about-principle-card__icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-sm);
   background-color: rgba(241, 158, 31, 0.1);
   color: var(--brand-amber);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-lg);
 }
 
 /* ─── OUTCOMES SECTION ─── */
 .about-outcomes {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
 }
 
 .about-outcome-card {
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
 }
 
 .about-outcome-card__header {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-md);
   border-bottom: 1px solid var(--border-subtle);
 }
 
 .about-outcome-item {
   display: flex;
   gap: var(--space-md);
   align-items: flex-start;
   padding: var(--space-md) 0;
 }
 
 .about-outcome-item__icon {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
 }
 
 .about-outcome-item__icon--amber {
   background-color: rgba(241, 158, 31, 0.1);
   color: var(--brand-amber);
 }
 
 .about-outcome-item__icon--navy {
   background-color: rgba(17, 29, 53, 0.05);
   color: var(--brand-navy);
 }
 
 /* ─── TRUST SECTION ─── */
 /* Reuses .trust-section, .trust-section__bg, .trust-number, 
    .trust-badge-row from homepage.css */
 
 .about-trust-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-lg);
 }
 
 .about-trust-badges {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-md);
   margin-top: var(--space-2xl);
 }
 
 /* ─── CONTEXTUAL NAVIGATION ─── */
 .about-nav-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-lg);
 }
 
 .about-nav-card {
   display: block;
   background-color: var(--white);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-smooth);
   text-decoration: none;
   color: inherit;
 }
 
 .about-nav-card:hover {
   border-color: var(--brand-amber);
   box-shadow: var(--shadow-xl);
   transform: translateY(-6px);
 }
 
 .about-nav-card__eyebrow {
   display: inline-block;
   margin-bottom: var(--space-sm);
 }
 
 .about-nav-card__arrow {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   margin-top: var(--space-md);
   color: var(--brand-amber);
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 0.03em;
   transition: gap var(--transition-fast);
 }
 
 .about-nav-card:hover .about-nav-card__arrow {
   gap: var(--space-sm);
 }
 
 /* ─── FINAL CTA ─── */
 .about-cta {
   background-color: var(--brand-navy);
   border-radius: 2.5rem;
   padding: var(--space-3xl);
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-2xl);
 }
 
 .about-cta__grid {
   position: absolute;
   inset: 0;
   opacity: 0.03;
   pointer-events: none;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: var(--space-md);
   height: 100%;
 }
 
 .about-cta__grid div {
   border-right: 1px solid var(--white);
 }
 
 .about-cta__content {
   position: relative;
   z-index: 10;
   max-width: 600px;
   margin: 0 auto;
 }
 
 .about-cta__actions {
   display: flex;
   gap: var(--space-md);
   flex-wrap: wrap;
   justify-content: center;
   margin-top: var(--space-2xl);
 }
 
 .about-cta__contact {
   display: flex;
   gap: var(--space-xl);
   flex-wrap: wrap;
   justify-content: center;
   margin-top: var(--space-2xl);
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
 }
 
 .about-cta__contact-item {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
 }
 
 /* Ghost outline button on dark CTA background */
 .about-cta .btn--outline {
   background-color: transparent;
   color: var(--white);
   border-color: rgba(255, 255, 255, 0.3);
 }
 
 .about-cta .btn--outline:hover {
   background-color: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.5);
 }
 
 
 /* ============================================================
    RESPONSIVE — ABOUT PAGE SPECIFIC
    ============================================================ */
 
 /* ─── MOBILE (max-width: 767px) ─── */
 @media (max-width: 767px) {
   .about-hero {
     min-height: 60vh;
     padding-top: calc(var(--space-2xl) + 60px);
     padding-bottom: var(--space-xl);
   }
 
   .about-backbone {
     gap: var(--space-xl);
   }
 
   .about-trust-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .about-cta {
     padding: var(--space-xl);
   }
 
   .about-cta__contact {
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
   }
 
   .about-flow__connector {
     transform: rotate(90deg);
   }
 }
 
 /* ─── TABLET (768px+) ─── */
 @media (min-width: 768px) {
   .about-backbone {
     grid-template-columns: 1fr 1fr;
   }
 
   .about-region {
     grid-template-columns: 1fr 1fr;
     gap: 80px;
   }
 
   .about-audience {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .about-principles {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .about-outcomes {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .about-trust-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 
   .about-trust-badges {
     grid-template-columns: repeat(3, 1fr);
   }
 
   .about-nav-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .about-flow {
     grid-template-columns: 1fr auto 1fr auto 1fr;
     align-items: stretch;
   }
 
   .about-flow__connector {
     transform: none;
   }
 
   .about-flow__connector-line {
     display: block;
     width: 2px;
     height: 40px;
     background-color: var(--border-subtle);
     margin: 0 auto;
   }
 }
 
 /* ─── DESKTOP (1024px+) ─── */
 @media (min-width: 1024px) {
   .about-principles {
     grid-template-columns: repeat(4, 1fr);
   }
 
   .about-trust-badges {
     grid-template-columns: repeat(5, 1fr);
   }
 
   .about-nav-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 
   .about-cta {
     padding: var(--space-3xl);
   }
 }