/* Page-level layout, following the Accenture design system's homepage
   patterns (see tokens.css): full-bleed hero, the "O que fazemos" card rail,
   split section headings, and the mixed-media-and-text block. Background
   alternation (.section--soft) lives in base.css; shared component patterns
   (bento, tag-grid, trace, illustrations…) live in components.css.
   Rule of the system: no two tinted bands ever sit back to back. */

/* one easing for every "reveal" movement, from the design system's
   card transitions (cubic-bezier(0.85, 0, 0, 1), 550ms) */
:root {
  --ease-ds: cubic-bezier(0.85, 0, 0, 1);
  --dur-ds: 550ms;
}

/* ---------- photo layers (hero, banners, cards, media-text, contact) ----------
   The photo URL comes in as a --bg-img custom property on an inline style
   (templates, via url_for) so the asset path stays server-rendered. It is
   painted on ::before rather than on the element itself so CSS filters can
   re-grade it for the black/blue palette without touching the text:
     --invert  light, glassy renders → inverted to dark, hue turned back to blue
     --tint    renders that are already dark and blue → only lightly graded
     --photo   real photography (people) → desaturated and darkened
   ::after then carries the legibility scrim. */
.bg-media {
  position: relative;
  overflow: hidden;
  background-color: var(--ds-bg);
}
.bg-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg-img, none) var(--bg-pos, center) / cover no-repeat;
}
.bg-media--invert::before {
  filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(0.9) contrast(1.05);
}
.bg-media--tint::before {
  filter: saturate(1.1) brightness(0.95);
}
.bg-media--photo::before {
  filter: grayscale(1) brightness(0.55) contrast(1.1);
}
.bg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg-media > * {
  position: relative;
  z-index: 1;
}

/* ---------- split section heading ----------
   A section's own top-level heading (direct child of its container, or of a
   photo banner) splits into title-left / intro-right on wide screens, the
   way the design system sets its big statements. Headings nested inside a
   custom layout (methodology intro, knowledge editorial, about…) keep the
   stacked default. */
@media (min-width: 1024px) {
  .section > .container > .section-heading--left,
  .section-banner > .container > .section-heading--left {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-xxl);
    align-items: end;
    max-width: none;
  }
  .section > .container > .section-heading--left > .section-heading__eyebrow,
  .section-banner > .container > .section-heading--left > .section-heading__eyebrow,
  .section > .container > .section-heading--left > .section-heading__title,
  .section-banner > .container > .section-heading--left > .section-heading__title {
    grid-column: 1;
  }
  .section > .container > .section-heading--left > .section-heading__intro,
  .section-banner > .container > .section-heading--left > .section-heading__intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
  }
  .section > .container > .section-heading--left > .section-heading__intro + .section-heading__intro,
  .section-banner > .container > .section-heading--left > .section-heading__intro + .section-heading__intro {
    grid-row: auto;
    margin-top: var(--s-md);
  }
}

/* ---------- hero (sections/hero.html) ----------
   Mobile first: one column of text over the animated particle background,
   32px below the fixed header; from 1024px the text takes the left 55% and
   the cloud the right side, 48px below the header. Height follows the content (no 100svh), so nothing gets cut on
   short screens. Every spacing is a multiple of 8. Type: H1 and
   subheadline on a 1.25 modular scale, fluid with clamp(). Color: black
   canvas (60%), logo blue in the particles and glow (30%), and the filled CTA
   as the only accent (10%) — the highest-contrast element of the section. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-bg);
  color: var(--ink);
  padding: calc(var(--header-space) + 32px) 0 48px;
}
/* soft blue glow behind the particle cloud (and the fallback without WebGL) */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 55% at 72% 50%, rgba(0, 168, 240, 0.16), transparent 70%);
}
.hero__grid {
  display: grid;
  gap: 48px;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 16px;
  border: 1px solid rgba(0, 168, 240, 0.45);
  background: rgba(0, 168, 240, 0.08);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ds-primary-text);
}
.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-primary);
}

.hero__title {
  max-width: 20ch;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__sub {
  max-width: 60ch;
  margin: 0 0 32px;
  font-size: clamp(1rem, 1vw + 0.875rem, 1.25rem);
  line-height: 1.55;
  color: var(--body);
}

/* CTAs: full width and stacked on phones, side by side from 600px */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0 0 32px;
}
.hero__cta {
  width: 100%;
  min-height: 48px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
}
.hero .hero__cta--secondary {
  /* white at 48% over black ≈ 4.6:1 — above the 3:1 non-text minimum */
  border-color: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  font-weight: 500;
}
.hero .hero__cta--secondary::after {
  display: none;
}
.hero .hero__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ink);
  color: var(--ink);
}
.hero__cta:active {
  transform: translateY(1px);
}
.hero__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (min-width: 600px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
  .hero__cta {
    width: auto;
  }
}

