/* ==========================================================================
   Augmented Systems — Business Solution internal page (scoped)
   Custom Business Application Development.

   This file EXTENDS the homepage revamp. It reuses every brand token defined
   in home-revamp.css (:root --as-*) and the shared .as-* component styles.
   It only adds CONTROLLED MODIFIERS for the internal-page variations:
   hero, breadcrumb, overview panel, "What's Included" bento, benefits,
   expected-outcomes rail, six-stage process and the related-solution grid.

   Load order on the page: home-revamp.css  ->  business-solution.css
   so the tokens (--as-chal, --as-ink, --as-radius, shadows) are available.
   Nothing here overrides global theme files — all rules are prefixed .as-*.
   ========================================================================== */

/* --- Local token fallbacks -------------------------------------------------
   If this file is ever loaded without home-revamp.css, keep the brand tokens
   resolvable so the page never renders unstyled. Values mirror the homepage. */
:root {
  --as-chal: #3b6fd4;
  --as-chal-dark: #3059ab;
  --as-ink: #343f52;
  --as-body: #60697b;
  --as-soft: #f2f3fb;
  --as-line: #e6e5f4;
  --as-radius: 0.8rem;
  --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);
}

/* ==========================================================================
   SEC-02 — BREADCRUMBS (compact, sits inside the hero content column)
   ========================================================================== */
.as-crumb {
  --bs-breadcrumb-divider-color: var(--as-body);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  margin-bottom: 1.1rem;
}
.as-crumb .breadcrumb {
  margin-bottom: 0;
  flex-wrap: wrap;               /* wrap cleanly on small screens, no overflow */
  font-size: clamp(12px, 0.25vw + 11px, 13.5px);
  font-weight: 600;
}
.as-crumb .breadcrumb-item a {
  color: var(--as-body);
  text-decoration: none;
  transition: color 0.2s ease;
}
.as-crumb .breadcrumb-item a:hover,
.as-crumb .breadcrumb-item a:focus-visible { color: var(--sd-blue); }
.as-crumb .breadcrumb-item.active { color: var(--as-ink); }
.as-crumb .breadcrumb-item + .breadcrumb-item::before {
  /* \e931 = uil-angle-right (single "›").
     NOT \e92b — that is uil-angle-double-right ("»"), which is what this rule
     used to set despite the comment claiming otherwise, so every breadcrumb
     rendered a double chevron. style.css uses \e931 for the same divider. */
  content: "\e931";
  font-family: "Unicons";
  color: var(--as-body);
  padding-right: 0.5rem;
}

/* ==========================================================================
   SEC-01 — INTERNAL HERO
   Reuses .as-hero / .as-hero-figure / .as-float-card / .as-dotgrid from the
   homepage. These modifiers only tune the internal-page composition.
   ========================================================================== */
.as-hero-headline {
  color: var(--as-chal);
  font-weight: 700;
  font-size: clamp(16px, 0.7vw + 13px, 20px);
  margin-bottom: 0.9rem;
}
.as-hero-points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.as-hero-points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  color: var(--as-ink);
  font-weight: 600;
}
.as-hero-points li::before {
  content: "\e9dd";              /* unicons uil-check */
  font-family: "Unicons";
  position: absolute; left: 0; top: -1px;
  color: var(--as-chal);
  font-size: 1.05rem;
}

/* ==========================================================================
   SEC-04 — SOLUTION OVERVIEW (text-led, two-column + summary panel)
   ========================================================================== */
.as-overview-panel {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  padding: 1.75rem;
  height: 100%;
}
.as-overview-highlight {
  background: linear-gradient(120deg, var(--as-chal-dark), var(--as-chal));
  color: #fff;
  border-radius: var(--as-radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.as-overview-highlight .as-highlight-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 0.35rem;
}
.as-overview-highlight p {
  margin: 0; font-weight: 700; line-height: 1.35;
  font-size: clamp(16px, 0.6vw + 13px, 19px);
}
/* Reuse the homepage check-list look for the capability checklist */
.as-check-list { list-style: none; padding: 0; margin: 0; }
.as-check-list li {
  position: relative; padding-left: 1.75rem; margin-bottom: 0.65rem;
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body);
}
.as-check-list li:last-child { margin-bottom: 0; }
.as-check-list li::before {
  content: "\e9dd";              /* unicons uil-check */
  font-family: "Unicons"; position: absolute; left: 0; top: -1px;
  color: var(--as-chal); font-size: 1rem;
}

/* ==========================================================================
   SEC-05 — WHAT'S INCLUDED (bento: 1 feature + supporting cards)
   Reuses card tokens; avoids five identical oversized cards.
   ========================================================================== */
.as-included {
  position: relative; height: 100%;
  background: #fff; border: 1px solid #eef0f6;
  border-radius: var(--as-radius); padding: 1.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex; flex-direction: column;
}
.as-included:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-hover);
  border-color: var(--as-line);
}
.as-included .as-inc-icon {
  width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem;
  border-radius: 0.7rem; display: grid; place-items: center;
  font-size: 1.3rem; color: #fff; background: var(--as-chal);
  margin-bottom: 1rem;
}
.as-included .as-inc-num {
  position: absolute; top: 1.25rem; right: 1.4rem;
  font-family: var(--font-display, "Poppins", sans-serif); font-weight: 700;
  font-size: 1.4rem; line-height: 1; letter-spacing: -.03em; color: var(--as-line);
}
.as-included h3 { font-size: clamp(16px, 0.35vw + 14px, 19px); color: var(--as-ink); margin-bottom: 0.5rem; }
.as-included p  { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); margin-bottom: 0; }

/* Featured card — grape gradient, taller, larger heading */
.as-included--feature {
  background: linear-gradient(140deg, var(--as-chal-dark) 0%, var(--as-chal) 60%, #747ed1 100%);
  border: none; color: #fff; overflow: hidden;
}
.as-included--feature::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
  background-size: 18px 18px; opacity: 0.5; pointer-events: none;
}
.as-included--feature > * { position: relative; z-index: 1; }
.as-included--feature .as-inc-icon { background: rgba(255,255,255,0.18); }
.as-included--feature .as-inc-num  { color: rgba(255,255,255,0.35); }
.as-included--feature h3 { color: #fff; font-size: clamp(19px, 0.6vw + 16px, 24px); }
.as-included--feature p  { color: rgba(255,255,255,0.92); }
.as-included--feature .as-inc-tag {
  width: fit-content;
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; background: rgba(255,255,255,0.18);
  border-radius: 50rem; padding: 0.3rem 0.75rem; margin-bottom: 1rem;
}

/* ==========================================================================
   SEC-06 — BUSINESS BENEFITS (numbered list; no card background/border/shadow —
   hairline-divided rows with a hover accent rule, distinct from every card
   section on this page)
   ========================================================================== */
.as-benefit-list { border-top: 1px solid var(--as-line); }
.as-benefit-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  align-items: center;
  gap: 0.35rem 2.5rem;
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid var(--as-line);
  background: transparent;
  transition: background 0.3s ease;
}
.as-benefit-row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--as-chal);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s ease;
}
.as-benefit-row:hover { background: var(--as-soft); }
.as-benefit-row:hover::before { transform: scaleY(1); }

