/* ==========================================================================
   Augmented Systems — Homepage Revamp (scoped)
   Extends the existing "Sandbox" theme. Reuses brand tokens only:
   Brand grape #3b6fd4, headings #343f52, body #60697b, radius 0.8rem.
   Type pair: Nohemi (display) + Plus Jakarta Sans (body) — see
   typography.css; use var(--font-display) rather than naming a face here.
   Nothing here overrides global theme files — all rules are prefixed .as-*.
   ========================================================================== */

/* --- Unicons same-origin fallback ----------------------------------------
   The theme's @font-face loads Unicons from the remote host (style.css on
   http://3.15.56.125:8003). Cross-origin webfonts are blocked by the browser
   unless the remote server sends CORS headers, which makes the `uil-*` icons
   render as empty boxes when the app runs on another origin (e.g. localhost).
   This re-declares the font from the app's OWN public folder (same-origin),
   so the glyphs always resolve. The font files already exist locally.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Unicons";
  src: url(../fonts/unicons/Unicons.woff2) format("woff2"),
       url(../fonts/unicons/Unicons.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --as-grape: #3b6fd4;          /* existing .bf-soft-dark-purple / .text-grape */
  --as-grape-dark: #3059ab;
  --as-ink: #343f52;            /* existing --bs-heading-color */
  --as-body: #60697b;           /* existing --bs-body-color */
  --as-soft: #f2f3fb;           /* existing .bg-soft-purple */
  --as-line: #e6e5f4;           /* existing .bg-pale-grape */
  --as-radius: 0.8rem;          /* existing --bs-border-radius-xl */
  --as-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.06);
  --as-shadow-hover: 0 1rem 2.5rem rgba(96, 93, 186, 0.16);
}

/* ==========================================================================
   FLUID TYPE SYSTEM  (single source of truth for homepage text sizing)
   The theme sets html{font-size:20px}, which inflates every rem-based size.
   Instead of patching each breakpoint, the homepage runs on ONE fluid scale:
   clamp(min, preferred+vw, max) in px (root-independent) so every text role
   scales smoothly from 320px phones to large desktops — no oversized text on
   mobile, no manual jumps. UX: comfortable line-heights, readable measure,
   consistent hierarchy. !important only to win over the theme's utilities.
   ========================================================================== */

/* Headings */
.as-hero h1 {
  font-size: clamp(27px, 3.2vw + 12px, 42px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em;
}
main .wrapper h2,
.as-section-intro h2 {
  font-size: clamp(23px, 2.2vw + 11px, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}
.as-cta h2 {
  font-size: clamp(24px, 2.6vw + 12px, 38px) !important;
  line-height: 1.2 !important;
}

/* Lead / intro paragraphs */
.as-hero .lead,
main .as-section-intro .lead,
.as-cta .lead {
  font-size: clamp(15px, 0.55vw + 13px, 18px) !important;
  line-height: 1.6 !important;
}
.as-hero .as-trust { font-size: clamp(13px, 0.3vw + 12px, 15px) !important; }

/* Eyebrow + section kickers */
.as-eyebrow { font-size: clamp(11px, 0.35vw + 9.5px, 13px); }
.as-kicker  { font-size: clamp(11px, 0.35vw + 9.5px, 13px) !important; }

/* Card / component titles */
.as-core h3 { font-size: clamp(18px, 0.5vw + 15px, 21px); }
.as-industry h3,
.as-case h3,
.as-post h3,
.as-why-item h3,
.as-step h3 { font-size: clamp(16px, 0.3vw + 14px, 18px); }

/* Body copy inside cards / lists */
.as-industry p,
.as-case .as-case-row,
.as-post p,
.as-why-item p,
.as-step p,
.as-core .as-core-list li,
.as-core > p,
.as-solink span,
.as-quote p { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); line-height: 1.55; }

/* Numeric emphasis */
.as-stats .as-stat-num  { font-size: clamp(24px, 2.4vw + 13px, 40px) !important; }
.as-stats .as-stat-lbl  { font-size: clamp(12.5px, 0.25vw + 11.5px, 15px); }
.as-step .as-step-num   { font-size: clamp(30px, 1.8vw + 22px, 44px); }
.as-float-card .as-float-num { font-size: clamp(14px, 0.3vw + 13px, 16px); }
.as-float-card .as-float-lbl { font-size: clamp(11px, 0.2vw + 10.5px, 13px); }

/* Readability: constrain intro line-length (measure ≈ 60–70 chars) */
.as-section-intro { max-width: 40rem; }

/* --- Band background utilities ---------------------------------------------
   Background ONLY, for the `class` prop on the shared section components
   (challenges / why / testimonials / …). Use these instead of borrowing
   another band's class: reusing e.g. `.as-chal` also pulls in that band's
   heading rules (h2{max-width:32ch}), which shifts a centred heading.
   The names contain "bg-", so a section's own default background — written
   as `.as-x:not([class*="bg-"])` — steps aside automatically.
   -------------------------------------------------------------------------- */
.as-bg-soft  { background: #f1f4f9; }
.as-bg-white { background: #fff; }
.as-bg-ice   { background: #f8fafc; }

/* --- Shared helpers -------------------------------------------------------- */
.as-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-grape);
  background: var(--as-line);
  border-radius: 50rem;
  padding: 0.45rem 0.95rem;
}
.as-eyebrow .uil { font-size: 0.95rem; }

.as-section-intro { max-width: 44rem; }

/* Purple outline CTA to sit beside the brand-grape primary button */
.btn.btn-outline-grape {
  color: var(--as-grape);
  border: 1px solid rgba(96, 93, 186, 0.4);
  background: transparent;
}
.btn.btn-outline-grape:hover,
.btn.btn-outline-grape:focus-visible {
  color: #fff;
  background: var(--as-grape);
  border-color: var(--as-grape);
}

/* Subtle geometric dotted backdrop used behind the hero visual */
.as-dotgrid {
  background-image: radial-gradient(rgba(96, 93, 186, 0.22) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

/* --- 1. Hero --------------------------------------------------------------- */
.as-hero .as-trust {
  font-size: 0.82rem;
  color: var(--as-body);
}
.as-hero-figure {
  position: relative;
  border-radius: var(--as-radius);
}
.as-hero-figure > img {
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
}
.as-float-card {
  position: absolute;
  background: #fff;
  border-radius: var(--as-radius);
  box-shadow: 0 0.75rem 2rem rgba(30, 34, 40, 0.12);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.as-float-card .as-float-icon {
  width: 2.4rem; height: 2.4rem;
  flex: 0 0 2.4rem;
  border-radius: 0.6rem;
  display: grid; place-items: center;
  color: #fff; font-size: 1.05rem;
  background: var(--as-grape);
}
.as-float-card .as-float-num { font-size: 0.95rem; font-weight: 800; color: var(--as-ink); line-height: 1; }
.as-float-card .as-float-lbl { font-size: 0.72rem; color: var(--as-body); }
.as-float-tl { top: 2px; left: -0.75rem; }
.as-float-br { bottom: 1.25rem; right: -0.75rem; }
@media (max-width: 991.98px) {
  .as-float-tl { left: 0.5rem; }
  .as-float-br { right: 0.5rem; }
}
@media (max-width: 575.98px) {
  .as-float-card { display: none; } /* keep mobile hero clean */
}


/* ==========================================================================
   1b. HERO v2  —  homepage hero redesign (2026-08-18, client reference)

   Fully self-contained under .as-hero2 so it CANNOT leak into the shared
   .as-hero used by <x-frontend.business-solutions.solution-hero /> and the
   other internal pages that also load this stylesheet.

   Accent palette is hero-local (blue + amber/orange over near-navy ink);
   the rest of the site keeps the grape brand tokens defined at the top.

   SIZING: every length here is in px, not rem. The theme sets
   :root{font-size:20px}, so rem-based paddings/radii would render ~25%
   larger than intended. px keeps this block root-independent, matching the
   fluid type system above.
   ========================================================================== */
.as-hero2 {
  --h2-ink: #0f1b34;
  --h2-body: #5b6579;
  --h2-blue: #2f6fed;
  --h2-blue-dark: #1c4fd0;
  --h2-amber: #f9a826;
  --h2-orange: #f4692a;
  --h2-line: rgba(15, 27, 52, 0.09);

  position: relative;
  isolation: isolate;
  overflow: hidden;              /* decorative layers can never widen the page */
  background: #f7f8fb;
}

/* Tone helpers — shared by the headline segments and the stat chips */
.as-hero2 .as-t-ink { color: var(--h2-ink); }
.as-hero2 .as-t-blue { color: var(--h2-blue); }
.as-hero2 .as-t-amber { color: var(--h2-amber); }
.as-hero2 .as-t-orange { color: var(--h2-orange); }

/* --- Decorative backdrop --------------------------------------------------
   One absolutely-positioned layer paints the soft blue/white wash, the fine
   engineering grid and the fade into the next section; a second (SVG) layer
   carries the constellation. Both are pointer-events:none so neither can
   swallow a click on the copy or the CTAs.
   ------------------------------------------------------------------------- */
.as-hero2 .as-hero-bg,
.as-hero2 .as-hero-net,
.as-hero2 .as-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Element = the static colour wash. The grid lives on ::before so it can be
   translated independently, and the bottom fade on ::after so it always paints
   OVER the moving grid and the seam into the next section stays clean. */
.as-hero2 .as-hero-bg {
  overflow: hidden;              /* clips the grid's bleed while it drifts */
  background-color: #f7f8fb;
  background-image:
    radial-gradient(60% 55% at 78% 18%, rgba(47, 111, 237, 0.10), transparent 70%),
    radial-gradient(45% 45% at 8% 8%, rgba(244, 105, 42, 0.06), transparent 70%);
}
.as-hero2 .as-hero-bg::before {
  content: "";
  position: absolute;
  inset: -48px;                  /* one tile of bleed on every side */
  /* Blue-tinted and lightened 2026-08-20 to match the solution-hero grid — the
     near-black lines read as boxes behind the copy. 46px is kept because the
     as-h2-grid keyframe translates by exactly one cell. */
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: as-h2-grid 26s linear infinite;
  will-change: transform;
}
.as-hero2 .as-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(254, 254, 254, 0) 55%, #fefefe 100%);
}
/* Drifts exactly one tile, so the loop is seamless. */
@keyframes as-h2-grid {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(46px, 46px, 0); }
}

.as-hero2 .as-hero-net { width: 100%; height: 100%; }

/* The canvas is the live version of the constellation; the script adds
   .as-hero2-js once it is actually running, which retires the static SVG.
   Without JS (or under reduced motion) the SVG simply stays. */
.as-hero2 .as-hero-canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.as-hero2.as-hero2-js .as-hero-canvas { opacity: 1; }
.as-hero2.as-hero2-js .as-hero-net { display: none !important; }
/* Below lg the copy spans the full column width, so the web sits further back
   to stay clearly behind the text rather than competing with it. */
@media (max-width: 991.98px) {
  .as-hero2.as-hero2-js .as-hero-canvas { opacity: 0.5; }
}

/* Vertical rhythm. Top padding must clear the transparent, position-absolute
   navbar that sits over this section; both ends scale with the viewport
   rather than the theme's 20px-root spacing utilities. */
.as-hero2 .as-hero-inner {
  padding-top: clamp(104px, 8vw, 150px);
  padding-bottom: clamp(56px, 5.5vw, 104px);
}

/* --- Copy column ---------------------------------------------------------- */
.as-hero2 .as-hero-copy { position: relative; z-index: 1; }

.as-hero2 .as-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 11px 20px;
  border: 1px solid var(--h2-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 18px rgba(15, 27, 52, 0.06);
  color: var(--h2-ink);
  font-size: clamp(10px, 0.3vw + 9px, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.as-hero2 .as-hero-badge-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h2-orange);
  box-shadow: 0 0 0 4px rgba(244, 105, 42, 0.16);
}

.as-hero2 .as-hero-title {
  margin-bottom: 18px;
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 2.1vw + 12px, 50px) !important;
  font-weight: 800;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  color: var(--h2-ink);
}
/* Segments stay inline so the headline reflows naturally when the <br> is
   suppressed on very narrow screens (the whitespace between the tags in the
   template already supplies the word gap). */
.as-hero2 .as-hero-title span { display: inline; }

.as-hero2 .as-hero-sub {
  margin-bottom: 26px;
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 0.7vw + 13px, 22px) !important;
  font-weight: 700;
  line-height: 1.35;
  color: var(--h2-blue);
  min-height: 1.35em;            /* reserve the line so the rotator can't shift the layout */
}
.as-hero2 .as-hero-sub-word {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.as-hero2 .as-hero-sub-word.is-out {
  opacity: 0;
  transform: translateY(-6px);
}

.as-hero2 .as-hero-lead {
  margin-bottom: 34px;
  font-size: clamp(15px, 0.4vw + 13.5px, 17px) !important;
  line-height: 1.7 !important;
  color: var(--h2-body);
  max-width: 540px;              /* readable measure ≈ 65 characters */
}
@media (max-width: 991.98px) {
  .as-hero2 .as-hero-lead { margin-inline: auto; }
}

/* --- Buttons -------------------------------------------------------------- */
.as-hero2 .as-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .as-hero2 .as-hero-actions { justify-content: flex-start; }
}
.as-hero2 .as-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;              /* comfortable tap target */
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: clamp(14px, 0.25vw + 13px, 16px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.as-hero2 .as-btn-fill {
  color: #fff;
  background: linear-gradient(100deg, var(--h2-blue) 0%, var(--h2-blue-dark) 100%);
  box-shadow: 0 14px 30px rgba(47, 111, 237, 0.30);
}
.as-hero2 .as-btn-fill:hover,
.as-hero2 .as-btn-fill:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(47, 111, 237, 0.40);
}
.as-hero2 .as-btn-fill .uil { font-size: 1.05em; transition: transform 0.2s ease; }
.as-hero2 .as-btn-fill:hover .uil { transform: translateX(3px); }

.as-hero2 .as-btn-ghost {
  color: var(--h2-ink);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(47, 111, 237, 0.35);
}
.as-hero2 .as-btn-ghost:hover,
.as-hero2 .as-btn-ghost:focus-visible {
  color: var(--h2-blue-dark);
  background: #fff;
  border-color: var(--h2-blue);
  transform: translateY(-2px);
}

/* Laptop band: up to the xxl container (1400px) the split layout leaves
   ~440-530px for the copy — too narrow for both CTAs on one row. Stack them
   deliberately at a shared width rather than letting flex-wrap leave two
   ragged, unequal pills. From 1400px up they sit side by side again. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .as-hero2 .as-hero-actions { flex-direction: column; align-items: flex-start; }
  .as-hero2 .as-hero-actions .as-btn { width: 100%; max-width: 300px; padding: 14px 24px; }
}

/* --- "01 Build — 02 Transform — 03 Support" rail --------------------------- */
.as-hero2 .as-hero-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}
@media (min-width: 992px) {
  .as-hero2 .as-hero-steps { justify-content: flex-start; }
}
.as-hero2 .as-hero-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* Connector is drawn on the following item rather than between list items, so
   it disappears cleanly wherever the rail wraps onto a new line. */