/* animated background: the WebGL particle cloud fills the hero; the scrim
   keeps the text side dark enough for AA contrast whatever the particles
   are doing behind it */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.1) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
}
/* phones and tablets: the hero fits one screen — tighter spacing, slimmer
   CTAs, and the particle cloud stays behind the content instead of
   getting its own room below it; on taller phones the hero still fills
   the screen (100svh) so the cloud shows under the CTAs */
@media (max-width: 1023px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: calc(var(--header-space) + 20px) 0 32px;
  }
  .hero__badge {
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 13px;
  }
  .hero__title {
    margin-bottom: 16px;
  }
  .hero__sub {
    margin-bottom: 24px;
    font-size: 15.5px;
  }
  .hero__actions {
    gap: 12px;
    margin-bottom: 0;
  }
  .hero__cta {
    min-height: 44px;
    padding: 12px 20px;
  }
}

@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    /* a bit taller on desktop: near the full screen, between 760 and 920px */
    min-height: clamp(760px, 94svh, 920px);
    padding: calc(var(--header-space) + 48px) 0 64px;
  }
  .hero__grid {
    width: 100%;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 32px;
  }
  .hero__scrim {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 70%);
  }
}
@media (min-width: 1920px) {
  .hero {
    padding-top: calc(var(--header-space) + 64px);
  }
}

/* entrance: staggered fade + 12px rise, 320ms ease-out, transform and
   opacity only; off entirely for reduced motion */
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-in {
  animation: heroIn 320ms ease-out both;
  animation-delay: calc(var(--d, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .hero-in {
    animation: none;
  }
}

/* ---------- "O que fazemos" card rail ----------
   Centered heading (one line on desktop), then a horizontal scroll-snap
   track kept inside the container (overflow clipped at the page margin),
   with prev/next on its two ends. Its own deep-navy band sets it apart from the black hero
   above and the grey "Quem somos" below. Photo cards and flat color cards
   alternate; on hover-capable devices the description slides up over the
   card, on touch it is simply always shown. */
.highlights,
.section-group--navy {
  background: radial-gradient(70% 60% at 50% 0%, rgba(0, 120, 200, 0.18), transparent 70%), #06111c;
}
.highlights__heading {
  margin-bottom: var(--s-xl);
}
.highlights__heading .section-heading__eyebrow::after {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  background: var(--ds-primary);
}
.highlights__heading .section-heading__title {
  max-width: 24ch;
}
/* prev/next sit on the two ends of the track, vertically centred and
   half over the page margin; hidden on touch-size screens (swipe) */
.rail {
  position: relative;
}
.rail__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(6, 17, 28, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rail__arrow--prev {
  left: -22px;
}
.rail__arrow--next {
  right: -22px;
}
.rail__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .rail__arrow {
    display: none;
  }
}
/* one line on desktop, where the container is wide enough for it */
@media (min-width: 1200px) {
  .highlights__heading {
    max-width: none;
  }
  .highlights__heading .section-heading__title {
    max-width: none;
    white-space: nowrap;
  }
}
.hcards {
  display: grid;
  grid-auto-flow: column;
  /* whole cards only: 4 per view from 1200px, 3 from 960px, 2 from 600px; on phones the
     next card peeks in at the margin as a swipe hint */
  --per-view: 1.25;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--s-md)) / var(--per-view));
  gap: var(--s-md);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hcards::-webkit-scrollbar {
  display: none;
}
@media (min-width: 600px) {
  .hcards {
    --per-view: 2;
  }
}
@media (min-width: 960px) {
  .hcards {
    --per-view: 3;
  }
}
@media (min-width: 1200px) {
  .hcards {
    --per-view: 4;
  }
}
.hcards__item {
  scroll-snap-align: start;
}
.hcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  /* fixed height so opening a card never shifts the rail */
  height: 480px;
  padding: var(--s-lg);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.hcard--band {
  background: var(--ds-band);
  color: var(--ds-primary-ink);
}
.hcard--deep {
  background: var(--ds-band-deep);
}
.hcard--surface {
  background: var(--ds-surface);
  border: 1px solid var(--hairline);
}
/* faint grid on the flat cards, echoing the photo cards' texture */
.hcard--band::before,
.hcard--deep::before,
.hcard--surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(200deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.hcard--band::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 1px, transparent 1px);
}
.hcard--media::before {
  transition: transform var(--dur-ds) var(--ease-ds);
}
.hcard--media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.92) 100%);
}
.hcard__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hcard--media .hcard__label,
.hcard--deep .hcard__label,
.hcard--surface .hcard__label {
  color: var(--ds-primary-text);
}
.hcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.hcard__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2vw, 28px);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--fw-heading);
}
/* the description + keywords: collapsed until the card is clicked */
.hcard__more {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: max-height var(--dur-ds) var(--ease-ds), opacity var(--dur-ds) var(--ease-ds), transform var(--dur-ds) var(--ease-ds);
}
.hcard[aria-expanded="true"] .hcard__more {
  max-height: 20em;
  opacity: 1;
  transform: none;
}
.hcard__text {
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcard__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hcard__key {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.hcard--band .hcard__key {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.28);
  color: var(--ds-primary-ink);
}
/* open photo cards: darker scrim so the text reads over the image */
.hcard--media::after {
  transition: background var(--dur-ds) var(--ease-ds);
}
.hcard--media[aria-expanded="true"]::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.94) 100%);
}
@media (hover: hover) {
  .hcard--media:hover::before {
    transform: scale(1.06);
  }
}
.hcard:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .hcard__more,
  .hcard--media::before {
    transition: none;
  }
}

