@import url("../../css/case-chrome.css?v=4");
@import url("../../css/device-morph.css?v=3");

/* =====================================================================
   ASTER ANALYTICS — case study

   Built on the site's own tokens (tokens.css): the neutral ramp, ink,
   surface, line, radius and type tokens, the Geist / Zalando Sans
   Expanded pairing and the control shapes. The page reads like Freight
   Intelligence and Nivora Health because it is made of the same things:
   the same hero, the same chrome, the same section head, the same
   closing, More Cases and footer.

   The one deliberate exception is the PRODUCT. Aster's own blue appears
   only where the page shows the product itself (the logo tile, the
   specimens in the design-system section, the device screens), never as
   page styling.

   Scoped to .as-root so none of it can leak into another page.
   ===================================================================== */
.as-root {
  /* ---- Page palette, from site tokens. The case studies sit on white
     (light) and near-black (dark); everything else resolves through the
     tokens, so a token change reaches this page too. ---- */
  --as-bg: #ffffff;
  --as-card: var(--surface-card);
  --as-inset: var(--n-50);
  --as-ink: var(--ink-strong);
  --as-muted: var(--ink-muted);
  --as-faint: var(--ink-soft);
  --as-line: var(--line);
  --as-line-strong: var(--line-strong);
  /* Feature panels: a soft tint of Aster's blue rather than a heavy black
     plate, so they frame their content without taking over the page. */
  --as-tint: #e8f0ff;
  --as-tint-ink: var(--as-ink);
  --as-tint-muted: #44506a;
  --as-tint-faint: #5d6b89;
  --as-tint-item: rgba(4, 67, 161, .08);
  --as-tint-shadow: 0 28px 56px -22px rgba(4, 67, 161, .35);

  /* Product palette: used only on product specimens. */
  --ap-main: #0443a1;
  --ap-point: #2e85ff;
  --ap-sub: #103061;

  --as-r-card: var(--radius-card, 16px);
  --as-r-panel: var(--radius-panel, 20px);
  --as-r-media: var(--radius-media, 16px);

  --as-font-title: var(--font-title);
  --as-font-body: var(--font-body);

  /* Shared with Freight and Nivora: hero scale, page gutter, section rhythm. */
  --as-hero: clamp(40px, 6.4vw, 92px);
  --as-gutter: clamp(24px, 6.95vw, 100px);
  --as-content: 1240px;
  --as-section-gap: clamp(84px, 10.4vw, 150px);
}
:root[data-theme="dark"] .as-root {
  --as-bg: #0b0b0b;
  --as-inset: #1a1a1a;
  --as-tint: #101a2d;
  --as-tint-ink: #f1f4fa;
  --as-tint-muted: rgba(226, 234, 250, .72);
  --as-tint-faint: rgba(200, 214, 244, .56);
  --as-tint-item: rgba(120, 160, 255, .09);
  --as-tint-shadow: 0 28px 56px -22px rgba(0, 0, 0, .6);
}

.as-root, .as-root *, .as-root *::before, .as-root *::after { box-sizing: border-box; }
html:has(> body.as-root) { -webkit-text-size-adjust: 100%; }
.as-root {
  margin: 0;
  background: var(--as-bg);
  color: var(--as-ink);
  font-family: var(--as-font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .26s ease, color .26s ease;
}
.as-root img { display: block; max-width: 100%; height: auto; }
.as-root :where(h1, h2, h3, h4, p, figure, ol, ul, dl, dd) { margin: 0; }
.as-root :where(ol, ul) { padding: 0; list-style: none; }
.as-root a { color: inherit; }
/* Two faces only, as on the rest of the site: Geist for everything the
   reader reads, Zalando Sans Expanded for titles. Stated on every element
   because the homepage's own heading rules reach this page when it opens in
   place from the Work grid. Titles opt back in below at higher weight. */
.as-root * { font-family: var(--font-body); }

/* The char-rise and counter markup nests spans inside the titles; they take the title face too. */

.as-root :is(.as-title, .as-ask__title) {
  font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: -.045em !important; line-height: .92 !important;
}
.as-root :focus-visible { outline: 2px solid var(--as-ink); outline-offset: 3px; }

.as-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 14px; border-radius: 10px;
  background: var(--as-ink); color: var(--as-bg); text-decoration: none; font-size: var(--fs-meta);
}
.as-skip:focus { top: 16px; }

