/* ===========================================================
   Triveni Power - Canonical Button System
   --------------------------------------------------------
   Unified visual treatments for every CTA / button on the
   site. Per-section CSS files only own layout / spacing /
   positioning - all visual rules live here.

   Strategy: selector-grouped aliases preserve existing HTML.
   Legacy class names (e.g. .hero__btn, .def-btn--primary)
   are listed alongside the canonical .btn* class for the
   same treatment, so no markup changes are needed.

   Kinds:
     .btn--accent   - Triveni Orange tinted-glass  (PRIMARY)
     .btn--ghost    - transparent glass            (SECONDARY)
     .btn--outline  - outlined pill, hover-fill    (PAGE CTA on light)
     .btn--link     - text + arrow, no chrome      (INLINE)
     .btn--icon     - round 40-44px glass          (CAROUSEL NAV)

   Sizes:
     default        44px h
     --lg           52px h
     --sm           36px h

   Light mode: matched [data-theme="light"] overrides at the
   bottom of each section.

   Built on the 4-size type scale (11 / 14 / 16 / 30 px) and
   Triveni Orange (var(--accent)) from memory.md.
   =========================================================== */


/* =========================================================
   BASE - shared primitives (every kind inherits)
   ========================================================= */
.btn,
.btn--accent, .btn--ghost, .btn--outline, .btn--link,
/* legacy aliases */
.hero__btn, .hero__btn--primary, .hero__btn--ghost, .hero__btn--accent,
.au-hero__btn,
.connect__cta, .connect__cta--accent,
.positioning__cta, .positioning__cta--who,
.industries__more-pill, .industries__cta,
.proof__card-cta, .pr-card__cta, .prediction__cta,
.sheet__cta,
.def-btn, .def-btn--primary, .def-btn--ghost,
.id-btn, .id-btn--primary, .id-btn--ghost,
.pd-btn, .pd-btn--primary, .pd-btn--ghost,
.au-cta-btn, .au-cta-btn--primary, .au-cta-btn--outline,
.defence__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-m);
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* Suppress the diagonal sheen overlay - mirror existing
   hero__btn::before for canonical glass kinds */
.btn--ghost::before, .btn--accent::before,
.hero__btn::before, .au-hero__btn::before,
.connect__cta::before, .positioning__cta::before,
.industries__more-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.00) 30%,
    rgba(255, 255, 255, 0.00) 70%,
    rgba(255, 255, 255, 0.10) 100%);
  mix-blend-mode: overlay;
  z-index: -1;
}

/* Universal focus ring */
.btn:focus-visible, .btn--accent:focus-visible,
.btn--ghost:focus-visible, .btn--outline:focus-visible,
.btn--link:focus-visible, .btn--icon:focus-visible,
.hero__btn:focus-visible, .au-hero__btn:focus-visible,
.connect__cta:focus-visible, .positioning__cta:focus-visible,
.industries__more-pill:focus-visible, .industries__cta:focus-visible,
.proof__card-cta:focus-visible, .pr-card__cta:focus-visible,
.prediction__cta:focus-visible, .sheet__cta:focus-visible,
.def-btn:focus-visible, .id-btn:focus-visible, .pd-btn:focus-visible,
.au-cta-btn:focus-visible, .defence__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* =========================================================
   SIZE MODIFIERS
   ========================================================= */
.btn--lg,
.hero__btn, .hero__btn--primary, .hero__btn--ghost, .hero__btn--accent,
.au-hero__btn,
.connect__cta, .connect__cta--accent,
.positioning__cta, .positioning__cta--who,
.defence__cta {
  height: 52px;
  padding: 0 26px;
}

.btn--sm {
  height: 36px;
  padding: 0 18px;
  font-size: var(--fs-s);
}


/* =========================================================
   KIND: GHOST - transparent glass (default on dark surfaces)
   ========================================================= */
.btn--ghost,
.hero__btn,
.industries__more-pill,
/* page-specific ghost CTAs - inner product / industry / defence
   pages all have dark hero + CTA-strip sections, so the ghost
   button needs the glass-on-dark treatment (white text) here,
   not the outline-on-light treatment. */
.def-btn--ghost,
.id-btn--ghost,
.pd-btn--ghost {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.03) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
          backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.10);
}

.btn--ghost:hover,
.hero__btn:hover,
.industries__more-pill:hover,
.def-btn--ghost:hover,
.id-btn--ghost:hover,
.pd-btn--ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.50);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 60%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 32px rgba(255, 255, 255, 0.10),
    0 14px 40px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn--ghost:active,
