/* ==========================================================================
   CTPL · dir/about.css
   About CTPL: hero, stats band, leadership, offer grid, vision/mission, corporate info.

   Sits beside about.html and is loaded only by it.

   Cascade order for this page:
     1. ../css/global.css      tokens, base elements, site chrome, RFQ band
     2. ../css/components.css  cross-page patterns (.hl, .hero-wash, .surface-dark, ...)
     3. this file                 everything unique to the page

   Loaded last, so any rule here of equal specificity wins without !important.
   ========================================================================== */

  /* About hero */
  /* Background wash comes from .hero-wash (components.css) */
  .abt-hero .wrap{position:relative;padding:88px 26px 88px;text-align:center}
  .abt-hero h1{font-size:3.2rem;font-weight:700;margin:1.1rem auto;max-width:920px;letter-spacing:-.03em}
  .abt-hero p.lead{font-size:1.18rem;color:var(--ink-soft);max-width:46rem;margin-left:auto;margin-right:auto}
  .abt-hero p.lead b{color:var(--ink);font-weight:600}
  .abt-hero .brandline{margin-top:1.1rem;font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}

  /* Stat band */
  /* Surface + texture colour come from .surface-dark / .grid-tex--dark (components.css) */
  .stats .grid-tex{-webkit-mask-image:radial-gradient(120% 130% at 85% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 130% at 85% 0%,#000,transparent 72%)}
  .stats .glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(42,90,214,.24),transparent 68%);top:-280px;right:-140px;pointer-events:none}
  .stats .wrap{position:relative;padding:64px 26px}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .stats-grid .stat{position:relative;padding:6px 38px;text-align:center}
  .stats-grid .stat:first-child{padding-left:0}
  .stats-grid .stat:last-child{padding-right:0}
  .stats-grid .stat:not(:first-child)::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
  .stat-ic{width:46px;height:46px;border-radius:13px;background:rgba(159,210,198,.12);border:1px solid rgba(159,210,198,.24);display:grid;place-items:center;color:var(--mint);margin:0 auto 22px}
  .stat-ic svg{width:23px;height:23px}
  .stats .num{display:block;font-family:var(--fd);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
  .stats .num i{font-style:normal;color:var(--mint);font-size:1.5rem;margin-left:3px;letter-spacing:0}
  .stats .k{display:block;margin-top:16px;font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
  .stats .l{display:block;margin:9px auto 0;font-size:.9rem;color:#aab7d9;max-width:22ch}

  /* Story / two-column */
  .story{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
  .story .prose p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:1.15rem}
  .story .prose p b{color:var(--ink);font-weight:600}
  .story .prose p:last-child{margin-bottom:0}
  .principles{background:linear-gradient(155deg,var(--blue) 0%,var(--blue-dark) 60%,var(--navy) 100%);color:#fff;border-radius:22px;padding:34px 32px;box-shadow:var(--shadow-lg);overflow:hidden}
  .principles .frings{position:absolute;right:-40px;bottom:-46px;width:190px;opacity:.14;pointer-events:none}
  .principles h3{color:#fff;font-size:1.3rem;margin-bottom:1.3rem;position:relative}
  .principles ul{list-style:none;position:relative;display:grid;gap:1.1rem}
  .principles li{display:flex;gap:.9rem;align-items:flex-start}
  .principles li .pn{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--mint)}
  .principles li .pn svg{width:18px;height:18px}
  .principles li strong{display:block;font-family:var(--fd);font-weight:600;font-size:1.02rem;color:#fff;margin-bottom:.15rem}
  .principles li span{font-size:.9rem;color:#cdd8f4}

  /* Leadership */
  .lead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
  .lead-grid .prose p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:1.15rem}
  .lead-grid .prose p b{color:var(--ink);font-weight:600}
  .lead-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .lead-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:var(--shadow)}
  .lead-card b{display:block;font-family:var(--fd);font-weight:700;font-size:2.1rem;color:var(--blue);line-height:1;letter-spacing:-.03em}
  .lead-card span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--ink-soft)}
  .lead-card.wide{grid-column:1 / -1;background:var(--mint-soft);border-color:#cfe8e0}
  .lead-card.wide .rl{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:.5rem}
  .lead-card.wide p{font-size:.96rem;color:var(--ink)}

  /* What we offer */
  .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  /* Each card is an <a>. Column layout so the CTA can sit on the bottom edge
     whatever the paragraph length, and the six cards stay a tidy grid. */
  .offer{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:23px 22px;box-shadow:var(--shadow);transition:.25s var(--ease);overflow:hidden}
  .offer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),#ff7a5c);transform:scaleX(0);transform-origin:left;transition:.3s var(--ease)}
  .offer:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#c5d4ee}
  .offer:hover::before{transform:scaleX(1)}
  .offer .icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(155deg,var(--blue),var(--blue-dark));color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px rgba(24,64,152,.22);margin-bottom:.8rem}
  .offer .icon svg{width:22px;height:22px}
  .offer h3{font-size:1.14rem;font-weight:700;line-height:1.25;margin-bottom:.38rem}
  /* Tighter than body copy: these are six scannable summaries, not prose. */
  .offer p{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
  .offer-more{margin-top:auto;padding-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;
    font-family:var(--fb);font-weight:600;font-size:.85rem;color:var(--blue)}
  .offer-more svg{width:15px;height:15px;transition:transform .25s var(--ease)}
  .offer:hover .offer-more svg{transform:translateX(4px)}

  /* Vision & Mission dark band */
  /* Surface + texture colour come from .surface-dark / .grid-tex--dark (components.css) */
  .vm .grid-tex{-webkit-mask-image:radial-gradient(120% 120% at 15% 10%,#000,transparent 70%);mask-image:radial-gradient(120% 120% at 15% 10%,#000,transparent 70%)}
  .vm .wrap{position:relative}
  .vm .sec-head .eyebrow{color:var(--mint)}
  .vm .sec-head .eyebrow::before{background:var(--mint)}
  .vm .sec-head h2{color:#fff}
  .vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .vm-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:34px 32px}
  .vm-card .tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:1rem}
  .vm-card .tag svg{width:18px;height:18px}
  .vm-card h3{color:#fff;font-size:1.5rem;margin-bottom:.7rem}
  .vm-card p{color:#b7c4e4;font-size:1rem}
  .vm-card.mission{background:linear-gradient(155deg,rgba(42,90,214,.22),rgba(11,28,72,.1));border-color:rgba(159,210,198,.28)}

  /* Who we serve */
  /* Centred with its heading: the chips are a set, not a list to read down. */
  .serve-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
  .serve-chips span{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.7rem 1.15rem;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow)}
  .serve-chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}

  /* Corporate info */
  .corp{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr}
  .corp .info{padding:44px 44px}
  .corp .info h2{font-size:1.9rem;font-weight:700;margin-bottom:1.6rem}
  .corp dl{display:grid;grid-template-columns:1fr;gap:1.15rem}
  .corp .row{display:grid;grid-template-columns:170px 1fr;gap:1rem;align-items:start;padding-bottom:1.15rem;border-bottom:1px solid var(--line)}
  .corp .row:last-child{border-bottom:0;padding-bottom:0}
  .corp dt{font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
  .corp dd{font-size:1rem;color:var(--ink)}
  .corp dd b{font-weight:600}
  .corp dd a:hover{color:var(--blue)}
  .corp .aside{position:relative;background:linear-gradient(155deg,var(--blue) 0%,var(--blue-dark) 60%,var(--navy) 100%);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .corp .aside .frings{position:absolute;right:-40px;bottom:-46px;width:200px;opacity:.16;pointer-events:none}
  .corp .aside .rl{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:.8rem;position:relative}
  .corp .aside h3{color:#fff;font-size:1.55rem;margin-bottom:.7rem;position:relative}
  .corp .aside p{color:#cdd8f4;font-size:.98rem;margin-bottom:1.6rem;position:relative}
  .corp .aside .btn{align-self:flex-start;position:relative}

  @media(max-width:940px){
    .abt-hero .wrap{padding:64px 26px 64px}
    .abt-hero h1{font-size:2.5rem}
    .stats .wrap{padding:54px 26px}
    .stats-grid{grid-template-columns:1fr 1fr;gap:16px}
    .stats-grid .stat,.stats-grid .stat:first-child,.stats-grid .stat:last-child{padding:24px 22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px}
    .stats-grid .stat:not(:first-child)::after{display:none}
    .stats .num{font-size:2.6rem}
    .stat-ic{margin-bottom:18px}
    .story{grid-template-columns:1fr;gap:34px}
    .principles{position:static}
    .lead-grid{grid-template-columns:1fr;gap:34px}
    .offer-grid{grid-template-columns:1fr 1fr}
    .vm-grid{grid-template-columns:1fr}
    .corp{grid-template-columns:1fr}
  }

  @media(max-width:600px){
    .abt-hero .wrap{padding:54px 20px 54px}
    .abt-hero h1{font-size:2rem;letter-spacing:-.02em}
    .abt-hero p.lead{font-size:1.04rem}
    .stats .wrap{padding:46px 20px}
    .stats-grid{gap:12px}
    .stats-grid .stat,.stats-grid .stat:first-child,.stats-grid .stat:last-child{padding:18px 16px}
    .stats .num{font-size:2.1rem}
    .stats .num i{font-size:1.2rem}
    .stat-ic{width:40px;height:40px;margin-bottom:14px}
    .stat-ic svg{width:20px;height:20px}
    .stats .l{max-width:none}
    .offer-grid{grid-template-columns:1fr}
    .lead-cards{grid-template-columns:1fr}
    .corp .info,.corp .aside{padding:30px 24px}
    .corp .row{grid-template-columns:1fr;gap:.3rem}
  }