/* ============================================================
   RETAIL & E-COMMERCE INDUSTRY PAGE — workflow-automation
   design-system rollout. Applies the capability-page standard
   (ac-capp-system.css, itself the homepage system) to
   /industries/retail-ecommerce/ only; every rule is scoped
   body.ac-ind-light so the other five
   industry pages keep the shared dark ind-shared.php design.

     1. SPACING  — 9rem side gutters on every band (→3rem ≤960,
        →1.25rem ≤600), the shared 7rem/5rem/3.5rem vertical
        rhythm, 1680px content inners (gutter moves to the band).
     2. COLOUR   — light theme below the hero: white grounds +
        #08222E ink; the HERO stays dark (same hands-off rule as
        the capability heroes). The friction canvas and landscape
        featured card stay dark feature panels retoned to the
        standard #08222E, exactly like the ROI calculator.
     3. TYPE     — unified section-heading scale (Inter,
        clamp(2.5rem,4vw,3.75rem)/700/1.1/-0.02em), the one
        plain-caps eyebrow spec, 24px/1.7 #5A6B75 section intros,
        left-aligned section headers, homepage header-stack rhythm
        (eyebrow →1.25rem→ heading →20px→ intro; header →4rem→
        content), and the 20px card-body / 1.5rem card-title
        standard.

   Loads AFTER ac-interior-system (same 101-priority block);
   body-scoped selectors + !important beat ind-shared.php's
   in-body <style> block and inline style attrs. Fully
   reversible: delete this file + its wp_enqueue_style().
   Applied 2026-07-28. Modelled on ac-capp-system.css.
   ============================================================ */

/* ── Palette (mirrors ac-capp-system.css) ── */
body.ac-ind-light {
  --lt-page:      #FFFFFF;
  --lt-surface:   #FFFFFF;
  --lt-tint:      #E9F3F7;
  --lt-ink:       #08222E;
  --lt-grey:      #5A6B75;
  --lt-border:    rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);
  --lt-attn:        #E5484D;
  --lt-attn-strong: #C62B30;

  background-color: var(--lt-page) !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-page {
  background: var(--lt-page) !important;
  color: var(--lt-ink) !important;
}

/* HERO — stays dark like the capability heroes: the retail photo
   as a CSS background under the same left-heavy dark scrim as the
   workflow-automation hero, copy layered on top. */
body.ac-ind-light .ac-indv-hero {
  color: #FFFFFF;
}
/* Per-page hero photos under the standard workflow 0.84/0.62/0.38
   left-heavy scrim. All pages use media-library uploads. */
body.page-template-page-industry-retail .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Retail-Ecommerce-Automation-Consulting.png') center / cover no-repeat,
    #010D12 !important;
}
body.page-template-page-industry-banking .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Finance-Banking-Automation-Consulting.png') center / cover no-repeat,
    #010D12 !important;
}
body.page-template-page-industry-realestate .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Real-Estate-Automation-Consulting.png') center / cover no-repeat,
    #010D12 !important;
}
body.page-template-page-industry-professional .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Professional-Services-Automation-Consulting.jpg') center / cover no-repeat,
    #010D12 !important;
}
body.page-template-page-industry-transport .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Public-Transport-Automation-Consulting-1.webp') center / cover no-repeat,
    #010D12 !important;
}
body.page-template-page-industry-government .ac-indv-hero {
  background:
    linear-gradient(90deg, rgba(1,13,18,0.84) 0%, rgba(1,13,18,0.62) 45%, rgba(1,13,18,0.38) 100%),
    url('/wp-content/uploads/2026/07/Government-Automation-Consulting.avif') center 15% / cover no-repeat,
    #010D12 !important;
}

/* ============================================================
   1a. 9rem SIDE GUTTERS on every band (hero included, horizontal
       only — matches the capability pages)
   ============================================================ */