.hero__btn:active,
.industries__more-pill:active,
.def-btn--ghost:active,
.id-btn--ghost:active,
.pd-btn--ghost:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    0 4px 14px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   KIND: ACCENT - Triveni Orange tinted-glass (primary)
   Rest ~0.85 alpha (solid feel with subtle glass), hover 1.0
   (fully opaque). Mobile rest defaults to 1.0 - see media
   query at the bottom of this block.
   ========================================================= */
.btn--accent,
.hero__btn--accent,
.connect__cta--accent,
.def-btn--primary,
.id-btn--primary,
.pd-btn--primary,
.au-cta-btn--primary,
.sheet__cta,
/* Promoted to the canonical orange primary so every page's main CTA matches
   the home hero (client direction). Ghost is now secondary-only. */
.hero__btn--primary,
.au-hero__btn,
.connect__cta,
.positioning__cta, .positioning__cta--who,
.defence__cta {
  color: #FFFFFF;
  background:
    linear-gradient(180deg,
      rgba(247, 162, 92, 0.88)  0%,
      rgba(245, 130, 32, 0.86)  55%,
      rgba(218, 111, 18, 0.88) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
          backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    inset 0 0 24px rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(218, 111, 18, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn--accent:hover,
.hero__btn--accent:hover,
.connect__cta--accent:hover,
.def-btn--primary:hover,
.id-btn--primary:hover,
.pd-btn--primary:hover,
.au-cta-btn--primary:hover,
.sheet__cta:hover,
.hero__btn--primary:hover,
.au-hero__btn:hover,
.connect__cta:hover,
.positioning__cta:hover, .positioning__cta--who:hover,
.defence__cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.50);
  background:
    linear-gradient(180deg,
      rgb(250, 179, 120) 0%,
      rgb(245, 143,  51) 55%,
      rgb(197, 102,  20) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    inset 0 0 32px rgba(255, 255, 255, 0.06),
    0 14px 40px rgba(218, 111, 18, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Mobile: rest state is fully opaque (no transparency).
   Banner CTAs on small screens should read as solid orange
   regardless of whatever sits behind them. */
@media (max-width: 767px) {
  .btn--accent,
  .hero__btn--accent,
  .connect__cta--accent,
  .def-btn--primary,
  .id-btn--primary,
  .pd-btn--primary,
  .au-cta-btn--primary,
  .sheet__cta {
    background:
      linear-gradient(180deg,
        rgb(247, 162, 92)  0%,
        rgb(245, 130, 32)  55%,
        rgb(218, 111, 18) 100%);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

.btn--accent:active,
.hero__btn--accent:active,
.connect__cta--accent:active,
.def-btn--primary:active,
.id-btn--primary:active,
.pd-btn--primary:active,
.au-cta-btn--primary:active,
.sheet__cta:active,
.hero__btn--primary:active,
.au-hero__btn:active,
.connect__cta:active,
.positioning__cta:active, .positioning__cta--who:active,
.defence__cta:active {
  transform: translateY(0);
  background:
    linear-gradient(180deg,
      rgba(245, 143,  51, 0.73) 0%,
      rgba(218, 111,  18, 0.71) 55%,
      rgba(176,  90,  14, 0.73) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 0 18px rgba(0, 0, 0, 0.10),
    0 4px 14px rgba(218, 111, 18, 0.26);
}


/* =========================================================
   KIND: OUTLINE - outlined pill, hover-fill
   For CTAs that sit on warm-paper / light surfaces.
   ========================================================= */
.btn--outline,
.au-cta-btn--outline {
  color: #231F20;
  background: transparent;
  border: 1.5px solid rgba(35, 31, 32, 0.45);
  text-shadow: none;
}

.btn--outline:hover,
.au-cta-btn--outline:hover {
  transform: translateY(-1px);
  color: #FFFFFF;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 10px 28px rgba(218, 111, 18, 0.28);
}

.btn--outline:active,
.au-cta-btn--outline:active {
  transform: translateY(0);
  background: #C56614;
  border-color: #C56614;
}


/* =========================================================
   KIND: LINK - text + arrow, no chrome
   Inline CTAs inside section copy.
   ========================================================= */
.btn--link,
.industries__cta,
.proof__card-cta,
.pr-card__cta,
.prediction__cta {
  height: auto;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-shadow: none;
  overflow: visible;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ind-fg, currentColor);
}
/* Proof case-study cards have a fixed white background in BOTH themes, so the
   CTA must use dark ink. Without this, dark mode falls back to currentColor
   (near-white body text) and the link disappears on the white card. */
.proof__card-cta { color: #231F20; }
/* Hover: nudge the arrow right + underline subtly */
.btn--link:hover,
.industries__cta:hover,
.proof__card-cta:hover,
.pr-card__cta:hover,
.prediction__cta:hover {
  color: var(--accent);
}
.btn--link:hover > span[aria-hidden="true"],
.industries__cta:hover > span[aria-hidden="true"],
.proof__card-cta:hover > span[aria-hidden="true"],
.pr-card__cta:hover > span[aria-hidden="true"] {
  transform: translateX(4px);
}
.btn--link > span[aria-hidden="true"],
.industries__cta > span[aria-hidden="true"],
.proof__card-cta > span[aria-hidden="true"],
.pr-card__cta > span[aria-hidden="true"] {
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}


/* =========================================================
   KIND: ICON - round 40-44px (carousel nav)
   ========================================================= */
.btn--icon,
.proof__nav-btn,
.aw-nav-btn,
.cert-nav-btn,
.leadership__nav-btn,
.global__nav-btn,
.prediction__nav-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  /* Centre the SVG inside the round button. Without these the
     icon sat in default block flow at the top-left of the button
     and looked off-centre, especially on mobile (Awards + Certifications). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.18);
}
.btn--icon::before,
.proof__nav-btn::before,
.aw-nav-btn::before,
.cert-nav-btn::before,
.leadership__nav-btn::before,
.global__nav-btn::before {
  display: none;  /* no diagonal sheen on round icon buttons */
}
.btn--icon > svg,
.proof__nav-btn > svg,
.aw-nav-btn > svg,
.cert-nav-btn > svg,
.leadership__nav-btn > svg,
.global__nav-btn > svg,
.prediction__nav-btn > svg {
  width: 18px;
  height: 18px;
  display: block;
}

.btn--icon:hover,
.proof__nav-btn:hover,
.aw-nav-btn:hover,
.cert-nav-btn:hover,
.leadership__nav-btn:hover,
.global__nav-btn:hover,
.prediction__nav-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(247, 162, 92, 0.30) 0%, rgba(245, 130, 32, 0.18) 100%);
  color: #FFFFFF;
}

.btn--icon:active,
.proof__nav-btn:active,
.aw-nav-btn:active,
.cert-nav-btn:active,
.leadership__nav-btn:active,
.global__nav-btn:active,
.prediction__nav-btn:active {
  transform: translateY(0);
}


/* =========================================================
   LIGHT MODE - paired overrides for each kind
   ========================================================= */

/* GHOST → softer white-on-paper glass */
[data-theme="light"] .btn--ghost,
[data-theme="light"] .hero__btn,
[data-theme="light"] .industries__more-pill,
[data-theme="light"] .def-btn--ghost,
[data-theme="light"] .id-btn--ghost,
[data-theme="light"] .pd-btn--ghost {
  color: #231F20;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.58) 60%, rgba(255, 255, 255, 0.48) 100%);
  border-color: rgba(35, 31, 32, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 6px 18px rgba(0, 0, 0, 0.10);
  text-shadow: none;
}
[data-theme="light"] .btn--ghost:hover,
[data-theme="light"] .hero__btn:hover,
[data-theme="light"] .industries__more-pill:hover,
[data-theme="light"] .def-btn--ghost:hover,
[data-theme="light"] .id-btn--ghost:hover,
[data-theme="light"] .pd-btn--ghost:hover {
  border-color: rgba(245, 130, 32, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.74) 60%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 28px rgba(218, 111, 18, 0.18);
}

/* ACCENT → slightly more opaque on light so the orange still reads */
[data-theme="light"] .btn--accent,
[data-theme="light"] .hero__btn--accent,
[data-theme="light"] .connect__cta--accent,
[data-theme="light"] .def-btn--primary,
[data-theme="light"] .id-btn--primary,
[data-theme="light"] .pd-btn--primary,
[data-theme="light"] .au-cta-btn--primary,
[data-theme="light"] .sheet__cta,
/* Promoted primary CTAs - keep them orange in light mode too. */
[data-theme="light"] .hero__btn--primary,
[data-theme="light"] .au-hero__btn,
[data-theme="light"] .connect__cta,
[data-theme="light"] .positioning__cta, [data-theme="light"] .positioning__cta--who,
[data-theme="light"] .defence__cta {
  color: #FFFFFF;
  background:
    linear-gradient(180deg,
      rgba(247, 162, 92, 0.80) 0%,
      rgba(245, 130, 32, 0.77) 55%,
      rgba(218, 111, 18, 0.80) 100%);
  border-color: rgba(218, 111, 18, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 28px rgba(218, 111, 18, 0.22);
}
[data-theme="light"] .btn--accent:hover,
[data-theme="light"] .hero__btn--accent:hover,
[data-theme="light"] .connect__cta--accent:hover,
[data-theme="light"] .def-btn--primary:hover,
[data-theme="light"] .id-btn--primary:hover,
[data-theme="light"] .pd-btn--primary:hover,
[data-theme="light"] .au-cta-btn--primary:hover,
[data-theme="light"] .sheet__cta:hover,
[data-theme="light"] .hero__btn--primary:hover,
[data-theme="light"] .au-hero__btn:hover,
[data-theme="light"] .connect__cta:hover,
[data-theme="light"] .positioning__cta:hover, [data-theme="light"] .positioning__cta--who:hover,
[data-theme="light"] .defence__cta:hover {
  background:
    linear-gradient(180deg,
      rgba(250, 179, 120, 0.95) 0%,
      rgba(245, 143,  51, 0.92) 55%,
      rgba(197, 102,  20, 0.95) 100%);
}

/* OUTLINE → already dark-text-on-light by default; no override needed */

/* LINK → dark text reading nicely on warm paper */
[data-theme="light"] .btn--link,
[data-theme="light"] .industries__cta,
[data-theme="light"] .proof__card-cta,
[data-theme="light"] .pr-card__cta,
[data-theme="light"] .prediction__cta {
  color: #231F20;
}
[data-theme="light"] .btn--link:hover,
[data-theme="light"] .industries__cta:hover,
[data-theme="light"] .proof__card-cta:hover,
[data-theme="light"] .pr-card__cta:hover,
[data-theme="light"] .prediction__cta:hover {
  color: var(--accent);
}

/* ICON → dark on light glass */
[data-theme="light"] .btn--icon,
[data-theme="light"] .proof__nav-btn,
[data-theme="light"] .aw-nav-btn,
[data-theme="light"] .cert-nav-btn,
[data-theme="light"] .leadership__nav-btn,
[data-theme="light"] .global__nav-btn,
[data-theme="light"] .prediction__nav-btn {
  color: #231F20;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.72) 100%);
  border-color: rgba(35, 31, 32, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 18px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .btn--icon:hover,
[data-theme="light"] .proof__nav-btn:hover,
[data-theme="light"] .aw-nav-btn:hover,
[data-theme="light"] .cert-nav-btn:hover,
[data-theme="light"] .leadership__nav-btn:hover,
[data-theme="light"] .global__nav-btn:hover,
[data-theme="light"] .prediction__nav-btn:hover {
  color: #FFFFFF;
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(247, 162, 92, 0.90) 0%, rgba(245, 130, 32, 0.85) 100%);
}


/* =========================================================
   PER-SECTION OVERRIDES kept here as a single audit point.
   These exist because certain placements need different
   sizing or color that the kind-defaults don't cover.
   ========================================================= */

/* Industries inline CTA - plain text + arrow, no pill, no chrome.
   On hover the text color flips to the row's --ind-accent (which
   is always set to a colour distinct from --ind-fg per row, so
   the change is always visible). Arrow nudges right on hover.
   Same look on mobile and desktop. */
.industries__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ind-fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-m);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;          /* allow wrap if column is narrow */
  overflow: visible;
  margin-top: 14px;
  transition: color 260ms var(--ease-out);
}
.industries__cta:hover {
  color: var(--ind-accent);
}
.industries__cta > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.industries__cta:hover > span[aria-hidden="true"] {
  transform: translateX(4px);
}
[data-theme="light"] .industries__cta { color: var(--ind-fg); }
[data-theme="light"] .industries__cta:hover { color: var(--ind-accent); }

/* Prediction CTA carries a leading orange icon badge */
.prediction__cta {
  color: var(--accent);
  font-size: var(--fs-m);
  gap: 14px;
}
[data-theme="light"] .prediction__cta { color: var(--accent); }