/* ---- Page chrome: progress rail + theme toggle + close ------------------
   Identical to Freight and Nivora: a 2px reading rail and two frosted round
   controls, white over the hero and dark once the page behind is light. */
.as-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.as-progress span {
  display: block; width: 100%; height: 100%;
  background: var(--as-ink); transform: scaleX(0); transform-origin: left;
}
.as-progress.is-visible { opacity: 1; }
.as-chrome {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  display: flex; align-items: center; gap: 12px;
}
@media (max-width: 600px) {
  .as-chrome { top: 14px; right: 14px; gap: 8px; }
  .as-chrome :is(.as-close, .as-theme-toggle) { width: 32px; height: 32px; }
}
.as-close, .as-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; font-size: var(--fs-meta);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .24);
  transition: transform .16s var(--ease-out-quart), background-color .24s ease, color .24s ease, border-color .24s ease;
}
.as-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.as-close:hover, .as-theme-toggle:hover { transform: scale(1.06); background: rgba(255, 255, 255, .24); }
.as-close:active, .as-theme-toggle:active { transform: scale(.94); }
.as-chrome.is-on-light :is(.as-close, .as-theme-toggle) {
  background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .12); color: #222;
}
:root[data-theme="dark"] .as-chrome.is-on-light :is(.as-close, .as-theme-toggle) {
  background: rgba(18, 18, 18, .78); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.as-theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.as-theme__sun, .as-theme__moon { transform-origin: 12px 12px; transition: opacity .2s ease, transform .26s var(--ease-out-quart); }
.as-theme__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
:root[data-theme="dark"] .as-theme__sun { opacity: 0; transform: rotate(40deg) scale(.6); }
:root[data-theme="dark"] .as-theme__moon { opacity: 1; transform: rotate(0) scale(1); }

/* ---- Shared ---------------------------------------------------------- */
.as-wrap {
  width: 100%;
  max-width: calc(var(--as-content) + 2 * var(--as-gutter));
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}
.as-section { padding-top: var(--as-section-gap); }
.as-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Section titles are h2s, so the site's own title rule (tokens.css) sets
   the face, weight, case and tracking; this only sets the size. */
.as-title {
  font-size: clamp(26px, 2.64vw, 38px);
  word-spacing: .14em;
  text-wrap: balance;
}
.as-sub {
  max-width: 660px; margin-top: 20px;
  color: var(--as-muted); font-size: var(--fs-body); line-height: 26px;
}
.as-tag {
  color: var(--as-faint);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 1.6px; line-height: 1.2; text-transform: uppercase;
}
.as-note { color: var(--as-muted); font-size: var(--fs-small); line-height: 19px; }
.as-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }
.as-head__desc { width: 560px; max-width: 100%; color: var(--as-muted); font-size: var(--fs-body); line-height: 25px; }

