/* ==========================================================================
   Homepage composition (index.html). Scoped under .page-home.
   Seven blocks: dark hero · deployment services · Agent Guru · Agent Jasmine ·
   how we engage (dark) · security and company facts · closing CTA (dark).
   Tokens only: no hex, no rgba, no !important. System breakpoints.
   ========================================================================== */

/* ---------- 1 · Hero (dark brand surface): headline left, one product window right ---------- */
.page-home .home-hero {
  --glow-x: 74%; --glow-y: 50%;
  padding-top: clamp(48px, 6.4vw, 96px); padding-bottom: clamp(56px, 6.8vw, 104px);
}
.page-home .home-hero__split { align-items: center; }
@media (min-width: 921px) {
  .page-home .home-hero__split { --a: 1 / span 6; --b: 7 / span 6; }
  .page-home .home-hero__visual { padding-left: clamp(0px, 2.4vw, 40px); }
}
@media (max-width: 920px) {
  /* Stacked: the glow sits behind the window under the headline */
  .page-home .home-hero { --glow-x: 50%; --glow-y: 72%; }
}
.page-home .home-hero .hero__title { max-width: 15ch; }
.page-home .home-hero .hero__standfirst { max-width: 40ch; }

/* The brand line, set like the tagline on the official banner (Barlow Condensed Light) */
.page-home .home-hero__brandline {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(18px, 2vw, 26px);
  font-family: "Barlow Condensed", var(--font-sans); font-weight: 300;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); line-height: 1; letter-spacing: 0.01em;
  color: var(--fg-2);
}
.page-home .home-hero__brandline::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--line-3); }

.page-home .home-hero__visual { min-width: 0; }
.page-home .home-hero__fig .fig__cap { margin-top: 10px; }
@media (max-width: 920px) {
  .page-home .home-hero__visual { max-width: 600px; }
}

/* One visual per width: the agent window from 761px, the "What we deploy" card on phones */
@media (min-width: 761px) {
  .page-home .home-deploy { display: none; }
}
@media (max-width: 760px) {
  .page-home .home-hero__fig { display: none; }
}
.page-home .home-deploy { padding: 14px 18px 2px; }
.page-home .home-deploy .status-table caption { padding-bottom: 8px; }
.page-home .home-deploy .status-table th,
.page-home .home-deploy .status-table td { padding: 11px 0 12px; vertical-align: middle; }
.page-home .home-deploy .status-table__name { font-size: 1.125rem; }
@media (max-width: 520px) {
  /* Name and state stay on one line each row */
  .page-home .home-deploy { padding-inline: 14px; }
  .page-home .home-deploy .status-table td { width: auto; min-width: 0; white-space: nowrap; }
  .page-home .home-deploy .status-table__name { font-size: 1rem; }
  .page-home .home-deploy .status-table__name .i { margin-left: 6px; }
  .page-home .home-deploy .state { font-size: var(--fs-caption); gap: 6px; }
}

/* Invoice agent window (illustrative): the document, the agent's steps, the human decision */
.page-home .home-agent { font-size: var(--fs-small); line-height: 1.45; }
.page-home .home-agent .ui__bar { padding: 13px 18px; }
.page-home .home-agent__run { display: inline-flex; align-items: baseline; gap: 8px; }
.page-home .home-agent__run::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ui-accent); transform: translateY(-1px); }

.page-home .home-agent__doc {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 18px 6px; padding: 12px 14px;
  background: var(--ui-muted); border: 1px solid var(--ui-line); border-radius: var(--radius-3);
}
.page-home .home-agent__doc > .i { width: 18px; height: 18px; color: var(--ui-accent); }
.page-home .home-agent__doc p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.page-home .home-agent__doc b { font-weight: 600; color: var(--ui-fg); }
.page-home .home-agent__doc span { font-size: var(--fs-caption); color: var(--ui-fg-2); }