/* ---------- mixed media + text (Academy) ---------- */
.media-text {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
  margin-bottom: var(--s-xl);
}
@media (min-width: 960px) {
  .media-text {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--s-xxl);
  }
}
.media-text__media {
  min-height: clamp(220px, 28vw, 380px);
}
.media-text__media::after {
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5));
}
.media-text__body .section-heading {
  margin-bottom: 0;
}

/* ---------- section banner: full-bleed photo band behind a section's
   heading only (Agentic AI, Integrações, Arquitetura) — the grid/panel
   content below stays on the plain section surface so busy photos never sit
   behind a wall of small cards. The photo itself is painted by .bg-media
   (above); the --dark/--light modifiers only pick the legibility scrim. */
.business-operations,
.integrations {
  padding-top: 0;
}
.section-banner {
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 44vw, 560px);
  padding: var(--s-section) 0 var(--s-xxl);
  margin-bottom: var(--s-xl);
}
.section-banner > .container {
  width: 100%;
}
.section-banner .section-heading {
  margin-bottom: 0;
}
.section-banner--dark::after,
.section-banner--light::after {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
}


/* small blue label above a block title (problem strip) */
.practice__eyebrow {
  display: block;
  margin-bottom: var(--s-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ds-primary-text);
}

/* ---------- problem strip (top of #arquitetura) ---------- */
.problem-strip {
  display: grid;
  gap: var(--s-lg);
  margin-bottom: var(--s-xl);
  padding: var(--pad-card);
  background: var(--ds-surface);
  border-left: 3px solid var(--ds-primary);
}
@media (min-width: 960px) {
  .problem-strip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-xxl);
    align-items: center;
  }
}
.problem-strip__title {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--ink);
  letter-spacing: var(--tracking-heading);
}
.problem-strip__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}
.problem-strip__signals {
  margin: 0;
}

/* architecture steps: one row of five on desktop instead of a scroller */
@media (min-width: 1000px) {
  .architecture-narrative__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
  .architecture-narrative__steps .architecture-step {
    padding: var(--s-md);
  }
  .architecture-narrative__steps .architecture-step__desc {
    font-size: 15px;
  }
}

/* ---------- academy: belts tighter, event band closes the section ---------- */
.academy .media-text {
  margin-bottom: var(--s-xl);
}
.academy-belt {
  padding: var(--s-lg);
}
.academy .ai-week {
  display: grid;
  gap: var(--s-lg);
  margin-top: var(--s-xxl);
  padding: clamp(24px, 4.4vw, 56px);
}
@media (min-width: 960px) {
  .academy .ai-week {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-xxl);
    align-items: end;
  }
}
.academy .ai-week__title {
  font-size: clamp(28px, 3vw, 38px);
}
.academy .ai-week__intro {
  margin: 0;
  max-width: 60ch;
}
.academy .ai-week__topics {
  justify-content: flex-start;
  margin-bottom: var(--s-lg);
}

/* ---------- team: square portraits, two per row on phones ---------- */
.team-grid {
  margin-bottom: 0;
}
.team-card__media {
  aspect-ratio: 1 / 1;
}
@media (max-width: 639px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-lg) var(--s-md);
  }
  .team-card__name {
    font-size: 19px;
  }
  .team-card__role {
    font-size: 11px;
  }
}