.as-card {
  background: var(--as-card); border: 1px solid var(--as-line); border-radius: var(--as-r-card);
  padding: 20px;
}
.as-card h3 { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.as-card p { margin-top: 6px; color: var(--as-muted); font-size: var(--fs-meta); line-height: 22px; }

/* ---- Hero ----------------------------------------------------------------
   Freight Intelligence's hero, value for value: a full-viewport cover, a
   frosted band dissolving up from the bottom, and the title with its meta
   row pinned bottom-left. Nothing else sits on the cover. */
.as-hero { position: relative; }
.as-hero__media {
  position: relative; width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #1c1c1c;
}
.as-root .as-hero__media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.as-hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.as-hero__scrim > span {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--start), #000 var(--end));
  mask-image: linear-gradient(to bottom, transparent var(--start), #000 var(--end));
}
.as-hero__scrim > span:nth-child(1) { --blur: 4px; --start: 62%; --end: 78%; }
.as-hero__scrim > span:nth-child(2) { --blur: 12px; --start: 70%; --end: 88%; }
.as-hero__scrim > span:nth-child(3) { --blur: 26px; --start: 78%; --end: 100%; }
.as-hero__scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(8, 9, 11, 0) 60%, rgba(8, 9, 11, .26) 72%, rgba(8, 9, 11, .60) 86%, rgba(8, 9, 11, .80) 100%);
}
.as-hero__content {
  position: absolute; bottom: 36px;
  left: clamp(18px, 2.2vw, 36px);
  right: clamp(18px, 2.2vw, 36px);
  color: #fff;
}
.as-hero__title {
  font-family: var(--as-font-title);
  font-size: var(--as-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
}
.as-hero__tagline { margin: 16px 0 30px; color: rgba(255, 255, 255, .85); font-size: clamp(16px, 1.4vw, 20px); }
.as-hero__meta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 28px; }
.as-hero__tagline + .as-hero__meta { margin-top: 0; }
.as-hero__meta li { display: flex; flex-direction: column; gap: 6px; }
.as-meta__label {
  font-size: var(--fs-small); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.as-meta__value { font-size: var(--fs-meta); line-height: 1.45; letter-spacing: -.02em; color: rgba(255, 255, 255, .96); }
@media (max-width: 768px) {
  .as-hero__content { bottom: 24px; }
  .as-hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 699px) { .as-hero__content { left: 16px; right: 16px; } }

/* ---- Intro ------------------------------------------------------------- */
.as-intro {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  max-width: calc(840px + 2 * var(--as-gutter));
  padding-top: var(--as-section-gap);
  text-align: center;
}
.as-intro__lead { font-size: 24px; line-height: 38px; letter-spacing: -.5px; }
.as-intro__sub { max-width: 640px; color: var(--as-muted); font-size: var(--fs-body); line-height: 26px; }

/* ---- Challenge: the hub --------------------------------------------------
   Desktop is a 1080x600 composition: the product mark in the middle, the
   four tensions around it. Below 1100px the cards stack. */
.as-hub { position: relative; width: 1080px; max-width: 100%; height: 600px; margin: 72px auto 0; }
.as-hub__rings {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; overflow: visible;
}
/* Complete concentric rings: plain inside, the outermost one dotted and
   turning. Radii stop at 214 of a 260 half-width, so even the outer ring
   stays between the brief above and the foot below and never runs through
   their text. */
.as-hub__ring { fill: none; stroke: var(--as-line-strong); stroke-width: 1.5; }
.as-hub__ring--dots { stroke: var(--as-faint); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 8; }
.as-hub__core {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 44px; background: var(--ap-main);
  box-shadow: 0 30px 70px rgba(4, 67, 161, .35);
}
.as-hub__brief { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 560px; max-width: 100%; text-align: center; display: grid; gap: 8px; }
.as-hub__mark { width: 80px; height: 60px; overflow: visible; }
/* Each card is tied to the outer ring: a hairline leaves its inner edge and
   ends in a node dot sitting on the ring at the 45-degree point (ring radius
   214, so 151 across and 151 up or down from the centre). The hub is a size
   container, so the line length follows the hub's own width: the card
   positions are anchored to its left and right edges while the rings stay
   centred. Where the card already overlaps the ring the line has no length
   and the card simply sits on it. */
.as-hub { container-type: inline-size; }
@media (min-width: 1100px) {
  .as-hub__card { --as-reach-top: max(0px, calc(50cqw - 471px)); --as-reach-bottom: max(0px, calc(50cqw - 511px)); }
  .as-hub__card::before, .as-hub__card::after { content: ""; position: absolute; pointer-events: none; }
  .as-hub__card::before { height: 1.5px; background: var(--as-line-strong); }
  .as-hub__card::after { width: 9px; height: 9px; border-radius: 50%; background: var(--as-ink); box-shadow: 0 0 0 4px var(--as-bg); }
  .as-hub__card--1::before, .as-hub__card--2::before { top: 29px; width: var(--as-reach-top); }
  .as-hub__card--3::before, .as-hub__card--4::before { top: 91px; width: var(--as-reach-bottom); }
  .as-hub__card--1::after, .as-hub__card--2::after { top: 24.5px; }
  .as-hub__card--3::after, .as-hub__card--4::after { top: 86.5px; }
  .as-hub__card--1::before { left: 100%; }
  .as-hub__card--1::after { left: calc(100% + var(--as-reach-top) - 4.5px); }
  .as-hub__card--2::before { right: 100%; }
  .as-hub__card--2::after { right: calc(100% + var(--as-reach-top) - 4.5px); }
  .as-hub__card--3::before { left: 100%; }
  .as-hub__card--3::after { left: calc(100% + var(--as-reach-bottom) - 4.5px); }
  .as-hub__card--4::before { right: 100%; }
  .as-hub__card--4::after { right: calc(100% + var(--as-reach-bottom) - 4.5px); }
  /* A hover lift would pull the card off its line. */
  .as-hub__card:hover { transform: none; box-shadow: none; }
}
.as-hub__brief strong { font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.as-hub__list { display: contents; }
.as-hub__card { position: absolute; width: 300px; text-align: left; }
.as-hub__card--1 { left: 20px; top: 120px; }
.as-hub__card--2 { right: 20px; top: 120px; }
.as-hub__card--3 { left: 60px; top: 360px; }
.as-hub__card--4 { right: 60px; top: 360px; }
.as-hub__foot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 580px; max-width: 100%; text-align: center; }
.as-hub__foot h3 { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.2px; }
.as-hub__foot p { margin-top: 6px; color: var(--as-muted); font-size: var(--fs-meta); }

/* ---- Approach ---------------------------------------------------------- */
.as-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 56px; text-align: left; }
/* One surface per card, no separate art band. Each sprint has its own hue,
   which carries through to the schedule below so the two read together. */
