/**
 * AppStudio About Us — polished 8-section layout (v5)
 */

:root{
  --za-blue:#0057ff;
  --za-blue-deep:#0040c7;
  --za-ink:#0b1220;
  --za-muted:#5b6475;
  --za-soft:#f3f6fb;
  --za-line:rgba(11,18,32,.1);
  --za-max:1100px;
  --za-space:100px;
  --za-font:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --za-ease:cubic-bezier(.22,.61,.36,1);
}

.za,
.za *{ box-sizing:border-box; }
.za{
  font-family:var(--za-font);
  color:var(--za-ink);
  background:#fff;
  overflow-x:clip;
  line-height:1.6;
}
.za a{ text-decoration:none; }
.za img{ max-width:100%; height:auto; display:block; }
.za-wrap{
  width:100%;
  max-width:var(--za-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}

.za-eyebrow{
  margin:0 0 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--za-ink);
  display:inline-block;
}
.za-eyebrow-blue{ color:var(--za-blue); }
.za-eyebrow-light{ color:rgba(255,255,255,.55); }
.za-eyebrow-center{ display:block; text-align:center; }

.za-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--za-blue);
  color:#fff !important;
  font-size:14px;
  font-weight:600;
  padding:15px 24px;
  border-radius:6px;
  border:0;
  transition:background .2s ease, transform .2s var(--za-ease), box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(0,87,255,.22);
}
.za-btn:hover{
  background:var(--za-blue-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,87,255,.28);
}
.za-btn-dark{
  background:#fff;
  color:var(--za-ink) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.za-btn-dark:hover{
  background:#f4f7fb;
  color:var(--za-ink) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.za-btn .chev{ font-size:18px; line-height:1; }

/* ========== 1. HERO (enterprise structured split) ==========
   Text sits on a controlled dark field instead of over a photo, so contrast is
   deterministic and the first paint is cheap. The photo moves into a framed
   right column where it can be composed rather than scrimmed. No vh units:
   mobile browser-chrome collapse makes them jump. */
.za-hero{
  position:relative;
  color:#fff;
  background:#070b14;
  overflow:hidden;
  isolation:isolate;
}
.za-hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
/* Hairline grid stops the dark field reading as a flat void. Masked so it fades
   out before it reaches the stats strip. */
.za-hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(125% 95% at 12% 0%, #000 0%, transparent 76%);
  mask-image:radial-gradient(125% 95% at 12% 0%, #000 0%, transparent 76%);
}
.za-hero-glow{
  position:absolute;
  top:-24%;
  right:-8%;
  width:min(760px,72%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,87,255,.32) 0%, rgba(0,87,255,.10) 46%, transparent 70%);
}
.za-hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  /* stretch, not center: the copy column runs ~217px taller than a 4/3 figure,
     which left a big dead band above and below the image. Letting the figure
     fill the row height keeps both columns flush. */
  align-items:stretch;
  gap:64px;
  padding-top:92px;
  /* a little deeper than the top: the stats strip used to terminate the dark
     field, and without it the hero would end abruptly at the visual's edge */
  padding-bottom:104px;
}
.za-hero-copy{ min-width:0; }
.za-hero-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.za-hero-label::before{
  content:"";
  flex:none;
  width:28px;
  height:2px;
  background:var(--za-blue);
}
.za-hero h1{
  margin:0 0 22px;
  font-size:clamp(38px,4.6vw,60px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.03em;
  color:#fff;
}
.za-hero-support{
  margin:0 0 34px;
  max-width:56ch;
  font-size:17.5px;
  line-height:1.68;
  font-weight:400;
  color:rgba(255,255,255,.78);
}
.za-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:38px;
}
.za-hero-actions .za-btn{ padding:16px 26px; font-size:15px; }
.za-hero-ghost{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:15px 24px;
  /* .42 not .26 — the border is this button's only visible boundary, so it has
     to clear WCAG 1.4.11 non-text contrast (3:1) against #070b14. .26 gives 2.1:1. */
  border:1px solid rgba(255,255,255,.42);
  border-radius:6px;
  font-size:15px;
  font-weight:600;
  color:#fff !important;
  background:transparent;
  transition:border-color .2s ease, background .2s ease, transform .2s var(--za-ease);
}
.za-hero-ghost:hover{
  border-color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.07);
  transform:translateY(-2px);
}
.za-hero-ghost .arw{ display:inline-block; transition:transform .2s var(--za-ease); }
.za-hero-ghost:hover .arw{ transform:translateX(4px); }
.za-hero .za-btn:focus-visible,
.za-hero-ghost:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
/* Recognition: real third-party platforms only. Their marks are dark (#121826),
   so they sit on light chips rather than being inverted — inverting would strip
   Clutch red and DesignRush cyan from partner logos. */