/* ---------- phones: card lists become swipe rails ----------
   Stacked one under the other these lists were most of the mobile page's
   height; side by side with scroll-snap they take one card's height, and
   the next card peeking in from the right says there is more. */
@media (max-width: 759px) {
  .architecture-narrative__steps,
  .academy__belts,
  .ecosystem-grid {
    display: flex;
    flex-direction: row;
    gap: var(--s-md);
    margin-inline: -20px;
    padding: 0 20px var(--s-sm);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .architecture-narrative__steps::-webkit-scrollbar,
  .academy__belts::-webkit-scrollbar,
  .ecosystem-grid::-webkit-scrollbar {
    display: none;
  }
  .architecture-narrative__steps > *,
  .academy__belts > *,
  .ecosystem-grid > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .architecture-narrative__steps .architecture-step {
    background: var(--ds-surface);
  }
}

/* ---------- section groups (index.html) ----------
   The page reads as six sections: each .section-group is one background
   band holding one or more content blocks (.section). Inside a group the
   blocks are separated by a container-width hairline instead of a change
   of background, and the space between them is the normal section rhythm,
   not double it. */
.section-group--soft {
  background: var(--tint-blue);
}
/* network mesh behind a whole group (Quem somos + team). net-wave.js draws
   it on a canvas, rippling like a slow wave (.is-live); without JS this
   static grid of hairlines and nodes stays. */
.section-group--net {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.net-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 196, 248, 0.18) 1.2px, transparent 1.8px),
    linear-gradient(rgba(0, 168, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 240, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -20px -20px, 0 0, 0 0;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.net-bg.is-live {
  background: none;
}
.net-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.section-group > .section + .section:not(.section--contact) {
  padding-top: 0;
}
/* the contact card is its own frame: no hairline, just the bottom rhythm
   of the section above */
.section-group > .section + .section--contact {
  padding-top: 0;
}
/* the "Meet our team" pill already separates Quem somos from the team:
   no hairline, and a tighter join once the team is open */
.section-group--net > .section + .section.team:not(.section--contact)::before {
  display: none;
}
.about:has([data-team-toggle][aria-expanded="true"]) {
  padding-bottom: var(--s-xl);
}
.section-group > .section + .section:not(.section--contact)::before {
  content: "";
  display: block;
  width: min(var(--container), calc(100% - 40px));
  height: 1px;
  margin: 0 auto var(--s-section);
  background: var(--hairline);
}
@media (min-width: 768px) {
  .section-group > .section + .section:not(.section--contact)::before {
    width: min(var(--container), calc(100% - 64px));
  }
}

/* ---------- cases page (cases.html) ----------
   Linked from the value cards in "Quem somos". Uses the site's own pieces
   (grey band with the network grid, blue eyebrow with its dash, accent word
   in blue, #202020 cards) with a case-study layout: key figures in a side
   column, the story as running text, a ruled table. */
.section.cases-hero {
  padding-top: calc(var(--header-space) + clamp(24px, 4vw, 56px));
}
.cases-hero .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cases-hero__index {
  align-self: stretch;
}
.cases-hero__title {
  max-width: 18ch;
  margin: var(--s-md) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: var(--fw-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}
.cases-hero__intro {
  max-width: 60ch;
  margin: var(--s-lg) 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}
.cases-hero__index {
  display: grid;
  gap: var(--s-md);
  margin: var(--s-xxl) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .cases-hero__index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .cases-hero__index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cases-hero__index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-lg);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.55);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cases-hero__index a:hover,
.cases-hero__index a:focus-visible {
  border-color: var(--ds-primary);
  background: rgba(0, 168, 240, 0.08);
}
.cases-hero__num {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ds-primary-text);
  font-variant-numeric: tabular-nums;
}
.cases-hero__name {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
}
.cases-hero__name strong,
.cases-pillar__title strong {
  font-weight: var(--fw-heading);
  color: var(--ds-primary-text);
}
.cases-hero__arrow {
  color: var(--muted);
}

.cases-pillar {
  scroll-margin-top: 80px;
}
.cases-pillar__head {
  max-width: 720px;
  margin-bottom: var(--s-xl);
}
.cases-pillar__title {
  margin: var(--s-sm) 0 var(--s-md);
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}
.cases-pillar__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}
.cases-pillar__empty {
  margin: 0;
  padding: var(--pad-card);
  border: 1px dashed var(--hairline);
  color: var(--muted);
}
/* hairline between value blocks, inset to the content width */
.cases-pillar + .cases-pillar {
  padding-top: 0;
}
.cases-pillar + .cases-pillar .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--s-section);
  background: var(--hairline);
}