.as-phase {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 320px; padding: 28px 26px 32px;
  background: var(--as-card); border: 1px solid var(--as-line); border-radius: var(--as-r-panel);
}
.as-phase__icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 36px; border-radius: 14px;
  background: color-mix(in srgb, var(--hue) 16%, transparent);
}
.as-phase__icon svg { width: 24px; height: 24px; fill: none; stroke: color-mix(in srgb, var(--hue) 70%, var(--as-ink)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-phase h3 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; }
.as-phase__text { color: var(--as-muted); font-size: var(--fs-meta); line-height: 22px; }

/* Rules: an editorial list, not a box. A heading on the left, four numbered
   rows on the right, separated by hairlines. */
.as-rules {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; width: 100%; margin-top: 88px; text-align: left;
}
.as-rules__head h3 { margin-top: 14px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.6px; line-height: 1.15; text-wrap: balance; }
/* Hairlines only between rows: none above the first or below the last. */
.as-rules__list li:first-child { border-top: 0; padding-top: 0; }
.as-rules__list li:last-child { padding-bottom: 0; }
.as-rules__list li {
  display: grid; grid-template-columns: 44px minmax(0, 11fr) minmax(0, 14fr); gap: 20px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--as-line);
}
.as-rules__n { color: var(--ap-point); font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.as-rules__list h4 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.as-rules__list p { color: var(--as-muted); font-size: var(--fs-meta); line-height: 22px; }

/* Schedule: a plain timeline. Week columns with hairline guides, one bar per
   sprint carrying its own name, in the same hues as the cards above. */
.as-gantt { width: 100%; margin-top: 88px; text-align: left; }
.as-gantt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.as-gantt__head h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.6px; line-height: 1.15; }
.as-gantt__scroll { overflow-x: auto; margin-top: 28px; padding-bottom: 4px; }
.as-gantt__chart { min-width: 640px; }
.as-gantt__weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-bottom: 12px; color: var(--as-faint); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.as-gantt__weeks span { padding-left: 10px; }
.as-gantt__rows {
  display: grid; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--as-line);
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), var(--as-line) calc(12.5% - 1px), var(--as-line) 12.5%);
}
.as-gantt__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.as-gantt__bar {
  grid-column: var(--from) / span var(--span); display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 44px; padding: 0 16px; border-radius: 12px; transform-origin: 0 50%; white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--hue) 22%, var(--as-bg));
  color: color-mix(in srgb, var(--hue) 40%, var(--as-ink)); font-size: var(--fs-meta); font-style: normal;
}
.as-gantt__bar b { font-weight: 600; }

/* ---- Solution ----------------------------------------------------------- */
/* Four steps of the pattern, as ruled columns rather than four boxes. */
.as-anat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 56px; }
.as-anat li { padding-top: 18px; border-top: 1px solid var(--as-line-strong); }
.as-anat__n { display: block; margin-bottom: 28px; color: var(--as-faint); font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.as-anat h3 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; }
.as-anat p { margin-top: 8px; color: var(--as-muted); font-size: var(--fs-meta); line-height: 22px; }
.as-proto { margin-top: 64px; }
.as-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto 0; }
/* One row wherever it fits; below that the chips wrap and stay centred. */
@media (min-width: 1100px) { .as-chips { flex-wrap: nowrap; } .as-chip { flex: none; } }
.as-chip {
  padding: 9px 16px; border: 1px solid var(--as-line-strong); border-radius: 999px;
  background: transparent; color: var(--as-ink); cursor: pointer;
  font: 500 var(--fs-meta) / 1 var(--as-font-body); letter-spacing: -.01em;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.as-chip:hover { transform: translateY(-2px); border-color: var(--as-ink); }
.as-chip[aria-pressed="true"] { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-bg); }