.za-hero-rec-label{
  margin:0 0 12px;
  /* 12px floor and .56 alpha: at 11px/.46 this measured 4.65:1, passing only by
     a hair and under the 12px minimum for readable text. */
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}
.za-hero-rec-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.za-hero-rec-list li{
  display:flex;
  align-items:center;
  padding:8px 13px;
  background:#fff;
  border-radius:8px;
}
.za-hero-rec-list img{
  height:22px;
  width:auto;
}
.za-hero-visual{
  position:relative;
  margin:0;
  /* no aspect-ratio at desktop: the figure takes its height from the stretched
     grid row. The floor stops it collapsing if the copy is ever trimmed. */
  min-height:400px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.za-hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* subject sits left of centre in the source frame */
  object-position:32% center;
}
.za-hero-visual figcaption{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:56px 18px 18px;
  background:linear-gradient(180deg, rgba(6,10,18,0) 0%, rgba(6,10,18,.88) 64%);
}
.za-hero-visual figcaption span{
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:12.5px;
  font-weight:500;
  line-height:1.2;
  color:#fff;
  white-space:nowrap;
}
@keyframes za-hero-rise{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: no-preference){
  .za-hero-copy > *,
  .za-hero-visual{ animation:za-hero-rise .55s var(--za-ease) both; }
  .za-hero-copy > *:nth-child(2){ animation-delay:.06s; }
  .za-hero-copy > *:nth-child(3){ animation-delay:.12s; }
  .za-hero-copy > *:nth-child(4){ animation-delay:.18s; }
  .za-hero-copy > *:nth-child(5){ animation-delay:.24s; }
  .za-hero-visual{ animation-delay:.14s; }
}

