/* About page — extends the Enterprise Blue homepage design system */

.about-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:72px;
  align-items:center;
  padding-top:92px;
  padding-bottom:84px;
}
.about-hero h1{max-width:12ch}
.about-hero .hero-lede{max-width:62ch}
.about-intro-note{
  margin-top:26px;
  padding-left:18px;
  border-left:3px solid var(--accent);
  color:#475467;
  font-size:15.5px;
  max-width:66ch;
}

.portrait-card{
  min-height:520px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(15,108,189,.02),rgba(15,108,189,.11)),
    url('../../img/about-edmonton.jpg') center 18%/cover no-repeat,
    #E9EEF5;
  position:relative;
}
.portrait-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(16,24,40,.72));
}
.portrait-caption{
  position:absolute;
  left:26px;
  right:26px;
  bottom:24px;
  z-index:1;
  color:white;
}
.portrait-caption small{
  display:block;
  margin-bottom:7px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#D6EAFB;
}
.portrait-caption strong{
  display:block;
  font:600 23px Archivo,sans-serif;
}
.portrait-caption span{
  display:block;
  margin-top:5px;
  color:#E6EDF5;
  font-size:13px;
}

.about-proof{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.about-proof-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.about-proof-grid>div{
  padding:26px 28px;
  border-right:1px solid var(--line);
}
.about-proof-grid>div:first-child{padding-left:0}
.about-proof-grid>div:last-child{border-right:0}
.about-proof-grid strong{
  display:block;
  color:var(--ink);
  font:600 21px Archivo,sans-serif;
  margin-bottom:4px;
}
.about-proof-grid span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

.consulting-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.consulting-card{
  min-height:245px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.consulting-card.accent{border-top:4px solid var(--accent);padding-top:25px}
.consulting-no{
  display:block;
  margin-bottom:38px;
  color:var(--accent);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
}
.consulting-card h3{font-size:22px;margin-bottom:11px}
.consulting-card p{color:#475467;font-size:15px;max-width:58ch}

.story-section{background:var(--surface)}
.story-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:72px;
  align-items:start;
}
.story-sticky{position:sticky;top:110px}
.story-sticky h2{max-width:12ch}
.story-sticky p:not(.eyebrow){margin-top:18px;color:var(--muted);max-width:46ch}
.timeline{border-top:1px solid var(--line)}
.timeline-item{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:26px;
  padding:27px 0;
  border-bottom:1px solid var(--line);
}
.timeline-time{
  color:var(--muted);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  padding-top:4px;
}
.timeline-item h3{font-size:19px;margin-bottom:7px}
.timeline-item p{color:#475467;font-size:14.5px;max-width:68ch}
.timeline-item.current h3,.timeline-item.current .timeline-time{color:var(--accent)}
.timeline-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.timeline-tags span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  color:var(--muted);
  background:var(--paper);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
}

.principles{background:var(--deep);color:var(--deep-text)}
.principles-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:78px;
  align-items:start;
}
.principles-copy h2{color:#F8FAFC;max-width:13ch;margin-top:14px}
.principles-copy p:not(.eyebrow){margin-top:18px;color:#AAB4C3;max-width:48ch}
.principles-copy .eyebrow{color:#7CC3F7}
.principle-list{border-top:1px solid #344054}
.principle{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid #344054;
}
.principle span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#7CC3F7;padding-top:3px}
.principle h3{color:#F8FAFC;font-size:19px;margin-bottom:7px}
.principle p{color:#AAB4C3;font-size:14.5px}

.current-focus-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.focus-card{
  min-height:220px;
  padding:27px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.focus-card .eyebrow{margin-bottom:18px}
.focus-card h3{font-size:21px;margin-bottom:10px}
.focus-card p{color:#475467;font-size:14.5px}
.focus-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.focus-card li{color:var(--muted);font-size:13px}
.focus-card li::before{content:"—";color:var(--accent);margin-right:8px}

.communication-band{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:66px;
  align-items:center;
  padding:36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}
.communication-band h2{margin-top:13px;max-width:17ch}
.communication-band p:not(.eyebrow){margin-top:17px;color:var(--muted);max-width:64ch}
.communication-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:9px;background:var(--paper);overflow:hidden}
.communication-stats div{padding:26px 22px}
.communication-stats div+div{border-left:1px solid var(--line)}
.communication-stats strong{display:block;font:600 31px Archivo,sans-serif;color:var(--ink)}
.communication-stats span{display:block;margin-top:5px;color:var(--muted);font-size:12px}

.about-cta{
  background:var(--surface);
  border-top:1px solid var(--line);
}
.about-cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:70px;
  align-items:center;
}
.about-cta h2{margin-top:14px;max-width:16ch}
.about-cta p:not(.eyebrow){margin-top:18px;color:var(--muted);font-size:16px;max-width:62ch}
.about-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}

@media (max-width:1000px){
  .about-hero{grid-template-columns:1fr;gap:40px;padding-top:72px}
  .portrait-card{min-height:460px;max-width:720px}
  .about-proof-grid{grid-template-columns:1fr 1fr}
  .about-proof-grid>div{border-bottom:1px solid var(--line)}
  .about-proof-grid>div:nth-child(2){border-right:0}
  .about-proof-grid>div:nth-last-child(-n+2){border-bottom:0}
  .consulting-grid{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr;gap:34px}
  .story-sticky{position:static}
  .principles-grid{grid-template-columns:1fr;gap:34px}
  .current-focus-grid{grid-template-columns:1fr}
  .communication-band{grid-template-columns:1fr;gap:30px}
  .communication-stats{max-width:520px}
  .about-cta-grid{grid-template-columns:1fr;gap:28px}
}

@media (max-width:760px){
  .about-hero{padding-top:54px;padding-bottom:60px}
  .portrait-card{min-height:390px}
  .about-proof-grid{grid-template-columns:1fr}
  .about-proof-grid>div,.about-proof-grid>div:first-child,.about-proof-grid>div:nth-last-child(-n+2){padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .about-proof-grid>div:last-child{border-bottom:0}
  .timeline-item{grid-template-columns:1fr;gap:7px;padding:22px 0}
  .timeline-time{padding-top:0}
  .communication-band{padding:26px 22px}
  .communication-stats{grid-template-columns:1fr}
  .communication-stats div+div{border-left:0;border-top:1px solid var(--line)}
}