/* page.css — LOCAL PAGE CSS for page build `data-analytics-bi` only.
 *
 * Nothing in this file belongs to an approved template package. It only carries
 * page-assembly glue for supplied source content that differs from the template's
 * own sample content. Each rule names why it exists so intake can review it.
 * Reusable section styles live in css/sections/*.css.
 */

/* 1. Global link colours for this page shell (brand deep green, gold on hover). */
a{color:var(--deep)}
a:hover{color:var(--bronze)}

/* 2. hero-primary: the supplied hero asset is a still editorial photograph, not the
 *    template's 1672x941 device plate. Cover-fit it inside the plate box so the
 *    template's scaling math still applies without distorting the source image. */
/*    The template's stage is a fixed 1672x941 device plate, scaled to fit the hero height
 *    and right-aligned by js/scaffold.js, which leaves bare --ink to its left with a hard
 *    vertical seam. That is correct for a device shot with copy on a dark field; it is wrong
 *    for a full-bleed editorial still. So for this page the stage fills the hero box and the
 *    still covers it, letting the template's own scrim gradient do the left-side darkening. */
#hero-primary .dark-device-demo-hero__stage{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  transform:none;
}
#hero-primary .dark-device-demo-hero__stage > picture{
  position:absolute;
  inset:0;
  display:block;
}
#hero-primary .dark-device-demo-hero__device-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 50%;
}

/* 3. hero-primary: the manifest keeps the source's second hero action as supporting
 *    link text in the template's CTA note slot instead of adding a second button. */
#hero-primary .dark-device-demo-hero__cta-note{
  max-width:none;
}
#hero-primary .dark-device-demo-hero__cta-note a{
  white-space:nowrap;
  color:var(--gold-pure);
  border-bottom:1px solid rgba(212,175,55,.5);
}
#hero-primary .dark-device-demo-hero__cta-note a:hover{
  color:var(--paper);
  border-bottom-color:var(--paper);
}

/* 4. case-studies: the source snapshot supplies no case-study illustrations for this
 *    page, and the template's own sample illustrations are unrelated AI-topic art.
 *    The image slot is left empty here, so the panel drops its media row rather than
 *    reserving blank space. No template file is changed. */
#case-studies .case-study-showcase-variant-e__panel{
  grid-template-rows:auto;
  row-gap:0;
}

/* 5. ways-to-start: only the four supplied solution packages are used, so the
 *    template's multi-band grouping is not in play and the first row group sits
 *    directly under the section header. */
#ways-to-start .engagement-ledger-index__band{
  margin-top:40px;
}

/* 6. final-close: one page-local decorative mark. A strategy silhouette sits behind the
 *    closing statement at low opacity in brand bronze, bled off the right edge. It is
 *    decoration only - aria-hidden by construction (CSS pseudo-element), carries no
 *    meaning, and is not part of the sealed CTA template. */
#final-close{
  position:relative;
  overflow:hidden;
}
#final-close::after{
  content:'';
  position:absolute;
  right:clamp(-180px,-9vw,-60px);
  top:52%;
  width:min(600px,52%);
  aspect-ratio:1;
  transform:translateY(-50%) scaleX(-1);
  background:url(assets/decor/strategy-mark.svg) no-repeat center/contain;
  opacity:.22;
  pointer-events:none;
}
#final-close .cta-standard-gold-wash-two-column__el-2{
  position:relative;
  z-index:1;
}
@media (max-width:760px){
  #final-close::after{opacity:.14;width:min(420px,72%);right:-90px}
}

/* 7. final-close: the closing statement and its description run to the full 75% content
 *    measure instead of the template's 34ch / 58ch caps, which makes the band shorter and
 *    the statement read as one line of thought. The action then sits on its own row on the
 *    same left ruler as the text, directly after the reading order statement -> support ->
 *    act, which also keeps the right margin clear for the decorative mark. */
#final-close .cta-standard-gold-wash-two-column__el-2{
  grid-template-columns:minmax(0,1fr);
}
#final-close .cta-standard-gold-wash-two-column__el-5,
#final-close .cta-standard-gold-wash-two-column__el-6{
  max-width:var(--title-description-width) !important;
}
#final-close .cta-standard-gold-wash-two-column__el-7{
  justify-items:start;
}

/* 8. final-close: gold ground with black ink was too hot against the gold wash. The action
 *    takes brand bronze with paper ink for a cleaner, higher-contrast read. */
#final-close .cta-standard-gold-wash-two-column__el-8{
  background:var(--bronze);
  color:var(--paper);
}
#final-close .cta-standard-gold-wash-two-column__el-8:hover{
  background:var(--deep);
  color:var(--paper);
}

/* 9. ai-ready-foundation: use the full body column and readable brand ink for the
 *    editorial introduction beside the section number. */
#ai-ready-foundation .ai-ready-foundation__copy{
  max-width:none;
  color:var(--ink);
}
#ai-ready-foundation .ai-ready-foundation__copy .type-content-body--editorial{
  font-weight:400;
}