/* ========== 2. ENGINEERING (editorial split — HCL / AppInventiv inspired) ========== */
.za-eng{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.za-eng-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px 48px;
  align-items:start;
}
.za-eng-photo{
  position:relative;
  overflow:hidden;
  background:#e8edf5;
  aspect-ratio:4/5;
  max-width:440px;
  width:100%;
}
.za-eng-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.za-eng-label{
  margin:0 0 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--za-muted);
}
.za-eng-copy h2{
  margin:0 0 22px;
  font-size:clamp(28px,3vw,40px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-0.025em;
  max-width:480px;
  color:var(--za-ink);
}
.za-eng-lead{
  margin:0 0 16px;
  font-size:17px;
  line-height:1.7;
  color:var(--za-ink);
  max-width:500px;
  font-weight:500;
}
.za-eng-copy > p:not(.za-eng-label):not(.za-eng-lead){
  margin:0 0 32px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--za-muted);
  max-width:500px;
}
.za-eng-points{
  list-style:none;
  margin:0 0 36px;
  padding:0;
  max-width:500px;
  border-top:1px solid var(--za-line);
}
.za-eng-points li{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--za-line);
  align-items:start;
}
.za-eng-points strong{
  font-size:14px;
  font-weight:600;
  color:var(--za-ink);
  line-height:1.4;
}
.za-eng-points span{
  font-size:14px;
  line-height:1.55;
  color:var(--za-muted);
}
.za-eng-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  color:#fff !important;
  background:var(--za-ink);
  padding:14px 22px;
  border-radius:2px;
  transition:background .2s ease;
}
.za-eng-cta::after{
  content:"\2192";
  font-size:16px;
  line-height:1;
}
.za-eng-cta:hover{ background:#1a2438; }

/* ========== 3. PROOF ========== */
/* ========== 3. PROOF (editorial recognition — AppInventiv inspired) ========== */
.za-proof{
  background:#f4f6fa;
  padding:var(--za-space) 0;
  border-top:1px solid var(--za-line);
  border-bottom:1px solid var(--za-line);
}
.za-proof-head{
  max-width:640px;
  margin:0 auto 56px;
  text-align:center;
}
.za-proof-label{
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--za-muted);
}
.za-proof-head h2{
  margin:0 0 18px;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:var(--za-ink);
}
.za-proof-lead{
  margin:0;
  font-size:16.5px;
  line-height:1.7;
  color:var(--za-muted);
}
.za-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--za-line);
}
.za-proof-item{
  padding:40px 32px 8px;
  border-right:1px solid var(--za-line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.za-proof-item:last-child{ border-right:0; }
.za-proof-logo{
  display:flex;
  align-items:center;
  min-height:48px;
  margin-bottom:4px;
}
.za-proof-logo img{
  height:36px;
  width:auto;
  max-width:140px;
  object-fit:contain;
}
.za-proof-item strong{
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.za-proof-item span{
  font-size:14.5px;
  line-height:1.65;
  color:var(--za-muted);
}

/* ========== 4. CLIENTS (dark logo wall) ========== */
.za-clients{
  background:#1a1a1a;
  padding:clamp(64px,8vw,104px) 0;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
}
.za-clients-head{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}
.za-clients-head h2{
  margin:0;
  font-size:clamp(24px,3.2vw,36px);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.35;
  color:#fff;
}
/* Centred flex wrap rather than a fixed 5-column grid: the logo count is not a
   multiple of the column count (14 items left a 4-item row hugging the left edge),
   and flex centres whatever the trailing row happens to hold. Adding or removing
   a client no longer needs column arithmetic. */
.za-clients-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:28px 36px;
}
.za-clients-item{
  /* fixed basis, not width:100%. Under the old grid that meant "fill the cell";
     in a flex row it would mean "fill the row" and stack every logo vertically.
     148px matches the img max-width. */
  flex:0 0 148px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
}
.za-clients-item img{
  max-width:148px;
  width:100%;
  height:52px;
  object-fit:contain;
  /* Not brightness(0) invert(1). That flattens artwork and background to the same
     black before inverting, so any logo supplied on an opaque white background
     came out as a solid white block (5 of the 14 did).
     invert(1) turns a white background black, and mix-blend-mode:screen renders
     black as transparent, so transparent-backed and white-backed artwork both
     resolve to a light mark on the dark section. grayscale(1) first so brand
     colours do not invert into odd hues. */
  filter:grayscale(1) invert(1);
  mix-blend-mode:screen;
  opacity:.9;
  transition:opacity .25s ease, transform .25s ease;
}
/* escape hatch for artwork already supplied as white on transparent */
.za-clients-item.is-mono img{
  filter:none;
  mix-blend-mode:normal;
  opacity:.92;
}
.za-clients-item:hover img{
  opacity:1;
  transform:translateY(-2px);
}

/* ========== 5. LEADERSHIP (tight editorial split + founder) ========== */
.za-ceo{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.za-ceo-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:40px 48px;
  align-items:start;
}
.za-ceo-photo{
  position:relative;
  overflow:hidden;
  background:#f0f3f8;
  aspect-ratio:1;
  width:100%;
  max-width:420px;
}
.za-ceo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.za-ceo-label{
  margin:0 0 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--za-muted);
}
.za-ceo-copy h2{
  margin:0 0 16px;
  font-size:clamp(26px,2.8vw,36px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-0.025em;
  max-width:520px;
  color:var(--za-ink);
}
.za-ceo-lead{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.65;
  color:var(--za-ink);
  max-width:520px;
  font-weight:500;
}
.za-ceo-copy > p:not(.za-ceo-label):not(.za-ceo-lead){
  margin:0 0 24px;
  font-size:15px;
  line-height:1.7;
  color:var(--za-muted);
  max-width:520px;
}
.za-ceo-who{
  padding-top:18px;
  border-top:1px solid var(--za-line);
  max-width:520px;
}
.za-ceo-who strong{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--za-ink);
  margin-bottom:3px;
  letter-spacing:-0.01em;
}
.za-ceo-who span{
  font-size:13.5px;
  line-height:1.45;
  color:var(--za-muted);
}
/* display:flex (not inline-flex) so the link starts its own line under the title.
   A 36px mark inside 4px padding gives a 44px touch target while keeping the icon
   the same visual size as Zazz's; the negative left margin cancels the padding so
   the icon still aligns flush left with the name above it. */
.za-ceo-linkedin{
  display:flex;
  width:max-content;
  margin:10px 0 0 -4px;
  padding:4px;
  border-radius:8px;
  color:#0a66c2;
  transition:color .18s ease, transform .18s var(--za-ease);
}
.za-ceo-linkedin svg{
  width:36px;
  height:36px;
  display:block;
}
.za-ceo-linkedin:hover{
  color:#004182;
  transform:translateY(-1px);
}
.za-ceo-linkedin:focus-visible{
  outline:2px solid var(--za-blue);
  outline-offset:2px;
}

/* ========== 5. OUR PURPOSE (vertical tabs + content card) ========== */
.za-purpose{
  padding:var(--za-space) 0;
  background:linear-gradient(90deg, #e8f1f8 0%, #eef1f7 50%, #f1eef7 100%);
  color:var(--za-ink);
}
.za-purpose-head{
  margin:0 0 36px;
  max-width:720px;
}
.za-purpose-head h2{
  margin:0 0 12px;
  font-size:clamp(30px,3.6vw,44px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.12;
}
.za-purpose-head p{
  margin:0;
  font-size:16.5px;
  line-height:1.6;
  color:var(--za-muted);
}
.za-purpose-head strong{
  color:var(--za-ink);
  font-weight:600;
}
.za-purpose-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}
.za-purpose-tabs{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.za-purpose-tab{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;
  gap:10px;
  align-items:center;
  width:100%;
  padding:14px 14px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.45);
  color:var(--za-ink);
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background .2s ease, color .2s ease;
}
.za-purpose-tab-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--za-muted);
}
.za-purpose-tab-chev{
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  opacity:.35;
  justify-self:end;
}
.za-purpose-tab.is-active{
  background:#dce8f8;
  color:var(--za-ink);
}
.za-purpose-tab.is-active .za-purpose-tab-ico{ color:var(--za-blue); }
.za-purpose-tab.is-active .za-purpose-tab-chev{ opacity:.7; }
.za-purpose-panels{ min-width:0; }
.za-purpose-panel{ display:none; }
.za-purpose-panel.is-active{ display:block; }
.za-purpose-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:28px;
  align-items:center;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.06);
  box-shadow:0 10px 30px rgba(11,18,32,.06);
  padding:28px;
  min-height:320px;
}
.za-purpose-intro{
  margin:0 0 18px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--za-muted);
}
.za-purpose-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.za-purpose-list li{
  position:relative;
  padding-left:28px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--za-ink);
}
.za-purpose-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#dce9ff;
  box-shadow:inset 0 0 0 1px rgba(0,87,255,.2);
}
.za-purpose-list li::after{
  content:"";
  position:absolute;
  left:5px;
  top:.55em;
  width:5px;
  height:8px;
  border-right:1.5px solid var(--za-blue);
  border-bottom:1.5px solid var(--za-blue);
  transform:rotate(45deg);
}
.za-purpose-list strong{ font-weight:600; }
.za-purpose-media{
  overflow:hidden;
  border-radius:10px;
  background:#e8edf5;
  aspect-ratio:5/4;
}
.za-purpose-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* ========== 6. ASCEND FRAMEWORK (interactive rail + stage) ========== */
.za-framework{
  background:#0b1220;
  color:#fff;
  padding:var(--za-space) 0;
  scroll-margin-top:96px;
}
.za-fw-head{
  max-width:640px;
  margin:0 0 40px;
}
.za-fw-label{
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.za-fw-head h2{
  margin:0 0 14px;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:600;
  color:#fff;
  letter-spacing:-0.03em;
  line-height:1.15;
}
.za-fw-lead{
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:16px;
  line-height:1.7;
}
.za-fw-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.za-fw-rail{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.za-fw-rail-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:16px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.55);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.za-fw-rail-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.za-fw-rail-btn.is-active{
  background:#fff;
  border-color:#fff;
  color:var(--za-ink);
}
.za-fw-rail-letter{
  font-size:22px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
}
.za-fw-rail-btn.is-active .za-fw-rail-letter{ color:var(--za-blue); }
.za-fw-rail-name{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.25;
}
.za-fw-stage{
  position:relative;
  min-height:280px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.za-fw-stage-panel{
  display:none;
  position:relative;
  padding:40px 44px;
  min-height:280px;
  align-items:center;
}
.za-fw-stage-panel.is-active{ display:flex; }
.za-fw-stage-mark{
  position:absolute;
  right:24px;
  bottom:-18px;
  font-size:clamp(120px,18vw,200px);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.06em;
  color:rgba(255,255,255,.06);
  pointer-events:none;
  user-select:none;
}
.za-fw-stage-copy{
  position:relative;
  z-index:1;
  max-width:560px;
}
.za-fw-stage-step{
  margin:0 0 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.za-fw-stage-copy h3{
  margin:0 0 14px;
  font-size:clamp(24px,3vw,34px);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.2;
  color:#fff;
}
.za-fw-stage-copy p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.65);
}

/* ========== 7. LIVING OUR VALUES (photo + accordion) ========== */
.za-living{
  padding:var(--za-space) 0 40px;
  background:linear-gradient(90deg, #e8f1f8 0%, #eef1f7 55%, #f0eef6 100%);
  color:var(--za-ink);
}
.za-living-head{
  margin:0 0 36px;
  max-width:720px;
}
.za-living-head h2{
  margin:0 0 12px;
  font-size:clamp(30px,3.6vw,44px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.12;
  color:var(--za-ink);
}
.za-living-head p{
  margin:0;
  font-size:16.5px;
  line-height:1.6;
  color:var(--za-muted);
}
.za-living-head strong{
  color:var(--za-ink);
  font-weight:600;
}
.za-living-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:36px 48px;
  align-items:start;
}
.za-living-photo{
  overflow:hidden;
  border-radius:14px;
  background:#d8e2ee;
  aspect-ratio:4/3;
}
.za-living-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.za-living-acc{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.za-acc{
  border:1px solid rgba(11,18,32,.1);
  border-radius:10px;
  background:rgba(255,255,255,.42);
  overflow:hidden;
  transition:background .2s ease, border-color .2s ease;
}
.za-acc.is-open{
  background:#fff;
  border-color:rgba(11,18,32,.12);
}
.za-acc-btn{
  width:100%;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 28px;
  gap:12px;
  align-items:center;
  padding:16px 18px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:var(--za-ink);
}
.za-acc-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--za-blue);
}
.za-acc-title{
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.3;
}
.za-acc-toggle{
  width:18px;
  height:18px;
  position:relative;
  justify-self:end;
}
.za-acc-toggle::before,
.za-acc-toggle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--za-ink);
  transform:translate(-50%,-50%);
}
.za-acc-toggle::before{
  width:12px;
  height:1.5px;
}
.za-acc-toggle::after{
  width:1.5px;
  height:12px;
  transition:opacity .15s ease, transform .15s ease;
}
.za-acc.is-open .za-acc-toggle::after{
  opacity:0;
  transform:translate(-50%,-50%) scaleY(0);
}
.za-acc-panel{
  display:none;
  padding:0 18px 18px 66px;
}
.za-acc.is-open .za-acc-panel{ display:block; }
.za-acc-panel p{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--za-muted);
  max-width:420px;
}

