/* Homepage product-depth sections — report first, workspace second. */

.home-workspace {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(244, 173, 34, .12), transparent 28rem),
    radial-gradient(circle at 88% 80%, rgba(239, 63, 53, .08), transparent 30rem),
    #0b0b0f;
}

.home-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.home-workspace__header { position: relative; z-index: 1; }

.workspace-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(90px, .2fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  margin-top: 8px;
}

.workspace-release,
.workspace-cockpit {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  /* Opaque. These were translucent whites, so the section's gold and red
     radial glows showed straight through and the cards read as washed out and
     unevenly tinted depending on where they sat over the gradient. These two
     values are those alphas composited over the section's own #0b0b0f, so the
     intended shade is unchanged — it just no longer varies with what is
     behind it. */
  background: linear-gradient(150deg, #1d1d21, #111115);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.workspace-release { padding: 24px; }

.workspace-release__top,
.workspace-cockpit__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #858496;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--home-green);
}

.workspace-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.workspace-release__title {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 26px 0;
}

/* Neutral tile so the status glyph inside carries the colour. It was a red-to
   gold gradient holding a letter; a green "done" report on that background
   fought it, and the homepage is meant to depict the real workspace, where
   this tile is dark. Same treatment as .decision-report__mark in the portal. */
.workspace-release__mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: #101015;
}

