/**
 * How We Work — page-specific components on the za- enterprise design system.
 * Loads AFTER css/our-company-enterprise.css, so it inherits the :root --za-*
 * tokens and the shared hero / editorial-split / close / accordion components.
 * Only the sections unique to this page (process, stack, cases, team, why,
 * stories, blog) live here. Prefix hw- to avoid colliding with za- classes.
 */

/* Shared section header used across the hw- sections */
.hw-head{ max-width:720px; margin:0 0 52px; }
.hw-head.is-center{ margin-left:auto; margin-right:auto; text-align:center; }
.hw-head h2{
  margin:0 0 16px;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--za-ink);
}
.hw-head p{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--za-muted);
}

/* ========== PRODUCT DEVELOPMENT CYCLE (numbered steps) ========== */
.hw-process{
  padding:var(--za-space) 0;
  background:var(--za-soft);
  border-top:1px solid var(--za-line);
  border-bottom:1px solid var(--za-line);
}
.hw-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-step{
  position:relative;
  padding:28px 24px;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.hw-step:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
.hw-step-num{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:18px;
  border-radius:12px;
  background:rgba(0,87,255,.09);
  border:1px solid rgba(0,87,255,.22);
  color:var(--za-blue);
  font-size:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.hw-step h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.3;
  color:var(--za-ink);
}
.hw-step p{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--za-muted);
}

/* ========== TECH STACK (capability cards + chips) ========== */
.hw-stack{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.hw-stack-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-cap{
  padding:30px 28px;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.hw-cap:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
.hw-cap h3{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.hw-cap-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:11px;
  background:var(--za-soft);
  color:var(--za-blue);
}
.hw-cap-ico svg{ width:20px; height:20px; }
.hw-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-chips li{
  padding:8px 14px;
  border:1px solid var(--za-line);
  border-radius:999px;
  background:var(--za-soft);
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  color:var(--za-ink);
}

/* ========== CASE STUDIES (dark portfolio band) ========== */
.hw-cases{
  padding:var(--za-space) 0;
  background:#0b1220;
  color:#fff;
}
.hw-cases .hw-head h2{ color:#fff; }
.hw-cases .hw-head p{ color:rgba(255,255,255,.62); }
.hw-cases-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-case{
  display:flex;
  flex-direction:column;
  padding:28px 26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease, background .2s ease, transform .2s var(--za-ease);
}
.hw-case:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}
.hw-case h3{
  margin:0 0 12px;
  font-size:21px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#fff;
}
.hw-case p{
  margin:0 0 22px;
  flex:1;
  font-size:14.5px;
  line-height:1.65;
  color:rgba(255,255,255,.66);
}
.hw-case-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#6fa8ff !important;
}
.hw-case-link .arw{
  display:inline-block;
  transition:transform .2s var(--za-ease);
}
.hw-case:hover .hw-case-link .arw{ transform:translateX(4px); }

/* ========== TEAM (role cards) ========== */
.hw-team{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.hw-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-role{
  padding:30px 28px;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.hw-role:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
.hw-role-ico{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:18px;
  border-radius:12px;
  background:rgba(0,87,255,.08);
  color:var(--za-blue);
}
.hw-role-ico svg{ width:24px; height:24px; }
.hw-role h3{
  margin:0 0 10px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.hw-role p{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--za-muted);
}
.hw-role p a{ color:var(--za-blue); font-weight:600; }

/* ========== WHY CHOOSE (value grid on gradient) ========== */
.hw-why{
  padding:var(--za-space) 0;
  background:linear-gradient(90deg, #e8f1f8 0%, #eef1f7 55%, #f0eef6 100%);
  color:var(--za-ink);
}
.hw-why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-value{
  padding:28px 26px;
  background:#fff;
  border:1px solid rgba(11,18,32,.06);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(11,18,32,.05);
}
.hw-value-ico{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:16px;
  border-radius:12px;
  background:rgba(0,87,255,.09);
  color:var(--za-blue);
}
.hw-value-ico svg{ width:22px; height:22px; }
.hw-value h3{
  margin:0 0 8px;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.hw-value p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--za-muted);
}

/* ========== CUSTOMER STORIES (testimonials) ========== */
.hw-stories{
  padding:var(--za-space) 0;
  background:#fff;
  border-bottom:1px solid var(--za-line);
}
.hw-stories-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.hw-quote{
  display:flex;
  flex-direction:column;
  padding:30px 28px;
  background:var(--za-soft);
  border:1px solid var(--za-line);
  border-radius:16px;
}
.hw-quote-mark{
  margin-bottom:6px;
  font-size:48px;
  line-height:.6;
  font-weight:800;
  color:rgba(0,87,255,.25);
}
.hw-quote h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
  color:var(--za-ink);
}
.hw-quote p{
  margin:0 0 24px;
  flex:1;
  font-size:14.5px;
  line-height:1.7;
  color:var(--za-muted);
}
.hw-quote-who{
  display:flex;
  align-items:center;
  gap:12px;
}
.hw-quote-avatar{
  flex:none;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--za-blue);
  color:#fff;
  font-size:15px;
  font-weight:700;
}
.hw-quote-who strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--za-ink);
}
.hw-quote-who span{
  font-size:12.5px;
  color:var(--za-muted);
}

/* ========== FAQ (two-column: heading + accordion, reuses .za-acc) ========== */
.hw-faq{
  padding:var(--za-space) 0;
  background:var(--za-soft);
  border-top:1px solid var(--za-line);
  border-bottom:1px solid var(--za-line);
}
.hw-faq-layout{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:36px 48px;
  align-items:start;
}
.hw-faq-intro{ position:sticky; top:96px; }
.hw-faq-intro h2{
  margin:0 0 16px;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--za-ink);
}
.hw-faq-intro p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--za-muted);
}
.hw-faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ========== BLOG (grid, replaces the legacy carousel) ========== */
.hw-blog{
  padding:var(--za-space) 0;
  background:#fff;
}
.hw-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.hw-post{
  display:block;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.hw-post:hover{
  border-color:rgba(0,87,255,.28);
  box-shadow:0 14px 34px rgba(11,18,32,.08);
  transform:translateY(-2px);
}
.hw-post-img{
  aspect-ratio:16/9;
  background:var(--za-soft);
  overflow:hidden;
}
.hw-post-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hw-post-body{ padding:22px 24px; }
.hw-post-body h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--za-ink);
}
.hw-post-body p{
  margin:0 0 14px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--za-muted);
}
.hw-post-more{
  font-size:13px;
  font-weight:600;
  color:var(--za-blue);
}
.hw-blog-foot{ margin-top:40px; }
.hw-blog-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--za-blue) !important;
}
.hw-blog-all .arw{
  display:inline-block;
  transition:transform .2s var(--za-ease);
}
.hw-blog-all:hover .arw{ transform:translateX(4px); }

/* ========== RESPONSIVE ========== */
@media (max-width:1024px){
  .hw-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hw-cases-grid,
  .hw-team-grid,
  .hw-why-grid,
  .hw-stories-grid,
  .hw-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hw-faq-layout{ grid-template-columns:1fr; gap:28px; }
  .hw-faq-intro{ position:static; }
}
@media (max-width:680px){
  .hw-head{ margin-bottom:36px; }
  .hw-steps,
  .hw-stack-grid,
  .hw-cases-grid,
  .hw-team-grid,
  .hw-why-grid,
  .hw-stories-grid,
  .hw-blog-grid{ grid-template-columns:1fr; }
  .hw-step,
  .hw-cap,
  .hw-role,
  .hw-value,
  .hw-quote{ padding:24px 20px; }
}