/* index.html — page-specific styles only.
   New classes are kept generic (.dot-list, .hm-case-*, .home-*) but scoped
   via this page-specific stylesheet so nothing collides with other pages'
   own page CSS. */

/* ----------------------- "Designed for the platforms..." -----------------------
   This heading is longer than the sitewide .section-head default
   (max-width:720px), which forced it onto two lines. Widened just for
   this section so it fits on one line on desktop. */
#technologies .section-head{max-width:1100px}

/* ----------------------- hero stats ("+" marker, no divider lines) -----------------------
   Sitewide .fact b em renders the "+" suffix in yellow with a black
   text-stroke (used also by about.html / industries.html). The home hero
   stats block wants a plain black "+" instead, so it's overridden here,
   scoped to this page's own #about block only. The sitewide .facts/.fact
   rules also draw a top/bottom rule around the block and a vertical rule
   between each column — removed here (desktop and mobile) so the stats
   sit with no lines at all. */
#about .fact b em{color:var(--ink);-webkit-text-stroke:0}
#about.facts{border-top:0;border-bottom:0}
#about .fact{border-left:0;border-top:0}

/* ----------------------- technology / industry dot lists -----------------------
   Replaces the black/yellow two-letter icon chips (.tech-chips) with a
   plain, quieter text list separated by a middle dot — used for the
   technology preview list and for the compact industries intro below. */
.dot-list{margin:0;font-size:.86rem;line-height:1.7;color:var(--ink)}
.dot-list span{white-space:nowrap}
.dot-list span:not(:last-child):after{content:"\00a0\00b7\00a0";color:var(--mut);font-weight:400}
.on-dark .dot-list{color:var(--mut-dark)}
.tech-dot-list{display:flex;flex-wrap:wrap;row-gap:4px}

/* ----------------------- compact industries intro ----------------------- */
.home-industries-intro{padding:72px 0}
.home-industries-intro .section-head{margin-bottom:28px;max-width:1100px}

/* Domain list: white + slightly larger, split into two visually separate
   groups (retail sectors, then adjacent value chains). */
.home-industries-domains{display:grid;gap:12px;max-width:980px}
.home-industries-list{font-size:1.02rem;margin:0}
.on-dark .home-industries-list{color:var(--paper)}
.home-industries-list-secondary{padding-top:12px;border-top:1px solid rgba(255,255,255,.22)}

/* ----------------------- capability clusters (tighter cards) -----------------------
   .capability-cluster / .capability-service-list are used only on this page,
   so spacing is tightened here directly rather than touching the shared
   base rule, to make the three cards shorter overall. */
.home-service-architecture .capability-cluster{padding:24px}
.home-service-architecture .capability-cluster ul{gap:5px;margin-bottom:16px}
.home-service-architecture .capability-service-list li{padding:6px 0;gap:1px}

/* ----------------------- technology tiles (minimal, compact) -----------------------
   An earlier pass added a tinted background, a bold ink border and a
   yellow accent edge to fix a "pale" look — that read as too much color.
   Reverted to a plain, quiet outline (no tint, no yellow) and tightened
   padding/gaps throughout the grid so the whole block takes less vertical
   space while the technology names stay clearly legible. */
.home-tech-groups{gap:14px}
.home-tech-group{padding-top:12px}
.home-tech-group-title{font-size:.92rem;line-height:1.3;margin-bottom:8px;min-height:0}
.home-tech-list{gap:6px}
.home-tech-item{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--paper);min-height:0}
.home-tech-item h3{font-size:.8rem;line-height:1.2;margin-bottom:6px;min-height:0}
.home-tech-item .tech-dot-list{font-size:.78rem;row-gap:2px}

/* ----------------------- recent work (case carousel) -----------------------
   Ported from the shared "Recent works" carousel pattern (see .cr-case-*
   on careers.html / .tp-case-* on technologies.html) — same component,
   renamed .hm- so it stays scoped to this page's own stylesheet. */
.hm-case-carousel{position:relative;margin-top:8px}
.hm-case-track{margin:0}
.hm-case-arrow{position:absolute;top:36%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .15s ease,border-color .15s ease,transform .15s ease;color:var(--ink)}
.hm-case-arrow:hover{background:var(--bone);border-color:var(--ink)}
.hm-case-arrow-left{left:-23px}
.hm-case-arrow-right{right:-23px}
.hm-case-dots{display:flex;justify-content:center;gap:10px;margin-top:32px}
.hm-case-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}
.hm-case-dot.active{background:var(--yellow);transform:scale(1.25)}
@media(max-width:900px){
  .hm-case-arrow{display:none}
}

.hm-case-link{color:inherit;text-decoration:none}
.hm-case-link .case-metric{
  position:relative;overflow:hidden;isolation:isolate;
  height:144px;display:flex;flex-direction:column;justify-content:center;
}
.hm-case-link .case-metric-visual{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.22;
}
.hm-case-link .case-metric b{
  position:relative;z-index:1;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-case-link .case-metric-industry{position:relative;z-index:1;margin-top:8px;display:block}

/* ----------------------- "Start with the need you already understand." -----------------------
   Standard black-band CTA pattern (same shape as .ef-cta-band on
   Software & Cloud Engineering): centered headline, centered button below. */
.home-cta-band .wrap{text-align:center}
.home-cta-band h2{max-width:900px;margin:0 auto 30px}
@media(min-width:700px){
  .home-cta-band h2{max-width:none;white-space:nowrap}
}