.case {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--ds-primary);
  background: var(--ds-surface);
}
.case + .case {
  margin-top: var(--s-xl);
}
.case__head {
  max-width: 820px;
  margin-bottom: var(--s-xl);
}
.case__meta {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ds-primary-text);
}
.case__title {
  margin: var(--s-sm) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--ink);
}
.case__context {
  margin: var(--s-md) 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}

.case__layout {
  display: grid;
  /* one shrinkable column on phones: the table scrolls inside it */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 960px) {
  .case__layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--s-xxl);
  }
  .case__figures {
    position: sticky;
    top: 96px;
    align-self: start;
    padding-right: var(--s-lg);
    border-right: 1px solid var(--hairline);
  }
}
.case__figures dl {
  display: grid;
  gap: var(--s-lg);
  margin: 0;
}
@media (min-width: 600px) and (max-width: 959px) {
  .case__figures dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.case__figure dt {
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: var(--fw-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--ds-primary-text);
  font-variant-numeric: tabular-nums;
}
.case__figure dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
}

.case__main {
  max-width: 760px;
}
.case__part + .case__part,
.case__table + .case__part,
.case__part + .case__table {
  margin-top: var(--s-xl);
}
.case__part h4,
.case__table figcaption {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--fw-heading);
  color: var(--ink);
}
.case__part p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
}
.case__part p + p {
  margin-top: var(--s-md);
}

.case__table {
  margin: 0;
}
.case__table-scroll {
  overflow-x: auto;
}
.case__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.case__table th,
.case__table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  color: var(--body);
}
.case__table thead th {
  border-bottom: 2px solid var(--ds-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.case__table tbody th {
  font-weight: 500;
  color: var(--ink);
}
/* the "with AI" column reads first, the gain in the accent */
.case__table td:nth-child(3) {
  font-weight: 600;
  color: var(--ink);
}
.case__table td:nth-child(4) {
  font-weight: 600;
  color: var(--ds-primary-text);
}
.case__table small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.case__note {
  margin: var(--s-sm) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- shared by the inner pages (trust.html, discovery.html) ----------
   .page-hero: a photo banner like the home hero (dark gradient over the
   image so the copy reads); .page-heading: count + title for a list. */
/* the fixed header (and the sponsor strip) sits over the top: clear it
   like the home hero does (--header-space) */
.page-hero {
  padding: calc(var(--header-space) + clamp(24px, 4vw, 56px)) 0 clamp(56px, 7vw, 104px);
}
.page-hero::after {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.9) 100%);
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-hero__title {
  max-width: 14ch;
  margin: var(--s-md) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(42px, 6.4vw, 88px);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: #fff;
}
.page-hero__title--long {
  max-width: 20ch;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
}
.page-hero__lead {
  max-width: 40ch;
  margin: var(--s-lg) 0 0;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.45;
  color: #fff;
}
.page-hero__text {
  max-width: 58ch;
  margin: var(--s-md) 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}

.page-heading {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  max-width: 820px;
  margin-bottom: var(--s-xl);
}
.page-heading__title {
  max-width: 22ch;
  margin: var(--s-sm) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  text-wrap: balance;
}
.page-heading .page-heading__title {
  max-width: none;
  margin: 0;
}

/* ---------- Agentes de IA confiáveis (trust.html) ---------- */

.trust-risks__grid {
  display: grid;
  gap: var(--s-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .trust-risks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .trust-risks__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.risk-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-lg);
  border: 1px solid var(--hairline);
  background: var(--ds-surface);
  transition: border-color 0.25s ease;
}
.risk-card:hover {
  border-color: rgba(255, 87, 87, 0.5);
}
.risk-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-md);
}
.risk-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 87, 87, 0.45);
  background: rgba(255, 87, 87, 0.08);
  color: var(--ds-danger);
  transition: box-shadow 0.6s ease;
}
.risk-card__icon .icon {
  width: 22px;
  height: 22px;
}
.risk-card.is-visible .risk-card__icon {
  box-shadow: 0 0 0 4px rgba(255, 87, 87, 0.08), 0 0 18px rgba(255, 87, 87, 0.25);
}
.risk-card__num {
  font-size: 13px;
  color: var(--muted);
}
.risk-card__title {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: var(--fw-heading);
  line-height: 1.3;
  color: var(--ink);
}
.risk-card__text {
  font-size: 15px;
  --lh: 1.6;
  color: var(--body);
}