/* ========== 7. NUMBERS (HCL-inspired progress split) ========== */
.za-numbers{
  background:
    linear-gradient(180deg, #f5f7fb 0%, #eef3f9 100%);
  color:var(--za-ink);
  padding:40px 0 var(--za-space);
}
.za-numbers-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;
  align-items:center;
}
.za-numbers-main h2{
  margin:0 0 16px;
  font-size:clamp(30px,3.6vw,44px);
  font-weight:600;
  color:var(--za-ink);
  letter-spacing:-0.03em;
  line-height:1.12;
  max-width:420px;
}
.za-num-lead{
  margin:0 0 40px;
  color:var(--za-muted);
  font-size:15.5px;
  line-height:1.7;
  max-width:440px;
}
.za-num-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 20px;
}
.za-num{
  padding:0;
  border:0;
}
.za-num .n{
  font-size:clamp(32px,3.2vw,42px);
  font-weight:700;
  color:var(--za-ink);
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;
}
.za-num p{
  margin:0;
  font-size:13.5px;
  line-height:1.4;
  color:var(--za-muted);
  max-width:140px;
}
.za-numbers-visual{
  position:relative;
  max-width:520px;
  width:100%;
  margin-left:auto;
}
.za-numbers-globe{
  position:relative;
  width:100%;
  line-height:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
}
.za-numbers-globe::after{ display:none; }
.za-numbers-globe img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  position:static;
  /* Black plate dissolves into the page; glow/dots stay */
  mix-blend-mode:screen;
  filter:none;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 72% at 50% 42%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 78% 72% at 50% 42%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ========== 8. CLOSE (editorial dark split — full-bleed photo) ========== */