.as-hero2 .as-hero-step + .as-hero-step::before {
  content: "";
  width: clamp(18px, 2.5vw, 42px);
  height: 1px;
  margin-right: 12px;
  background: linear-gradient(90deg, rgba(244, 105, 42, 0.15), rgba(244, 105, 42, 0.6));
}
.as-hero2 .as-hero-step-num {
  color: var(--h2-orange);
  font-weight: 800;
  font-size: clamp(12px, 0.25vw + 11px, 14px);
}
.as-hero2 .as-hero-step-lbl {
  color: var(--h2-ink);
  font-weight: 700;
  font-size: clamp(11px, 0.25vw + 10px, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Visual column -------------------------------------------------------- */
.as-hero2 .as-hero-visual {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
}
/* Orbit system behind the media card: two dashed rings turning in opposite
   directions, each carrying a satellite dot. Rotation is what makes the dashes
   read as movement — a plain solid circle would look static however fast it
   spins. */
.as-hero2 .as-hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.as-hero2 .as-hero-ring {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.as-hero2 .as-hero-ring-1 {
  inset: 0;
  border: 1px dashed rgba(47, 111, 237, 0.16);
  animation: as-h2-spin 90s linear infinite;
}
.as-hero2 .as-hero-ring-2 {
  inset: 13%;
  border: 2px dashed rgba(47, 111, 237, 0.09);
  animation: as-h2-spin 64s linear infinite reverse;
}
/* Each satellite is a full-size rotating frame with a dot pinned to its top
   edge, so the dot travels the ring's circumference. */
.as-hero2 .as-hero-sat {
  position: absolute;
  will-change: transform;
}
.as-hero2 .as-hero-sat::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
}
.as-hero2 .as-hero-sat-1 {
  inset: 0;
  animation: as-h2-spin 34s linear infinite;
}
.as-hero2 .as-hero-sat-1::after {
  background: var(--h2-blue);
  box-shadow: 0 0 0 6px rgba(47, 111, 237, 0.12);
}
.as-hero2 .as-hero-sat-2 {
  inset: 13%;
  animation: as-h2-spin 47s linear infinite reverse;
  animation-delay: -12s;
}
.as-hero2 .as-hero-sat-2::after {
  background: var(--h2-orange);
  box-shadow: 0 0 0 6px rgba(244, 105, 42, 0.14);
}
@keyframes as-h2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.as-hero2 .as-hero-media {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 28px 64px rgba(15, 27, 52, 0.22);
}
/* Vignette keeps the white stat chips legible over any artwork that is
   dropped into the `image` prop, light or dark. */
.as-hero2 .as-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.28) 0%, rgba(11, 18, 32, 0) 42%, rgba(11, 18, 32, 0.34) 100%);
}
.as-hero2 .as-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;           /* stable box → no layout shift while loading */
  object-fit: cover;
}

/* Slow vertical drift. Different periods per element mean they never move in
   lockstep, which is what sells the parallax; translate3d keeps it on the
   compositor. */
@keyframes as-h2-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
/* Shorter travel for the chips so they read as riding on the card rather than
   drifting away from it. */
@keyframes as-h2-bob-sm {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
.as-hero2 .as-hero-media {
  animation: as-h2-bob 11s ease-in-out infinite;
  will-change: transform;
}

/* --- Floating stat chips -------------------------------------------------- */
.as-hero2 .as-hero-chips { list-style: none; margin: 0; padding: 0; }
.as-hero2 .as-hero-chip {
  position: absolute;
  z-index: 2;
  padding: 14px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 27, 52, 0.14);
  text-align: left;
}
.as-hero2 .as-hero-chip-num {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 0.5vw + 14px, 21px);
  font-weight: 800;
  line-height: 1.15;
}
.as-hero2 .as-hero-chip-lbl {
  display: block;
  font-size: clamp(11px, 0.2vw + 10px, 13px);
  color: var(--h2-body);
  line-height: 1.3;
}
.as-hero2 .as-chip-tl { top: 8%; left: -26px; }
.as-hero2 .as-chip-mr { top: 54%; right: -30px; }
.as-hero2 .as-chip-bl { bottom: 8%; left: -12px; }

/* Chips drift against the card rather than with it — offset periods and
   negative delays so they start out of phase instead of all at the top. */
.as-hero2 .as-hero-chip {
  animation: as-h2-bob-sm 8s ease-in-out infinite;
  will-change: transform;
}
.as-hero2 .as-chip-tl { animation-duration: 7.5s; animation-delay: -1.2s; }
.as-hero2 .as-chip-mr { animation-duration: 9.5s; animation-delay: -4s; }
.as-hero2 .as-chip-bl { animation-duration: 8.5s; animation-delay: -6.5s; }

/* Chips pull inward as the visual column narrows */
@media (max-width: 1399.98px) {
  .as-hero2 .as-chip-tl { left: -14px; }
  .as-hero2 .as-chip-mr { right: -16px; }
  .as-hero2 .as-chip-bl { left: -4px; }
}
@media (max-width: 1199.98px) {
  .as-hero2 .as-hero-chip { padding: 11px 15px; }
  .as-hero2 .as-chip-tl { left: 0; }
  .as-hero2 .as-chip-mr { right: 0; }
  .as-hero2 .as-chip-bl { left: 8px; }
}
@media (max-width: 991.98px) {
  .as-hero2 .as-chip-tl { top: 6%; left: 10px; }
  .as-hero2 .as-chip-mr { top: 50%; right: 10px; }
  .as-hero2 .as-chip-bl { bottom: 6%; left: 10px; }
}

/* Phones: stop floating the chips over the image — at this width they cover
   the artwork and risk overflowing the viewport. Lay them out as a readable
   row underneath instead. */
@media (max-width: 767.98px) {
  .as-hero2 .as-hero-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
  }
  .as-hero2 .as-hero-chip {
    position: static;
    animation: none;             /* the row below the image stays put */
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--h2-line);
    box-shadow: 0 8px 22px rgba(15, 27, 52, 0.08);
  }
}
@media (max-width: 400px) {
  .as-hero2 .as-hero-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-hero2 .as-hero-chip:last-child { grid-column: 1 / -1; }
}

/* --- Small-screen layout polish ------------------------------------------- */
@media (max-width: 991.98px) {
  .as-hero2 .as-hero-badge { margin-bottom: 22px; }
  .as-hero2 .as-hero-lead { margin-bottom: 28px; }
  .as-hero2 .as-hero-actions { margin-bottom: 32px; }
}
@media (max-width: 575.98px) {
  .as-hero2 .as-hero-actions .as-btn { width: 100%; }
  .as-hero2 .as-hero-media { border-radius: 16px; }
  .as-hero2 .as-hero-media img { aspect-ratio: 16 / 11; }
  .as-hero2 .as-hero-steps { gap: 8px 12px; }
  .as-hero2 .as-hero-step + .as-hero-step::before { width: 14px; margin-right: 8px; }
}
@media (max-width: 360px) {
  .as-hero2 .as-hero-badge { letter-spacing: 0.1em; padding: 9px 14px; }
}

/* Respect reduced motion: nothing in the hero moves. Both scripts also bail
   out on their own, so the sub-headline keeps its first phrase and the static
   SVG constellation stays in place of the live canvas. */
@media (prefers-reduced-motion: reduce) {
  .as-hero2 *,
  .as-hero2 *::before,
  .as-hero2 *::after {
    animation: none !important;
    transition: none !important;
  }
  .as-hero2 .as-btn:hover,
  .as-hero2 .as-btn:focus-visible { transform: none; }
}

/* ==========================================================================
   1c. PROOF BAND  —  metrics panel + "trusted by" logo marquee (2026-08-18)
   Sits directly under HERO v2 and shares its blue/orange accent palette, so
   it inherits the same --h2-* tokens rather than redefining them.
   Lengths are px for the same reason as the hero block: :root is 20px.
   ========================================================================== */