.page-home .home-agent__steps { padding: 6px 18px 2px; }
.page-home .home-agent__steps li {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px;
  padding: 9px 0 10px;
}
/* The connector between steps */
.page-home .home-agent__steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 12.5px; top: 38px; bottom: -6px; width: 1px; background: var(--ui-line-2);
}
.page-home .home-agent__steps .i {
  width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg); color: var(--ui-fg-2);
}
.page-home .home-agent__steps .is-done .i { color: var(--ui-ok-mark); }
.page-home .home-agent__steps .is-flag .i { color: var(--ui-accent); border-color: var(--ui-accent); }
.page-home .home-agent__steps .is-now .i { color: var(--ui-bg); background: var(--ui-accent); border-color: var(--ui-accent); }
.page-home .home-agent__steps p { display: grid; gap: 1px; padding-top: 2px; min-width: 0; }
.page-home .home-agent__steps b { font-weight: 600; line-height: 1.35; color: var(--ui-fg); }
.page-home .home-agent__steps span { font-size: var(--fs-caption); line-height: 1.4; color: var(--ui-fg-2); }

.page-home .home-agent__ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px;
  margin: 8px 18px 18px; padding: 12px 14px;
  background: var(--ui-coach); border: 1px solid var(--ui-coach-line); border-radius: var(--radius-3);
}
.page-home .home-agent__ask p { margin-right: auto; font-size: var(--fs-caption); color: var(--ui-fg); }
.page-home .home-agent__ask b { font-weight: 600; }
.page-home .home-agent__btn {
  padding: 5px 14px; border: 1px solid var(--ui-line-2); border-radius: var(--radius-2);
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; color: var(--ui-fg);
}
.page-home .home-agent__btn--go { background: var(--white); border-color: var(--white); color: var(--brand-mid); }

/* ---------- Shared: a button followed by an arrow link ---------- */
.page-home .home-actions { gap: 14px 28px; }

/* ---------- 2 · Deployment services ---------- */
.page-home .home-services .card { min-height: 196px; }
.page-home .home-services .card__title { font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem); font-weight: 700; letter-spacing: -0.022em; }
@media (max-width: 760px) {
  /* Compact rows: the arrow moves to the top-right corner instead of its own row */
  .page-home .home-services .cards { gap: 10px; }
  .page-home .home-services .card { min-height: 0; padding: 16px 44px 16px 16px; gap: 4px; }
  .page-home .home-services .card__more { position: absolute; top: 16px; right: 16px; margin: 0; padding: 0; }
}
@media (max-width: 520px) {
  /* Tag and title only; the detail is one tap away */
  .page-home .home-services .card__text { display: none; }
}

/* Industries: one plain line of sector names under the cards (the site's #industries anchor) */
.page-home .home-sectors {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 12px var(--space-6);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.page-home .home-sectors__label { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.page-home .home-sectors__list { color: var(--fg); }
.page-home .home-sectors__links { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--fs-small); }
@media (max-width: 1180px) {
  .page-home .home-sectors { grid-template-columns: auto minmax(0, 1fr); }
  .page-home .home-sectors__links { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-home .home-sectors { grid-template-columns: minmax(0, 1fr); }
  /* Sectors stay on shared lines, separators trail each item */
  .page-home .home-sectors__list { flex-direction: row; gap: 2px 0; }
  .page-home .home-sectors__list li + li::before { content: none; }
  .page-home .home-sectors__list li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--line-3); }
}

/* ---------- 3 · Agent Guru: headline and line on top, then the product window and the details ---------- */
.page-home .home-guru__head .home-guru__lead { max-width: 36ch; }
@media (min-width: 921px) {
  .page-home .home-guru__head { --sh-a: 1 / span 7; --sh-b: 8 / span 5; }
  .page-home .home-guru__head > .home-guru__lead { justify-self: start; }
  .page-home .home-guru { --a: 1 / span 7; --b: 8 / span 5; align-items: center; }
  .page-home .home-guru__head > .home-guru__lead,
  .page-home .home-guru__more { padding-left: clamp(0px, 2.6vw, 48px); }
}
.page-home .home-guru { row-gap: var(--space-6); }
.page-home .home-guru__price { margin-top: var(--space-5); max-width: 40ch; font-size: var(--fs-caption); line-height: 1.55; color: var(--fg-2); }
.page-home .home-guru__price b {
  display: block; margin-bottom: 2px;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--fg);
}
.page-home .home-guru__price .arrow-link { color: var(--fg); font-size: var(--fs-small); font-weight: 500; }
.page-home .home-guru .home-actions { margin-top: var(--space-6); }