.workspace-release__title strong,
.workspace-release__title small { display: block; }
.workspace-release__title strong { color: #f6f6f9; font-size: 15px; }
.workspace-release__title small { margin-top: 5px; color: #858496; font-size: 11px; line-height: 1.45; }

.workspace-release__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workspace-release__facts span {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #1f1f23;   /* .035 white over the card, made opaque */
  color: #858496;
  font-size: 9px;
  line-height: 1.35;
}

.workspace-release__facts strong {
  display: block;
  margin-bottom: 3px;
  color: var(--home-gold-soft);
  font: 700 19px/1 "Space Grotesk", sans-serif;
}

.workspace-flow {
  display: grid;
  align-items: center;
  gap: 8px;
  color: var(--home-gold-soft);
  text-align: center;
}

.workspace-flow span { height: 1px; background: linear-gradient(90deg, transparent, rgba(244,173,34,.7), transparent); }
.workspace-flow b { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }

.workspace-cockpit { overflow: hidden; }
.workspace-cockpit__bar { padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.workspace-cockpit__bar span:first-child { color: #f4f4f7; }
.workspace-cockpit__bar span:last-child { color: var(--home-gold-soft); }

.workspace-cockpit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-cockpit__grid article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  min-height: 112px;
  padding: 20px;
}

.workspace-cockpit__grid article:nth-child(even) { border-left: 1px solid rgba(255,255,255,.08); }
.workspace-cockpit__grid article:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
.workspace-cockpit__grid article > span { color: var(--home-gold); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.workspace-cockpit__grid strong,
.workspace-cockpit__grid small { display: block; }
.workspace-cockpit__grid strong { color: #f4f4f7; font-size: 13px; }
.workspace-cockpit__grid small { margin-top: 6px; color: #8d8c9d; font-size: 10.5px; line-height: 1.5; }

.workspace-principles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border-block: 1px solid rgba(255,255,255,.09);
}

.workspace-principles article { padding: 24px clamp(18px, 2.3vw, 32px); }
.workspace-principles article + article { border-left: 1px solid rgba(255,255,255,.09); }
.workspace-principles strong,
.workspace-principles span { display: block; }
.workspace-principles strong { color: #f5f5f8; font-size: 13px; }
.workspace-principles span { margin-top: 7px; color: #9291a2; font-size: 11.5px; line-height: 1.6; }

.home-capabilities .home-section__header { align-items: start; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--home-line-light);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 70px rgba(31,30,26,.07);
}

.capability-card {
  position: relative;
  min-height: 310px;
  padding: 28px 25px;
  border-left: 1px solid var(--home-line-light);
}

.capability-card:first-child { border-left: 0; }
.capability-card--lead { background: linear-gradient(155deg, rgba(244,173,34,.12), transparent 68%); }
.capability-card--wide {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(220px, .72fr);
  align-items: center;
  gap: 18px;
  grid-column: 1 / -1;
  min-height: 0;
  border-top: 1px solid var(--home-line-light);
  border-left: 0;
  background: #f7f5ef;
}

.capability-card__index {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(20,20,26,.18);
  font: 700 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .1em;
}

.capability-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 42px;
  place-items: center;
  border: 1px solid rgba(183,117,0,.22);
  border-radius: 13px;
  background: rgba(244,173,34,.11);
  color: #a96c00;
}

.capability-card__icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.capability-card h3 { margin: 0 0 10px; color: #18181e; font-size: 19px; letter-spacing: -.025em; }
.capability-card p { margin: 0 0 20px; color: #686878; font-size: 12.5px; line-height: 1.65; }
.capability-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.capability-card li { position: relative; padding-left: 15px; color: #3f3f4b; font-size: 11px; font-weight: 700; line-height: 1.45; }
.capability-card li::before { content: ""; position: absolute; top: .55em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--home-gold); }
.capability-card--wide .capability-card__icon { margin: 0; }
.capability-card--wide h3 { margin-bottom: 6px; }
.capability-card--wide p { margin: 0; }
.capability-card--wide ul { grid-template-columns: 1fr; }

.capability-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--home-line-light);
}

.capability-footer p { max-width: 660px; margin: 0; color: #666573; font-size: 12.5px; line-height: 1.65; }
.capability-footer p strong { color: #1c1c22; }
.capability-footer > div { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.capability-link { color: #4b4a58; font-size: 11.5px; font-weight: 800; text-underline-offset: 4px; }

.home-agency-route {
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(244,173,34,.07), transparent 32%),
    linear-gradient(295deg, rgba(90,115,220,.06), transparent 36%),
    #101016;
}

.home-agency-route .home-section__header h2 { color: #f7f7fa; }

.agency-route-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
  gap: 18px;
}

.agency-choice {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: stretch;
}

.agency-choice article {
  padding: clamp(25px, 3.2vw, 38px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
}

.agency-choice article:last-child {
  border-color: rgba(244,173,34,.35);
  background: radial-gradient(circle at 100% 0, rgba(244,173,34,.14), transparent 60%), rgba(255,255,255,.04);
}

.agency-choice__or { display: grid; place-items: center; color: #777687; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.agency-choice__label { color: var(--home-gold-soft); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.agency-choice h3 { margin: 15px 0 12px; color: #f6f6f9; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.035em; }
.agency-choice p { margin: 0; color: #9998aa; font-size: 12.5px; line-height: 1.7; }
.agency-choice strong { display: block; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); color: #d6d5df; font-size: 11px; line-height: 1.5; }

.agency-scorecard {
  overflow: hidden;
  border: 1px solid rgba(244,173,34,.34);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(244,173,34,.09), rgba(255,255,255,.035));
  box-shadow: 0 28px 70px rgba(0,0,0,.3);
}

.agency-scorecard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.agency-scorecard__head span,
.agency-scorecard__head strong { display: block; }
.agency-scorecard__head div > span { color: var(--home-gold-soft); font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.agency-scorecard__head strong { margin-top: 6px; color: #f4f4f7; font-size: 14px; }
.agency-scorecard__count { padding: 7px 10px; border-radius: 999px; background: rgba(244,173,34,.14); color: var(--home-gold-soft); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.agency-scorecard__rows { padding: 7px 22px; }
.agency-scorecard__rows div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.agency-scorecard__rows span { color: #bbb9c6; font-size: 11px; }
.agency-scorecard__rows b { color: var(--home-green); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.agency-scorecard > p { margin: 0; padding: 17px 22px 20px; color: #777687; font-size: 10px; line-height: 1.6; }

.agency-route-note {
  display: grid;
  grid-template-columns: minmax(260px, .6fr) minmax(0, 1.4fr);
  gap: 26px;
  margin-top: 22px;
  padding: 21px 24px;
  border-block: 1px solid rgba(255,255,255,.09);
}

.agency-route-note strong { color: #f4f4f7; font-size: 12px; }
.agency-route-note span { color: #8e8d9d; font-size: 11.5px; line-height: 1.55; }

html.light-mode .home-workspace,
html.light-mode .home-agency-route {
  background:
    radial-gradient(circle at 10% 18%, rgba(244,173,34,.13), transparent 28rem),
    radial-gradient(circle at 90% 82%, rgba(239,63,53,.06), transparent 30rem),
    #f5f5f7;
}

html.light-mode .home-workspace::after { background-image: linear-gradient(rgba(18,18,24,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,24,.03) 1px, transparent 1px); }
html.light-mode .home-workspace .home-section__header h2,
html.light-mode .home-agency-route .home-section__header h2 { color: #17171d; }
html.light-mode .home-workspace .home-section__header p,
html.light-mode .home-agency-route .home-section__header p { color: var(--home-copy-dark); }
html.light-mode .workspace-release,
html.light-mode .workspace-cockpit,
html.light-mode .agency-choice article,
html.light-mode .agency-scorecard { border-color: rgba(18,18,24,.13); background: #ffffff; box-shadow: 0 24px 60px rgba(42,34,16,.1); }
html.light-mode .agency-choice article:last-child,
html.light-mode .agency-scorecard { border-color: rgba(183,117,0,.3); background: radial-gradient(circle at 100% 0, rgba(244,173,34,.12), transparent 60%), rgba(255,255,255,.9); }
html.light-mode .workspace-release__title strong,
html.light-mode .workspace-cockpit__bar span:first-child,
html.light-mode .workspace-cockpit__grid strong,
html.light-mode .workspace-principles strong,
html.light-mode .agency-choice h3,
html.light-mode .agency-choice strong,
html.light-mode .agency-scorecard__head strong,
html.light-mode .agency-route-note strong { color: #1b1b21; }
html.light-mode .workspace-release__top,
html.light-mode .workspace-release__title small,
html.light-mode .workspace-release__facts span,
html.light-mode .workspace-cockpit__grid small,
html.light-mode .workspace-principles span,
html.light-mode .agency-choice p,
html.light-mode .agency-scorecard__rows span,
html.light-mode .agency-scorecard > p,
html.light-mode .agency-route-note span { color: #666575; }
html.light-mode .workspace-release__facts span,
html.light-mode .workspace-cockpit__bar,
html.light-mode .workspace-cockpit__grid article:nth-child(even),
html.light-mode .workspace-cockpit__grid article:nth-child(n+3),
html.light-mode .workspace-principles,
html.light-mode .workspace-principles article + article,
html.light-mode .agency-choice strong,
html.light-mode .agency-scorecard__head,
html.light-mode .agency-scorecard__rows div,
html.light-mode .agency-route-note { border-color: rgba(18,18,24,.1); }
/* The metric tiles previously took their fill from the dark rule's
   rgba(255,255,255,.035), which over a white card composited to plain white.
   Now that the dark rule is an opaque #1f1f23, light mode needs the value
   spelled out or the tiles render dark on a white card. #ffffff is what the
   translucent version actually resolved to here, so the appearance is
   unchanged — the tiles are still separated by their border alone. */
html.light-mode .workspace-release__facts span { background: #ffffff; }

@media (max-width: 1040px) {
  .workspace-story { grid-template-columns: minmax(250px, .72fr) 64px minmax(360px, 1.1fr); gap: 18px; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-card:nth-child(odd) { border-left: 0; }
  .capability-card:nth-child(n+3) { border-top: 1px solid var(--home-line-light); }
  .capability-card--wide { grid-column: 1 / -1; }
  .agency-route-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .workspace-story { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .workspace-flow { grid-template-columns: 1fr auto 1fr; }
  .workspace-principles { grid-template-columns: 1fr; }
  .workspace-principles article + article { border-top: 1px solid rgba(255,255,255,.09); border-left: 0; }
  .capability-card { min-height: 270px; }
  .capability-card--wide { grid-template-columns: 52px minmax(0, 1fr); }
  .capability-card--wide ul { grid-column: 2; }
  .capability-footer { align-items: flex-start; flex-direction: column; }
  .capability-footer > div { flex-wrap: wrap; }
  .agency-choice { grid-template-columns: 1fr; gap: 9px; }
  .agency-choice__or { min-height: 22px; }
  .agency-route-note { grid-template-columns: 1fr; gap: 8px; }
  html.light-mode .workspace-principles article + article { border-top-color: rgba(18,18,24,.1); }
}

@media (max-width: 540px) {
  .workspace-release { padding: 20px; }
  .workspace-release__facts { gap: 6px; }
  .workspace-release__facts span { padding: 10px 8px; }
  .workspace-cockpit__grid { grid-template-columns: 1fr; }
  .workspace-cockpit__grid article { min-height: 0; }
  .workspace-cockpit__grid article:nth-child(even) { border-left: 0; }
  .workspace-cockpit__grid article + article { border-top: 1px solid rgba(255,255,255,.08); }
  .capability-grid { grid-template-columns: 1fr; border-radius: 20px; }
  .capability-card,
  .capability-card:nth-child(odd) { min-height: 0; border-top: 1px solid var(--home-line-light); border-left: 0; }
  .capability-card:first-child { border-top: 0; }
  .capability-card__icon { margin-bottom: 28px; }
  .capability-card--wide { display: block; }
  .capability-card--wide .capability-card__icon { margin-bottom: 28px; }
  .capability-card--wide ul { margin-top: 18px; }
  .capability-footer > div { align-items: flex-start; flex-direction: column; }
  .agency-choice article { padding: 24px 22px; }
  .agency-scorecard__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-release,
  .workspace-cockpit,
  .capability-card,
  .agency-choice article,
  .agency-scorecard { scroll-behavior: auto; }
}

/* Report status glyph — a filled document with white rows and a status badge.
   One markup, two states: the class picks the colour and swaps the badge
   between a tick and a clock hand. Colour is set on the <svg>, and the body
   and badge both use currentColor, so a state change is one class. */
.report-glyph { display: block; }
.report-glyph--done { color: #34d399; }
.report-glyph--processing { color: #f0a51e; }
.report-glyph--done .report-glyph__wait { display: none; }
.report-glyph--processing .report-glyph__tick { display: none; }