.as-proof {
  --h2-ink: #0f1b34;
  --h2-body: #5b6579;
  --h2-blue: #2f6fed;
  --h2-line: #e6ebf3;

  position: relative;
  background: #fff;
  overflow: hidden;              /* the marquee never widens the page */
}
.as-proof .as-proof-inner {
  padding-top: clamp(48px, 5vw, 84px);
  padding-bottom: 0;             /* the marquee below owns the closing space */
}

/* --- Metrics panel --------------------------------------------------------
   gap:1px over a tinted panel background paints the dividers, so the rules
   hold at 4-up, 2-up and 1-up without any per-cell border juggling.
   ------------------------------------------------------------------------- */
.as-proof .as-proof-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--h2-line);    /* shows through the gaps as the dividers */
  border: 1px solid var(--h2-line);
  border-radius: 14px;
  overflow: hidden;              /* clips the cells to the rounded corners */
}
.as-proof .as-proof-stat {
  background: #fafbfd;
  padding: clamp(20px, 2.2vw, 34px) clamp(18px, 2.2vw, 36px);
}
.as-proof .as-proof-num {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 2.4vw + 12px, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--h2-ink);
}
.as-proof .as-proof-lbl {
  display: block;
  margin-top: 8px;
  font-size: clamp(12.5px, 0.3vw + 11.5px, 15px);
  line-height: 1.4;
  color: var(--h2-body);
}

/* --- "Trusted by …" kicker ------------------------------------------------ */
.as-proof .as-proof-kicker {
  margin: clamp(40px, 4.5vw, 72px) 0 0;
  text-align: center;
  font-size: clamp(11px, 0.3vw + 10px, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--h2-ink);
}
.as-proof .as-proof-kicker-accent { color: var(--h2-blue); }

/* --- Logo marquee ---------------------------------------------------------
   Two identical rows inside one track; the track travels exactly one row
   width (-50%), so the loop is seamless. The mask fades both ends instead of
   cutting the logos off with a hard edge.
   ------------------------------------------------------------------------- */
.as-proof .as-proof-marquee {
  margin-top: clamp(20px, 2vw, 30px);
  padding-bottom: clamp(40px, 4.5vw, 76px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.as-proof .as-proof-track {
  display: flex;
  width: max-content;
  animation: as-proof-scroll var(--as-proof-speed, 45s) linear infinite;
  will-change: transform;
}
/* Hovering pauses the strip so a logo can actually be looked at. */
.as-proof .as-proof-marquee:hover .as-proof-track,
.as-proof .as-proof-marquee:focus-within .as-proof-track {
  animation-play-state: paused;
}
@keyframes as-proof-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.as-proof .as-proof-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  margin: 0;
  padding: 0 clamp(6px, 0.6vw, 10px) 0 0;
  list-style: none;
}
.as-proof .as-proof-logo {
  flex: 0 0 auto;
  width: clamp(140px, 12.5vw, 188px);
  height: clamp(62px, 5vw, 78px);
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--h2-line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 27, 52, 0.04);
  overflow: hidden;
}
/* The image fills the card's content box and object-fit does the scaling.
   Sizing it intrinsically instead (max-height:100% on an auto row) lets an
   SVG with no intrinsic dimensions blow the card open. */
.as-proof .as-proof-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .as-proof .as-proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 2x2 holds down to ~360px; only the smallest phones need a single column. */
@media (max-width: 359.98px) {
  .as-proof .as-proof-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .as-proof .as-proof-stat { text-align: center; }
}

/* Reduced motion: the strip stops and becomes a normal horizontal scroller,
   with the duplicate row removed so no logo appears twice. */
@media (prefers-reduced-motion: reduce) {
  .as-proof .as-proof-track { animation: none; width: auto; }
  .as-proof .as-proof-row-clone { display: none; }
  .as-proof .as-proof-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* --- 2. Statistics panel (overlaps hero) ---------------------------------- */
.as-stats {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
}
.as-stats .as-stat-num {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--as-grape);
  line-height: 1.1;
}
.as-stats .as-stat-lbl { color: var(--as-body); font-size: 15px; }
.as-stats .as-stat + .as-stat { position: relative; }
@media (min-width: 768px) {
  .as-stats [class*="col-"]:not(:last-child) .as-stat::after {
    content: "";
    position: absolute; top: 15%; right: 0;
    height: 70%; width: 1px; background: var(--as-line);
  }
}

/* --- 2b. Highlighted metrics panel  (.as-stats--highlight) ----------------
   Opt-in emphasis for pages whose figures ARE the headline claim — the Case
   Study detail page's impact metrics. Same panel, more weight: a tinted
   surface, a short brand accent rule above each figure and a larger, tighter
   numeral. Added 2026-08-21; the plain .as-stats above is unchanged, so the
   homepage and every other caller keeps its current look.
   ------------------------------------------------------------------------- */
.as-stats--highlight {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7fd 100%);
  border-color: rgba(96, 93, 186, 0.22);
  box-shadow: 0 0.125rem 0.25rem rgba(30, 34, 40, 0.04),
              0 1.25rem 3rem rgba(96, 93, 186, 0.13);
}

/* Accent rule above each figure. Decorative only. */
.as-stats--highlight .as-stat {
  position: relative;
  padding-top: 1.15rem;
}
.as-stats--highlight .as-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--as-grape) 0%, #8b88e0 100%);
}

.as-stats--highlight .as-stat-num {
  font-size: clamp(24px, 2.2vw + 12px, 40px) !important;
  letter-spacing: -0.02em;
  /* A word metric ("Incremental") must wrap rather than push the cell wide. */
  overflow-wrap: break-word;
}
.as-stats--highlight .as-stat-lbl {
  margin-top: 0.35rem;
  font-size: clamp(12.5px, 0.3vw + 11.5px, 14.5px);
  line-height: 1.5;
}

/* The accent rule replaces the vertical divider — two separators at once
   reads as clutter. */
@media (min-width: 768px) {
  .as-stats--highlight [class*="col-"]:not(:last-child) .as-stat::after { display: none; }
}

/* --- 4. Solutions ---------------------------------------------------------- */
.as-core {
  height: 100%;
  position: relative;
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  padding: 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
/* .as-core::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--as-grape), #747ed1);
} */
.as-core:hover { transform: translateY(-5px); box-shadow: var(--as-shadow-hover); }
.as-core .as-core-icon {
  width: 3rem; height: 3rem;
  border-radius: 0.7rem;
  display: grid; place-items: center;
  font-size: 1.35rem; color: #fff;
  background: var(--as-grape);
  margin-bottom: 1.1rem;
}
.as-core h3 { font-size: 1.2rem; color: var(--as-ink); }
.as-core .as-core-list { list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.as-core .as-core-list li {
  font-size: 0.85rem; color: var(--as-body);
  padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem;
}
.as-core .as-core-list li::before {
  content: "\e9dd"; /* unicons uil-check */
  font-family: "Unicons"; font-size: 0.95rem;
  color: var(--as-grape);
  position: absolute; left: 0; top: -1px;
}
.as-solink {
  display: flex; align-items: center; gap: 0.85rem;
  height: 100%;
  background: var(--as-soft);
  border-radius: var(--as-radius);
  padding: 1.1rem 1.25rem;
  color: var(--as-ink);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.as-solink:hover { background: var(--as-line); transform: translateY(-3px); color: var(--as-ink); }
.as-solink .uil { font-size: 1.35rem; color: var(--as-grape); }
.as-solink span { font-weight: 600; font-size: 0.92rem; }

/* --- 5. Industry cards ----------------------------------------------------- */
.as-industry {
  position: relative;
  height: 100%;
  border-radius: var(--as-radius);
  overflow: hidden;
  border: 1px solid #eef0f6;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.as-industry:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-hover); }
.as-industry .as-ind-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.as-industry .as-ind-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.as-industry:hover .as-ind-media img { transform: scale(1.05); }
.as-industry .as-ind-body { padding: 1.3rem; }
.as-industry h3 { font-size: 1.05rem; color: var(--as-ink); margin-bottom: 0.35rem; }
.as-industry .as-ind-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--as-grape); }
.as-industry p { font-size: 0.84rem; margin-bottom: 0.75rem; }

/* --- 5b. Industry expertise — expanding image accordion (redesign) ---------
   Replaces the .as-industry card grid above (kept for any other caller).
   Sized for the full eleven-industry list.

   <576px   one column of compact photo bands; the description is clamped to
            two lines so eleven of them stay a sane scroll length
   576px+   two columns of photo tiles
   992px+   one horizontal accordion. Every panel keeps a FIXED spine-width
            flex-basis and only flex-grow animates, so the open panel absorbs
            all remaining width — it stays readable whether the list holds
            four industries or eleven.

   No JS. Three states drive it:
     1. base            = collapsed (desktop) / open (mobile)
     2. expanded group  = .is-active (the default panel) + :hover + :focus-within
     3. yield group     = higher specificity, collapses every panel the pointer
                          or keyboard is NOT on, which is what lets .is-active
                          hand its expansion over.
   Each :not() in the yield group excludes the *other* trigger, so a mouse
   hover and a keyboard focus can never fight over the same panel.
   -------------------------------------------------------------------------- */
.as-iacc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;                        /* dark backdrop reads as hairline dividers */
  border-radius: var(--as-radius);
  overflow: hidden;
  box-shadow: var(--as-shadow);
  background: #2b2856;
}
@media (min-width: 576px) {
  .as-iacc { grid-template-columns: repeat(2, 1fr); }
}

/* One panel = one link. Photo and veil sit behind the copy. */
.as-iacc-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 158px;
  padding: 1.1rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.as-iacc-panel:hover,
.as-iacc-panel:focus-visible { color: #fff; }
.as-iacc-panel:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.as-iacc-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.45s ease;
}
.as-iacc-panel:hover .as-iacc-img { transform: scale(1.05); }
.as-iacc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(28, 26, 58, 0.2) 0%, rgba(28, 26, 58, 0.55) 45%, rgba(28, 26, 58, 0.9) 100%);
  transition: background 0.45s ease;
}

.as-iacc-spine { display: none; }   /* desktop only */