/* Coaching window: conversation left, the chapter score right */
@media (min-width: 761px) {
  .page-home .home-coach .ui__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (min-width: 921px) and (max-width: 1180px) {
  /* Narrower desktop: keep the bar and the status on one line each */
  .page-home .home-coach .ui__crumb { display: none; }
}
.page-home .home-coach .score__status { white-space: nowrap; }
.page-home .home-coach .msg { max-width: 96%; }
.page-home .home-coach .kp li:last-child { border-bottom: 0; }
.page-home .home-coach .score__num span { font-size: 3rem; }
@media (max-width: 760px) {
  /* Phones: the conversation and the score stack; the key points drop */
  .page-home .home-coach .kp { display: none; }
}

/* ---------- 4 · Agent Jasmine ---------- */
@media (min-width: 921px) {
  .page-home .home-jasmine { --a: 1 / span 5; --b: 6 / span 7; align-items: center; }
}
.page-home .home-jasmine__links { gap: 12px; }
.page-home .home-jasmine .spread { --spread-h: clamp(220px, 22vw, 320px); }
@media (max-width: 600px) {
  /* Three photos in one row on phones too: a compact strip */
  .page-home .home-jasmine .spread { --spread-cols: 1.3fr 1fr 1fr; --spread-h: clamp(150px, 44vw, 220px); gap: 8px; }
  .page-home .home-jasmine .spread > :first-child { grid-column: auto; }
  .page-home .home-jasmine .spread__label { font-size: var(--fs-micro); }
  .page-home .home-jasmine .spread__label b { display: block; margin: 0; }
}

/* ---------- 5 · How we engage (dark band, flat) ---------- */
.page-home .home-engage .section-head--split { align-items: end; }
.page-home .home-engage .flow { margin-top: var(--space-2); }

/* ---------- 6 · Security and data, then the company block (#about) ---------- */
.page-home .home-about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-5);
  margin-top: clamp(40px, 4.4vw, 64px); padding-top: var(--space-6); border-top: 1px solid var(--line-2);
}
.page-home .home-about > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 921px) {
  .page-home .home-about__intro { grid-column: 1 / span 6; }
  .page-home .home-about__facts { grid-column: 8 / span 5; }
}
.page-home .home-about__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.page-home .home-about__text { margin-top: 10px; max-width: 50ch; color: var(--fg-2); }
.page-home .home-about__facts > div { grid-template-columns: minmax(84px, 28%) minmax(0, 1fr); }
.page-home .home-about__facts dd { color: var(--fg); }

/* ---------- 7 · Closing CTA (dark brand surface, glow) ---------- */
.page-home .home-cta { align-items: center; }
.page-home .home-cta .actions { margin-top: 0; }
.page-home .home-cta__lines { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
@media (min-width: 921px) {
  .page-home .home-cta { --a: 1 / span 7; --b: 8 / span 5; }
  .page-home .home-cta__side { justify-self: end; }
  /* The two buttons span the side column, flush with the contact line */
  .page-home .home-cta .actions > .btn { flex: 1 1 0; }
}

/* ---------- Phones: a tighter vertical rhythm for this page ---------- */
@media (max-width: 520px) {
  .page-home .section { padding-block: 48px; }
  .page-home :is(.section, .hero):not(.surface--alt, .surface--accent, .surface--dark) + .section:not(.surface--alt, .surface--accent, .surface--dark) { padding-top: 0; }
  .page-home .section-head { margin-bottom: 28px; }
}