.trust-controls__grid {
  display: grid;
  gap: var(--s-xl) var(--s-xxl);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .trust-controls__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .trust-controls__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.control-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-md);
  align-items: start;
}
.control-item__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 168, 240, 0.5);
  background: rgba(0, 168, 240, 0.1);
  color: var(--ds-primary-text);
}
.control-item__icon .icon {
  width: 24px;
  height: 24px;
}
.control-item__title {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--fw-heading);
  line-height: 1.3;
  color: #fff;
}
.control-item__text {
  font-size: 15px;
  --lh: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.control-item__icon {
  transition: box-shadow 0.6s ease;
}
.control-item.is-visible .control-item__icon {
  box-shadow: 0 0 0 4px rgba(0, 168, 240, 0.1), 0 0 20px rgba(0, 168, 240, 0.35);
}

/* the hand-over cases on the brand-blue band (black text, per tokens.css) */
.trust-escalation {
  padding: clamp(40px, 5vw, 72px) 0;
  background: var(--ds-band);
  color: var(--ds-primary-ink);
}
.trust-escalation__inner {
  display: grid;
  gap: var(--s-xl);
}
@media (min-width: 960px) {
  .trust-escalation__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s-xxl);
    align-items: center;
  }
}
.trust-escalation__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: var(--fw-display);
  line-height: 1.1;
}
.trust-escalation__intro {
  margin: var(--s-md) 0 0;
  font-size: 17px;
  line-height: 1.55;
}
.trust-escalation__list {
  display: grid;
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .trust-escalation__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.trust-escalation__list li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.trust-escalation__list .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ds-primary-text);
}

.trust-closing__grid {
  display: grid;
  gap: var(--s-xl);
}
@media (min-width: 960px) {
  .trust-closing__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-xxl);
    align-items: start;
  }
}
.trust-closing__title {
  margin: var(--s-md) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: var(--fw-display);
  line-height: 1.05;
  color: var(--ink);
}
.trust-closing__text {
  margin: var(--s-lg) 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}
.trust-closing__label {
  margin: 0 0 var(--s-md);
  font-weight: 600;
  color: var(--ink);
}
.trust-closing__approach {
  display: grid;
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .trust-closing__approach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.trust-closing__approach li {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--ds-primary);
  background: var(--ds-surface);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.trust-closing__approach .icon {
  width: 24px;
  height: 24px;
  color: var(--ds-primary-text);
}
.trust-closing__more {
  display: grid;
  gap: var(--s-md) var(--s-xxl);
  margin-top: var(--s-xxl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 960px) {
  .trust-closing__more {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.trust-closing__more p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}
.trust-statement {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
  margin: var(--s-xxl) 0 0;
  padding: clamp(32px, 5vw, 64px);
  background: var(--ds-band-deep);
}
@media (min-width: 960px) {
  .trust-statement {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-xxl);
  }
}
.trust-statement__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: #fff;
}
.trust-statement__cta {
  justify-self: start;
  white-space: nowrap;
}

/* ---------- Praxian AI Discovery (discovery.html) ----------
   Same rhythm as the trust page and mostly the same classes (.page-heading,
   .control-item on the navy band, .trust-closing__*, .trust-statement);
   what is only here is below. */
.page-heading .section-heading__eyebrow + .page-heading__title {
  margin-top: 10px;
}
.dsc-lead {
  max-width: 68ch;
  margin: calc(var(--s-md) * -1) 0 var(--s-xl);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--body);
}
.section-group--navy .dsc-lead {
  color: rgba(255, 255, 255, 0.78);
}
.dsc-sub {
  margin: 0 0 var(--s-md);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  color: var(--ink);
}
.dsc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 168, 240, 0.5);
  background: rgba(0, 168, 240, 0.1);
  color: var(--ds-primary-text);
  transition: box-shadow 0.6s ease;
}
.dsc-icon .icon {
  width: 22px;
  height: 22px;
}
.is-visible > .dsc-icon {
  box-shadow: 0 0 0 4px rgba(0, 168, 240, 0.1), 0 0 18px rgba(0, 168, 240, 0.3);
}
/* the step number sits in the controls' icon box */
.dsc-step-num {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}