.as-iacc-open { position: relative; z-index: 2; width: 100%; }
.as-iacc-num {
  display: block;
  margin-bottom: 0.4rem;
  font-size: clamp(10.5px, 0.2vw + 10px, 12.5px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #b9b7ea;
}
.as-iacc-open h3 {
  color: #fff;
  margin-bottom: 0.35rem;
  font-size: clamp(16px, 0.4vw + 14px, 20px);
  line-height: 1.3;
}
.as-iacc-open p {
  max-width: 30rem;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(13px, 0.25vw + 12px, 15px);
  line-height: 1.55;
}
@media (max-width: 575.98px) {
  /* Eleven full paragraphs is a long scroll on a phone — show the gist. */
  .as-iacc-open p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.as-iacc-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid #9d9be0;   /* lightened grape — legible on photos */
  font-weight: 700;
  font-size: clamp(12.5px, 0.2vw + 12px, 14.5px);
}
.as-iacc-more .uil { font-size: 1.05em; transition: transform 0.25s ease; }
.as-iacc-panel:hover .as-iacc-more .uil,
.as-iacc-panel:focus-within .as-iacc-more .uil { transform: translateX(4px); }

@media (min-width: 992px) {
  .as-iacc {
    display: flex;
    flex-direction: row;
    gap: 0;                        /* flush: a gap would break the hover logic */
    height: clamp(400px, 40vw, 540px);
  }

  .as-iacc-panel {
    /* Fixed basis = collapsed spine width; only flex-grow animates. */
    flex: 0 1 clamp(46px, 4.4vw, 68px);
    min-width: 0;
    min-height: 0;
    justify-content: center;
    padding: 22px 6px;
    transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .as-iacc-panel + .as-iacc-panel { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18); }

  /* 1. Collapsed: dimmed photo, vertical label, copy parked out of the way */
  .as-iacc-img { filter: grayscale(0.4) brightness(0.9); }
  .as-iacc-veil {
    background: linear-gradient(180deg, rgba(40, 37, 82, 0.7) 0%, rgba(28, 26, 58, 0.92) 100%);
  }
  .as-iacc-spine {
    display: block;
    position: relative;
    z-index: 2;
    max-height: calc(100% - 44px);
    overflow: hidden;
    writing-mode: vertical-rl;
    transform: rotate(180deg);      /* reads bottom-to-top */
    white-space: nowrap;
    font-size: clamp(13px, 0.3vw + 12px, 16px);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
  }
  .as-iacc-open {
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 26px;
    /* Fixed measure, so the copy does not reflow while the panel animates. */
    width: min(420px, 60vw);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.4s ease 0.05s, transform 0.5s ease 0.05s;
  }

  /* 2. Expanded — absorbs every remaining pixel */
  .as-iacc-panel.is-active,
  .as-iacc-panel:hover,
  .as-iacc-panel:focus-within { flex-grow: 1; }

  .as-iacc-panel.is-active .as-iacc-img,
  .as-iacc-panel:hover .as-iacc-img,
  .as-iacc-panel:focus-within .as-iacc-img { filter: none; }

  .as-iacc-panel.is-active .as-iacc-veil,
  .as-iacc-panel:hover .as-iacc-veil,
  .as-iacc-panel:focus-within .as-iacc-veil {
    background: linear-gradient(180deg, rgba(28, 26, 58, 0.15) 0%, rgba(28, 26, 58, 0.5) 45%, rgba(28, 26, 58, 0.92) 100%);
  }

  .as-iacc-panel.is-active .as-iacc-spine,
  .as-iacc-panel:hover .as-iacc-spine,
  .as-iacc-panel:focus-within .as-iacc-spine { opacity: 0; }

  .as-iacc-panel.is-active .as-iacc-open,
  .as-iacc-panel:hover .as-iacc-open,
  .as-iacc-panel:focus-within .as-iacc-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* 3. Yield — collapse whatever the pointer/keyboard is not on.
     Scoped with :has() so this only fires when a *specific* sibling panel
     is actually hovered/focused. The old `.as-iacc:hover` scope also matched
     the split-second where the pointer is over the container but between/
     outside panel boxes mid-transition, zeroing every panel's flex-grow at
     once (incl. .is-active) and leaving a blank strip of the container
     background with no expanded panel to fill it. */
  .as-iacc:has(.as-iacc-panel:hover) .as-iacc-panel:not(:hover),
  .as-iacc:has(.as-iacc-panel:focus-within) .as-iacc-panel:not(:focus-within) { flex-grow: 0; }

  .as-iacc:has(.as-iacc-panel:hover) .as-iacc-panel:not(:hover) .as-iacc-img,
  .as-iacc:has(.as-iacc-panel:focus-within) .as-iacc-panel:not(:focus-within) .as-iacc-img {
    filter: grayscale(0.4) brightness(0.9);
    transform: none;
  }

  .as-iacc:has(.as-iacc-panel:hover) .as-iacc-panel:not(:hover) .as-iacc-veil,
  .as-iacc:has(.as-iacc-panel:focus-within) .as-iacc-panel:not(:focus-within) .as-iacc-veil {
    background: linear-gradient(180deg, rgba(40, 37, 82, 0.7) 0%, rgba(28, 26, 58, 0.92) 100%);
  }

  .as-iacc:has(.as-iacc-panel:hover) .as-iacc-panel:not(:hover) .as-iacc-spine,
  .as-iacc:has(.as-iacc-panel:focus-within) .as-iacc-panel:not(:focus-within) .as-iacc-spine { opacity: 1; }

  .as-iacc:has(.as-iacc-panel:hover) .as-iacc-panel:not(:hover) .as-iacc-open,
  .as-iacc:has(.as-iacc-panel:focus-within) .as-iacc-panel:not(:focus-within) .as-iacc-open {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-iacc-panel,
  .as-iacc-img,
  .as-iacc-veil,
  .as-iacc-spine,
  .as-iacc-open,
  .as-iacc-more .uil { transition: none !important; }
  .as-iacc-panel:hover .as-iacc-img { transform: none !important; }
  .as-iacc-open { transform: none !important; }
}

/* --- 6. Why (feature list) ------------------------------------------------- */
.as-why-item { display: flex; gap: 1rem; }
.as-why-item .as-why-icon {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem;
  border-radius: 0.65rem; display: grid; place-items: center;
  background: var(--as-soft); color: var(--as-grape); font-size: 1.15rem;
}
.as-why-item h3 { font-size: 1rem; color: var(--as-ink); margin-bottom: 0.25rem; }
.as-why-item p { font-size: 0.85rem; margin-bottom: 0; }
.as-why-figure img { border-radius: var(--as-radius); box-shadow: var(--as-shadow); }

/* --- 6b. Why — icon-top tiles on a rounded panel (redesign) --------------- */
.as-whyp { position: relative; }
.as-whyp-dots {
  position: absolute; width: 200px; height: 200px;
  top: -1.25rem; right: -1.25rem; opacity: 0.5; z-index: 0; border-radius: 1rem;
}
/* One panel; a 1px grid gap over a line-coloured backdrop draws hairline
   dividers between the white tiles. Radius + overflow clip it into a card. */
.as-whyp-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--as-line);
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  overflow: hidden;
}
@media (min-width: 768px) { .as-whyp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .as-whyp-grid { grid-template-columns: repeat(3, 1fr); } }
.as-whyp-tile {
  background: #fff; padding: 2.25rem 1.75rem;
  transition: background 0.25s ease;
}
.as-whyp-tile:hover { background: var(--as-soft); }
.as-whyp-ic {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: inline-grid; place-items: center; margin-bottom: 1rem;
  font-size: 1.5rem; color: var(--as-grape); background: var(--as-soft);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.as-whyp-tile:hover .as-whyp-ic { background: var(--as-grape); color: #fff; transform: scale(1.06); }
.as-whyp-tile h3 { font-size: clamp(16px, 0.3vw + 14px, 18px); color: var(--as-ink); margin-bottom: 0.4rem; }
.as-whyp-tile p  { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); line-height: 1.55; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .as-whyp-tile, .as-whyp-ic { transition: none !important; }
  .as-whyp-tile:hover .as-whyp-ic { transform: none !important; }
}

/* --- 7. Approach steps ----------------------------------------------------- */
.as-step {
  position: relative; height: 100%;
  background: #fff; border: 1px solid #eef0f6;
  border-radius: var(--as-radius); padding: 1.6rem 1.4rem;
}
.as-step .as-step-num {
  font-family: var(--font-display, "Poppins", sans-serif);
  font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--as-line);
}
.as-step .as-step-icon { color: var(--as-grape); font-size: 1.5rem; margin: 0.5rem 0 0.75rem; }
.as-step h3 { font-size: 1.05rem; color: var(--as-ink); }
.as-step p { font-size: 0.84rem; margin-bottom: 0; }
/* connector arrow between steps on large screens */
@media (min-width: 992px) {
  .as-step-col:not(:last-child) .as-step::after {
    content: "\e94c"; /* unicons uil-arrow-right */
    font-family: "Unicons";
    position: absolute; top: 50%; right: -1.15rem;
    transform: translateY(-50%);
    color: var(--as-grape); font-size: 1.4rem; z-index: 2;
  }
}

/* --- 8. Technology ecosystem (tabs + logo grid) ---------------------------
   Category tabs over a responsive grid of logo tiles. Behaviour comes from the
   component's own small script (ARIA tablist), so these rules are visual only.
   ------------------------------------------------------------------------- */

/* Tab strip. inline-flex inside a centred, scrollable rail: the tabs centre
   while they fit and become a swipeable strip on narrow screens — without the
   unreachable-first-item bug that `justify-content: center` + overflow causes. */
.as-tt-navwrap {
  position: relative;
  text-align: center;
  border-bottom: 1px solid var(--as-line);
  margin-bottom: 2.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* strip is swipeable; hide the bar */
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.as-tt-navwrap::-webkit-scrollbar { display: none; }
.as-tt-nav {
  display: inline-flex;
  gap: 0.25rem;
  min-width: min-content;
  /* Inline-level box: bottom-align it so no baseline descender gap opens up
     between the tabs and the rail underneath them. */
  vertical-align: bottom;
}
.as-tt-tab {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: transparent;
  border: 0;
  padding: 0.75rem 1.1rem 0.9rem;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(14px, 0.3vw + 12.5px, 17px);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--as-body);
  cursor: pointer;
  transition: color 0.2s ease;
}
/* Active underline sits on the rail (inside the tab box — the strip is a
   scroll container, so anything below its content edge would be clipped) */
.as-tt-tab::after {
  content: "";
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0; height: 2px;
  background: var(--as-grape);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s ease;
}
.as-tt-tab:hover { color: var(--as-ink); }
.as-tt-tab.is-active { color: var(--as-grape); }
.as-tt-tab.is-active::after { transform: scaleX(1); }
.as-tt-tab:focus-visible { outline: 2px solid var(--as-grape); outline-offset: -4px; border-radius: 0.4rem; }

/* Panels */
.as-tt-pane { outline: none; }
.as-tt-pane.is-active { animation: as-tt-fade 0.3s ease both; }
@keyframes as-tt-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Logo grid: flex-wrap rather than grid, so EVERY row centres — including a
   short last row (grid centres its tracks, which would leave 2 leftover tiles
   hugging the left edge). Tiles flex between a floor and a cap, so a 3-item
   tab reads as deliberately as an 8-item one at any width. */
.as-tt-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
}
.as-tt-item {
  flex: 1 1 130px;
  max-width: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  padding: 1.35rem 0.85rem 1.15rem;
  text-align: center;
  overflow: hidden;               /* nothing can ever bleed past the tile */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.as-tt-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-hover);
  border-color: rgba(96, 93, 186, 0.35);
}
/* Fixed-height plate, flex-centred. Keep the box and the image constrained by
   the SAME absolute length: a percentage max-height here cannot resolve (the
   containing block's height is indefinite while intrinsic sizes are computed),
   so the image would fall back to max-width alone, render square, overlap the
   label and spill its white PNG plate below the tile. */