.za-close{
  background:#0b1220;
  color:#fff;
  padding:var(--za-space) 0;
}
.za-close-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px 48px;
  align-items:center;
}
.za-close-label{
  margin:0 0 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.za-close-copy h2{
  margin:0 0 14px;
  font-size:clamp(26px,3vw,36px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.18;
  max-width:460px;
  color:#fff;
}
.za-close-lead{
  margin:0 0 28px;
  color:rgba(255,255,255,.6);
  font-size:15.5px;
  line-height:1.65;
  max-width:440px;
}
.za-close-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 24px;
}
.za-close-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  color:var(--za-ink) !important;
  background:#fff;
  padding:14px 22px;
  border-radius:2px;
  transition:background .2s ease, color .2s ease;
}
.za-close-cta::after{
  content:"\2192";
  font-size:16px;
  line-height:1;
}
.za-close-cta:hover{
  background:#e8edf5;
}
.za-close-link{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.za-close-link:hover{
  color:#fff;
  border-color:#fff;
}
.za-close-photo{
  position:relative;
  overflow:hidden;
  background:#0b1220;
  aspect-ratio:5/4;
  width:100%;
}
.za-close-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ========== 3b. AWARDS & RECOGNITION ==========
   Sits between .za-proof (#f4f6fa) and .za-certs (dark), so it takes plain white
   to keep the light/dark rhythm of the page intact. */
.za-awards{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.za-awards-head{ max-width:720px; margin:0 0 48px; }
.za-awards-head h2{
  margin:0 0 16px;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-0.025em;
}
.za-awards-lead{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--za-muted);
}
.za-awards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.za-award{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:26px 24px;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:14px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.za-award:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
/* Logo slot doubles as the mark slot: platforms we hold a real logo for show it,
   the rest get a neutral award glyph. No invented logos. */
.za-award-mark{
  flex:none;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:12px;
  background:var(--za-soft);
  overflow:hidden;
}
.za-award-mark img{ max-width:44px; max-height:26px; width:auto; height:auto; }
.za-award-mark svg{ width:26px; height:26px; color:var(--za-blue); }
.za-award-body{ min-width:0; }
.za-award-body strong{
  display:block;
  margin-bottom:6px;
  font-size:16.5px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.za-award-body span{
  display:block;
  font-size:14.5px;
  line-height:1.6;
  color:var(--za-muted);
}

/* ========== 3c. CERTIFICATIONS ==========
   Dark band: the badge artwork is white-on-transparent, so it only reads on a
   dark field. Compact padding keeps it a divider strip rather than a full section. */
.za-certs{
  padding:clamp(56px,6.5vw,80px) 0;
  background:var(--za-ink);
  color:#fff;
  border-bottom:1px solid #060a12;
}
.za-certs-head{ max-width:680px; margin:0 0 44px; }
.za-certs-head h2{
  margin:0 0 14px;
  font-size:clamp(26px,3vw,36px);
  line-height:1.18;
  font-weight:700;
  letter-spacing:-0.022em;
  color:#fff;
}
.za-certs-lead{
  margin:0;
  font-size:16.5px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}
/* 3 across, so six entries form two clean rows. Six in a single row leaves each
   cell ~165px, which wraps the longer standard names to four lines. */
.za-certs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.za-cert{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:28px 16px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease, background .2s ease;
}
.za-cert:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
}
.za-cert img{
  width:76px;
  height:76px;
  object-fit:contain;
}
/* For badges supplied as dark line art rather than white. Plain invert, not
   brightness(0) invert(1): that flattens every opaque pixel to white, which would
   erase the knocked-out "ISO" inside the disc. invert turns the black ring and
   wordmark white and keeps the interior tonal separation. Alpha is untouched, so
   the transparent corners stay transparent. */
.za-cert--invert img{
  filter:invert(1);
}
/* Lettered medallion for standards with no badge artwork; matches the 76px
   footprint of the real badges so the row keeps a single baseline. */
.za-cert-mark{
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  text-align:center;
  color:#fff;
}
/* Distinguishes an in-progress programme from a held certification, so this
   section cannot contradict the timeline's "CMMC readiness" wording. */
.za-cert-status{
  display:inline-block;
  margin-top:6px;
  padding:3px 9px;
  /* .44 clears 3:1 against --za-ink; at .3 the pill outline measured 2.67:1 */
  border:1px solid rgba(255,255,255,.44);
  border-radius:999px;
  font-size:10.5px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.za-cert-body strong{
  display:block;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:#fff;
}
.za-cert-body span{
  display:block;
  margin-top:5px;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(255,255,255,.66);
}

/* ========== 5b. TIMELINE ==========
   Three columns — year | rail | body — so years form a clean right-aligned
   ledger against a single continuous rail. Flat --za-soft separates it from the
   white leadership section above and the gradient purpose section below. */
.za-tl{
  padding:var(--za-space) 0;
  background:var(--za-soft);
  border-top:1px solid var(--za-line);
  border-bottom:1px solid var(--za-line);
}
.za-tl-head{ max-width:720px; margin:0 0 52px; }
.za-tl-head h2{
  margin:0 0 16px;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-0.025em;
}
.za-tl-lead{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--za-muted);
}
.za-tl-list{
  margin:0;
  padding:0;
  list-style:none;
}
.za-tl-item{
  display:grid;
  grid-template-columns:88px 28px minmax(0,1fr);
  grid-template-areas:"year rail body";
  gap:0 24px;
}
/* Left-aligned, not right: right-aligning inside an 88px column opened a phantom
   gutter that pushed every entry ~128px in, so the years and the section heading
   sat on two different left margins. */
.za-tl-year{
  grid-area:year;
  text-align:left;
  font-size:clamp(26px,2.4vw,32px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--za-blue);
  font-variant-numeric:tabular-nums;
}
/* short rule under each year — same motif as the hero eyebrow's ::before */
.za-tl-year::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  margin-top:10px;
  background:var(--za-blue);
  opacity:.55;
}
.za-tl-rail{
  grid-area:rail;
  position:relative;
  display:block;
}
/* the connecting line; hidden on the final entry so the rail terminates */
.za-tl-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top:30px;
  bottom:-4px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(0,87,255,.4) 0%, rgba(0,87,255,.16) 100%);
}
.za-tl-item:last-child .za-tl-rail::before{ display:none; }
/* offset to meet the card's first text line rather than the old bare heading */
.za-tl-rail::after{
  content:"";
  position:absolute;
  left:50%;
  top:22px;
  width:11px;
  height:11px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--za-blue);
  box-shadow:0 0 0 4px rgba(0,87,255,.14);
}
/* Card, not bare text: on the flat --za-soft background the copy previously had
   no containment, which read as a wireframe. Hover matches .za-award exactly. */