body.ac-ind-light :is(
  .ac-indv-hero,
  .ac-indv-landscape,
  .ac-indv-friction,
  .ac-indv-capabilities,
  .ac-indv-case,
  .ac-indv-related,
  .ac-roi-embed,
  .ac-cta-wrapper-bg,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body.ac-ind-light :is(
    .ac-indv-hero, .ac-indv-landscape, .ac-indv-friction,
    .ac-indv-capabilities, .ac-indv-case, .ac-indv-related,
    .ac-roi-embed, .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body.ac-ind-light :is(
    .ac-indv-hero, .ac-indv-landscape, .ac-indv-friction,
    .ac-indv-capabilities, .ac-indv-case, .ac-indv-related,
    .ac-roi-embed, .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ============================================================
   1b. VERTICAL RHYTHM — 7rem / 5rem / 3.5rem, margins zeroed
   ============================================================ */
body.ac-ind-light :is(
  .ac-indv-landscape,
  .ac-indv-friction,
  .ac-indv-capabilities,
  .ac-indv-case,
  .ac-roi-embed,
  .ac-cta-wrapper-bg
) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 960px) {
  body.ac-ind-light :is(
    .ac-indv-landscape, .ac-indv-friction, .ac-indv-capabilities,
    .ac-indv-case, .ac-roi-embed, .ac-cta-wrapper-bg
  ) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body.ac-ind-light :is(
    .ac-indv-landscape, .ac-indv-friction, .ac-indv-capabilities,
    .ac-indv-case, .ac-roi-embed, .ac-cta-wrapper-bg
  ) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* ============================================================
   1c. CONTENT INNERS → 1680px (gutter lives on the band, so the
       shells stop carrying their own calc(100% - 48px) inset)
   ============================================================ */
body.ac-ind-light .ac-indv-shell {
  width: 100% !important;
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.ac-ind-light .ac-indv-capabilities .ac-indv-shell {
  padding: 0 !important;
}
body.ac-ind-light .ac-indv-landscape__frame {
  max-width: none !important;
}
body.ac-ind-light .ac-roi-embed__inner {
  max-width: 1680px !important;
}

/* ============================================================
   2. TYPE — unified scales
   ============================================================ */

/* Section headings (capability spec: Inter,
   clamp(2.5rem,4vw,3.75rem), 700, 1.1, -0.02em) */
body.ac-ind-light :is(
  .ac-indv-intro h2,
  .ac-indv-friction__header h2,
  .ac-roi-embed__header h2
) {
  font-size: clamp(2.5rem, 4vw, 3.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}
@media (max-width: 768px) {
  body.ac-ind-light :is(
    .ac-indv-intro h2, .ac-indv-friction__header h2, .ac-roi-embed__header h2
  ) {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
  }
}

/* Eyebrow / kicker labels — ONE plain-caps spec: Inter 0.8rem /
   700 / 0.14em / caps, no pill, no border, no padding. Ink on the
   light bands; white where they sit on a dark panel. */
body.ac-ind-light :is(
  .ac-indv-label,
  .ac-indv-badge,
  .ac-roi-embed .ac-badge
) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light :is(
  .ac-indv-hero .ac-indv-badge,
  .ac-indv-friction__header .ac-indv-label,
  .ac-roi-embed .ac-badge
) {
  color: #FFFFFF !important;
}

/* Section intros — 24px / 1.7 grey, homepage header-stack rhythm:
   eyebrow →1.25rem→ heading →20px→ intro; header block →4rem→
   content (2.5rem ≤768). Headers LEFT aligned (the friction
   header and the ROI/CTA conversion panels keep their centred
   feature-panel composition). */
body.ac-ind-light .ac-indv-intro {
  justify-items: start !important;
  text-align: left !important;
  margin-bottom: 4rem !important;
}
body.ac-ind-light .ac-indv-intro h2 {
  margin: 0 !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-intro p {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: var(--lt-grey) !important;
  margin: 20px 0 0 !important;
  max-width: 780px !important;
}
@media (max-width: 768px) {
  body.ac-ind-light .ac-indv-intro {
    margin-bottom: 2.5rem !important;
  }
}
body.ac-ind-light .ac-roi-embed__header p {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
body.ac-ind-light .ac-roi-embed__header {
  margin-bottom: 4rem !important;
}
body.ac-ind-light .ac-roi-embed__header h2 {
  margin: 0 !important;
}
body.ac-ind-light .ac-roi-embed__header p {
  margin: 20px 0 0 !important;
}

/* Grids straight after a header — the 4rem gap is carried by the
   header, so their own top margins go. */
body.ac-ind-light .ac-indv-cap-scroll {
  margin-top: 0 !important;
}

/* ============================================================
   3. HERO — dark, but on the homepage/capability type scale and
      the full-viewport composition (≥961px; natural flow below,
      incl. the body{zoom:0.80} 100vh/0.80 correction)
   ============================================================ */
body.ac-ind-light .ac-indv-hero__title {
  font-size: clamp(2.2rem, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.11 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.25rem !important;
  max-width: none !important;
}
body.ac-ind-light .ac-indv-hero__body {
  font-size: 1.75rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 900px !important;
  margin: 0 0 3.5rem !important;
}
/* Single left copy column hugging the left gutter (capability hero
   recipe) — the shared 1680px shell rule would otherwise centre it. */
body.ac-ind-light .ac-indv-hero__grid {
  max-width: 1160px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (min-width: 961px) {
  body.ac-ind-light .ac-indv-hero {
    height: calc(100vh / 0.80) !important;
    min-height: calc(100vh / 0.80) !important;
    max-height: min(calc(100vh / 0.80), 1125px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  /* Nudge the copy below the fixed nav pill */
  body.ac-ind-light .ac-indv-hero__grid {
    margin-top: 2rem;
  }
}

/* Trusted-by carousel — flow position below the copy (<961px), pinned
   absolute at the hero's bottom edge on the 9rem gutters ≥961px, exactly
   the capability/firm hero treatment. The carousel's edge fades
   (::before/::after) paint solid var(--ac-bg), which shows as dark
   patches over the hero photo — replace with a transparency mask. */
body.ac-ind-light .ac-indv-hero .ac-trust-carousel {
  margin-top: 3.5rem !important;
  max-width: none !important;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
body.ac-ind-light .ac-indv-hero .ac-trust-carousel::before,
body.ac-ind-light .ac-indv-hero .ac-trust-carousel::after {
  display: none !important;
}
/* Label — crisp full white with a soft shadow so it stays readable
   over the hero photograph. */
body.ac-ind-light .ac-indv-hero .ac-trust-carousel__label {
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
@media (min-width: 961px) {
  body.ac-ind-light .ac-indv-hero .ac-trust-carousel {
    position: absolute !important;
    left: 9rem !important;
    right: 9rem !important;
    bottom: 2.5rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 2;
  }
}

/* ============================================================
   4. COLOUR — light theme below the hero
   ============================================================ */

/* ── Landscape (already light) — stat cards on the /profile/
      "The Problem" card design, adapted to the light band:
      checkerboarded dark-gradient (#083344→#003333) and light-teal
      (#D2F0F5) cards, 24px radius, no borders or icons, the profile
      42px Inter-800 "hook" value (teal gradient on light cards,
      white on dark) over 19px plain copy. The featured (4th) card
      keeps its dark emphasis; the first stat joins it so the 2×2
      grid alternates like the profile scroll strip. The old tint
      frame is stripped so cards sit straight on the white band. ── */
body.ac-ind-light .ac-indv-landscape {
  background: var(--lt-page) !important;
}
body.ac-ind-light .ac-indv-landscape__frame {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* One row of four vertical cards, staggered like the profile strip:
   odd cards dark and raised, even cards light-teal and pushed down
   5rem (the profile nth-child rhythm). Collapses to a staggered
   2-column at tablet, single column (no stagger) on phones. */
body.ac-ind-light .ac-indv-landscape__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: start !important;
}
body.ac-ind-light :is(.ac-indv-stat, .ac-indv-featured) {
  border: none !important;
  border-radius: 24px !important;
  padding: 2.5rem 2rem !important;
  min-height: 270px !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
/* Hover — the site card lift (translateY + brand-teal glow) */
body.ac-ind-light :is(.ac-indv-stat, .ac-indv-featured):hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px rgba(7, 169, 209, 0.20) !important;
}
/* Odd cards — dark, raised (profile rhythm) */
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(odd) {
  background: linear-gradient(135deg, #083344, #003333) !important;
}
/* Even cards — white (light-theme take on the profile #D2F0F5),
   pushed down; the soft shadow keeps their edge on the white band */
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(even) {
  background: #FFFFFF !important;
  margin-top: 5rem !important;
}
/* The profile problem cards carry no iconography */
body.ac-ind-light :is(.ac-indv-stat__icon, .ac-indv-featured__icon) {
  display: none !important;
}
/* Values = the profile "hook": Inter 42px / 800 / -0.03em —
   teal gradient on the light cards, solid white on the dark */
body.ac-ind-light :is(.ac-indv-stat__value, .ac-indv-featured__value) {
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 0 0.75rem !important;
}
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(even) :is(.ac-indv-stat__value, .ac-indv-featured__value) {
  background: linear-gradient(135deg, #07A9D1, #06CFC3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #07A9D1 !important;
}
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(odd) :is(.ac-indv-stat__value, .ac-indv-featured__value) {
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
/* Copy = the profile topic/tail: 19px / 1.6 */
body.ac-ind-light :is(.ac-indv-stat__copy, .ac-indv-featured__copy) {
  font-size: 19px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(even) :is(.ac-indv-stat__copy, .ac-indv-featured__copy) {
  color: #083344 !important;
}
body.ac-ind-light .ac-indv-landscape__grid > :nth-child(odd) :is(.ac-indv-stat__copy, .ac-indv-featured__copy) {
  color: rgba(255, 255, 255, 0.75) !important;
}
@media (max-width: 1200px) {
  body.ac-ind-light .ac-indv-landscape__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  body.ac-ind-light .ac-indv-landscape__grid {
    grid-template-columns: 1fr !important;
  }
  body.ac-ind-light .ac-indv-landscape__grid > :nth-child(even) {
    margin-top: 0 !important;
  }
}

/* ── Friction ("Common Challenges") — sits directly on the white
      page: the dark panel chrome is stripped, the flowing-lines SVG
      runs edge to edge (band gutters zeroed, shell uncapped), and
      the header/pills/detail cards flip to light-theme styling. ── */
body.ac-ind-light .ac-indv-friction {
  background: var(--lt-page) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.ac-ind-light .ac-indv-friction .ac-indv-shell {
  max-width: none !important;
}
body.ac-ind-light .ac-indv-friction__canvas {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  /* Match the flowing-lines SVG's 1440×760 aspect so the full-bleed
     background isn't cropped at the bottom by object-fit: cover. */
  aspect-ratio: 1440 / 760;
}
body.ac-ind-light .ac-indv-friction__header h2 {
  color: var(--lt-ink) !important;
}
/* Two lines exactly: widen the 760px header so "Where Retail &
   E-commerce" holds one line, and break before the accent span. */
body.ac-ind-light .ac-indv-friction__header {
  width: min(1100px, calc(100% - 48px)) !important;
}
body.ac-ind-light .ac-indv-friction__header h2 .ac-indv-accent {
  display: block;
}
body.ac-ind-light .ac-indv-friction__header .ac-indv-label {
  color: var(--lt-ink) !important;
}
/* Floating pills — white light-theme chips with a firmer border so
   they hold their edge against the white band */
body.ac-ind-light .ac-indv-pill {
  background: #FFFFFF !important;
  border: 1px solid rgba(9, 32, 42, 0.18) !important;
  color: var(--lt-ink) !important;
  font-size: 1rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 18px rgba(9, 32, 42, 0.10);
}
body.ac-ind-light .ac-indv-node:hover .ac-indv-pill {
  background: #FFFFFF !important;
  border-color: rgba(7, 169, 209, 0.45) !important;
  box-shadow: 0 12px 32px rgba(7, 169, 209, 0.18) !important;
}
/* Hover detail cards — white cards, card-typography standard
   (1.5rem titles / 20px body), bordered for contrast on white */
body.ac-ind-light .ac-indv-detail {
  background: #FFFFFF !important;
  border: 1px solid rgba(9, 32, 42, 0.18) !important;
  box-shadow: 0 18px 48px rgba(9, 32, 42, 0.16) !important;
  width: 360px;
}
body.ac-ind-light .ac-indv-detail h3 {
  font-size: 1.5rem !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-detail p {
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: var(--lt-grey) !important;
}
body.ac-ind-light .ac-indv-detail__icon {
  color: #07A9D1 !important;
  background: rgba(7, 169, 209, 0.10) !important;
  border: none !important;
}

/* ── Capabilities (dark → white) ── */
body.ac-ind-light .ac-indv-capabilities {
  background: var(--lt-page) !important;
}
body.ac-ind-light .ac-indv-capabilities .ac-indv-intro h2 {
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-capabilities .ac-indv-intro p {
  color: var(--lt-grey) !important;
}
body.ac-ind-light .ac-indv-cap-item {
  border-left-color: rgba(8, 34, 46, 0.12) !important;
}
body.ac-ind-light .ac-indv-cap-item.is-active {
  border-left-color: #00b4d8 !important;
}
body.ac-ind-light .ac-indv-cap-item h3 {
  font-size: 1.5rem !important;
}
body.ac-ind-light .ac-indv-cap-item.is-active h3 {
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-cap-item:not(.is-active) h3 {
  color: rgba(8, 34, 46, 0.40) !important;
}
body.ac-ind-light .ac-indv-cap-item p {
  font-size: 20px !important;
  line-height: 1.65 !important;
}
body.ac-ind-light .ac-indv-cap-item.is-active p {
  color: var(--lt-grey) !important;
}
body.ac-ind-light .ac-indv-cap-item__icon {
  color: #07A9D1 !important;
  background: rgba(7, 169, 209, 0.08) !important;
  border-color: var(--lt-border-brand) !important;
}
body.ac-ind-light .ac-indv-cap-item.is-active .ac-indv-cap-item__icon {
  background: rgba(7, 169, 209, 0.14) !important;
  border-color: rgba(7, 169, 209, 0.35) !important;
}
body.ac-ind-light .ac-indv-cap-item__label {
  color: rgba(8, 34, 46, 0.35) !important;
}
body.ac-ind-light .ac-indv-cap-item.is-active .ac-indv-cap-item__label {
  color: rgba(7, 169, 209, 0.85) !important;
}
body.ac-ind-light .ac-indv-cap-scroll__img-wrap {
  box-shadow: 0 24px 60px rgba(9, 32, 42, 0.18) !important;
}

/* ── Related capabilities — small companion strip (capability
      standard): sub-heading scale, tighter rhythm, white ground ── */
body.ac-ind-light .ac-indv-related {
  background: var(--lt-page) !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
body.ac-ind-light .ac-indv-related .ac-indv-intro {
  margin-bottom: 2rem !important;
}
body.ac-ind-light .ac-indv-related .ac-indv-intro h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-indv-related__grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 1400px) {
  body.ac-ind-light .ac-indv-related__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 700px) {
  body.ac-ind-light .ac-indv-related__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Cutout cards (related services) — photo media on top; a white
      inset label plate (bottom-left) and a white icon pin (top-right)
      are cut INTO the media. The .ac-cutout__corner SVGs are quarter
      "square-minus-disc" fillers, plate-coloured, that turn each
      plate/media junction into an inverted radius. The base SVG shape
      fills the BOTTOM-LEFT of its box (concave toward top-right):
      label corners use it as-is, pin corners rotate it 180°. ── */
body.ac-ind-light .ac-indv-related__cutout {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
body.ac-ind-light .ac-indv-related__cutout:hover {
  transform: translateY(-4px);
  border-color: var(--lt-border-brand);
  box-shadow: 0 6px 24px rgba(9, 32, 42, 0.10);
}
body.ac-ind-light .ac-cutout__media {
  position: relative;
  height: clamp(190px, 14vw, 250px);
  background: var(--lt-tint);
  overflow: hidden;
}
body.ac-ind-light .ac-cutout__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
body.ac-ind-light .ac-indv-related__cutout:hover .ac-cutout__media img {
  transform: scale(1.05);
}
/* Faint top scrim so the white pin reads against bright photos */
body.ac-ind-light .ac-cutout__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 13, 18, 0.10) 0%, rgba(1, 13, 18, 0) 38%);
  pointer-events: none;
  z-index: 1;
}
body.ac-ind-light .ac-cutout__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  color: var(--lt-surface);
  pointer-events: none;
}
body.ac-ind-light .ac-cutout__pin {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lt-surface);
  color: #07A9D1;
  padding: 12px 1.15rem 14px 16px;
  border-bottom-left-radius: 18px;
}
body.ac-ind-light .ac-cutout__pin > svg:not(.ac-cutout__corner) {
  width: 22px;
  height: 22px;
  display: block;
}
body.ac-ind-light .ac-cutout__corner--pin-side { right: 100%; top: 0; transform: rotate(180deg); }
body.ac-ind-light .ac-cutout__corner--pin-under { top: 100%; right: 0; transform: rotate(180deg); }
body.ac-ind-light .ac-cutout__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.75rem 1.75rem;
}
body.ac-ind-light .ac-cutout__body h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
  margin: 0 0 0.65rem;
}
body.ac-ind-light .ac-cutout__body p {
  font-size: 20px;
  line-height: 1.65;
  color: var(--lt-grey);
  margin: 0 0 1.5rem;
  flex: 1;
}
body.ac-ind-light .ac-cutout__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  border-top: 1px solid var(--lt-border);
  padding-top: 1.15rem;
  margin-top: auto;
}
body.ac-ind-light .ac-cutout__link {
  font-size: 0.95rem;
  font-weight: 600;
  color: #07A9D1;
  white-space: nowrap;
  transition: color 0.2s ease;
}
body.ac-ind-light .ac-indv-related__cutout:hover .ac-cutout__link {
  color: #0690b2;
}

/* ── ROI calculator — stays a DARK feature panel, retoned
      #010D12 → #08222E per the dark-tone standard ── */
body.ac-ind-light .ac-roi-embed {
  background: #08222E !important;
}
body.ac-ind-light .ac-roi-s-row input[type=range]::-webkit-slider-thumb {
  border-color: #08222E !important;
}
body.ac-ind-light .ac-roi-s-row input[type=range]::-moz-range-thumb {
  border-color: #08222E !important;
}

/* ── CTA (dark panel → soft cyan brand panel, homepage treatment) ── */
body.ac-ind-light .ac-cta-wrapper-bg {
  background: var(--lt-page) !important;
}
body.ac-ind-light .ac-cta {
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%) !important;
}
body.ac-ind-light .ac-cta__glow {
  display: none !important;
}
body.ac-ind-light :is(
  .ac-cta__title, .ac-cta__heading, .ac-cta__subtitle, .ac-cta__reassurance, .ac-cta-note
) {
  color: var(--lt-ink) !important;
}
body.ac-ind-light .ac-cta__subtitle {
  color: var(--lt-grey) !important;
}
body.ac-ind-light .ac-cta .ac-btn--outline {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border-brand) !important;
}
body.ac-ind-light .ac-cta .ac-btn--outline:hover {
  color: var(--ac-primary) !important;
  border-color: var(--ac-primary) !important;
}
/* Coral conversion moment — same as the homepage final CTA */
body.ac-ind-light .ac-cta .ac-btn--cta-white {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6B5E 0%, var(--lt-attn) 100%) !important;
  border-color: transparent !important;
}
body.ac-ind-light .ac-cta .ac-btn--cta-white:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--lt-attn) 0%, var(--lt-attn-strong) 100%) !important;
  box-shadow: 0 10px 30px rgba(229, 72, 77, 0.35) !important;
  border-color: transparent !important;
}

/* ── Footer — homepage light footer treatment ── */
body.ac-ind-light .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body.ac-ind-light :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer a { color: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer a:hover { color: var(--ac-primary) !important; }
body.ac-ind-light .ac-footer a.ac-footer__email-link,
body.ac-ind-light .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer a.ac-pill-cta.ac-footer__map-pill {
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.18);
}
body.ac-ind-light .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body.ac-ind-light .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body.ac-ind-light .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body.ac-ind-light .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   5. SECTION DIVIDERS — the homepage's inset hairline between
      white bands (transparent for the first/last 9rem, matching
      the gutters). The band straight after the hero (landscape)
      is omitted, exactly like the homepage; the dark ROI / cyan
      CTA panels separate themselves.
   ============================================================ */
body.ac-ind-light { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body.ac-ind-light { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body.ac-ind-light { --ac-divider-inset: 1.5rem; } }

body.ac-ind-light :is(
  .ac-indv-friction,
  .ac-indv-capabilities,
  .ac-indv-related
) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) calc(100% - var(--ac-divider-inset)),
    transparent calc(100% - var(--ac-divider-inset))
  ) 1;
}

/* ============================================================
   6. PAGE-BOTTOM SECTIONS (added 2026-07-28): team → lead form
      → testimonials → FAQ, the Sydney / 20-hours-free stack
      appended after the related strip in
      templates/page-industry-retail.html. firm-team and lead-form
      carry their own 9rem gutters in their base styles; the
      others are aligned here. Mirrors ac-offer-system.css §1.
   ============================================================ */

/* ── Gutters: interior-system gives .ac-capp-leaders / .ac-capp-faq
      7rem — lift to the page's 9rem line (3rem ≤960, 1.25rem ≤600) ── */
body.ac-ind-light :is(
  .ac-capp-leaders,
  .ac-testimonials,
  .ac-indr-faq
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body.ac-ind-light :is(
    .ac-capp-leaders, .ac-testimonials, .ac-indr-faq
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body.ac-ind-light :is(
    .ac-capp-leaders, .ac-testimonials, .ac-indr-faq
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ── Vertical rhythm on the two bands without their own ──────── */
body.ac-ind-light :is(.ac-testimonials, .ac-indr-faq) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 960px) {
  body.ac-ind-light :is(.ac-testimonials, .ac-indr-faq) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body.ac-ind-light :is(.ac-testimonials, .ac-indr-faq) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* Testimonials: only the inner is capped at 1680 — the background
   curve SVG stays full-bleed (ac-offer-system recipe). */
body.ac-ind-light .ac-testimonials__inner {
  padding-left: 0;
  padding-right: 0;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow standard on the shared patterns' .racetrack-badge (the cyan
   pill base in style.css) — restate the plain-caps light spec used by
   every other eyebrow on this page. */
body.ac-ind-light .racetrack-badge {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--lt-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
}

/* FAQ: open item's chevron turns coral (homepage light rule) */
body.ac-ind-light .ac-capp-faq__trigger[aria-expanded="true"] .ac-capp-faq__icon {
  stroke: var(--lt-attn) !important;
}

/* ── Team band — the capability-page leadership section
      (ac-capp-leaders, pattern ind-retail-team.php): mirror the
      ac-capp-system treatment — 9rem gutters (in list §6 above),
      7rem rhythm, grid/header widened to the 1680 measure. Sits
      directly on the page white (user request 2026-07-28 —
      overriding the pattern's #F4F8FB ground), so it takes the
      same inset hairline divider as the other white bands. ── */
body.ac-ind-light .ac-capp-leaders {
  background: var(--lt-page) !important;
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) calc(100% - var(--ac-divider-inset)),
    transparent calc(100% - var(--ac-divider-inset))
  ) 1;
}
@media (max-width: 960px) {
  body.ac-ind-light .ac-capp-leaders {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body.ac-ind-light .ac-capp-leaders {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}
body.ac-ind-light .ac-capp-leaders__grid {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.ac-ind-light .ac-capp-leaders__header {
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Heading accent — the flat cyan .ac-text-accent doesn't match this
   page's headings; restate the ac-indv-accent teal gradient clip. */
body.ac-ind-light .ac-capp-leaders__title .ac-text-accent {
  background: linear-gradient(135deg, #07A9D1, #06CFC3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #07A9D1;
}

/* ── Our Solutions: closing row under the capability scroll —
      sentence left, "Discuss your project" pill right (retail only
      via hero_variant gate) ── */
body.ac-ind-light .ac-indv-capabilities__cta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  text-align: right;
}
body.ac-ind-light .ac-indv-capabilities__cta-copy {
  font-size: 20px;
  line-height: 1.65;
  color: var(--lt-grey);
  margin: 0;
}
body.ac-ind-light .ac-indv-capabilities__cta .ac-pill-cta {
  flex-shrink: 0;
}

/* ── Related Services: "See all capabilities" pill on its own row
      under the card grid, right-aligned (matches the Our Solutions
      closing row) ── */
body.ac-ind-light .ac-indv-related__cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: flex-end;
}
body.ac-ind-light .ac-indv-related__seeall {
  flex-shrink: 0;
  /* Dark variant: ink ground instead of the cyan gradient; the
     arrow circle flips to cyan so it keeps its contrast (base
     hover still turns it coral). */
  background: var(--lt-ink) !important;
  box-shadow: 0 4px 20px rgba(9, 32, 42, 0.22) !important;
}
body.ac-ind-light .ac-indv-related__seeall:hover {
  box-shadow: 0 6px 26px rgba(9, 32, 42, 0.32) !important;
}
body.ac-ind-light .ac-indv-related__seeall .ac-pill-cta__circle {
  background: #07A9D1;
}

/* ============================================================
   CASE STUDY BAND (.ac-indv-case — retail + banking)
   The capability pages' SINGLE-case-study design (ac-capp-system
   §5) recreated here: 1100px band, two columns — header (heading
   + subtitle) vertically centred beside ONE standard
   ac-impact-card (base card styles global in ac-homepage.unmin
   .css). Stacks header-first ≤960px. Chips + hover-reveal room
   follow the .ac-capp-cases recipe.
   ============================================================ */
body.ac-ind-light .ac-indv-case {
  background: var(--lt-page);
}
/* Band spans the shared 1680px shell measure so its edges align
   with the other bands at the 9rem page gutters (the capability
   pages run this band at 1100px, but here it must line up with
   the ac-indv-shell sections above and below). */
body.ac-ind-light .ac-indv-case__band {
  max-width: 1680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
body.ac-ind-light .ac-indv-case__header {
  order: 1;
  margin: 0;
  max-width: 640px;
}
body.ac-ind-light .ac-indv-case__header h2 {
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--lt-ink);
  margin: 0;
}
body.ac-ind-light .ac-indv-case__header p {
  font-size: 24px;
  line-height: 1.7;
  color: var(--lt-grey);
  margin: 20px 0 0;
}
body.ac-ind-light .ac-indv-case .ac-impact__list {
  order: 2;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
}
/* The strip sizes cards for a horizontal scroller (min(680px, 86%))
   — in the column the card fills its track instead. */
body.ac-ind-light .ac-indv-case .ac-impact-card {
  width: 100%;
  min-width: 0;
}
@media (max-width: 960px) {
  body.ac-ind-light .ac-indv-case__band {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 768px) {
  body.ac-ind-light .ac-indv-case__header h2 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}