/* hero summary panel: key numbers + the five steps */
.hero-panel {
  padding: var(--pad-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-panel__title {
  margin: 0 0 var(--s-lg);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  color: #fff;
}
.hero-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
  margin: 0 0 var(--s-lg);
  padding-bottom: var(--s-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-panel__stats dt {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: var(--fw-display);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-panel__stats dd {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
.hero-panel__steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-panel__steps li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.4s ease;
  transition-delay: calc(0.4s + var(--i, 0) * 0.3s);
}
.hero-panel__steps span {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  transition-delay: inherit;
}
.hero-panel.is-visible .hero-panel__steps li {
  color: #fff;
}
.hero-panel.is-visible .hero-panel__steps span {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: var(--ds-primary-ink);
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel__steps li,
  .hero-panel__steps span {
    transition: none;
  }
}

/* icon cards: "Analisamos" (five across) and the deliverables */
.dsc-cards {
  display: grid;
  gap: var(--s-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .dsc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .dsc-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dsc-cards--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.dsc-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  border: 1px solid var(--hairline);
  background: var(--ds-surface);
}
.dsc-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.dsc-card--band {
  justify-content: center;
  border: 0;
  background: var(--ds-band);
}
.dsc-card--band p {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-primary-ink);
}

/* "A solução adequada": the options as chips */
.dsc-options {
  margin-top: var(--s-xxl);
  padding: var(--pad-card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ds-primary);
  background: var(--ds-surface);
}
.dsc-options__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--ink);
}
.dsc-options__intro {
  margin: var(--s-sm) 0 var(--s-md);
  font-size: 16px;
  color: var(--body);
}
.dsc-options__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dsc-options__list li {
  padding: 10px 16px;
  border: 1px solid rgba(0, 168, 240, 0.5);
  background: rgba(0, 168, 240, 0.1);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.dsc-options__note {
  margin: var(--s-md) 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* "Por que começar pelo diagnóstico": statement left, checks right */
.dsc-why__card {
  display: grid;
  gap: var(--s-xl);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(0, 168, 240, 0.12), rgba(0, 0, 0, 0) 60%), var(--ds-surface);
}
@media (min-width: 960px) {
  .dsc-why__card {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-xxl);
    align-items: center;
  }
}
.dsc-why__statement {
  margin: var(--s-md) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}
.dsc-why__label {
  margin: 0 0 var(--s-md);
  font-weight: 600;
  color: var(--ink);
}
.dsc-why__list ul {
  display: grid;
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dsc-why__list li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  color: var(--ink);
}
.dsc-why__list .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ds-primary-text);
}