.as-tt-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 3.4rem;
}
.as-tt-logo img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 3.4rem;
  object-fit: contain;
  /* Logos are exported on white/near-white plates — multiply blends those
     plates into the tile so no grey squares show through. */
  mix-blend-mode: multiply;
  transition: transform 0.25s ease;
}
.as-tt-item:hover .as-tt-logo img { transform: scale(1.06); }
.as-tt-name {
  font-weight: 600;
  font-size: clamp(12.5px, 0.25vw + 11.5px, 14.5px);
  line-height: 1.35;
  color: var(--as-ink);
}
/* Roomier tiles from tablet up (declared after the base rule so it wins) */
@media (min-width: 768px) {
  .as-tt-grid { gap: 1.25rem; }
  .as-tt-item { flex-basis: 150px; max-width: 180px; padding: 1.5rem 1rem 1.25rem; }
  .as-tt-logo { height: 3.6rem; }
  .as-tt-logo img { max-height: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .as-tt-tab, .as-tt-tab::after, .as-tt-item, .as-tt-logo img { transition: none !important; }
  .as-tt-pane.is-active { animation: none !important; }
  .as-tt-item:hover { transform: none !important; }
  .as-tt-item:hover .as-tt-logo img { transform: none !important; }
}

/* --- 9. Case studies ------------------------------------------------------- */
.as-case {
  height: 100%; background: #fff; border: 1px solid #eef0f6;
  border-radius: var(--as-radius); overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.as-case:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-hover); }
.as-case .as-case-media { aspect-ratio: 16 / 9; overflow: hidden; }
.as-case .as-case-media img { width: 100%; height: 100%; object-fit: cover; }
.as-case .as-case-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.as-case .as-case-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--as-grape); margin-bottom: 0.5rem; }
.as-case h3 { font-size: 1.05rem; color: var(--as-ink); }
.as-case .as-case-row { font-size: 0.82rem; margin-bottom: 0.35rem; }
.as-case .as-case-row strong { color: var(--as-ink); }

/* --- 9b. Case studies — client selector showcase (redesign) ----------------
   A rail of clients on the left switches one large photographic stage on the
   right. Deliberately un-boxy: the rail rows carry no outline (the active one
   lifts onto a white surface with a grape spine), the fact columns are split
   by hairlines rather than tiles, and the stage is one large-radius shape the
   photo bleeds into.

   The panels share a single grid cell, so the stage always measures the
   TALLEST case — switching never changes the section height and nothing
   clips when copy lengths differ. Hidden panels stay `visibility: hidden`
   (not display:none) precisely so they keep contributing that height.

   Lengths are px-based (not rem): the theme sets html{font-size:20px}, which
   would inflate rem values here. Font sizes stay in clamp() so the fluid type
   system above remains the single source of truth.
   -------------------------------------------------------------------------- */
.as-cs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

/* --- Rail ---------------------------------------------------------------- */
.as-cs-rail {
  display: flex;
  gap: 6px;
  min-width: 0;
  /* Mobile-first: a horizontal strip that scrolls, so ten clients never
     push the stage off the fold. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.as-cs-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  color: var(--as-body);
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.as-cs-tab:hover { background: rgba(255, 255, 255, 0.7); color: var(--as-ink); }
.as-cs-tab:focus-visible { outline: 2px solid var(--as-grape); outline-offset: 2px; }

.as-cs-tab.is-active {
  background: #fff;
  color: var(--as-ink);
  box-shadow: 0 0.35rem 1.5rem rgba(30, 34, 40, 0.08);
}
/* Grape spine on the active row — the only "edge" in the rail. */
.as-cs-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 26px;
  border-radius: 50rem;
  background: var(--as-grape);
  transform: translateY(-50%);
}

.as-cs-tab-mark {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--as-soft);
  color: var(--as-grape);
  font-size: 1.05rem;
  opacity: 0.75;
  transition: opacity 0.25s ease, background 0.25s ease;
}
.as-cs-tab-mark img {
  max-width: 28px;
  max-height: 24px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.as-cs-tab:hover .as-cs-tab-mark,
.as-cs-tab.is-active .as-cs-tab-mark { opacity: 1; }
.as-cs-tab.is-active .as-cs-tab-mark { background: var(--as-line); }
.as-cs-tab:hover .as-cs-tab-mark img,
.as-cs-tab.is-active .as-cs-tab-mark img { filter: none; opacity: 1; }

.as-cs-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-cs-tab-name {
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}
.as-cs-tab-meta {
  font-size: clamp(11px, 0.2vw + 10.5px, 12.5px);
  line-height: 1.3;
  color: var(--as-body);
  opacity: 0.8;
}

/* --- Stage --------------------------------------------------------------- */
.as-cs-stage {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: clamp(18px, 1.6vw, 28px);
  overflow: hidden;
  background: #1c1a3a;
  box-shadow: 0 1rem 2.5rem rgba(30, 34, 40, 0.12);
}

.as-cs-panel {
  grid-area: 1 / 1 / 2 / 2;   /* every case in the same cell = no height jump */
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: clamp(320px, 42vw, 520px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.5s ease, visibility 0s linear 0.45s;
}
.as-cs-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease, transform 0.5s ease, visibility 0s;
}

.as-cs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.as-cs-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 18, 45, 0.15) 0%, rgba(20, 18, 45, 0.62) 45%, rgba(18, 16, 40, 0.95) 100%),
    linear-gradient(90deg, rgba(18, 16, 40, 0.75) 0%, rgba(18, 16, 40, 0) 65%);
}

.as-cs-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(20px, 2.4vw, 40px);
  color: #fff;
}