.as-benefit-row-head { display: flex; align-items: center; gap: 1rem; }
.as-benefit-num {
  flex: 0 0 auto;
  font-family: var(--font-display, "Poppins", sans-serif); font-weight: 700;
  font-size: clamp(1.5rem, 1vw + 1.15rem, 2rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--as-line);
  transition: color 0.3s ease;
}
.as-benefit-row:hover .as-benefit-num { color: var(--as-chal); }
.as-benefit-ic {
  flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; color: var(--as-chal); background: var(--as-soft);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.as-benefit-row:hover .as-benefit-ic { background: var(--as-chal); color: #fff; transform: scale(1.08); }
.as-benefit-title { font-size: clamp(16px, 0.35vw + 14px, 19px); color: var(--as-ink); margin: 0; }
.as-benefit-text  { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); margin: 0; }

@media (max-width: 767.98px) {
  .as-benefit-row { grid-template-columns: 1fr; gap: 0.65rem; padding: 1.35rem 1.1rem; }
}

/* ==========================================================================
   SEC-07 — EXPECTED OUTCOMES (vertical numbered rail with connector line)
   Visually distinct from the benefit card grid.
   ========================================================================== */
.as-outcome-rail { position: relative; }
.as-outcome {
  position: relative; display: flex; gap: 1.25rem;
  padding-bottom: 2rem;
}
.as-outcome:last-child { padding-bottom: 0; }
.as-outcome-badge {
  flex: 0 0 3rem; width: 3rem; height: 3rem; z-index: 1;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display, "Poppins", sans-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em;
  color: #fff; background: var(--as-chal);
  box-shadow: 0 0 0 6px var(--as-soft);
}
/* Connector line linking the badges down the rail */
.as-outcome:not(:last-child)::before {
  content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: var(--as-line);
}
.as-outcome-body { padding-top: 0.15rem; }
.as-outcome-body h3 { font-size: clamp(16px, 0.35vw + 14px, 19px); color: var(--as-ink); margin-bottom: 0.35rem; }
.as-outcome-body p  { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); margin-bottom: 0; }
/* Supporting statement panel beside the rail */
.as-outcome-lead {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--as-radius); box-shadow: var(--as-shadow);
  padding: 1.75rem; height: 100%;
}
.as-outcome-lead .as-outcome-lead-icon {
  width: 3rem; height: 3rem; border-radius: 0.7rem; display: grid; place-items: center;
  font-size: 1.4rem; color: var(--as-chal); background: var(--as-soft); margin-bottom: 1rem;
}

/* ==========================================================================
   SEC-08 — SIX-STAGE DELIVERY PROCESS
   Reuses the homepage .as-step card + .as-step-num typography. Adds a SIX-step
   grid + connectors WITHOUT touching the homepage four-step .as-step-col rules.
   ========================================================================== */
.as-process-six .as-step6-col { position: relative; }

/* Desktop (>=992px): 3 per row, right-arrow connectors between cards in a row.
   Suppress the arrow after every 3rd card (row ends: cards 3 and 6). */
@media (min-width: 992px) {
  .as-process-six .as-step6-col:not(:nth-child(3n)) .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-chal); font-size: 1.4rem; z-index: 2;
  }
}

/* Mobile (<768px): vertical timeline — downward connector between stacked
   cards, hidden after the last. No horizontal scrolling. */
@media (max-width: 767.98px) {
  .as-process-six .as-step6-col:not(:last-child) .as-step::after {
    content: "\e9df";            /* unicons uil-arrow-down */
    font-family: "Unicons";
    position: absolute; left: 50%; bottom: -1.6rem;
    transform: translateX(-50%);
    color: var(--as-chal); font-size: 1.4rem; z-index: 2;
  }
  .as-process-six .row { row-gap: 2.75rem !important; }
}

/* ==========================================================================
   SEC-14 — RELATED SOLUTIONS (compact reuse of the homepage solution pillar)
   Reuses .as-core; the compact modifier drops the bullet list and tightens
   spacing so six cards read as complementary links, not full pillars.
   ========================================================================== */
.as-core.as-core--compact { padding: 1.5rem; }
.as-core.as-core--compact .as-core-icon {
  width: 2.6rem; height: 2.6rem; font-size: 1.15rem; margin-bottom: 0.9rem;
}
.as-core.as-core--compact .as-core-list:empty { display: none; }

/* ==========================================================================
   SEC-15 — FAQ (custom accordion; sticky heading + help panel beside cards)
   Powered by Bootstrap collapse; these rules only restyle it on-theme.
   ========================================================================== */
@media (min-width: 992px) {
  .as-faq-aside { position: sticky; top: 6rem; }
}
/* Help panel in the sticky column */
.as-faq-help {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--as-radius); box-shadow: var(--as-shadow);
  padding: 1.5rem;
}
.as-faq-help-ic {
  width: 3rem; height: 3rem; border-radius: 0.7rem;
  display: grid; place-items: center; margin-bottom: 1rem;
  font-size: 1.4rem; color: #3f78e0; background: var(--as-soft);
}
.as-faq-help-title { font-size: clamp(16px, 0.35vw + 14px, 18px); color: var(--as-ink); margin-bottom: 0.4rem; }
.as-faq-help-text  { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); margin-bottom: 0.75rem; }

