/*
  /about page — hero (shared .xrt-hero, see hero.css) followed by a series
  of marketing sections. Namespaced .xrt-about-*, relies on the --xrt-*
  tokens defined on .xrt-scope in layout.css (same convention as
  contact.css). Mobile-first; grids collapse to a single column below
  their breakpoint rather than shrinking card text.
*/

/* ---- shared section chrome ------------------------------------------ */
.xrt-about{max-width:1120px;margin:0 auto;padding:0 16px}
.xrt-about__section{padding:40px 0}
.xrt-about__section--alt{background:var(--xrt-cream)}
.xrt-about__section--alt .xrt-about{padding-top:40px;padding-bottom:40px}
.xrt-about__eyebrow{text-align:center;font-family:var(--xrt-font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--xrt-teal)}
.xrt-about__title{text-align:center;font-family:var(--xrt-font-h);font-weight:800;font-size:clamp(22px,3vw,32px);color:var(--xrt-ink);letter-spacing:-.02em;margin:10px 0 0}
.xrt-about__lead{text-align:center;max-width:680px;margin:14px auto 0;font-family:var(--xrt-font-b);font-size:14.5px;line-height:1.75;color:#4c5a54}
.xrt-about__lead + .xrt-about__lead{margin-top:12px}
@media(min-width:768px){
  .xrt-about{padding:0 24px}
  .xrt-about__section{padding:64px 0}
  .xrt-about__section--alt .xrt-about{padding-top:64px;padding-bottom:64px}
}

/* ---- "That is what we built this portal to solve." standout line ---- */
.xrt-about__standout{text-align:center;font-family:var(--xrt-font-h);font-weight:700;font-size:clamp(17px,2.2vw,22px);color:var(--xrt-deep);letter-spacing:-.01em;max-width:640px;margin:0 auto;padding:28px 0 0}

/* ---- accessibility utility -------------------------------------------- */
.xrt-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- inline text links inside lead paragraphs -------------------------- */
.xrt-about__link{color:var(--xrt-teal);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.xrt-about__link:hover{color:var(--xrt-deep)}

/* ---- Speed & Scale: stat callout grid ----------------------------------
   Each stat is its own bordered card (light --xrt-cream fill + --xrt-border
   outline) so the 5 figures read as distinct blocks, not a run of plain
   text. Mobile: 1 per row. ~640px+: 2 per row. ~860px+: 3 per row.
   1180px+ (room for all 5 at a readable width): a single even row. */
.xrt-about-metrics{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.xrt-about-metrics{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.xrt-about-metrics{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1180px){.xrt-about-metrics{grid-template-columns:repeat(5,1fr)}}
.xrt-about-metric{background:var(--xrt-cream);border:1px solid var(--xrt-border);border-radius:var(--xrt-r-lg);padding:20px 16px;text-align:center}
@media(min-width:768px){.xrt-about-metric{padding:24px 18px}}
.xrt-about-metric__num{font-family:var(--xrt-font-h);font-weight:800;font-size:clamp(26px,3.4vw,34px);color:var(--xrt-teal);letter-spacing:-.02em;line-height:1}
.xrt-about-metric__label{font-family:var(--xrt-font-h);font-weight:700;font-size:13.5px;color:var(--xrt-ink);margin-top:10px;line-height:1.4}
.xrt-about-metric__sub{font-family:var(--xrt-font-b);font-size:12px;color:#5c6a63;margin-top:4px;line-height:1.4}

/* ---- Who We Are: text + image ------------------------------------------ */
.xrt-about-intro{display:flex;flex-direction:column;gap:28px}
.xrt-about-intro__text p{font-family:var(--xrt-font-b);font-size:14.5px;line-height:1.75;color:#4c5a54;margin:0 0 14px}
.xrt-about-intro__text p:last-child{margin-bottom:0}
.xrt-about-intro__media{aspect-ratio:4/3;border-radius:var(--xrt-r-lg);overflow:hidden;box-shadow:var(--xrt-shadow-md);background:var(--xrt-cream)}
.xrt-about-intro__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:860px){
  .xrt-about-intro{flex-direction:row;align-items:center;gap:48px}
  .xrt-about-intro__text{flex:1 1 50%}
  .xrt-about-intro__media{flex:1 1 50%}
}

/* ---- What We Offer: imagery-type cards -------------------------------- */
.xrt-about-cards{margin-top:32px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.xrt-about-cards{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.xrt-about-cards{grid-template-columns:repeat(3,1fr)}}
.xrt-about-card{background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-lg);box-shadow:var(--xrt-shadow-sm);padding:24px 22px;transition:box-shadow .2s ease,transform .2s ease}
.xrt-about-card:hover{box-shadow:var(--xrt-shadow-md);transform:translateY(-3px)}
.xrt-about-card__icon{width:44px;height:44px;border-radius:12px;background:var(--xrt-cream);color:var(--xrt-teal);display:grid;place-items:center;margin-bottom:14px}
.xrt-about-card__icon svg{width:22px;height:22px}
.xrt-about-card__title{font-family:var(--xrt-font-h);font-weight:700;font-size:16px;color:var(--xrt-ink);margin:0 0 8px;letter-spacing:-.01em}
.xrt-about-card__desc{font-family:var(--xrt-font-b);font-size:13.5px;line-height:1.65;color:#5c6a63;margin:0}

/* ---- Built on Real Intelligence: stat cards, each topped with a photo
   of that case study ------------------------------------------------- */
.xrt-about-stats{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.xrt-about-stats{grid-template-columns:1fr 1fr}}
.xrt-about-stat{min-width:0;background:var(--xrt-deep);color:#fff;border-radius:var(--xrt-r-lg);overflow:hidden;box-shadow:var(--xrt-shadow-sm)}
.xrt-about-stat__media{height:180px;overflow:hidden;background:var(--xrt-cream-d)}
.xrt-about-stat__media img{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}
@media(min-width:640px){.xrt-about-stat__media{height:200px}}
@media(min-width:980px){.xrt-about-stat__media{height:220px}}
.xrt-about-stat__body{padding:20px 22px 24px}
.xrt-about-stat__num{font-family:var(--xrt-font-h);font-weight:800;font-size:clamp(24px,3vw,30px);color:var(--xrt-lime);letter-spacing:-.02em;line-height:1}
.xrt-about-stat__label{font-family:var(--xrt-font-h);font-weight:700;font-size:13px;color:#fff;margin:8px 0 6px}
.xrt-about-stat__desc{font-family:var(--xrt-font-b);font-size:13px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}

/* ---- Where Our Imagery Gets Used: industry pill grid ------------------ */
.xrt-about-pills{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.xrt-about-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:#fff;border:1px solid var(--xrt-border);font-family:var(--xrt-font-h);font-weight:600;font-size:13.5px;color:var(--xrt-ink)}
.xrt-about-pill svg{width:16px;height:16px;color:var(--xrt-teal);flex:0 0 auto}

/* ---- Case in Point: Derna flood, dark highlight card ------------------ */
.xrt-about-case{background:var(--xrt-deep);border-radius:var(--xrt-r-lg);overflow:hidden;box-shadow:var(--xrt-shadow-md);display:flex;flex-direction:column}
.xrt-about-case__media{aspect-ratio:16/10;background:var(--xrt-cream);display:flex;gap:2px;min-width:0}
.xrt-about-case__media img{flex:1 1 50%;min-width:0;width:50%;height:100%;object-fit:cover;display:block}
/* single-image case studies (e.g. Sri Lanka) skip the split layout */
.xrt-about-case__media img:only-child{flex-basis:100%;width:100%}
.xrt-about-case__body{padding:28px 22px 32px;color:#fff}
.xrt-about-case__eyebrow{font-family:var(--xrt-font-h);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--xrt-lime);margin:0 0 10px}
.xrt-about-case__title{font-family:var(--xrt-font-h);font-weight:800;font-size:clamp(19px,2.4vw,25px);letter-spacing:-.01em;margin:0 0 12px}
.xrt-about-case__text{font-family:var(--xrt-font-b);font-size:14px;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 20px}
.xrt-about-case__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.xrt-about-case__chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:var(--xrt-r-sm);padding:10px 14px}
.xrt-about-case__chip b{display:block;font-family:var(--xrt-font-h);font-weight:800;font-size:16px;color:var(--xrt-lime)}
.xrt-about-case__chip span{display:block;font-family:var(--xrt-font-b);font-size:11.5px;color:rgba(255,255,255,.68);margin-top:2px}
/* 4-chip variant (Sri Lanka case): 2x2 on narrow screens, a single row of 4
   once there's room, instead of auto-fit's uneven wrap at in-between widths. */
@media(min-width:420px){.xrt-about-case__chips--four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.xrt-about-case__chips--four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){.xrt-about-case__chips--four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.xrt-about-case__chips--four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){
  .xrt-about-case{flex-direction:row}
  .xrt-about-case--reverse{flex-direction:row-reverse}
  .xrt-about-case__media{flex:1 1 45%;aspect-ratio:auto}
  .xrt-about-case__body{flex:1 1 55%;padding:40px}
}

/* ---- Our Mission: centered statement band ----------------------------- */
.xrt-about-mission{background:var(--xrt-cream-d);border-radius:var(--xrt-r-lg);padding:32px 24px;text-align:center;position:relative}
.xrt-about-mission__mark{font-family:var(--xrt-font-h);font-size:52px;line-height:1;color:var(--xrt-lime-ink);opacity:.25;margin:0 0 -12px}
.xrt-about-mission__text{font-family:var(--xrt-font-h);font-weight:700;font-size:clamp(17px,2.4vw,22px);line-height:1.5;color:var(--xrt-ink);letter-spacing:-.01em;max-width:760px;margin:0 auto}
@media(min-width:768px){.xrt-about-mission{padding:48px}}

/* ---- Why Teams Choose Us: checklist ------------------------------------ */
.xrt-about-checklist{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.xrt-about-checklist{grid-template-columns:1fr 1fr;gap:20px}}
.xrt-about-check{display:flex;gap:12px;align-items:flex-start}
.xrt-about-check__icon{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--xrt-lime);color:var(--xrt-lime-ink);display:grid;place-items:center}
.xrt-about-check__icon svg{width:15px;height:15px}
.xrt-about-check__text{font-family:var(--xrt-font-b);font-size:14px;line-height:1.6;color:var(--xrt-ink);margin:3px 0 0}

/* ---- FAQ accordion (same interaction pattern as the homepage FAQ) ----- */
.xrt-about-faq__list{margin-top:32px;background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-lg);box-shadow:var(--xrt-shadow-sm);overflow:hidden}
.xrt-about-faq-item{border-bottom:1px solid var(--xrt-border-light)}
.xrt-about-faq-item:last-child{border-bottom:none}
.xrt-about-faq-item__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:none;cursor:pointer;padding:18px 22px;min-height:44px;font-family:var(--xrt-font-h);font-weight:700;font-size:15px;color:var(--xrt-ink);transition:background .15s ease}
.xrt-about-faq-item__q:hover{background:var(--xrt-cream)}
.xrt-about-faq-item__q:focus-visible{outline:2px solid var(--xrt-teal);outline-offset:-2px}
.xrt-about-faq-item__chev{flex:0 0 auto;width:18px;height:18px;color:var(--xrt-teal);transition:transform .2s ease}
.xrt-about-faq-item.open .xrt-about-faq-item__chev{transform:rotate(180deg)}
.xrt-about-faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.xrt-about-faq-item__a>div{overflow:hidden}
.xrt-about-faq-item.open .xrt-about-faq-item__a{grid-template-rows:1fr}
.xrt-about-faq-item__a p{margin:0 22px 18px;font-family:var(--xrt-font-b);font-size:13.5px;line-height:1.7;color:#5c6a63}
@media(max-width:600px){
  .xrt-about-faq-item__q{padding:16px}
  .xrt-about-faq-item__a p{margin:0 16px 16px;font-size:13px}
}

/* ---- Closing CTA banner ------------------------------------------------ */
.xrt-about-cta{background:var(--xrt-deep);border-radius:var(--xrt-r-lg);padding:36px 24px;text-align:center}
.xrt-about-cta__text{font-family:var(--xrt-font-h);font-weight:700;font-size:clamp(16px,2.2vw,20px);color:#fff;max-width:640px;margin:0 auto 20px;line-height:1.5}
.xrt-about-cta__btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 28px;border-radius:var(--xrt-r-md);background:var(--xrt-lime);color:var(--xrt-lime-ink);font-family:var(--xrt-font-h);font-weight:700;font-size:15.5px;text-decoration:none;transition:filter .15s ease}
.xrt-about-cta__btn:hover{filter:brightness(1.06)}
@media(min-width:768px){.xrt-about-cta{padding:56px 40px}}