.za-tl-body{
  grid-area:body;
  min-width:0;
  margin-bottom:12px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:14px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.za-tl-body:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
.za-tl-item:last-child .za-tl-body{ margin-bottom:0; }
.za-tl-bhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.za-tl-body h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.015em;
  color:var(--za-ink);
}
/* the running project count, lifted out of the prose so the growth curve scans */
.za-tl-chip{
  flex:none;
  padding:5px 11px;
  border-radius:999px;
  /* Tinted blue, not --za-soft: against a white card --za-soft measures 1.08:1
     and the chip disappears, leaving what looks like loose blue text. */
  background:rgba(0,87,255,.09);
  border:1px solid rgba(0,87,255,.22);
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--za-blue);
}
.za-tl-body p{
  margin:0;
  max-width:68ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--za-muted);
}

header{ position:relative; z-index:50; }

@media (max-width:1024px){
  .za-certs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .za-awards-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .za-eng-grid,
  .za-ceo-grid,
  .za-close-grid{ grid-template-columns:1fr; }
  .za-eng-photo,
  .za-ceo-photo,
  .za-close-photo{ max-width:100%; }
  .za-eng-points li{ grid-template-columns:1fr; gap:4px; }
  .za-hero-inner{
    grid-template-columns:1fr;
    gap:44px;
    padding-top:64px;
    padding-bottom:64px;
  }
  .za-hero h1{ font-size:clamp(34px,5.6vw,46px); }
  /* stacked: no row to stretch into, so the figure goes back to a fixed ratio */
  .za-hero-visual{ aspect-ratio:16/9; min-height:0; }
  .za-proof-item{ padding:36px 22px 4px; }
  .za-clients-grid{ gap:24px 20px; }
  .za-clients-head{ margin-bottom:40px; }
  .za-fw-rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .za-fw-stage-panel{ padding:28px 24px; min-height:240px; }
  .za-values-layout,
  .za-numbers-layout{ grid-template-columns:1fr; gap:36px; }
  .za-numbers-visual{ margin:0 auto; max-width:360px; }
  .za-living-grid{ grid-template-columns:1fr; gap:28px; }
  .za-purpose-layout{ grid-template-columns:1fr; }
  .za-purpose-tabs{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .za-purpose-tab{ flex:1 1 140px; }
  .za-purpose-card{ grid-template-columns:1fr; padding:22px; min-height:0; }
}
@media (max-width:680px){
  :root{ --za-space:72px; }
  .za-wrap{ padding-left:16px; padding-right:16px; }
  .za-hero-inner{ padding-top:52px; padding-bottom:52px; gap:36px; }
  .za-hero h1{ font-size:clamp(30px,7.6vw,38px); }
  .za-hero-support{ font-size:16px; margin-bottom:28px; }
  .za-hero-actions{ gap:10px; margin-bottom:32px; }
  /* full-width stacked buttons keep both CTAs comfortably above 44px and stop
     the ghost button orphaning on a narrow line */
  .za-hero-actions .za-btn,
  .za-hero-ghost{ width:100%; justify-content:center; }
  .za-hero-visual{ aspect-ratio:3/2; border-radius:14px; }
  .za-hero-visual figcaption{ padding:44px 14px 14px; gap:6px; }
  .za-hero-visual figcaption span{ font-size:11.5px; padding:6px 10px; }
  .za-awards-grid{ grid-template-columns:1fr; gap:14px; }
  .za-award{ padding:22px 18px; gap:14px; }
  .za-award-mark{ width:54px; height:54px; }
  .za-certs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .za-cert{ padding:22px 12px 18px; }
  .za-cert img{ width:64px; height:64px; }
  /* rail moves to the far left and spans both rows; year sits above the title */
  .za-tl-item{
    grid-template-columns:22px minmax(0,1fr);
    grid-template-areas:"rail year" "rail body";
    gap:0 14px;
  }
  .za-tl-year{ font-size:22px; line-height:1.2; }
  .za-tl-year::after{ margin-top:8px; }
  .za-tl-rail::before{ top:14px; }
  .za-tl-rail::after{ top:6px; }
  .za-tl-body{ margin-top:12px; margin-bottom:12px; padding:16px 14px; }
  /* chip drops below the title once the card is too narrow to hold both */
  .za-tl-bhead{ flex-wrap:wrap; gap:8px; }
  .za-tl-body h3{ font-size:17px; }
  .za-tl-body p{ font-size:15px; }
  .za-num-grid{ grid-template-columns:1fr 1fr; gap:24px 16px; }
  .za-num p{ max-width:none; }
  .za-acc-panel{ padding-left:18px; }
  .za-proof-grid{ grid-template-columns:1fr; border-top:0; }
  .za-proof-item{
    padding:28px 0;
    border-right:0;
    border-top:1px solid var(--za-line);
  }
  .za-proof-head{ margin-bottom:36px; text-align:left; }
  .za-clients-grid{ gap:20px 16px; }
  .za-clients-item{ flex-basis:120px; padding:6px 8px; }
  .za-clients-head{ margin-bottom:32px; }
  .za-clients-item{ min-height:56px; }
  .za-clients-item img{ height:44px; max-width:130px; }
  .za-fw-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .za-fw-rail-btn{ padding:14px 12px; }
  .za-close-actions{ flex-direction:column; align-items:flex-start; }
}