/* =========================================================
   ABOUT PAGE — matches the Desh Capital home page design
   system (theme.css / .dc-scope tokens).
   ========================================================= */

.dc-about-hero{background:var(--dc-bg);position:relative;overflow:hidden}

/* subtle roofline texture, echoes the pattern used site-wide */
.dc-about-hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(65deg,var(--dc-border) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(-65deg,var(--dc-border) 0 1px,transparent 1px 46px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
  mask-image:linear-gradient(180deg,#000,transparent 70%);
  opacity:.6;
}
:root[data-theme="dark"] .dc-about-hero::before{opacity:.32}
.dc-about-hero .dc-container{position:relative;z-index:1}

/* our story: text + gradient panel, echoes .dc-why-feature */
.dc-about-story{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;margin-bottom:88px}
.dc-about-story-text p{font-size:.98rem;color:var(--dc-txt-2);line-height:1.85;margin-bottom:16px}
.dc-about-story-text p:last-child{margin-bottom:0}
.dc-about-story-text strong{color:var(--dc-txt)}

.dc-about-panel{position:relative;overflow:hidden;border-radius:var(--dc-r-xl);background:linear-gradient(160deg,var(--dc-forest),var(--dc-deep));box-shadow:var(--dc-sh-lg);min-height:360px;display:flex}
.dc-about-panel-pattern{position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(65deg,rgba(255,255,255,.08) 0 1px,transparent 1px 34px),repeating-linear-gradient(-65deg,rgba(255,255,255,.08) 0 1px,transparent 1px 34px);
  -webkit-mask-image:radial-gradient(circle at 30% 30%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 30% 30%,#000,transparent 70%)}
.dc-about-panel-inner{position:relative;z-index:1;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.dc-about-panel-quote{font-family:var(--dc-font-h);font-size:1.5rem;font-weight:700;color:#fff;line-height:1.35}
.dc-about-panel-sub{font-size:.9rem;color:rgba(255,255,255,.75);line-height:1.75;max-width:380px}
.dc-about-panel-sign{font-family:var(--dc-font-h);font-style:italic;font-size:1.05rem;color:var(--dc-gold-lt);margin-top:6px}

/* mission & values */
.dc-about-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:88px}
.dc-about-value-card{background:var(--dc-bg-card);border:1px solid var(--dc-border);border-radius:var(--dc-r-lg);padding:30px 26px;transition:all .25s var(--dc-ease)}
.dc-about-value-card:hover{border-color:var(--dc-border-md);box-shadow:var(--dc-sh-md);transform:translateY(-3px)}
.dc-about-value-title{font-weight:700;font-size:1rem;color:var(--dc-txt);margin:16px 0 6px}
.dc-about-value-desc{font-size:.85rem;color:var(--dc-txt-3);line-height:1.65}

/* by-the-numbers row: plain cards, deliberately not the gradient
   banner .dc-why-band uses on the home page, so this page reads
   as its own thing rather than a repeated section */
.dc-about-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:88px}
.dc-about-stat{text-align:center;background:var(--dc-bg-card);border:1px solid var(--dc-border);border-radius:var(--dc-r-lg);padding:28px 16px;transition:all .25s var(--dc-ease)}
.dc-about-stat:hover{border-color:var(--dc-border-md);box-shadow:var(--dc-sh-sm)}
.dc-about-stat-num{font-family:var(--dc-font-h);font-size:2.1rem;font-weight:700;color:var(--dc-green);line-height:1}
.dc-about-stat-num span{color:var(--dc-gold)}
:root[data-theme="dark"] .dc-about-stat-num{color:var(--dc-mint)}
.dc-about-stat-label{font-size:.8rem;color:var(--dc-txt-3);font-weight:600;margin-top:6px}

/* milestone timeline */
.dc-about-timeline{max-width:720px;margin:0 auto;position:relative}
.dc-about-timeline::before{content:'';position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--dc-border-md)}
.dc-about-timeline-item{position:relative;padding-left:56px;margin-bottom:34px}
.dc-about-timeline-item:last-child{margin-bottom:0}
.dc-about-timeline-dot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--dc-green),var(--dc-forest));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dc-font-h);font-weight:700;font-size:.9rem;box-shadow:0 0 0 5px var(--dc-bg)}
.dc-about-timeline-year{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dc-green);margin-bottom:4px}
:root[data-theme="dark"] .dc-about-timeline-year{color:var(--dc-mint)}
.dc-about-timeline-title{font-family:var(--dc-font-h);font-weight:700;font-size:1.15rem;color:var(--dc-txt);margin-bottom:6px}
.dc-about-timeline-desc{font-size:.88rem;color:var(--dc-txt-3);line-height:1.65}

/* closing CTA — a light bordered card, deliberately not the dark
   gradient banner .dc-cta-wrap uses on the home/contact/faq pages */
.dc-about-cta{margin-top:72px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;background:var(--dc-bg-card);border:1px solid var(--dc-border);border-left:4px solid var(--dc-gold);border-radius:var(--dc-r-xl);padding:36px 40px;box-shadow:var(--dc-sh-md)}
.dc-about-cta-icon{flex-shrink:0}
.dc-about-cta-text{flex:1;min-width:220px}
.dc-about-cta-title{font-family:var(--dc-font-h);font-size:1.4rem;font-weight:700;color:var(--dc-txt);margin-bottom:6px}
.dc-about-cta-sub{font-size:.9rem;color:var(--dc-txt-3);line-height:1.6}
.dc-about-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

@media(max-width:1100px){
  .dc-about-story{grid-template-columns:1fr;gap:32px}
  .dc-about-values-grid{grid-template-columns:1fr 1fr}
  .dc-about-stats-row{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .dc-about-story{margin-bottom:56px}
  .dc-about-values-grid{grid-template-columns:1fr;margin-bottom:56px}
  .dc-about-panel-inner{padding:32px 26px}
  .dc-about-panel-quote{font-size:1.25rem}
  .dc-about-stats-row{grid-template-columns:1fr 1fr;margin-bottom:56px}
  .dc-about-timeline-item{padding-left:48px}
  .dc-about-cta{padding:28px 24px;margin-top:48px}
  .dc-about-cta-actions{width:100%}
  .dc-about-cta-actions a,.dc-about-cta-actions button{flex:1;justify-content:center}
}