/* ---- Ask Aster ---------------------------------------------------------- */
.as-ask {
  display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center;
  padding: 68px; overflow: hidden;
  background: var(--as-tint); color: var(--as-tint-ink); border-radius: var(--as-r-panel);
}
.as-ask .as-tag { color: var(--as-tint-faint); }
.as-ask__title { margin-top: 14px; font-size: clamp(26px, 2.64vw, 38px); }
.as-ask__lede { margin-top: 22px; color: var(--as-tint-muted); font-size: var(--fs-body); line-height: 25px; }
.as-ask__qs { display: grid; gap: 10px; margin-top: 26px; }
.as-ask__qs li { padding: 12px 16px; border-radius: 12px; background: var(--as-tint-item); font-size: var(--fs-meta); }
.as-ask__shot { overflow: hidden; border-radius: var(--as-r-media); box-shadow: var(--as-tint-shadow); }
.as-ask__shot img { width: 100%; }

/* ---- Detail on demand --------------------------------------------------- */
.as-ints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin-top: 56px; }
.as-int h3 { margin-top: 12px; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.2px; }
.as-int p { margin-top: 4px; color: var(--as-muted); font-size: var(--fs-meta); line-height: 21px; }
/* A 3:2 frame: most captures are within a few percent of it, so they show
   whole; the wider ones (Share view, Chart menu) crop sideways, framed per
   image by --focus on the <img>. */
.as-int__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--as-line); border-radius: var(--as-r-media); background: var(--as-card); }
.as-int__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1s var(--ease-out); }
@media (hover: hover) { .as-int:hover .as-int__thumb img { transform: scale(1.05); } }