/* Accordion cards */
.as-faq-item {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--as-radius); margin-bottom: 0.85rem; overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.as-faq-item:last-child { margin-bottom: 0; }
/* Highlight the open card (progressive enhancement via :has) */
.as-faq-item:has(.collapse.show) { border-color: var(--sd-blue); box-shadow: var(--as-shadow); }
.as-faq-h { margin: 0; }
.as-faq-q {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  justify-content: space-between; text-align: left;
  background: transparent; border: 0; padding: 1.15rem 1.3rem;
  font-family: inherit; font-weight: 700; color: var(--as-ink);
  font-size: clamp(15px, 0.3vw + 13.5px, 17px); line-height: 1.4;
  cursor: pointer; transition: color 0.2s ease;
}
.as-faq-q:hover,
.as-faq-q[aria-expanded="true"] { color: #3f78e0; }
.as-faq-q:focus-visible { outline: 2px solid var(--as-chal); outline-offset: -3px; border-radius: var(--as-radius); }
.as-faq-ic {
  flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  color: var(--as-chal); background: var(--as-soft);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.as-faq-q[aria-expanded="true"] .as-faq-ic {
  background: #3f78e0; color: #fff; transform: rotate(135deg);   /* + -> × */
}
.as-faq-a {
  padding: 0 1.3rem 1.3rem;
  color: var(--as-body); line-height: 1.6;
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
}
.as-faq-a p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .as-faq-item, .as-faq-q, .as-faq-ic { transition: none !important; }
}

/* FAQ — BLUE RE-THEME  (added 2026-08-20)
   Opt in per page with
     <x-frontend.business-solutions.faq sectionClass="as-faq--blue" />
   The accordion DESIGN is untouched: not one rule above is edited. This only
   redefines the tokens those rules already read from, scoped to the section,
   so the shared grape treatment (purple card hairlines, purple icon wells)
   becomes the page's blue. Same technique as .as-faq--center in careers.css.
   Every page that does not opt in keeps the grape FAQ exactly as it was. */
.as-faq--blue {
  --as-grape: #3b6fd4;
  --as-grape-dark: #2f4fb8;
  --as-line: #dde4ee;                     /* was #e6e5f4 pale grape  */
  --as-soft: rgba(59, 111, 212, 0.1);     /* was #f2f3fb soft purple */
  --sd-blue: #3b6fd4;                     /* open-card border colour  */
}
.as-faq--blue .as-faq-help a { color: #3b6fd4; }
.as-faq--blue .as-faq-help a:hover,
.as-faq--blue .as-faq-help a:focus-visible { color: #2f4fb8; }

/* ==========================================================================
   RESPONSIVE POLISH — no horizontal overflow at any width (320 -> 1440)
   Text sizing is fluid (clamp) above; these rules only adjust LAYOUT.
   ========================================================================== */
.as-hero, .as-included, .as-overview-panel { max-width: 100%; }

@media (max-width: 991.98px) {
  .as-hero .as-hero-figure { max-width: 640px; margin-inline: auto; }
  .as-hero-points { max-width: 480px; margin-inline: auto; }
  .as-hero .text-center.text-lg-start .as-hero-points li { text-align: left; }
}

@media (max-width: 767.98px) {
  .as-included, .as-overview-panel, .as-outcome-lead { padding: 1.35rem; }
  .as-outcome { gap: 1rem; padding-bottom: 1.6rem; }
}

@media (max-width: 575.98px) {
  .as-hero .btn { width: 100%; }                 /* full-width tap targets */
  .as-outcome-badge { flex-basis: 2.6rem; width: 2.6rem; height: 2.6rem; }
  .as-outcome:not(:last-child)::before { left: 1.3rem; }
}

/* ==========================================================================
   REDUCED MOTION — honour user preference (mirrors homepage motion policy)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .as-included, .as-core.as-core--compact,
  .as-benefit-row, .as-benefit-row::before, .as-benefit-num, .as-benefit-ic { transition: none !important; }
  .as-included:hover { transform: none !important; }
  .as-benefit-row:hover .as-benefit-ic { transform: none !important; }
}

/* ==========================================================================
   ==========================================================================
   BUSINESS SOLUTION DETAIL PAGE — CLIENT REFERENCE LAYOUT  (added 2026-08-19)

   Rebuilds five sections of the Business Solution Detail Page to the client
   reference at /solutions/custom-business-applications:

     .as-ov2    SEC-03  "The Solution"        copy + CTA beside a glowing image
     .as-inc2   SEC-04  "What's Included"     editorial hairline row list
     .as-vband  SEC-05  benefits + outcomes   one band, two columns
       .as-ben2         business benefits     check icon + title + line
       .as-out2         expected outcomes     big numeral + title + line
     .as-appr   SEC-06  "Our Approach"        three-column hairline row grid
     .as-rel    SEC-12  related solutions     left-aligned head over the cards

   The reference is dark-themed; this is the project's established LIGHT
   adaptation of it — the same palette already used by .as-hero2, .as-chal,
   .as-sol and .as-whyd in home-revamp.css (blue #3b6fd4 + orange #f4692a over
   near-navy ink #0f1b33), so the reused homepage sections drop in unchanged.

   SIZING: fixed px, not rem. The theme sets :root{font-size:20px}, so rem
   paddings/radii render ~25% larger than intended. Type is held at the
   reference sizes on desktop and stepped down at each breakpoint — the layouts
   below re-flow rather than shrink (see the media queries at the end of each
   block). Nothing here overrides a global theme file: every rule is prefixed.
   ========================================================================== */

.as-ov2,
.as-inc2,
.as-vband,
.as-appr,
.as-rel {
  --sd-ink: #0f1b33;
  --sd-body: #5b6579;
  --sd-blue: #3b6fd4;
  --sd-blue-deep: #2f4fb8;
  --sd-orange: #f4692a;
  --sd-line: #dde4ee;
  --sd-soft: #f1f4f9;
}

/* Shared heading block for these sections — left aligned, matching .as-chal
   and .as-whyd so every band on the page shares one heading rhythm. */
.as-ov2 .as-kicker,
.as-inc2 .as-kicker,
.as-vband .as-kicker,
.as-appr .as-kicker,
.as-rel .as-kicker {
  color: var(--sd-blue);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wrapper.as-ov2 h2,
.wrapper.as-inc2 h2,
.wrapper.as-vband h2,
.wrapper.as-appr h2,
.wrapper.as-rel h2 {
  color: var(--sd-ink) !important;
  /* !important is required: home-revamp.css sets
     `main .wrapper h2 { font-size: clamp(23px,2.2vw+11px,34px) !important }`,
     which is (0,1,2) and would otherwise win over these (0,1,1) rules and
     discard every size below. Same reason the fluid-type block uses it. */
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
}
.as-inc2-intro,
.as-appr-intro,
.as-rel-intro {
  color: var(--sd-body);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 0;
}
.as-inc2-head,
.as-appr-head,
.as-rel-head { max-width: 900px; }
.as-inc2-head h2,
.as-appr-head h2,
.as-rel-head h2 { max-width: 26ch; }

/* ==========================================================================
   SEC-03 — THE SOLUTION  (.as-ov2)
   ========================================================================== */
/* Band background is the DEFAULT only: written with :not([class*="bg-"]) so a
   utility passed through the component's `class` prop wins instead of losing
   to this single-class rule on source order. Same pattern as .as-chal /
   .as-whyd / .as-rel. */
.as-ov2 {
  overflow: hidden;              /* the glow can never widen the page */
}
.as-ov2:not([class*="bg-"]) { background: var(--sd-soft); }

/* Fluid type — the shared heading block above is fixed 30px/11px and only
   stepped down below 576px, so it ran large through the tablet range. */
.wrapper.as-ov2 h2 { font-size: clamp(22px, 1.5vw + 16px, 30px) !important; }
.as-ov2 .as-kicker { font-size: clamp(10px, 0.15vw + 9.4px, 11px) !important; }

.as-ov2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.as-ov2-copy h2 { max-width: 22ch; }

.as-ov2-body { margin-top: 24px; }
.as-ov2-body p {
  color: var(--sd-body);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.as-ov2-body p:last-child { margin-bottom: 0; }

/* Gradient pill CTA — the light-theme equivalent of the reference's
   royal->brand gradient button. */
.as-ov2-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sd-blue-deep) 0%, var(--sd-blue) 100%);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(59, 111, 212, 0.28);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.as-ov2-btn:hover,
.as-ov2-btn:focus-visible {
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(59, 111, 212, 0.4);
  transform: translateY(-2px);
}
.as-ov2-btn i { font-size: 16px; transition: transform 0.25s ease; }
.as-ov2-btn:hover i { transform: translateX(3px); }

/* Media column: soft blue glow bleeding out from behind a rounded image. */
.as-ov2-media { position: relative; }
.as-ov2-glow {
  position: absolute;
  inset: -24px;
  border-radius: 32px;
  background: rgba(59, 111, 212, 0.18);
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
}
.as-ov2-fig {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.as-ov2-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .as-ov2-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Copy first on tablet/mobile — the image is supporting, not the message. */
  .as-ov2-copy { order: 1; }
  .as-ov2-media { order: 2; }
  .as-ov2-copy h2 { max-width: none; }
  .as-ov2-glow { inset: -14px; filter: blur(34px); }
}
@media (max-width: 575.98px) {
  .wrapper.as-ov2 h2 { font-size: 24px !important; }
  .as-ov2-body p { font-size: 14.5px; }
  .as-ov2-btn { width: 100%; justify-content: center; padding: 14px 22px; }
  .as-ov2-fig { border-radius: 14px; }
  .as-ov2-fig img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   SEC-04 — WHAT'S INCLUDED  (.as-inc2)
   Editorial list: ghost numeral + icon + title | explanation, hairline rules.
   ========================================================================== */
.as-inc2 { background: var(--sd-soft); }

.as-inc2-list { margin-top: 40px; }
.as-inc2-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--sd-line);
}
.as-inc2-row:first-child { border-top: 1px solid var(--sd-line); }

.as-inc2-lead {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.as-inc2-num {
  flex: 0 0 auto;
  width: 40px;
  color: rgba(59, 111, 212, 0.45);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.as-inc2-ic {
  flex: 0 0 auto;
  color: var(--sd-blue);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.as-inc2-title {
  color: var(--sd-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  min-width: 0;                  /* long titles wrap instead of widening the row */
  transition: color 0.25s ease;
}
.as-inc2-row:hover .as-inc2-title { color: var(--sd-blue); }
.as-inc2-row:hover .as-inc2-ic { transform: scale(1.12); }

.as-inc2-text {
  color: var(--sd-body);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  min-width: 0;
}

@media (max-width: 991.98px) {
  /* Stack the explanation under the title rather than squeezing two columns. */
  .as-inc2-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .as-inc2-text { padding-left: 58px; }
}
@media (max-width: 575.98px) {
  .wrapper.as-inc2 h2 { font-size: 24px !important; }
  .as-inc2-list { margin-top: 28px; }
  .as-inc2-lead { gap: 14px; }
  .as-inc2-num { width: 32px; font-size: 22px; }
  .as-inc2-title { font-size: 16.5px; }
  .as-inc2-text { font-size: 14.5px; padding-left: 0; }
}

/* ==========================================================================
   SEC-05 — VALUE BAND  (.as-vband)  benefits (left) + outcomes (right)
   ========================================================================== */
.as-vband { background: #fff; }

.as-vband-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.as-vband-col { min-width: 0; }

/* Both halves use a slightly smaller H2 than a full-width band. */
.wrapper.as-vband h2 { font-size: 26px !important; max-width: 22ch; }
.as-ben2-intro,
.as-out2-intro {
  color: var(--sd-body);
  font-size: 15px;
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 0;
}

/* --- Business benefits: check icon + title + supporting line -------------- */
.as-ben2-list { margin-top: 32px; }
.as-ben2-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 22px;
}
.as-ben2-item:last-child { padding-bottom: 0; }
.as-ben2-ic {
  flex: 0 0 auto;
  color: var(--sd-blue);
  font-size: 22px;
  line-height: 1.25;
}
.as-ben2-body { min-width: 0; }
.as-ben2-body h3 {
  color: var(--sd-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 5px;
}
.as-ben2-body p {
  color: var(--sd-body);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

/* --- Expected outcomes: large numeral + title + supporting line ----------- */
.as-out2-list { margin-top: 32px; }
.as-out2-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sd-line);
}
.as-out2-item:first-child { border-top: 1px solid var(--sd-line); }
.as-out2-num {
  flex: 0 0 auto;
  width: 42px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Warm gradient numeral — the light-theme reading of the reference's
     "text-gradient-ember". Falls back to solid orange where
     background-clip:text is unsupported. */
  color: var(--sd-orange);
  background: linear-gradient(135deg, #f4692a 0%, #f9a826 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .as-out2-num { background: none; -webkit-text-fill-color: currentColor; }
}
.as-out2-body { min-width: 0; }
.as-out2-body h3 {
  color: var(--sd-ink);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
}
.as-out2-body p {
  color: var(--sd-body);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.as-out2-note {
  color: #7c8496;
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0 0;
}

@media (max-width: 1199.98px) {
  .as-vband-grid { gap: 44px; }
}
@media (max-width: 991.98px) {
  /* Stack: benefits first, then outcomes — the reference's mobile order. */
  .as-vband-grid { grid-template-columns: 1fr; gap: 52px; }
  .wrapper.as-vband h2 { max-width: none; }
}
@media (max-width: 575.98px) {
  .wrapper.as-vband h2 { font-size: 23px !important; }
  .as-ben2-list, .as-out2-list { margin-top: 24px; }
  .as-ben2-body h3, .as-out2-body h3 { font-size: 16px; }
  .as-out2-num { width: 34px; font-size: 23px; }
  .as-out2-item { gap: 14px; padding: 16px 0; }
}

/* ==========================================================================
   SEC-06 — OUR APPROACH  (.as-appr)  three-column hairline row grid
   ========================================================================== */
.as-appr { background: var(--sd-soft); }

.as-appr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  margin-top: 40px;
}
/* Opt-in 4-up variant. The Solutions hub's "Our Approach" has FOUR steps, and
   in a 3-column grid that wraps to an unbalanced 3+1. Added 2026-08-19 for
   <x-frontend.business-solutions.process-six :gridClass="'as-appr-grid--four'" />;
   the default 3-column grid above is untouched, so the Business Solution
   Detail Page (six steps) renders exactly as before. Collapses to the same
   2-then-1 columns as the default at the breakpoints below. */
.as-appr-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
}
.as-appr-item {
  padding: 30px 0;
  border-bottom: 1px solid var(--sd-line);
}
.as-appr-num {
  display: block;
  color: rgba(59, 111, 212, 0.45);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.as-appr-title {
  color: var(--sd-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 14px 0 0;
}
.as-appr-text {
  color: var(--sd-body);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 8px 0 0;
}

@media (max-width: 991.98px) {
  .as-appr-grid,
  .as-appr-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
}
@media (max-width: 575.98px) {
  .wrapper.as-appr h2 { font-size: 24px !important; }
  .as-appr-grid,
  .as-appr-grid--four { grid-template-columns: 1fr; column-gap: 0; margin-top: 28px; }
  .as-appr-item { padding: 22px 0; }
  .as-appr-num { font-size: 28px; }
  .as-appr-title { font-size: 16.5px; margin-top: 10px; }
}

/* ==========================================================================
   SEC-12 — RELATED BUSINESS SOLUTIONS  (.as-rel)
   Only the heading block is styled here; the cards keep the shared
   .as-core / .as-core--compact treatment defined above.
   ========================================================================== */
/* Background is the band default only — a background utility passed through
   the component's `class` prop (e.g. class="bg-light") wins instead of
   losing to this single-class rule. */
.as-rel:not([class*="bg-"]) { background: var(--sd-soft); }
.as-rel-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* --- Fluid type ----------------------------------------------------------
   The shared heading block above is fixed-px (30px h2, 15.5px intro, 11px
   kicker) and only stepped down below 576px, so it read too large through
   the whole tablet range. These clamps scale continuously instead; the card
   type is scaled here too, because .as-core's own sizes are rem-based and
   the theme's html{font-size:20px} inflates them.
   ------------------------------------------------------------------------- */
.wrapper.as-rel h2 { font-size: clamp(22px, 1.5vw + 16px, 30px) !important; }
.as-rel .as-kicker { font-size: clamp(10px, 0.15vw + 9.4px, 11px) !important; }
.as-rel-intro { font-size: clamp(14px, 0.3vw + 13px, 15.5px); }

.as-rel .as-core.as-core--compact { padding: clamp(18px, 1.6vw, 24px); }
.as-rel .as-core.as-core--compact .as-core-icon {
  width: clamp(40px, 3vw, 52px);
  height: clamp(40px, 3vw, 52px);
  font-size: clamp(17px, 1vw + 13px, 23px);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}
.as-rel .as-core h3 { font-size: clamp(16px, 0.55vw + 13.5px, 19px); }
.as-rel .as-core p { font-size: clamp(13.5px, 0.25vw + 12.6px, 15px) !important; line-height: 1.6; }
.as-rel .as-core .more { font-size: clamp(13px, 0.2vw + 12.3px, 14.5px); }

/* ==========================================================================
   Reduced motion — no transforms or transitions anywhere in the new blocks.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .as-ov2-btn,
  .as-ov2-btn i,
  .as-inc2-ic,
  .as-inc2-title { transition: none !important; }
  .as-ov2-btn:hover { transform: none !important; }
  .as-ov2-btn:hover i { transform: none !important; }
  .as-inc2-row:hover .as-inc2-ic { transform: none !important; }
}

/* Business Solution Detail Page: render an .as-chal band white where two of
   them would otherwise sit back to back (Industries -> Case Studies). Opt-in
   via <x-frontend.home.case-studies bgClass="as-chal--plain" />; the homepage
   does not use it, so its bands are unchanged. */
.as-chal.as-chal--plain { background: #fff; }

/* --- Related-solution cards: page palette -------------------------------
   <x-frontend.ui.solution-core /> is shared, and its default treatment uses
   the older grape brand token. Scoping the recolour to .as-rel keeps every
   other page that renders .as-core exactly as it is, while this page stays on
   the blue/orange palette the rest of its sections use. Icon, hover lift and
   arrow-link follow the reference's related-solution cards. */
.as-rel .as-core {
  border-color: #e3e9f2;
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.as-rel .as-core:hover {
  border-color: rgba(59, 111, 212, 0.5);
  box-shadow: 0 14px 32px rgba(15, 27, 51, 0.09);
  transform: translateY(-4px);
}
.as-rel .as-core .as-core-icon {
  background: #e8eefb;
  color: var(--sd-blue);
  border-radius: 12px;
}
.as-rel .as-core h3 {
  color: var(--sd-ink);
  transition: color 0.25s ease;
}
.as-rel .as-core:hover h3 { color: var(--sd-blue); }
.as-rel .as-core .as-core-list li::before { color: var(--sd-blue); }

/* "Explore" link — recolour the shared .more/.text-grape treatment. */
.as-rel .as-core .more,
.as-rel .as-core .more.text-grape,
.as-rel .as-core .more.link-primary {
  color: var(--sd-blue) !important;
  font-weight: 700;
}
.as-rel .as-core .more::after { color: var(--sd-blue) !important; }

@media (prefers-reduced-motion: reduce) {
  .as-rel .as-core,
  .as-rel .as-core h3 { transition: none !important; }
  .as-rel .as-core:hover { transform: none !important; }
}

/* ==========================================================================
   SEC-01 — BUSINESS SOLUTION HERO, CLIENT REFERENCE LAYOUT  (.as-shero)
   Added 2026-08-19 from the client's hero mockup.

   Composition: breadcrumb -> letterspaced eyebrow -> oversized headline ->
   ONE merged paragraph -> one gradient pill CTA, beside a plain rounded image
   card, over a light grid backdrop with a soft blue wash in the top-right.

   Opt in with <x-frontend.business-solutions.solution-hero variant="reference" />.
   The default hero (.as-hero) is untouched, so every other page that uses this
   component is unaffected.

   SIZING: px, not rem — the theme sets :root{font-size:20px}, so rem lengths
   render ~25% larger than intended.
   ========================================================================== */
.as-shero {
  --sh-ink: #0d1526;
  --sh-body: #5b6579;
  --sh-blue: #2f6fed;
  --sh-blue-deep: #1f43c4;
  /* Grid line. Blue-tinted and very low alpha so the graph paper reads as
     texture, not as boxes behind the copy (matches the reference's #3b82f60d). */
  --sh-line: rgba(59, 130, 246, 0.07);

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

/* Fine grid + colour wash. Purely decorative, pointer-events:none. */
.as-shero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* soft blue/lavender wash, top-right */
    radial-gradient(60% 70% at 88% 6%, rgba(99, 122, 232, 0.16) 0%, rgba(99, 122, 232, 0) 70%),
    radial-gradient(45% 55% at 12% 0%, rgba(120, 150, 240, 0.09) 0%, rgba(120, 150, 240, 0) 70%);
}

/* Graph-paper grid on its OWN layer (2026-08-20) so it can be faded out
   behind the headline/paragraph without also washing out the colour gradients
   above. 56px cells match the reference page's .grid-bg; the mask keeps the
   grid strongest in the top-right, behind the image card, and drops it to a
   whisper over the copy column where it was competing with the text. */
.as-shero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--sh-line) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, var(--sh-line) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(125% 105% at 96% 0%, #000 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: radial-gradient(125% 105% at 96% 0%, #000 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.3) 100%);
}

/* --- Layout --------------------------------------------------------------- */
.as-shero-grid {
  display: grid;
  /* Ratio measured off the client mockup: copy ~665px, image ~480px. */
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}
.as-shero-copy { min-width: 0; }

/* --- Breadcrumb ----------------------------------------------------------- */
.as-shero .as-crumb { margin-bottom: 26px; }
.as-shero .as-crumb .breadcrumb { font-size: 13.5px; font-weight: 500; }
.as-shero .as-crumb .breadcrumb-item a { color: #6b7488; }
.as-shero .as-crumb .breadcrumb-item a:hover,
.as-shero .as-crumb .breadcrumb-item a:focus-visible { color: var(--sh-blue); }
.as-shero .as-crumb .breadcrumb-item.active { color: var(--sh-blue); font-weight: 500; }
.as-shero .as-crumb .breadcrumb-item + .breadcrumb-item::before { color: #a7aebd; }

/* --- Eyebrow: plain letterspaced text, NOT the shared .as-eyebrow pill ----- */
.as-shero-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--sh-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* --- Headline ------------------------------------------------------------- */
.as-shero-title {
  color: var(--sh-ink) !important;
  /* ~58px on any desktop >=1440px, matching the mockup. No ch cap: the copy
     column's own width drives the wrap, which is what produces the mockup's
     four lines with "Australian Businesses" intact on the last one. */
  font-size: clamp(32px, 3.6vw + 6px, 58px) !important;
  font-weight: 800;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  margin: 0;
}

/* --- Merged supporting paragraph ------------------------------------------ */
.as-shero-sub {
  margin: 26px 0 0;
  color: var(--sh-body);
  font-size: 17.5px;
  line-height: 1.58;
  /* No cap — the copy column sets the measure, as in the mockup. */
}

/* --- Actions -------------------------------------------------------------- */
.as-shero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.as-shero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sh-blue-deep) 0%, var(--sh-blue) 100%);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border:none;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(47, 111, 237, 0.32);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.as-shero-btn:hover,
.as-shero-btn:focus-visible {
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(47, 111, 237, 0.42);
  transform: translateY(-2px);
}
.as-shero-btn i { font-size: 17px; transition: transform 0.25s ease; }
.as-shero-btn:hover i { transform: translateX(3px); }

.as-shero-btn2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 30px;
  border-radius: 999px;
  border: 1px solid rgba(15, 27, 51, 0.16);
  background: #fff;
  color: var(--sh-ink) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.as-shero-btn2:hover,
.as-shero-btn2:focus-visible {
  border-color: var(--sh-blue);
  color: var(--sh-blue) !important;
}

/* --- Media card ----------------------------------------------------------- */
.as-shero-media { min-width: 0; }
.as-shero-fig {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(15, 27, 51, 0.18);
}
.as-shero-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Laptop: close the gutter and ease the headline down ------------------ */
@media (max-width: 1199.98px) {
  .as-shero-grid { gap: 44px; }
}

/* --- Tablet and below: single column, copy first -------------------------- */
@media (max-width: 991.98px) {
  .as-shero-grid { grid-template-columns: 1fr; gap: 40px; }
  .as-shero-copy { order: 1; }
  .as-shero-media { order: 2; }
  .as-shero-title { font-size: clamp(30px, 5.2vw, 44px) !important; }
  .as-shero-sub { font-size: 16.5px; }
  .as-shero-fig { border-radius: 16px; }
}

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .as-shero-bg {
    background-image:
      radial-gradient(70% 50% at 90% 2%, rgba(99, 122, 232, 0.14) 0%, rgba(99, 122, 232, 0) 70%);
  }
  .as-shero-bg::before {
    /* Larger, fainter cells so the grid never reads as noise on a small
       screen, where the copy sits on top of the whole backdrop. */
    background-image:
      repeating-linear-gradient(to right, var(--sh-line) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(to bottom, var(--sh-line) 0 1px, transparent 1px 72px);
    -webkit-mask-image: radial-gradient(120% 80% at 92% 0%, #000 0%, rgba(0, 0, 0, 0.28) 100%);
    mask-image: radial-gradient(120% 80% at 92% 0%, #000 0%, rgba(0, 0, 0, 0.28) 100%);
  }
  .as-shero .as-crumb { margin-top: 35px; margin-bottom: 18px; }
  .as-shero .as-crumb .breadcrumb { font-size: 12.5px; }
  .as-shero-eyebrow { font-size: 11.5px; letter-spacing: 0.18em; margin-bottom: 14px; }
  .as-shero-title { font-size: 29px !important; line-height: 1.14 !important; }
  .as-shero-sub { margin-top: 18px; font-size: 15.5px; line-height: 1.6; }
  .as-shero-actions { margin-top: 26px; gap: 12px; }
  /* Full-bleed buttons stack cleanly and stay comfortably tappable. */
  .as-shero-btn,
  .as-shero-btn2 { width: 100%; justify-content: center; padding: 17px 24px; }
  .as-shero-fig { border-radius: 14px; box-shadow: 0 16px 36px rgba(15, 27, 51, 0.16); }
  .as-shero-fig img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .as-shero-btn,
  .as-shero-btn i,
  .as-shero-btn2 { transition: none !important; }
  .as-shero-btn:hover { transform: none !important; }
  .as-shero-btn:hover i { transform: none !important; }
}

/* ==========================================================================
   INDUSTRY DETAIL PAGE — CLIENT REFERENCE LAYOUT  (added 2026-08-19)
   Reference: /industry-expertise/healthcare

     .as-shero--solo   hero with no media column (industry hero: breadcrumb,
                       eyebrow, industry name, one-line tagline — no CTA)
     .as-sect          "The Sector Reality" + "What We Deliver" in one band,
                       two columns, with the metric strip under the right one

   Same light adaptation of the dark reference used elsewhere on the site.
   px, not rem — the theme sets :root{font-size:20px}.
   ========================================================================== */

/* --- Hero without a media column ------------------------------------------
   The reference lets the copy run full width and caps it by measure instead
   of by column, so the industry name reads as a large standalone title. */
.as-shero--solo .as-shero-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.as-shero--solo .as-shero-title { max-width: 18ch; }
.as-shero--solo .as-shero-sub { max-width: 62ch; }

/* OPT-IN, added 2026-08-21 for the Case Study detail hero.
   The 18ch cap and the 58px size above are set for a SHORT page title
   ("Healthcare", "About Us"). An editorial headline — a full case-study
   title — runs to six lines in that measure and leaves the band half empty,
   so this modifier gives it a wider column and a slightly smaller size.
   Applied only when a page asks for it (solution-hero :wideTitle="true");
   every other solo hero keeps the tighter cap unchanged. */
.as-shero--solo-wide .as-shero-title {
  max-width: 34ch;
  font-size: clamp(30px, 2.6vw + 8px, 46px) !important;
}

@media (max-width: 991.98px) {
  .as-shero--solo .as-shero-title,
  .as-shero--solo-wide .as-shero-title { max-width: none; }
}

/* ==========================================================================
   SECTOR REALITY + WHAT WE DELIVER  (.as-sect)
   ========================================================================== */
.as-sect {
  --sd-ink: #0f1b33;
  --sd-body: #5b6579;
  --sd-blue: #3b6fd4;
  --sd-orange: #f4692a;
  --sd-line: #dde4ee;

  background: #fff;
}

.as-sect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.as-sect-col { min-width: 0; }

/* Heading block — same rhythm as every other band on the site. */
.as-sect .as-kicker {
  color: var(--sd-blue);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* `main .wrapper h2` in home-revamp.css is (0,1,2) + !important, so this must
   be (0,2,1) + !important to win. See the note in the SEC-05 block above. */
.wrapper.as-sect h2 {
  color: var(--sd-ink) !important;
  font-size: 26px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  max-width: 22ch;
}
.as-sect-intro {
  color: var(--sd-body);
  font-size: 15px;
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 0;
}

/* --- Point rows ----------------------------------------------------------- */
.as-sect-list {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}
.as-sect-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
/* Sector reality: soft tinted panel (the light reading of the reference's
   translucent "glass" rows). */
.as-sect-row--issue {
  background: #f4f7fc;
  border: 1px solid #e4eaf4;
}
.as-sect-row--issue .as-sect-ic { color: var(--sd-orange); }

/* What we deliver: plain white card with a hairline border. */
.as-sect-row--do {
  background: #fff;
  border: 1px solid var(--sd-line);
}
.as-sect-row--do .as-sect-ic { color: var(--sd-blue); }
.as-sect-row--do:hover { border-color: rgba(59, 111, 212, 0.45); }

.as-sect-ic {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1.35;
}
.as-sect-txt {
  min-width: 0;
  color: var(--sd-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* --- Metric strip --------------------------------------------------------- */
.as-sect-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.as-sect-metric {
  background: #fff;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
}
.as-sect-metric-num {
  color: var(--sd-blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.as-sect-metric-lbl {
  color: var(--sd-body);
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 5px;
}

@media (max-width: 1199.98px) {
  .as-sect-grid { gap: 40px; }
}
@media (max-width: 991.98px) {
  /* Stack: the sector's problems first, then what we do about them. */
  .as-sect-grid { grid-template-columns: 1fr; gap: 48px; }
  .wrapper.as-sect h2 { max-width: none; }
  .as-sect-intro { max-width: none; }
}
@media (max-width: 575.98px) {
  .wrapper.as-sect h2 { font-size: 23px !important; }
  .as-sect-list { margin-top: 24px; gap: 10px; }
  .as-sect-row { padding: 14px 16px; gap: 12px; }
  .as-sect-txt { font-size: 14px; }
  /* 2-up rather than three cramped columns; the odd one spans the full row. */
  .as-sect-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-sect-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .as-sect-metric-num { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-sect-row { transition: none !important; }
}

/* ==========================================================================
   REFERENCE-STYLE VARIANTS OF THE THREE REMAINING GRAPE SECTIONS
   (added 2026-08-19)

     .as-ov3       "How We Help"            copy + side image
     .as-ben2sec   "Business Benefits"      the .as-ben2 check list, full width
     .as-out2sec   "Expected Outcomes"      the .as-out2 numbered rows, full width

   These bring the Industry Detail Page's last three grape-themed sections onto
   the same blue/orange editorial language as the rest of the page. The ORIGINAL
   layouts (.as-overview-panel, .as-benefit-*, .as-outcome-*) are untouched and
   still serve Careers, Why Us and the Case Study detail page.

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

.as-ov3,
.as-ben2sec,
.as-out2sec {
  --sd-ink: #0f1b33;
  --sd-body: #5b6579;
  --sd-blue: #3b6fd4;
  --sd-orange: #f4692a;
  --sd-line: #dde4ee;
  --sd-soft: #f1f4f9;
}

/* Kicker + H2 rhythm, matching every other band on these pages.
   `.wrapper.X h2` is (0,2,1) so it beats home-revamp's
   `main .wrapper h2 {...!important}` at (0,1,2) — see the SEC-05 note above. */
.as-ov3 .as-kicker,
.as-ben2sec .as-kicker,
.as-out2sec .as-kicker {
  color: var(--sd-blue);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wrapper.as-ov3 h2,
.wrapper.as-ben2sec h2,
.wrapper.as-out2sec h2 {
  color: var(--sd-ink) !important;
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  max-width: 26ch;
}

/* ==========================================================================
   HOW WE HELP  (.as-ov3)
   ========================================================================== */
.as-ov3:not([class*="bg-"]) { background: var(--sd-soft); }

/* Fluid type — see the .as-ov2 note. */
.wrapper.as-ov3 h2 { font-size: clamp(22px, 1.5vw + 16px, 30px) !important; }
.as-ov3 .as-kicker { font-size: clamp(10px, 0.15vw + 9.4px, 11px) !important; }

/* ==========================================================================
   THE SOLUTION — panel variant  (.as-ovp)
   The original two-column copy + .as-overview-panel layout. Only the band
   background lives here; the panel itself is styled by .as-overview-*.
   ========================================================================== */
.as-ovp:not([class*="bg-"]) { background: #f1f4f9; }

.as-ov3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.as-ov3-grid--copy-only {
  grid-template-columns: 1fr;
}
.as-ov3-copy { min-width: 0; }
.as-ov3-body { margin-top: 24px; }
.as-ov3-body p,
.as-ov3-body > div {
  color: var(--sd-body);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.as-ov3-body p:last-child,
.as-ov3-body > div:last-child { margin-bottom: 0; }

/* Soft highlight card — About "Who We Are" checklist panel. */
.as-ov3-panel {
  background: var(--sd-soft);
  border-radius: 20px;
  padding: 36px 32px;
  min-width: 0;
}
.as-ov3-highlight {
  margin: 0 0 22px;
  color: var(--sd-ink);
  font-size: clamp(17px, 0.4vw + 15px, 20px);
  font-weight: 700;
  line-height: 1.35;
}
.as-ov3-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.as-ov3-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--sd-body);
  font-size: 15px;
  line-height: 1.5;
}
.as-ov3-ic {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--sd-blue);
  font-size: 20px;
  line-height: 1;
}
.as-ov3-ic i { display: block; }

/* Side image — same glow treatment as .as-ov2 media column. */
.as-ov3-media { position: relative; }
.as-ov3-glow {
  position: absolute;
  inset: -24px;
  border-radius: 32px;
  background: rgba(59, 111, 212, 0.18);
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
}
.as-ov3-fig {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.as-ov3-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .as-ov3-grid { grid-template-columns: 1fr; gap: 36px; }
  .as-ov3-copy { order: 1; }
  .as-ov3-panel,
  .as-ov3-media { order: 2; }
  .wrapper.as-ov3 h2 { max-width: none; }
  .as-ov3-glow { inset: -14px; filter: blur(34px); }
  .as-ov3-panel { padding: 28px 24px; }
}
@media (max-width: 575.98px) {
  .wrapper.as-ov3 h2 { font-size: 24px !important; }
  .as-ov3-body p,
  .as-ov3-body > div { font-size: 14.5px; }
  .as-ov3-panel { border-radius: 16px; padding: 24px 20px; }
  .as-ov3-highlight { font-size: 17px; margin-bottom: 18px; }
  .as-ov3-list { gap: 12px; }
  .as-ov3-list li { font-size: 14.5px; }
  .as-ov3-fig { border-radius: 14px; }
  .as-ov3-fig img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   BUSINESS BENEFITS, full width  (.as-ben2sec)
   Same rows as the value band, laid out two-up because the band is wide.
   ========================================================================== */
.as-ben2sec { background: var(--sd-soft); }

.as-ben2sec .as-ben2-head { max-width: 900px; }
.as-ben2sec .as-ben2-intro { max-width: 62ch; font-size: 15.5px; }
.as-ben2sec .as-ben2-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 4px;
  margin-top: 40px;
}
/* Rows sit on hairlines here, as they do in every other full-width band. */
.as-ben2sec .as-ben2-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--sd-line);
}
.as-ben2sec .as-ben2-item:last-child { padding-bottom: 20px; }

@media (max-width: 991.98px) {
  .as-ben2sec .as-ben2-list { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 575.98px) {
  .wrapper.as-ben2sec h2 { font-size: 24px !important; }
  .as-ben2sec .as-ben2-list { margin-top: 26px; }
  .as-ben2sec .as-ben2-item { padding: 16px 0; }
}

/* ==========================================================================
   EXPECTED OUTCOMES, full width  (.as-out2sec)
   ========================================================================== */
.as-out2sec { background: #fff; }

.as-out2sec .as-out2-head { max-width: 900px; }
.as-out2sec .as-out2-intro { max-width: 62ch; font-size: 15.5px; }
.as-out2sec .as-out2-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  margin-top: 40px;
}
/* The two-up grid gives every row a top border instead of only the first,
   so neither column starts without a rule above it. */
.as-out2sec .as-out2-item { border-top: 1px solid var(--sd-line); border-bottom: 0; }
.as-out2sec .as-out2-note { max-width: 78ch; }

@media (max-width: 991.98px) {
  .as-out2sec .as-out2-list { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 575.98px) {
  .wrapper.as-out2sec h2 { font-size: 24px !important; }
  .as-out2sec .as-out2-list { margin-top: 26px; }
}

/* ==========================================================================
   BAND BACKGROUNDS — alternating white / soft   (added 2026-08-20)

   The Industry and Business Solution detail pages alternate their section
   bands: the first section under the hero is white, the next is the soft
   blue-grey, and so on. Each component already carries its own default
   background, so these two utilities are the single per-page override — pass
   one through the component's `class` / `bgClass` / `sectionClass` prop.

   !important is required (and deliberate): the theme's `.bg-light`, which
   several of these sections carry by default, is itself !important.
   ========================================================================== */
.as-band--white { background: #fff !important; }
.as-band--soft  { background: #f1f4f9 !important; }

/* ==========================================================================
   RICH TEXT OVERRIDES (TINYEDITOR)
   Strip Microsoft Word inline styles that break layouts
   ========================================================================== */
/* ==========================================================================
   RICH TEXT OVERRIDES (TINYEDITOR)
   Strip Microsoft Word inline styles that break layouts
   ========================================================================== */
.as-shero-sub *,
.as-ov2-body *,
.as-ov3-body *,
.as-ben2-intro *,
.as-out2-intro *,
.as-inc2-intro *,
.as-inc2-text *,
.as-appr-intro *,
.as-appr-text *,
.as-rel-intro *,
.as-whyd-intro *,
.as-cta2-text *,
.as-ctas-text *,
.as-faq-a *,
.as-chal-intro *,
.as-chal-body *,
.text-body * {
    white-space: normal !important;
    background-color: transparent !important;
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Ensure lists pasted from Word or created in TinyEditor have proper bullets and padding,
   overriding any inherited list-style: none from parent containers */
.as-shero-sub ul,
.as-ov2-body ul,
.as-ov3-body ul,
.as-ben2-intro ul,
.as-out2-intro ul,
.as-inc2-intro ul,
.as-inc2-text ul,
.as-appr-intro ul,
.as-appr-text ul,
.as-rel-intro ul,
.as-whyd-intro ul,
.as-cta2-text ul,
.as-ctas-text ul,
.as-faq-a ul,
.as-chal-intro ul,
.as-chal-body ul,
.text-body ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.as-shero-sub ol,
.as-ov2-body ol,
.as-ov3-body ol,
.as-ben2-intro ol,
.as-out2-intro ol,
.as-inc2-intro ol,
.as-inc2-text ol,
.as-appr-intro ol,
.as-appr-text ol,
.as-rel-intro ol,
.as-whyd-intro ol,
.as-cta2-text ol,
.as-ctas-text ol,
.as-faq-a ol,
.as-chal-intro ol,
.as-chal-body ol,
.text-body ol {
    list-style: decimal !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Fix double margins from TinyEditor wrapping things in p tags inside our div wrappers */
.as-shero-sub > div > p:last-child,
.as-ov2-body > div > p:last-child,
.as-ov3-body > div > p:last-child,
.as-ben2-intro > p:last-child,
.as-out2-intro > p:last-child,
.as-inc2-intro > p:last-child,
.as-inc2-text > p:last-child,
.as-appr-intro > p:last-child,
.as-appr-text > p:last-child,
.as-rel-intro > p:last-child,
.as-whyd-intro > p:last-child,
.as-cta2-text > p:last-child,
.as-ctas-text > p:last-child,
.as-faq-a > p:last-child,
.as-chal-intro > p:last-child,
.as-chal-body > p:last-child,
.text-body > p:last-child {
    margin-bottom: 0 !important;
}

.as-shero-sub > div > p:first-child,
.as-ov2-body > div > p:first-child,
.as-ov3-body > div > p:first-child,
.as-ben2-intro > p:first-child,
.as-out2-intro > p:first-child,
.as-inc2-intro > p:first-child,
.as-inc2-text > p:first-child,
.as-appr-intro > p:first-child,
.as-appr-text > p:first-child,
.as-rel-intro > p:first-child,
.as-whyd-intro > p:first-child,
.as-cta2-text > p:first-child,
.as-ctas-text > p:first-child,
.as-faq-a > p:first-child,
.as-chal-intro > p:first-child,
.as-chal-body > p:first-child,
.text-body > p:first-child {
    margin-top: 0 !important;
}

/* ==========================================================================
   .as-blue-theme  —  PURPLE -> BLUE, OPT-IN PER PAGE   (2026-08-21)

   Several shared components are themed off the brand GRAPE tokens
   (#3b6fd4 / #3059ab / #f2f3fb / #e6e5f4) or carry literal purples that no
   token can reach. On the pages the client has asked to be purple-free, put
   this class on <main>:

       <main class="as-blue-theme"> … </main>

   and every reused component inside it renders in the page blue instead.

   WHY A CLASS ON <main> RATHER THAN A :root OVERRIDE. The tokens are declared
   at :root by home-revamp.css, business-solution.css AND why-us.css, so a
   fourth :root block would only work from a stylesheet loaded after all three
   — which rules out putting it in any of the shared files. Declaring them here
   instead means descendants inherit from the NEAREST ancestor that sets them,
   so load order stops mattering and the opt-in cannot leak to a page that does
   not carry the class. Header and footer sit outside <main> and are untouched
   (neither uses a grape token today, so nothing there changes either way).

   NOTHING in the component rules above or in home-revamp.css is edited: this
   block only re-points the values those existing rules already read.

   Palette is the established light-reference blue already used by .as-shero /
   .as-chal / .as-ov3 / .as-mv2 / .as-wu2, so retinted sections land on the
   page's existing blue rather than introducing a second one.
   ========================================================================== */
.as-blue-theme {
  --as-grape: #3b6fd4;        /* was #3b6fd4 — .as-kicker, .as-tsl-*, .as-value-mark */
  --as-grape-dark: #2f4fb8;   /* was #3059ab */
  --as-chal-dark: #2f4fb8;    /* was #3059ab — .as-overview-highlight gradient */
  --as-soft: #eef3fb;         /* was #f2f3fb soft purple */
  --as-line: #dde4ee;         /* was #e6e5f4 pale grape  */
  --as-shadow-hover: 0 1rem 2.5rem rgba(59, 111, 212, 0.16);
}

/* --- Literal purples, restated in blue -----------------------------------
   Each rule below repeats its ORIGINAL declaration from home-revamp.css /
   style.css with only the colours changed — no geometry, size or spacing is
   touched, so the designs are identical apart from hue. ------------------- */

/* Primary CTA panel: a violet radial wash over a blue -> indigo gradient,
   which reads as clearly purple across the right half of the panel. */
.as-blue-theme .as-cta2 {
  --cta-blue: #23409e;
  --cta-indigo: #2f6fed;                  /* was #4b4a95 indigo/violet */
  background:
    radial-gradient(90% 130% at 82% 30%, rgba(59, 111, 212, 0.55) 0%, rgba(59, 111, 212, 0) 62%),
    linear-gradient(105deg, var(--cta-blue) 0%, var(--cta-blue) 46%, var(--cta-indigo) 100%);
}

/* Testimonials: the panel's corner wash, the offset plate behind the portrait,
   the quote chip's shadow, and — most visibly — the initials monogram shown
   for any client with no photo on file. Two of the three published
   testimonials have no photo, so a monogram is on screen at all times. */
.as-blue-theme .as-tsl-panel {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(59, 111, 212, 0.07) 0%, rgba(59, 111, 212, 0) 55%),
    #fff;
}
.as-blue-theme .as-tsl-face::before {
  background: linear-gradient(135deg, rgba(59, 111, 212, 0.16), rgba(59, 111, 212, 0.05));
}
.as-blue-theme .as-tsl-face[data-tone="1"]::before {
  background: linear-gradient(135deg, rgba(47, 79, 184, 0.18), rgba(47, 79, 184, 0.05));
}
.as-blue-theme .as-tsl-face[data-tone="2"]::before {
  background: linear-gradient(135deg, rgba(123, 164, 238, 0.18), rgba(123, 164, 238, 0.05));
}
.as-blue-theme .as-tsl-face-mono {
  background: linear-gradient(135deg, #3b6fd4, #6b98e6);
  box-shadow: 0 14px 34px rgba(59, 111, 212, 0.24);
}
.as-blue-theme .as-tsl-avatar { background: linear-gradient(135deg, #3b6fd4, #6b98e6); }
.as-blue-theme .as-tsl-face[data-tone="1"] .as-tsl-face-mono,
.as-blue-theme .as-tsl-avatar[data-tone="1"] { background: linear-gradient(135deg, #2f4fb8, #5f8ce0); }
.as-blue-theme .as-tsl-face[data-tone="2"] .as-tsl-face-mono,
.as-blue-theme .as-tsl-avatar[data-tone="2"] { background: linear-gradient(135deg, #5b8ae8, #93b6f1); }
.as-blue-theme .as-tsl-face-badge { box-shadow: 0 8px 20px rgba(59, 111, 212, 0.35); }

/* Insights: the post card's "Read More" carries the theme utility .text-grape
   (#3b6fd4 !important, style.css) and the band's "View All Articles" button is
   .btn-outline-grape, whose Bootstrap custom properties are hard-coded grape.
   The descendant selector is what outranks .text-grape's own !important. */
.as-blue-theme .text-grape { color: #3b6fd4 !important; }
.as-blue-theme .btn-outline-grape {
  --bs-btn-color: #3b6fd4;
  --bs-btn-border-color: #3b6fd4;
  --bs-btn-hover-bg: #3b6fd4;
  --bs-btn-hover-border-color: #3b6fd4;
  --bs-btn-focus-shadow-rgb: 59, 111, 212;
  --bs-btn-active-bg: #3b6fd4;
  --bs-btn-active-border-color: #3b6fd4;
  --bs-btn-disabled-color: #3b6fd4;
}
.as-blue-theme .btn.btn-outline-grape { border-color: rgba(59, 111, 212, 0.4); }