/* the journey as a staircase: each step a little higher */
.dsc-journey__title {
  margin: var(--s-md) 0 var(--s-xl);
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: var(--fw-display);
  line-height: 1.1;
  color: var(--ink);
}
.dsc-stairs {
  display: grid;
  gap: var(--s-sm);
  margin: 0 0 var(--s-xl);
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .dsc-stairs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .dsc-stairs__step:nth-child(1) {
    min-height: 140px;
  }
  .dsc-stairs__step:nth-child(2) {
    min-height: 200px;
  }
  .dsc-stairs__step:nth-child(3) {
    min-height: 260px;
  }
}
.dsc-stairs__step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--s-lg);
  background: var(--ds-band-deep);
  border-top: 3px solid rgba(0, 168, 240, 0.45);
}
.dsc-stairs__step:nth-child(2) {
  border-top-color: var(--ds-primary);
}
.dsc-stairs__step:nth-child(3) {
  border-top-color: #fff;
}
.dsc-stairs__num {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.dsc-stairs__name {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: #fff;
}
.dsc-stairs__scope {
  font-size: 14px;
  color: var(--ds-primary-text);
}
.dsc-journey__text {
  max-width: 72ch;
  font-size: 16px;
  --lh: 1.7;
  color: var(--body);
}

/* time frame: a card with a week bar (the last week hatched: it depends
   on the process), and a card with what can be detailed afterwards */
.dsc-time__grid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 960px) {
  .dsc-time__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-lg);
  }
}
.dsc-time__card {
  padding: var(--pad-card);
  border: 1px solid var(--hairline);
  background: var(--ds-surface);
}
.dsc-time__card--main {
  border: 0;
  background: var(--ds-band-deep);
}
.dsc-time__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ds-primary-text);
}
.dsc-time__card--main .dsc-time__label {
  color: rgba(255, 255, 255, 0.8);
}
.dsc-time__value {
  margin: var(--s-sm) 0 var(--s-lg);
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: #fff;
}
.dsc-weeks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 var(--s-lg);
  padding: 0;
  list-style: none;
}
.dsc-weeks li {
  padding-top: 8px;
  border-top: 8px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.4s ease;
  transition-delay: calc(0.3s + var(--i, 0) * 0.35s);
}
.dsc-time__card--main.is-visible .dsc-weeks li {
  border-top-color: var(--ds-primary);
}
.dsc-time__card--main.is-visible .dsc-weeks__week--maybe {
  border-image: repeating-linear-gradient(135deg, var(--ds-primary) 0 6px, transparent 6px 12px) 8;
}
.dsc-time__text {
  font-size: 15px;
  --lh: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.dsc-time__intro {
  margin: var(--s-sm) 0 var(--s-md);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  line-height: 1.35;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .dsc-weeks li {
    transition: none;
  }
}

/* on the grey bands the cards turn black so they still stand out */
.section-group--soft .risk-card,
.section-group--soft .dsc-card:not(.dsc-card--band),
.section-group--soft .dsc-options,
.section-group--soft .dsc-time__card:not(.dsc-time__card--main) {
  background: var(--ds-bg);
}

/* governance reuses "Sofisticação com controle"; on the grey band */
.dsc-governance {
  background: var(--ds-surface);
}
.dsc-governance .trust-closing__approach li {
  background: var(--ds-bg);
}

/* modes: deep-blue cards like the Academy belts, the top rule getting
   stronger from the pilot to the corporate programme */
.dsc-modes__grid {
  display: grid;
  gap: var(--s-lg);
}
@media (min-width: 1024px) {
  .dsc-modes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.dsc-mode {
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
  border: 1px solid var(--hairline);
  border-top: 3px solid rgba(0, 168, 240, 0.45);
  background: var(--ds-band-deep);
  color: rgba(255, 255, 255, 0.82);
}
.dsc-mode:nth-child(2) {
  border-top-color: var(--ds-primary);
}
.dsc-mode:nth-child(3) {
  border-top-color: #fff;
}
.dsc-mode__num {
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.6);
}
.dsc-mode__title {
  margin: var(--s-sm) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: var(--fw-heading);
  line-height: 1.15;
  color: #fff;
}
.dsc-mode__scope {
  align-self: flex-start;
  margin: var(--s-md) 0 var(--s-lg);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-primary-text);
}
.dsc-mode__text {
  margin-bottom: var(--s-md);
  font-size: 15px;
  --lh: 1.65;
}
.dsc-mode__list-title {
  margin: var(--s-sm) 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.dsc-mode__list {
  display: grid;
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dsc-mode__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.dsc-mode__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--ds-primary-text);
}
.dsc-mode__result {
  margin: auto 0 0;
  padding-top: var(--s-lg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
}
.dsc-mode__list + .dsc-mode__result {
  margin-top: var(--s-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* closing card: the trust statement, with a line of text under the title */
.dsc-cta {
  margin-top: 0;
}
.dsc-cta-text {
  max-width: 56ch;
  margin: var(--s-md) 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- inner pages: "Ler mais", stagger, hero panels ---------- */

/* .expand (macros/ui.html): clamped to --lines lines, faded at the cut,
   until "Ler mais" opens it. Font size and --lh come from the context. */
.expand p {
  margin: 0;
  font-size: inherit;
  line-height: var(--lh, 1.65);
  color: inherit;
}
.expand p + p {
  margin-top: 0.75em;
}
.expand.is-ready:not(.is-open) .expand__body {
  max-height: calc(var(--lines, 3) * var(--lh, 1.65) * 1em);
  overflow: hidden;
}
.expand.is-clamped .expand__body {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.expand__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-sm);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-primary-text);
  cursor: pointer;
}
.expand__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.expand.is-open .expand__toggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.expand__toggle[hidden] {
  display: none;
}
.expand__toggle:hover,
.expand__toggle:focus-visible {
  text-decoration: underline;
}

/* grids come in one item after the other */
.stagger > [data-reveal] {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* hero with a side panel (trust page) */
.page-hero__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-xxl);
  }
}

/* "capacidade x autoridade": capacity fills at once, authority lights up
   one step at a time */
.autonomy {
  margin: 0;
  padding: var(--pad-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.autonomy__title {
  margin: 0 0 var(--s-lg);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  line-height: 1.3;
  color: #fff;
}
.autonomy__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px var(--s-md);
  align-items: center;
}
.autonomy__row + .autonomy__row {
  margin-top: var(--s-lg);
}
.autonomy__label {
  grid-column: 1 / -1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.autonomy__bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
}
.autonomy__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ds-band);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.autonomy.is-visible .autonomy__bar span {
  width: 100%;
}
.autonomy__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-primary-text);
}
.autonomy__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.autonomy__steps li {
  padding: 12px 4px 4px;
  border-top: 10px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  transition: border-color 0.4s ease, color 0.4s ease;
  transition-delay: calc(1s + var(--i, 0) * 0.45s);
}
.autonomy.is-visible .autonomy__steps li {
  border-top-color: var(--ds-primary);
  color: #fff;
}
.autonomy__note {
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .autonomy__bar span,
  .autonomy__steps li {
    transition: none;
  }
}