.as-cs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.as-cs-cat {
  font-size: clamp(11px, 0.35vw + 9.5px, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.as-cs-pill {
  padding: 4px 12px;
  border-radius: 50rem;
  background: var(--as-grape);
  color: #fff;
  font-size: clamp(10.5px, 0.3vw + 9.5px, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.as-cs-title {
  max-width: 22ch;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-size: clamp(20px, 1.15vw + 14px, 30px);
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
}

/* Facts: hairline-separated columns, no tiles — this is the part the client
   read as "boxy" in the reference. Falls back to Challenge/Solution/Outcome
   when a case has no approved metrics. */
.as-cs-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.as-cs-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.as-cs-fact-key {
  font-size: clamp(10.5px, 0.3vw + 9.5px, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b7b4f2;
}
.as-cs-fact-val {
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* Metric variant — the number leads and the label sits under it. */
.as-cs-fact--stat .as-cs-fact-key {
  font-size: clamp(24px, 1.2vw + 17px, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
  color: #fff;
}
.as-cs-fact--stat .as-cs-fact-val {
  font-size: clamp(11.5px, 0.25vw + 10.5px, 13px);
  color: rgba(255, 255, 255, 0.75);
}

.as-cs-text {
  max-width: 62ch;
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.as-cs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 1.6vw, 24px);
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
      padding: 5px 20px;
    border: 1px solid white;
    border-radius: 20px;

}
.as-cs-link:hover,
.as-cs-link:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; border-radius: 20px; color: #fff;}
.as-cs-link:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; border-radius: 20px; color: #fff; }
.as-cs-link .uil { font-size: 1.1em; transition: transform 0.25s ease; }
.as-cs-link:hover .uil { transform: translateX(4px); }

/* Tablet portrait and up — facts spread into the reference's three columns,
   split by hairlines rather than boxes. */
@media (min-width: 576px) {
  .as-cs-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .as-cs-fact { padding-inline: clamp(14px, 1.6vw, 22px); }
  .as-cs-fact:first-child { padding-inline-start: 0; }
  .as-cs-fact:last-child { padding-inline-end: 0; }
  .as-cs-fact + .as-cs-fact { border-inline-start: 1px solid rgba(255, 255, 255, 0.2); }
}

/* Desktop — the rail turns vertical beside the stage, as in the reference. */
@media (min-width: 992px) {
  .as-cs { grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); }
  .as-cs-rail {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    position: sticky;
    top: 96px;
  }
  .as-cs-tab { width: 100%; padding: 13px 16px; }
  .as-cs-content { padding-inline-end: clamp(40px, 12vw, 180px); }
}

/* Phones — the copy sits over the photo, so the veil has to work harder, and
   the rail drops its subtitles to stay a one-line strip. */
@media (max-width: 767.98px) {
  .as-cs-tab-meta { display: none; }
  .as-cs-tab { padding: 10px 12px; gap: 10px; }
  .as-cs-tab-mark { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 0.95rem; }
  .as-cs-veil {
    background: linear-gradient(180deg, rgba(20, 18, 45, 0.55) 0%, rgba(18, 16, 40, 0.9) 55%, rgba(18, 16, 40, 0.97) 100%);
  }
  .as-cs-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .as-cs-tab,
  .as-cs-tab-mark,
  .as-cs-tab-mark img,
  .as-cs-panel,
  .as-cs-link .uil { transition: none !important; }
  .as-cs-panel { transform: none !important; }
  .as-cs-link:hover .uil { transform: none !important; }
}

/* --- 10. Testimonials — editorial spotlight slider -------------------------
   One wide panel instead of three cards: a single quote at display size, an
   oversized bleed glyph, and an avatar rail on the right that doubles as the
   slider navigation. The ring around the active avatar drains over the
   autoplay interval — the component's script advances on its `animationend`,
   so `animation-play-state` below is the ONLY autoplay control there is.
   Lengths here are px-based (not rem): the theme sets html{font-size:20px},
   which would inflate rem paddings well past the intent of this layout.
   ------------------------------------------------------------------------- */
.as-tsl { position: relative; --as-tsl-dir: 1; }

.as-tsl-panel {
  position: relative;
  display: grid;
  /* portrait | quote | avatar rail */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(26px, 3.4vw, 56px);
  border: 1px solid var(--as-line);
  border-radius: 20px;
  /* Grape wash from the glyph corner, fading into plain white */
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(96, 93, 186, 0.07) 0%, rgba(96, 93, 186, 0) 55%),
    #fff;
  box-shadow: var(--as-shadow);
  overflow: hidden;                       /* lets the glyph bleed off-panel */
}

/* Watermark. line-height is deliberately < 1 so the mark's ink — which sits
   at cap height, near the TOP of the em box — lands inside the panel instead
   of being clipped away by the overflow above. */
.as-tsl-glyph {
  position: absolute;
  /* Anchored top-RIGHT since the portrait column redesign (2026-08-19) took
     over the left of the panel; on the left the two marks fought. */
  top: 0; right: 0.1em;
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(110px, 13vw, 190px);
  line-height: 0.78;
  color: var(--as-grape);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

.as-tsl-main { position: relative; z-index: 1; min-width: 0; }

/* Every slide occupies the SAME grid cell, so the panel is as tall as the
   longest quote and swapping slides never shifts the page. */
.as-tsl-stack { display: grid; }
.as-tsl-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;                     /* also hides it from assistive tech */
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.as-tsl-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
  /* Re-adding the class restarts this, giving a direction-aware entrance. */
  animation: as-tsl-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes as-tsl-in {
  from { opacity: 0; transform: translateX(calc(var(--as-tsl-dir, 1) * 28px)); }
  to   { opacity: 1; transform: none; }
}

/* The theme gives every <blockquote> a blue left rule + padding; this design
   uses the watermark and the author accent instead, so reset it. */
.as-tsl-quote { margin: 0; border-left: 0; padding-left: 0; }
.as-tsl-quote p {
  margin: 0;
  color: var(--as-ink);
  font-weight: 500;
  font-size: clamp(17px, 1.05vw + 13px, 25px) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.as-tsl-author {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: clamp(18px, 2vw, 28px);
  padding-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--as-line);
}
.as-tsl-author::before {          /* brand accent sitting on the hairline */
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 48px; height: 2px; border-radius: 2px;
  background: var(--as-grape);
}
.as-tsl-name { font-weight: 700; color: var(--as-ink); font-size: clamp(14px, 0.3vw + 13px, 16px); }
.as-tsl-role { color: var(--as-body); font-size: clamp(12.5px, 0.25vw + 11.5px, 14px); }

/* Controls */
.as-tsl-controls {
  display: flex; align-items: center; gap: 10px;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.as-tsl-nav {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--as-line); color: var(--as-ink);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.as-tsl-nav:hover { background: var(--as-grape); border-color: var(--as-grape); color: #fff; transform: translateY(-2px); }
.as-tsl-nav:focus-visible { outline: 2px solid var(--as-grape); outline-offset: 2px; }
.as-tsl-count {
  margin-left: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--as-body); font-variant-numeric: tabular-nums;
}
.as-tsl-count-now { color: var(--as-grape); }
.as-tsl-count-sep { margin: 0 4px; opacity: 0.5; }

/* Client portrait — the face of the person actually being quoted.
   The frames are stacked in one grid cell and crossfaded on the active index
   (the component's script toggles .is-active here as well as on the quotes),
   so the column never reflows and never changes height between slides.
   A slide with no supplied photo renders .as-tsl-face-mono instead: same
   frame, same size, brand gradient + initials — a deliberate-looking
   placeholder rather than a gap. */
.as-tsl-faces {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  display: grid;                          /* every frame shares one cell */
  width: clamp(150px, 15vw, 208px);
  aspect-ratio: 4 / 5;
}
.as-tsl-face {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  border-radius: 18px;
  overflow: visible;                      /* the badge hangs off the corner */
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.as-tsl-face.is-active { opacity: 1; transform: none; }

/* Offset brand plate behind the frame — the same trick the hero uses to stop
   a lone portrait reading as a floating cut-out. */
.as-tsl-face::before {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(96, 93, 186, 0.16), rgba(96, 93, 186, 0.05));
  z-index: -1;
}
.as-tsl-face[data-tone="1"]::before { background: linear-gradient(135deg, rgba(79, 76, 166, 0.18), rgba(79, 76, 166, 0.05)); }
.as-tsl-face[data-tone="2"]::before { background: linear-gradient(135deg, rgba(116, 126, 209, 0.18), rgba(116, 126, 209, 0.05)); }

.as-tsl-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;            /* keeps heads in frame on tall crops */
  border-radius: 18px;
  display: block;
  background: var(--as-soft);
  box-shadow: 0 14px 34px rgba(30, 34, 40, 0.14);
}

.as-tsl-face-mono {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b6fd4, #7d7ad6);
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 34px rgba(96, 93, 186, 0.24);
}
.as-tsl-face[data-tone="1"] .as-tsl-face-mono { background: linear-gradient(135deg, #3059ab, #6f6cc9); }
.as-tsl-face[data-tone="2"] .as-tsl-face-mono { background: linear-gradient(135deg, #747ed1, #9aa2e4); }

/* Small quote chip pinned to the bottom-right of the frame */
.as-tsl-face-badge {
  position: absolute;
  right: -14px; bottom: -14px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--as-grape);
  color: #fff;
  box-shadow: 0 8px 20px rgba(96, 93, 186, 0.35);
}
.as-tsl-face-badge .uil { font-size: 19px; line-height: 1; }

/* Company name after the role, separated by a hairline dot */
.as-tsl-co { position: relative; margin-left: 16px; font-weight: 600; color: var(--as-ink); }
.as-tsl-co::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* Avatar rail = navigation + autoplay countdown. Stretching it to the panel
   height and hanging it off a hairline turns three floating circles into a
   deliberate sidebar, and stops the wide panel reading as empty on the right. */
.as-tsl-rail {
  position: relative; z-index: 1;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding-left: clamp(20px, 2.5vw, 36px);
  border-left: 1px solid var(--as-line);
}
.as-tsl-dot {
  position: relative; flex: 0 0 auto;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.as-tsl-dot:focus-visible { outline: 2px solid var(--as-grape); outline-offset: 3px; }
.as-tsl-avatar {
  position: absolute; inset: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(135deg, #3b6fd4, #7d7ad6);
  opacity: 0.45; filter: grayscale(1);    /* inactive people recede */
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.as-tsl-avatar[data-tone="1"] { background: linear-gradient(135deg, #3059ab, #6f6cc9); }
.as-tsl-avatar[data-tone="2"] { background: linear-gradient(135deg, #747ed1, #9aa2e4); }
.as-tsl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.as-tsl-dot:hover .as-tsl-avatar { opacity: 0.8; filter: none; }
.as-tsl-dot.is-active .as-tsl-avatar { opacity: 1; filter: none; transform: scale(1.04); }

.as-tsl-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);              /* start the sweep at 12 o'clock */
  overflow: visible; pointer-events: none;
}
.as-tsl-ring circle { fill: none; stroke-width: 2; }
.as-tsl-ring-bg { stroke: transparent; }
/* r=22 → circumference 2πr ≈ 138.23 */
.as-tsl-ring-fg { stroke: var(--as-grape); stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 138.23; }
.as-tsl-dot.is-active .as-tsl-ring-bg { stroke: var(--as-line); }
.as-tsl-dot.is-active .as-tsl-ring-fg { animation: as-tsl-ring var(--as-tsl-dur, 7000ms) linear both; }
@keyframes as-tsl-ring {
  from { stroke-dashoffset: 138.23; }
  to   { stroke-dashoffset: 0; }
}
/* The only autoplay brake: reading, interacting, or scrolled away all hold it. */
.as-tsl:hover .as-tsl-ring-fg,
.as-tsl:focus-within .as-tsl-ring-fg,
.as-tsl.is-offscreen .as-tsl-ring-fg { animation-play-state: paused; }

/* Screen-reader-only status line */
.as-tsl-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Client logo marquee. Two identical groups scroll by exactly one group + one
   gap — hence the `-50% - gap/2` end state, which is the only offset that
   loops seamlessly when the flex `gap` sits between the groups as well. */
.as-tsl-logos { margin-top: clamp(34px, 4vw, 56px); }
.as-tsl-logos-label {
  display: block; text-align: center; margin-bottom: 20px;
  font-size: clamp(11px, 0.35vw + 9.5px, 13px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-body);
}
.as-tsl-marquee {
  --as-mq-gap: clamp(32px, 5vw, 72px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.as-tsl-marquee-track {
  display: flex; width: max-content; gap: var(--as-mq-gap);
  animation: as-tsl-marquee 38s linear infinite;
}
.as-tsl-marquee-group { display: flex; flex: 0 0 auto; align-items: center; gap: var(--as-mq-gap); }
.as-tsl-marquee:hover .as-tsl-marquee-track { animation-play-state: paused; }
@keyframes as-tsl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--as-mq-gap) / 2)); }
}
.as-tsl-marquee img {
  flex: 0 0 auto; height: 34px; width: auto;
  opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.as-tsl-marquee img:hover { opacity: 1; filter: none; }

/* Tablet: portrait keeps its column, the rail unstacks underneath both */
@media (max-width: 991.98px) {
  .as-tsl-panel { grid-template-columns: auto minmax(0, 1fr); }
  .as-tsl-faces { width: clamp(132px, 20vw, 168px); }
  .as-tsl-rail {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    padding-left: 0; padding-top: clamp(18px, 3vw, 26px);
    border-left: 0; border-top: 1px solid var(--as-line);
  }
}

/* Phone: a full-width column would waste the screen, so the portrait shrinks
   to a circle and sits inline above the quote. */
@media (max-width: 767.98px) {
  .as-tsl-panel { grid-template-columns: minmax(0, 1fr); }
  .as-tsl-faces { width: 96px; aspect-ratio: 1; justify-self: start; }
  .as-tsl-face,
  .as-tsl-face img,
  .as-tsl-face-mono { border-radius: 50%; }
  .as-tsl-face::before { display: none; }
  .as-tsl-face-mono { font-size: 28px; }
  .as-tsl-face-badge { right: -6px; bottom: -2px; width: 34px; height: 34px; }
  .as-tsl-face-badge .uil { font-size: 15px; }
}

@media (max-width: 575.98px) {
  .as-tsl-panel { border-radius: 16px; }
  .as-tsl-marquee img { height: 28px; }
  .as-tsl-co { display: block; margin-left: 0; }
  .as-tsl-co::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .as-tsl-slide.is-active { animation: none !important; }
  /* No ring animation means no `animationend`, so autoplay never starts —
     the slider stays manual. A full ring still marks the active person. */
  .as-tsl-dot.is-active .as-tsl-ring-fg { animation: none !important; stroke-dashoffset: 0; }
  .as-tsl-nav, .as-tsl-avatar, .as-tsl-marquee img { transition: none !important; }
  .as-tsl-face { transition: none !important; }
  .as-tsl-face.is-active { transform: none; }
  .as-tsl-nav:hover { transform: none !important; }
  .as-tsl-marquee { -webkit-mask-image: none; mask-image: none; }
  .as-tsl-marquee-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .as-tsl-marquee-group { flex-wrap: wrap; justify-content: center; }
  .as-tsl-marquee-group + .as-tsl-marquee-group { display: none; }
}

/* --- 11. Insights ---------------------------------------------------------- */
.as-post {
  height: 100%; background: #fff; border: 1px solid #eef0f6;
  border-radius: var(--as-radius); overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.as-post:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-hover); }
.as-post .as-post-media { aspect-ratio: 16 / 9; overflow: hidden; }
.as-post .as-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.as-post:hover .as-post-media img { transform: scale(1.04); }
.as-post .as-post-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.as-post .as-post-meta { font-size: 0.72rem; color: var(--as-body); margin-bottom: 0.5rem; }
.as-post .as-post-cat { color: var(--as-grape); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.as-post h3 { font-size: 1.02rem; color: var(--as-ink); }
.as-post p { font-size: 0.84rem; }

/* --- 12. Final CTA --------------------------------------------------------- */
.as-cta {
  border-radius: 1.25rem;
  background: linear-gradient(120deg, #3059ab 0%, #3b6fd4 55%, #747ed1 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.as-cta::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.4px, transparent 1.4px);
  background-size: 20px 20px; opacity: 0.6;
}
.as-cta > * { position: relative; z-index: 1; }
.as-cta h2 { color: #fff; }
.as-cta .btn-light { color: var(--as-grape); font-weight: 600; }
.as-cta .btn-outline-light:hover { color: var(--as-grape); }

/* --- Section heading rhythm ----------------------------------------------- */
.as-kicker { color: var(--as-grape); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ==========================================================================
   RESPONSIVE POLISH — laptop / tablet / mobile
   Base layout already relies on the Bootstrap grid + the theme's fluid
   calc() headings; these rules refine spacing, overlap, image ratios and
   tap targets at each breakpoint. No horizontal overflow at any width.
   ========================================================================== */

/* Safety net: no media inside the revamp ever forces the page wider */
.as-hero, .as-cta { max-width: 100%; }
.as-hero img, .as-why-figure img { max-width: 100%; height: auto; }

/* Laptop / small desktop (<=1199px) */
@media (max-width: 1199.98px) {
  .as-hero-figure > img { width: 100%; }
  .as-float-card { padding: 0.7rem 0.85rem; }
}

/* Tablet landscape & below (<=991px) — hero + why stack to one column */
@media (max-width: 991.98px) {
  .as-hero .as-hero-figure { max-width: 640px; margin-inline: auto; }
  .as-hero-figure > img { width: 100%; height: auto; }
  .as-why-figure { max-width: 640px; margin-inline: auto; }
}

/* Text sizing is handled globally by the FLUID TYPE SYSTEM above (clamp),
   so the media queries below only adjust LAYOUT — spacing, overlap, image
   ratios and tap targets — never font-size. This keeps one source of truth. */

/* Tablet portrait & large phones (<=767px) */
@media (max-width: 767.98px) {
  .as-core, .as-step, .as-quote, .as-industry .as-ind-body,
  .as-case .as-case-body, .as-post .as-post-body { padding: 1.35rem; }
  .as-cta { border-radius: 1rem; }
  .as-hero .lead { margin-bottom: 1.5rem !important; }
}

/* Phones (<=575px) */
@media (max-width: 575.98px) {
  .as-hero .btn { width: 100%; }               /* full-width tap targets */
  .as-cta .btn { width: 100%; }
  .as-industry .as-ind-media,
  .as-case .as-case-media,
  .as-post .as-post-media { aspect-ratio: 16 / 10; }
  .as-stats { padding: 1.25rem 1rem !important; }
  .as-why-item { gap: 0.75rem; }
  .as-cta { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* Very small phones (<=360px) */
@media (max-width: 360px) {
  .as-eyebrow { white-space: normal; text-align: center; }
  .as-float-card { display: none; }            /* keep tiny hero uncluttered */
}

/* ==========================================================================
   3b. BUSINESS CHALLENGES — divided two-column list (redesigned 2026-08-18)
   Replaces the card grid used by <x-frontend.home.challenges />. Prefixed
   .as-chal. It replaces the previous .as-challenge card grid everywhere the
   design appears: homepage, Business Solution, Industry and Case Study pages.
   Palette follows the redesigned hero: blue #3b6fd4 + orange #f4692a.
   ========================================================================== */
.as-chal:not([class*="bg-"]) {
  background: #f1f4f9;
}

/* Heading block — left aligned, tighter measure than .as-section-intro */
.as-chal .as-kicker {
  color: #3b6fd4;
  letter-spacing: 0.16em;
}
.as-chal h2 {
  color: #0f1b33 !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 32ch;              /* wraps to two lines like the reference */
}
.as-chal .as-chal-intro {
  color: var(--as-body);
  font-size: clamp(15px, 0.35vw + 13.5px, 17px);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 0;
}

/* Two-column divided list */
.as-chal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  margin-top: 3rem;
}
.as-chal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0 24px;
  border-bottom: 1px solid #dde4ee;
}
.as-chal-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: #f4692a;
  background: #fde3d8;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.as-chal-item:hover .as-chal-ic {
  background: #f4692a;
  color: #fff;
  transform: scale(1.06);
}
.as-chal-item h3 {
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  font-weight: 700;
  color: #0f1b33;
  margin-bottom: 6px;
}
/* A point with no supporting sentence (client copy sometimes gives the phrase
   alone) is the only child — drop the gap meant to separate it from the text. */
.as-chal-body h3:last-child { margin-bottom: 0; }
.as-chal-item p {
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  line-height: 1.6;
  color: var(--as-body);
  margin-bottom: 0;
}

/* Closing note panel — used by the Business Solution / Industry / Case Study
   pages to conclude the list. Spans the full width under both columns. */
.as-chal-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dde4ee;
  border-radius: var(--as-radius);
}
.as-chal-note p {
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  line-height: 1.65;
  color: var(--as-body);
}

/* Tablet: keep two columns but close the gutter */
@media (max-width: 991.98px) {
  .as-chal-grid { column-gap: 2.25rem; }
}

/* Phones: single column */
@media (max-width: 767.98px) {
  .as-chal-grid { grid-template-columns: 1fr; column-gap: 0; margin-top: 2rem; }
  .as-chal-item { padding: 18px 0 20px; }
  .as-chal h2 { max-width: none; }
  .as-chal-note { margin-top: 1.75rem; padding: 1.25rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .as-chal-ic { transition: none; }
  .as-chal-item:hover .as-chal-ic { transform: none; }
}

/* ==========================================================================
   4b. BUSINESS SOLUTIONS — seven-card grid (redesigned 2026-08-19)

   Replaces the three .as-core pillars + .as-solink row used by
   <x-frontend.home.solutions />. Prefixed .as-sol so it cannot collide with
   the older .as-core / .as-solink rules still used elsewhere.

   Palette follows the redesigned hero and challenges band:
   blue #3b6fd4 + orange #f4692a over near-navy ink #0f1b33.

   SIZING: fixed px, not rem — the theme sets :root{font-size:20px}, so rem
   values render ~25% larger than intended (same rationale as the hero block).
   The type scale is taken straight off the client reference, so it is held
   at those exact sizes on desktop and only stepped down below 576px.
   ========================================================================== */
.as-sol {
  --sol-ink: #0f1b33;
  --sol-body: #5b6579;
  --sol-blue: #3b6fd4;
  --sol-orange: #f4692a;
  --sol-line: #e6eaf1;

  background: #fff;
}

/* Heading block — left aligned, matching .as-chal above */
.as-sol .as-kicker {
  color: var(--sol-blue);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.as-sol h2 {
  color: var(--sol-ink) !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  /* max-width: 24ch; */
}
.as-sol .as-sol-intro {
  color: var(--sol-body);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 56ch;
  margin-bottom: 0;
}

/* Card grid — auto-fit keeps 3 / 2 / 1 columns without media queries, and
   every card stretches to the tallest in its row. */
.as-sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px 16px;
  margin-top: 2.5rem;
}

.as-sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;                  /* long words wrap instead of widening the grid */
  padding: 24px 22px 22px;
  border: 1px solid var(--sol-line);
  border-radius: 10px;
  background: #f8f9fb;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.as-sol-card:hover,
.as-sol-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(59, 111, 212, 0.45);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 27, 51, 0.08);
}
.as-sol-card:focus-visible {
  outline: 2px solid var(--sol-blue);
  outline-offset: 3px;
}

/* Core pillars read one step louder than the supporting solutions */
.as-sol-card.is-core {
  border-color: rgba(59, 111, 212, 0.28);
  background: #fff;
}
.as-sol-flag {
  display: block;
  margin-bottom: 12px;
  color: var(--sol-orange);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.as-sol-ic {
  display: block;
  margin-bottom: 14px;
  line-height: 1;
  color: var(--sol-blue);
}
.as-sol-ic .uil {
  font-size: 21px;
  transition: transform 0.2s ease;
}
.as-sol-card:hover .as-sol-ic .uil { transform: translateY(-2px); }

.as-sol-card h3 {
  margin: 0 0 9px;
  color: var(--sol-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.as-sol-card:hover h3 { color: var(--sol-blue); }

.as-sol-card p {
  margin: 0 0 18px;
  color: var(--sol-body);
  font-size: 13px;
  line-height: 1.6;
}

/* Pinned to the bottom so the CTAs line up across a row of uneven cards */
.as-sol-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sol-blue);
  font-size: 12.5px;
  font-weight: 700;
}
.as-sol-more .uil { font-size: 14px; transition: transform 0.2s ease; }
.as-sol-card:hover .as-sol-more .uil { transform: translateX(4px); }

/* Closing tile — dashed outline + faint grid so it reads as "and more",
   not as an eighth solution. */
.as-sol-portfolio {
  border-style: dashed;
  border-color: rgba(59, 111, 212, 0.4);
  background:
    linear-gradient(0deg, rgba(59, 111, 212, 0.05) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(59, 111, 212, 0.05) 1px, transparent 1px) 0 0 / 34px 100%,
    #fbfcfe;
  justify-content: center;
}
.as-sol-portfolio:hover,
.as-sol-portfolio:focus-visible {
  border-style: dashed;
  border-color: var(--sol-blue);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .as-sol h2 { max-width: none; }
  .as-sol-grid { margin-top: 2.25rem; }
}

@media (max-width: 575.98px) {
  /* Below the auto-fit floor the grid is already one column; step the type
     and padding down so the cards don't feel cavernous on a phone. */
  .as-sol h2 { font-size: 24px; }
  .as-sol .as-sol-intro { font-size: 14.5px; }
  .as-sol-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 2rem; }
  .as-sol-card { padding: 20px 18px 18px; }
  .as-sol-card p { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-sol-card,
  .as-sol-ic .uil,
  .as-sol-more .uil { transition: none; }
  .as-sol-card:hover,
  .as-sol-card:focus-visible { transform: none; }
  .as-sol-card:hover .as-sol-ic .uil,
  .as-sol-card:hover .as-sol-more .uil { transform: none; }
}

/* ==========================================================================
   6b. WHY AUGMENTED SYSTEMS — divided two-column list (redesigned 2026-08-19)

   Replaces the rounded ".as-whyp" panel used by <x-frontend.home.why />.
   Prefixed .as-whyd; the .as-whyp rules above stay for the pages that still
   render the panel markup.

   Palette and rhythm follow the challenges band: blue #3b6fd4 over
   near-navy ink #0f1b33, hairline #dde4ee dividers.

   SIZING: fixed px, not rem — the theme sets :root{font-size:20px}, so rem
   values render ~25% larger than intended. Type is held at the reference
   sizes on desktop and stepped down below 576px.
   ========================================================================== */
.as-whyd {
  --whyd-ink: #0f1b33;
  --whyd-body: #5b6579;
  --whyd-blue: #3b6fd4;
  --whyd-line: #dde4ee;
}


/* Heading block — copy left, "full story" link pinned to the right and
   sitting on the H2's baseline. */
.as-whyd-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.as-whyd-head-copy { min-width: 0; }

.as-whyd .as-kicker {
  color: var(--whyd-blue);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.as-whyd h2 {
  color: var(--whyd-ink) !important;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 24ch;
}
.as-whyd .as-whyd-intro {
  color: var(--whyd-body);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 0;
}

.as-whyd-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--whyd-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.as-whyd-link .uil { font-size: 15px; transition: transform 0.2s ease; }
.as-whyd-link:hover { color: var(--whyd-blue); }
.as-whyd-link:hover .uil { transform: translateX(4px); }

/* Two-column divided list */
.as-whyd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  margin-top: 3rem;
}
.as-whyd-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--whyd-line);
}
.as-whyd-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eaf0fb;
  color: var(--whyd-blue);
  /* Numbered badge (replaced the icon 2026-08-24): the number comes from the
     item index in the Blade loop, so no icon or index lives in the data. */
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease, background 0.2s ease;
}
.as-whyd-item:hover .as-whyd-ic {
  transform: translateY(-2px);
  background: #dde8fa;
}

.as-whyd-body { min-width: 0; }
.as-whyd-item h3 {
  margin: 0 0 7px;
  color: var(--whyd-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.as-whyd-item p {
  margin: 0;
  color: var(--whyd-body);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .as-whyd h2 { max-width: none; }
  .as-whyd-grid { column-gap: 2.25rem; margin-top: 2.5rem; }
}

@media (max-width: 767.98px) {
  /* Link drops under the heading rather than squeezing the H2 */
  .as-whyd-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .as-whyd-grid { grid-template-columns: 1fr; column-gap: 0; margin-top: 2rem; }
}

@media (max-width: 575.98px) {
  .as-whyd h2 { font-size: 26px; }
  .as-whyd-item { gap: 14px; padding: 18px 0 20px; }
  .as-whyd-ic { width: 42px; height: 42px; font-size: 14.5px; }
  .as-whyd-item h3 { font-size: 16px; }
  .as-whyd-item p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-whyd-ic,
  .as-whyd-link .uil { transition: none; }
  .as-whyd-item:hover .as-whyd-ic,
  .as-whyd-link:hover .uil { transform: none; }
}

/* ==========================================================================
   12b. PRIMARY CTA PANEL + COMPACT CTA STRIP (redesigned 2026-08-19)

   .as-cta2  — the full-width blue panel used by <x-frontend.home.cta />.
   .as-ctas  — the low pale-blue strip, <x-frontend.ui.cta-strip />, meant to
               sit between sections without competing with the panel above.

   The older ".as-cta" grape gradient is left in place; other pages still use it.

   SIZING: fixed px, not rem — the theme sets :root{font-size:20px}, so rem
   values render ~25% larger than intended. Type is held at the reference
   sizes on desktop and stepped down on small screens.
   ========================================================================== */
.as-cta2-wrap { background: #fff; }

.as-cta2 {
  --cta-blue: #23409e;
  --cta-indigo: #4b4a95;

  position: relative;
  isolation: isolate;
  overflow: hidden;                       /* the decorative arc can't widen the page */
  border-radius: 18px;
  padding: clamp(34px, 4.5vw, 62px);
  /* Flat blue on the left, warming to indigo across the right half */
  background:
    radial-gradient(90% 130% at 82% 30%, rgba(126, 106, 190, 0.55) 0%, rgba(126, 106, 190, 0) 62%),
    linear-gradient(105deg, var(--cta-blue) 0%, var(--cta-blue) 46%, var(--cta-indigo) 100%);
}

/* Faint concentric arcs on the right half — the only ornament in the panel.
   Pure CSS so there is no image request and nothing to go missing. */
.as-cta2-deco {
  position: absolute;
  top: 50%; right: -8%;
  width: 46%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.05) 0 1px,
      rgba(255, 255, 255, 0) 1px 42px);
  pointer-events: none;
  z-index: -1;
}

.as-cta2-body {
  position: relative;
  z-index: 1;
  max-width: 620px;                       /* copy stops before the ornament */
}

.as-cta2-title {
  margin: 0 0 14px;
  color: #fff !important;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 20ch;                        /* wraps to two lines like the reference */
}
.as-cta2-text {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
}

.as-cta2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.as-cta2-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: var(--cta-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.as-cta2-btn:hover,
.as-cta2-btn:focus-visible {
  color: var(--cta-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(8, 18, 60, 0.28);
}
.as-cta2-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.as-cta2-btn .uil { font-size: 15px; transition: transform 0.2s ease; }
.as-cta2-btn:hover .uil { transform: translateX(4px); }

.as-cta2-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.as-cta2-btn-ghost:hover,
.as-cta2-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.as-cta2-note {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
}

/* --- Compact strip -------------------------------------------------------- */
.as-ctas-wrap { background: #fff; }

.as-ctas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border: 1px solid #cfdcf7;
  border-radius: 14px;
  background: #e8edfb;
}
.as-ctas-copy { min-width: 0; }

.as-ctas-title {
  margin: 0 0 6px;
  color: #0f1b33;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.as-ctas-text {
  margin: 0;
  color: #5b6579;
  font-size: 15px;
  line-height: 1.55;
  max-width: 72ch;
}

.as-ctas-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  background: linear-gradient(100deg, #1e3a9e 0%, #3b82f6 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(30, 58, 158, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.as-ctas-btn:hover,
.as-ctas-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(30, 58, 158, 0.34);
}
.as-ctas-btn:focus-visible { outline: 2px solid #1e3a9e; outline-offset: 3px; }
.as-ctas-btn .uil { font-size: 16px; transition: transform 0.2s ease; }
.as-ctas-btn:hover .uil { transform: translateX(4px); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .as-cta2-title { max-width: none; }
  .as-cta2-body { max-width: none; }
  /* The ornament sits behind the copy at this width, so fade it right back */
  .as-cta2-deco { opacity: 0.5; right: -22%; width: 62%; }
}

@media (max-width: 767.98px) {
  /* Button drops under the copy and goes full width — it is the only action,
     so it should be the easiest thing to hit. */
  .as-ctas { flex-direction: column; align-items: stretch; gap: 18px; padding: 24px; }
  .as-ctas-btn { justify-content: center; }
}

@media (max-width: 575.98px) {
  .as-cta2 { border-radius: 14px; }
  .as-cta2-title { font-size: 25px; }
  .as-cta2-text { font-size: 15px; margin-bottom: 22px; }
  .as-cta2-actions { flex-direction: column; align-items: stretch; }
  .as-cta2-btn { justify-content: center; }
  .as-cta2-deco { display: none; }

  .as-ctas { padding: 22px 20px; border-radius: 12px; }
  .as-ctas-title { font-size: 18px; }
  .as-ctas-text { font-size: 14.5px; }
  .as-ctas-btn { padding: 14px 22px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-cta2-btn, .as-cta2-btn .uil,
  .as-ctas-btn, .as-ctas-btn .uil { transition: none; }
  .as-cta2-btn:hover, .as-cta2-btn:focus-visible,
  .as-ctas-btn:hover, .as-ctas-btn:focus-visible { transform: none; }
  .as-cta2-btn:hover .uil, .as-ctas-btn:hover .uil { transform: none; }
}

/* ==========================================================================
   SECTION 7 — OUR APPROACH, "DELIVERY JOURNEY"  (.as-journey*)
   Added 2026-08-19. Replaces the plain hairline-row treatment on this
   section, which read as too generic next to the rest of the page.

   The idea: the four stages are a SEQUENCE, so the section draws the
   sequence instead of listing it. A gradient rail runs left-to-right
   (blue -> orange, start -> ongoing support) with a numbered node per stage
   sitting on it, and the stage cards alternate ABOVE and BELOW the rail so
   the eye zig-zags along the track. Each card drops a short stem onto its
   node, so the connection is explicit rather than implied by proximity.

   Deliberately unlike every other pattern on the site: .as-chal / .as-appr
   are hairline rows, .as-wu2-step and .as-core are card grids, .as-culture
   is a bento, .as-iacc is a hover accordion. Nothing else here is a track.

   Lives in home-revamp.css (not business-solution.css) because all three
   consumers of <x-frontend.home.approach /> — home, about, industry-detail —
   already link this file, so the section needs no extra stylesheet.

   Responsive: the zig-zag only makes sense with room for four columns, so
   below 992px it becomes a conventional VERTICAL timeline — rail down the
   left, node then card in a row. No horizontal scrolling at any width.

   SIZING: px, not rem — the theme sets :root{font-size:20px}.
   ========================================================================== */

.as-journey {
  --jn-ink: #0f1b33;
  --jn-body: #5b6579;
  --jn-blue: #3b6fd4;
  --jn-orange: #f4692a;
  --jn-line: #dde4ee;
  /* Same band colour the old .as-chal used, so the page's alternating
     light/tinted rhythm is unchanged. */
  --jn-band: #f1f4f9;
  background: var(--jn-band);
}

.as-journey-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 26px;
  margin-top: 60px;
  list-style: none;
  padding: 0;
}

/* The rail. Decorative — the <ol> already conveys the order. */
.as-journey-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg,
      rgba(59, 111, 212, 0.25) 0%,
      var(--jn-blue) 18%,
      var(--jn-blue) 55%,
      var(--jn-orange) 92%,
      rgba(244, 105, 42, 0.25) 100%);
  pointer-events: none;
}

/* Three rows: card-above | node | card-below. The middle row is auto, the
   outer two are equal, so the node row lands exactly on the rail. */
.as-journey-item {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-width: 0;
}

.as-journey-card {
  position: relative;
  grid-row: 1;
  align-self: end;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid var(--jn-line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(15, 27, 51, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Even stages hang below the rail — this is what creates the zig-zag. */
.as-journey-item:nth-child(even) .as-journey-card {
  grid-row: 3;
  align-self: start;
  margin: 26px 0 0;
}
.as-journey-card:hover,
.as-journey-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(59, 111, 212, 0.45);
  box-shadow: 0 20px 44px rgba(15, 27, 51, 0.12);
}

/* Stem joining each card to its node. */
.as-journey-card::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 26px;
  bottom: -26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(59, 111, 212, 0.45), rgba(59, 111, 212, 0.12));
}
.as-journey-item:nth-child(even) .as-journey-card::after {
  bottom: auto;
  top: -26px;
  background: linear-gradient(0deg, rgba(59, 111, 212, 0.45), rgba(59, 111, 212, 0.12));
}

.as-journey-node {
  grid-row: 2;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--jn-blue);
  color: var(--jn-blue);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Punches a clean gap in the rail behind the node. */
  box-shadow: 0 0 0 7px var(--jn-band);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
/* The last stage is ongoing support — the rail ends orange, so does its node. */
.as-journey-item:last-child .as-journey-node {
  border-color: var(--jn-orange);
  color: var(--jn-orange);
}
.as-journey-item:hover .as-journey-node {
  background: var(--jn-blue);
  color: #fff;
  transform: scale(1.06);
}
.as-journey-item:last-child:hover .as-journey-node { background: var(--jn-orange); }

.as-journey-ic {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(59, 111, 212, 0.1);
  border: 1px solid rgba(59, 111, 212, 0.22);
  color: var(--jn-blue);
  font-size: 21px;
  line-height: 1;
}
.as-journey-item:last-child .as-journey-ic {
  background: rgba(244, 105, 42, 0.1);
  border-color: rgba(244, 105, 42, 0.24);
  color: var(--jn-orange);
}

.as-journey .as-journey-card h3 {
  margin: 0;
  color: var(--jn-ink) !important;
  font-size: 17.5px !important;
  font-weight: 700;
  line-height: 1.32 !important;
}
.as-journey .as-journey-card p {
  margin: 9px 0 0;
  color: var(--jn-body);
  font-size: 14.5px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .as-journey-track { column-gap: 18px; }
  .as-journey-card { padding: 20px; }
  .as-journey-node { width: 48px; height: 48px; font-size: 14px; }
}

/* Below 992px the zig-zag has no room, so the track becomes a conventional
   vertical timeline: rail down the left, node beside each card. */
@media (max-width: 991.98px) {
  .as-journey-track {
    grid-template-columns: 1fr;
    column-gap: 0;
    margin-top: 38px;
  }
  .as-journey-track::before {
    left: 26px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 2px;
    height: auto;
    transform: none;
    background: linear-gradient(180deg, var(--jn-blue) 0%, var(--jn-blue) 55%, var(--jn-orange) 100%);
  }
  .as-journey-item {
    grid-template-rows: auto;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    padding-bottom: 22px;
  }
  .as-journey-item:last-child { padding-bottom: 0; }
  .as-journey-node,
  .as-journey-item:last-child .as-journey-node { grid-row: 1; grid-column: 1; justify-self: start; }
  .as-journey-card,
  .as-journey-item:nth-child(even) .as-journey-card {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    margin: 0;
  }
  /* Stems are the zig-zag's device; the vertical rail does the joining here. */
  .as-journey-card::after,
  .as-journey-item:nth-child(even) .as-journey-card::after { display: none; }
}

@media (max-width: 575.98px) {
  .as-journey-track::before { left: 21px; }
  .as-journey-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .as-journey-node,
  .as-journey-item:last-child .as-journey-node { width: 44px; height: 44px; font-size: 13px; box-shadow: 0 0 0 5px var(--jn-band); }
  .as-journey-card { padding: 18px; border-radius: 14px; }
  .as-journey-ic { width: 38px; height: 38px; font-size: 18px; margin-bottom: 12px; }
  .as-journey .as-journey-card h3 { font-size: 16.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .as-journey-card,
  .as-journey-node { transition: none !important; }
  .as-journey-card:hover,
  .as-journey-card:focus-within { transform: none !important; }
  .as-journey-item:hover .as-journey-node { transform: none !important; }
}