/* ---- Design system ------------------------------------------------------ */
.as-dsg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.as-panel { padding: 30px; background: var(--as-inset); border-radius: var(--as-r-panel); }
.as-panel--wide { grid-column: span 2; }
.as-panel--full { grid-column: 1 / -1; }
.as-panel__gap { margin-top: 30px; }
.as-sws { display: grid; gap: 14px; margin-top: 16px; }
.as-sws--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.as-sws--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.as-sw i { display: block; height: 70px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.as-sw b { display: block; margin-top: 9px; font-size: var(--fs-small); font-weight: 600; }
.as-sw span { color: var(--as-faint); font-size: var(--fs-small); }
.as-ramp { height: 12px; margin-top: 22px; border-radius: 6px; background: linear-gradient(90deg, #e3edff, #2e85ff); transform-origin: 0 50%; }
.as-ramp__ends { display: flex; justify-content: space-between; margin-top: 7px; color: var(--as-faint); font-size: var(--fs-small); }
.as-panel .as-note { margin-top: 16px; }
.as-root .as-type__aa { margin-top: 12px; font: 600 84px / 1 "Segoe UI", var(--font-body); }
.as-type__aa + .as-note { margin-top: 6px; }
.as-type__rows { margin-top: 20px; }
.as-type__rows div { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-meta); }
.as-type__rows dt { font-weight: 600; }
.as-type__rows dd { color: var(--as-faint); }
.as-principles { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; font-size: var(--fs-meta); }
.as-principles li { display: flex; gap: 14px; }
.as-principles b { width: 24px; color: var(--as-faint); font-variant-numeric: tabular-nums; }
.as-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; margin-top: 18px; }
.as-comps__col { display: flex; flex-direction: column; gap: 16px; }
.as-comps__row { display: flex; gap: 8px; flex-wrap: wrap; }
.as-pill { display: inline-block; padding: 8px 14px; border: 1px solid var(--as-line); border-radius: 999px; background: var(--as-card); font-size: var(--fs-small); }
.as-pill--main { background: var(--ap-main); border-color: var(--ap-main); color: #fff; }
.as-pill--tint { background: #e3edff; border-color: #cfe0ff; color: var(--ap-sub); }
.as-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; }
.as-badge--up { background: #d8f3e6; color: #0e6b45; }
.as-badge--down { background: #fbddd9; color: #9a2a1f; }
.as-badge--warn { background: #fbebcf; color: #8a5a0a; }
.as-badge--info { background: #e3edff; color: var(--ap-sub); }
.as-segmented { display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid var(--as-line); border-radius: 9px; font-size: var(--fs-small); }
.as-segmented span { padding: 7px 14px; background: var(--as-card); }
.as-segmented .is-on { background: var(--ap-main); color: #fff; }
.as-kpi { padding: 18px; border-radius: 14px; background: var(--as-card); }
.as-kpi__label { color: var(--as-faint); font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; }
.as-kpi__value { margin: 4px 0 8px; font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Architecture as a staircase: every level depends only on the one before,
   so each tier steps in from the last and deepens in Aster blue. An elbow
   joins each tier to the one it stands on. */
.as-arch { display: grid; gap: 10px; margin-top: 24px; }
.as-arch li {
  --step: 56px;
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  margin-left: calc(var(--i) * var(--step)); padding: 16px 22px; border-radius: 14px;
  background: color-mix(in srgb, var(--ap-main) calc(7% + var(--i) * 3.2%), var(--as-card));
}
.as-arch li + li::before {
  content: ""; position: absolute; left: -28px; top: -14px; width: 28px; height: 38px; pointer-events: none;
  background:
    linear-gradient(var(--as-line-strong), var(--as-line-strong)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--as-line-strong), var(--as-line-strong)) 0 100% / 100% 1.5px no-repeat;
}
.as-arch b { font: 600 clamp(30px, 3vw, 42px) / 1 var(--as-font-title); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.as-arch h3 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.as-arch p { margin-top: 2px; color: var(--as-muted); font-size: var(--fs-meta); line-height: 21px; }
.as-arch__lvl { color: var(--as-faint); font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.as-dsimgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.as-frame { display: block; overflow: hidden; border: 1px solid var(--as-line); border-radius: var(--as-r-media); }
.as-frame img { width: 100%; transition: transform 1s var(--ease-out); }
@media (hover: hover) { .as-dsimgs figure:hover .as-frame img { transform: scale(1.04); } }
.as-dsimgs figcaption { margin-top: 10px; color: var(--as-muted); font-size: var(--fs-small); line-height: 19px; }

/* ---- Impact ------------------------------------------------------------- */
.as-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; margin-top: 56px; }
.as-stat { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid var(--as-line-strong); }
.as-stat__n { margin-bottom: 26px; font: 500 clamp(52px, 6vw, 88px) / .9 var(--font-body); letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-stat__x { margin-inline: .12em; font-size: .6em; font-weight: 400; letter-spacing: 0; vertical-align: .12em; color: var(--as-faint); }
.as-stat h3 { margin-top: auto; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.2px; }
.as-stat h3 + p { margin-top: 6px; color: var(--as-muted); font-size: var(--fs-meta); line-height: 21px; }

/* ---- Closing ------------------------------------------------------------ */
.as-closing { padding-top: var(--as-section-gap); }
.as-closing__statement { max-width: 900px; font-size: clamp(24px, 2.5vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -1.2px; }
.as-closing .as-sub { margin-top: 22px; }
.as-closing__media { width: 100%; margin-top: 56px; padding: 56px; background: var(--as-tint); border-radius: var(--as-r-panel); overflow: hidden; }
.as-closing__media img { width: 100%; border-radius: var(--as-r-media); box-shadow: var(--as-tint-shadow); }

/* ---- Next --------------------------------------------------------------- */
.as-next { padding-top: var(--as-section-gap); }
.as-next > .as-tag { padding-bottom: 24px; }
.as-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.as-next__list li { display: flex; flex-direction: column; gap: 11px; padding: 24px 44px 0 0; border-top: 1px solid var(--as-line); }
.as-next__list h3 { font-size: 19px; font-weight: 600; letter-spacing: -.4px; line-height: 25px; }
.as-next__list p { color: var(--as-muted); font-size: var(--fs-meta); line-height: 22px; }

/* ---- Motion helpers (filled by aster-analytics.js) ----------------------- */
.as-word { display: inline-block; white-space: nowrap; }
.as-char { display: inline-block; overflow: hidden; vertical-align: top; }
.as-char > span { display: inline-block; }

/* =====================================================================
   Tablet · <=1099px
   ===================================================================== */
@media (max-width: 1099px) {
  .as-head { flex-direction: column; gap: 14px; }
  .as-hub { height: auto; display: grid; gap: 14px; margin-top: 44px; }
  .as-hub__rings, .as-hub__core { display: none; }
  .as-hub__brief, .as-hub__foot { position: static; transform: none; width: 100%; margin: 0 auto 8px; }
  .as-hub__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .as-hub__card { position: static; width: 100%; }
  .as-phases, .as-stats, .as-anat, .as-ints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-anat, .as-stats { gap: 36px 28px; }
  .as-ints { gap: 44px 24px; }
  .as-rules { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; }
  .as-gantt { margin-top: 64px; }
  .as-ask { grid-template-columns: 1fr; padding: 44px; }
  .as-dsg { grid-template-columns: 1fr 1fr; }
  .as-arch li { --step: 36px; }
  .as-next__list li { padding-right: 28px; }
  
}

/* =====================================================================
   Phone · <=699px
   ===================================================================== */
@media (max-width: 699px) {
  .as-title { font-size: 30px; line-height: 1.08; }
  .as-sub, .as-head__desc, .as-intro__sub { font-size: var(--fs-meta); line-height: 1.55; }
  .as-sub { margin-top: 12px; max-width: 34em; }
  .as-head { gap: 10px; }
  .as-intro { gap: 20px; }
  .as-intro__lead { font-size: 20px; line-height: 30px; letter-spacing: -.3px; }
  .as-hub__list, .as-phases, .as-anat, .as-ints, .as-stats, .as-dsimgs, .as-next__list{ grid-template-columns: minmax(0, 1fr); }
  .as-phases, .as-stats, .as-ints { margin-top: 30px; }
  .as-rules__list li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; padding: 18px 0; }
  .as-rules__list li p { grid-column: 2; }
  .as-ask { padding: 26px; gap: 28px; }
  .as-dsg { grid-template-columns: minmax(0, 1fr); }
  .as-panel--wide, .as-panel--full { grid-column: auto; }
  .as-panel { padding: 22px; }
  .as-sws--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-sws--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-comps { grid-template-columns: 1fr; }
  .as-anat, .as-stats { gap: 28px; }
  .as-arch li { --step: 14px; grid-template-columns: 56px minmax(0, 1fr); padding: 14px 16px; gap: 14px; }
  .as-arch li + li::before { left: -14px; width: 14px; }
  .as-arch__lvl { display: none; }
  .as-stat h3 { margin-top: 0; }
  .as-stat__n { margin-bottom: 18px; }
  .as-closing__statement { letter-spacing: -.8px; line-height: 30px; }
  .as-closing__media { padding: 18px; margin-top: 32px; }
  .as-next__list li { gap: 6px; padding: 16px 0; }
  .as-next__list h3 { font-size: var(--fs-body); }
  
  
  
  
}

@media (prefers-reduced-motion: reduce) {
  .as-card, .as-int__thumb img, .as-frame img{ transition: none; }
}

/* ---- Overlay-proofing -----------------------------------------------------
   Opened from the Work grid, this page is injected into the homepage, whose
   own h1, link and button colours outrank the single-class rules above. The
   hero and chrome sit on photography and are white by design, so they state
   it at root weight, as Freight and Nivora do. */
.as-root .as-hero__title { color: #fff !important; }
.as-root .as-hero__tagline { color: rgba(255, 255, 255, .85); }
.as-root .as-meta__label { color: rgba(255, 255, 255, .58); }
.as-root .as-meta__value { color: rgba(255, 255, 255, .96); }
.as-root .as-chrome :is(.as-close, .as-theme-toggle) { color: #fff; }
.as-root .as-chrome.is-on-light :is(.as-close, .as-theme-toggle) { color: #222; }
:root[data-theme="dark"] .as-root .as-chrome.is-on-light :is(.as-close, .as-theme-toggle) { color: #fff; }
.as-root :where(p) { color: inherit; }

/* Delta arrows drawn in CSS rather than typed as characters. */
.as-badge--up::before, .as-badge--down::before {
  content: ""; display: inline-block; width: 7px; height: 6px; margin-right: 6px; vertical-align: 1px; background: currentColor;
}
.as-badge--up::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.as-badge--down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.as-kpi__label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ap-point); vertical-align: 1px; }