/* ═══════════════════════════════════════════════════════════════
   Our Service — Version B (End-to-end timeline spine)
   Builds on styles-v2.css dark base (AIDC blue). Body class: .service-b
   ═══════════════════════════════════════════════════════════════ */

.service-b {
  --b-blue:    #1A6BFF;
  --b-cyan:    #00D4FF;
  --b-grad:    linear-gradient(135deg, #1A6BFF 0%, #00D4FF 100%);
  --b-soft:    linear-gradient(135deg, rgba(26,107,255,0.14) 0%, rgba(0,212,255,0.07) 100%);
  --b-border:  rgba(255,255,255,0.09);
  --b-border2: rgba(26,107,255,0.42);
  --b-card:    rgba(255,255,255,0.025);
  --b-card-h:  rgba(255,255,255,0.05);
  --b-line:    rgba(26,107,255,0.45);
  --b-panel:   #0B1628;
}

/* unified eyebrow size across the page (matches software page 14px) */
.service-b .eyebrow { font-size: 14px; }

/* shared layout */
.sb-wrap { max-width: 1200px; margin: 0 auto; }
.service-b main > section { padding: 110px 48px; }
/* widened + slightly smaller so short titles fit ONE line (Kuma 2026-06-22);
   genuinely long titles still wrap, balanced. The head box is wide for the
   title; the sub-paragraph is capped separately so it stays readable. */
.sb-head { max-width: 1000px; margin-bottom: 56px; }
.sb-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sb-head h2 {
  font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.14; margin: 14px 0 0; color: var(--text-1);
  text-wrap: balance;   /* one-line preferred; clean balanced wrap when too long */
}
.sb-head > p { font-size: 1rem; color: var(--text-2); line-height: 1.72; margin-top: 16px; max-width: 680px; }
.sb-head.center > p { margin-left: auto; margin-right: auto; }

/* ── HERO ─────────────────────────────────────────────────────── */
.sb-hero {
  position: relative; overflow: hidden; text-align: center;
  padding-top: 150px !important; padding-bottom: 90px !important;
  background-color: var(--bg-base);
  background-image: url('assets/service/hero_bg_01.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* legibility wash — darkens the left (where the copy sits) over the image */
.sb-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6,13,26,0.92) 0%, rgba(6,13,26,0.74) 36%,
    rgba(6,13,26,0.34) 70%, rgba(6,13,26,0.12) 100%);
}
/* index-style colour glow (AIDC blue + cyan + Chthonia green), above the
   wash and below the content (2026-06-22) */
.sb-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 60% at 16% 36%, rgba(26,107,255,0.34) 0%, transparent 60%),
    radial-gradient(ellipse 52% 50% at 84% 20%, rgba(0,212,255,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 66% 58% at 66% 94%, rgba(0,201,141,0.38) 0%, transparent 62%);
}
.sb-hero-inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.sb-hero h1 {
  font-size: var(--fs-display); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.035em; color: var(--text-1); margin-bottom: 22px;
}
.sb-hero h1 em {
  font-style: normal; background: var(--b-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sb-hero-sub { max-width: 680px; margin: 0 auto 36px; font-size: var(--fs-lead); color: var(--hero-sub-color); line-height: 1.7; text-shadow: var(--hero-sub-shadow); }
.sb-hero .hero-actions { justify-content: center; }

/* ── HERO · left-aligned single column (2026-06-22) ───────────────────
   KPI panel removed per Kuma — the right side will be handled later with a
   background image. Copy is capped on the left so the headline keeps to two
   tidy lines (Design, Build, and Operate / Your AI Data Center) instead of
   breaking into four, and leaves the right half open for that bg artwork. */
.sb-hero.sb-hero-split { text-align: left; }
.sb-hero-content { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.sb-hero-left { max-width: 760px; }
.sb-hero-split h1 { font-size: var(--fs-display); }
.sb-hero-split .sb-hero-sub { max-width: 560px; margin: 0 0 36px; }
.sb-hero-split .hero-actions { justify-content: flex-start; }

.sb-journey-strip {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  margin-top: 56px; position: relative;
}
.sb-journey-strip li {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  position: relative; padding: 0 30px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-2);
}
.sb-journey-strip li span {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--b-border2); background: rgba(26,107,255,0.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: var(--b-cyan);
}
.sb-journey-strip li:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; left: calc(50% + 20px);
  width: calc(100% - 40px); height: 1px; background: var(--b-border2);
}

/* ── SERVICE PROMISE ──────────────────────────────────────────── */
.sb-promise { background: var(--bg-surface); }
.sb-promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sb-promise-grid article {
  position: relative;
  background: var(--b-card); border: 1px solid var(--b-border); border-radius: var(--radius-m);
  padding: 30px 26px; transition: all 0.3s var(--ease);
}
.sb-promise-grid article:hover { background: var(--b-card-h); border-color: var(--b-border2); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* hover underline at the BOTTOM — unified site-wide with software's cards.
   Inset so it sits inside the rounded corners (the card can't use
   overflow:hidden — that would clip the arrow that lives outside it). */
.sb-promise-grid article::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--b-grad); border-radius: 2px;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.sb-promise-grid article:hover::before { opacity: 1; }
/* directional arrow between cards (desktop 4-across only) — chevron in the
   software operating-loop style: large, straddling the seam, AIDC-cyan with a
   glow. Drift animation mirrors the lifecycle arrows. */
.sb-promise-grid article:not(:last-child)::after {
  content: ''; position: absolute; top: calc(50% - 10px); right: -25px;
  width: 20px; height: 20px;
  border-right: 4px solid var(--b-cyan); border-bottom: 4px solid var(--b-cyan);
  border-radius: 0 0 4px 0;
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 9px rgba(0,212,255,0.65));
  z-index: 3;
  animation: sb-arrow-flow 2.4s ease-in-out infinite;
}
@keyframes sb-arrow-flow {
  0%, 100% { transform: translateX(0) rotate(-45deg); }
  50%      { transform: translateX(5px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-promise-grid article:not(:last-child)::after { animation: none; }
}
.sb-promise-grid h3 { font-size: 1.12rem; font-weight: 700; color: var(--text-1); margin: 0 0 10px; }
.sb-promise-grid p { font-size: 0.9rem; color: var(--text-2); line-height: 1.66; }

/* ── DELIVERY JOURNEY (timeline spine) ────────────────────────── */
.sb-journey {
  position: relative;
  background-color: var(--bg-base);
  background-image: url('assets/service/section_BG_01.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* legibility wash over the bg image — the timeline cards use a near-transparent
   fill, so darken enough that the cards + spine stay readable (2026-06-22) */
.sb-journey::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    /* left/right edge vignette — fade the artwork into the dark page
       (same treatment as software's parallax sections) */
    linear-gradient(to right,
      #060D1A 0%, rgba(6,13,26,0) 17%, rgba(6,13,26,0) 83%, #060D1A 100%),
    /* top/bottom readability wash */
    linear-gradient(to bottom,
      rgba(6,13,26,0.93) 0%, rgba(6,13,26,0.82) 28%,
      rgba(6,13,26,0.82) 72%, rgba(6,13,26,0.95) 100%);
}
.sb-journey > .sb-wrap { position: relative; z-index: 1; }
.sb-timeline { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 1000px; margin: 0 auto; }
.sb-timeline::before {
  content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 0%, var(--b-line) 6%, var(--b-cyan) 50%, var(--b-line) 94%, transparent 100%);
}
.sb-station { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.sb-station .sb-node {
  grid-column: 2; justify-self: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--b-grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 0.95rem;
  box-shadow: 0 0 24px rgba(26,107,255,0.4); z-index: 1;
  border: 4px solid var(--bg-base);
}
.sb-station.left .sb-card  { grid-column: 1; text-align: right; }
.sb-station.right .sb-card { grid-column: 3; text-align: left; }
.sb-card {
  background: var(--b-card);
  border: 1px solid rgba(26,107,255,0.5);   /* obvious AIDC-blue hairline (Kuma 2026-06-22) */
  border-radius: var(--radius-m); padding: 18px 26px; transition: all 0.3s var(--ease);
}
.sb-card:hover { border-color: rgba(26,107,255,0.75); background: var(--b-card-h); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* tighter vertical rhythm for the journey section (Kuma 2026-06-22) */
.service-b .sb-journey { padding-top: 84px; padding-bottom: 84px; }
.sb-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.sb-card p { font-size: 0.92rem; color: var(--text-2); line-height: 1.62; }
/* leading icon on the spine-facing side of each card (Kuma 2026-06-22):
   left stations → icon on the right edge; right stations → icon on the left. */
.sb-card { display: flex; align-items: center; gap: 18px; }
.sb-station.left .sb-card { flex-direction: row-reverse; }
.sb-card-body { flex: 1; min-width: 0; }
.sb-card-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,107,255,0.12);
  border: 1px solid rgba(26,107,255,0.42);
}
.sb-card-icon svg { width: 28px; height: 28px; stroke: #1FA8F2; }

/* ── INTEGRATED STACK ─────────────────────────────────────────── */
.sb-stack { background: var(--bg-surface); }
.sb-stack-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sb-stack-copy .eyebrow { display: block; }
.sb-stack-copy h2 { font-size: var(--fs-h2-sm); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin: 14px 0 16px; color: var(--text-1); }
.sb-stack-copy p { font-size: 0.98rem; color: var(--text-2); line-height: 1.72; }
.sb-stack-diagram { display: flex; flex-direction: column; gap: 8px; }
.sb-layer {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px; border-radius: var(--radius-m);
  background: var(--b-card); border: 1px solid var(--b-border); transition: all 0.25s var(--ease);
}
.sb-layer:hover { transform: translateX(4px); border-color: var(--b-border2); }
/* Chthonia layer uses the Chthonia green palette (brand tie-in) */
.sb-layer--chthonia { background: linear-gradient(135deg, rgba(0,201,141,0.16) 0%, rgba(0,212,255,0.07) 100%); border-color: rgba(0,201,141,0.4); }
.sb-layer--chthonia:hover { border-color: rgba(0,201,141,0.6); }
.sb-layer--chthonia .sb-layer-k { color: #00C98D; }
.sb-layer--chthonia .sb-layer-n { color: var(--text-1); }
/* width fits the longest label ("INFRASTRUCTURE" ≈ 148px at the 14px type-scale
   size) so it can't overflow its column and collide with the value (Kuma
   2026-06-30). Mobile overrides this to width:auto — label sits above value. */
.sb-layer-k { flex-shrink: 0; width: 152px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-cyan); font-family: var(--font-body); }
.sb-layer-n { font-size: 1rem; font-weight: 600; color: var(--text-1); }

/* ── SEVEN SERVICES (numbered index) ──────────────────────────── */
.sb-services { background: var(--bg-base); }
.sb-services-list { list-style: none; border-top: 1px solid var(--b-border); }
.sb-services-list li {
  display: grid; grid-template-columns: 64px 320px 1fr; gap: 28px; align-items: center;
  padding: 26px 12px; border-bottom: 1px solid var(--b-border); transition: background 0.25s var(--ease);
}
.sb-services-list li:hover { background: var(--b-card); }
.sb-svc-k { font-size: 1.4rem; font-weight: 800; color: var(--b-border2); font-family: var(--font-body); }
.sb-services-list li:hover .sb-svc-k { color: var(--b-cyan); }
.sb-services-list h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-1); }
.sb-services-list p { font-size: 0.92rem; color: var(--text-2); line-height: 1.6; }

/* ── VALIDATION TABLE ─────────────────────────────────────────── */
.sb-validation { background: var(--bg-surface); }
.sb-table { border: 1px solid var(--b-border); border-radius: var(--radius-m); overflow: hidden; }
.sb-tr { display: grid; grid-template-columns: 180px 1.4fr 1fr; gap: 24px; padding: 18px 26px; border-bottom: 1px solid var(--b-border); }
.sb-tr:last-child { border-bottom: none; }
.sb-tr.head { background: rgba(26,107,255,0.08); }
.sb-tr.head span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-cyan); font-family: var(--font-body); }
.sb-tr:not(.head) span:first-child { font-weight: 700; color: var(--text-1); }
.sb-tr span { font-size: 0.92rem; color: var(--text-2); line-height: 1.55; }

/* ── GLOBAL OPS ───────────────────────────────────────────────── */
.sb-global { background: var(--bg-base); }
.sb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sb-stat {
  text-align: center; padding: 44px 28px; border-radius: var(--radius-l);
  background: var(--b-card); border: 1px solid var(--b-border);
}
.sb-stat strong {
  display: block; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  background: var(--b-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 14px;
}
.sb-stat span { font-size: 0.95rem; color: var(--text-2); line-height: 1.5; }

/* ── SCENARIOS ────────────────────────────────────────────────── */
.sb-scenarios { background: var(--bg-surface); }
.sb-scn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sb-scn-grid article {
  padding: 32px 28px; border-radius: var(--radius-m);
  background: var(--b-card); border: 1px solid var(--b-border); transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
/* hover line at the BOTTOM — unified site-wide with software's card underline */
.sb-scn-grid article::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--b-grad); opacity: 0; transition: opacity 0.3s; }
.sb-scn-grid article:hover { border-color: var(--b-border2); transform: translateY(-4px); }
.sb-scn-grid article:hover::before { opacity: 1; }
.sb-scn-k { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-cyan); font-family: var(--font-body); }
.sb-scn-grid h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-1); margin: 14px 0 10px; }
.sb-scn-grid p { font-size: 0.92rem; color: var(--text-2); line-height: 1.66; }

/* ── CTA — saturated AIDC blue→cyan "jump" panel (Kuma 2026-06-22, mirrors
   software S11). Bright cyan kept on the copy side so the inverted dark text
   stays legible; deep blue on the button side. Primary = white pill with
   gradient text (wrapped in <span>). ─────────────────────────────────── */
/* full-bleed CTA band — hex-texture image blended under a semi-transparent
   blue tint so the panel reads softer (not a full bright gradient) and its
   top/bottom edges fade into the dark page (Kuma 2026-06-23, CTA_BG_02). */
.sb-cta {
  background:
    linear-gradient(118deg, rgba(26,107,255,0.56) 0%, rgba(31,168,242,0.44) 52%, rgba(0,212,255,0.50) 100%),
    linear-gradient(180deg, rgba(7,14,28,0.70) 0%, rgba(7,14,28,0.32) 34%, rgba(7,14,28,0.34) 66%, rgba(7,14,28,0.82) 100%),
    url('assets/visuals/CTA_BG_02.jpg') center / cover no-repeat,
    #0A1426;
  position: relative; overflow: hidden;
}
.sb-cta::before {   /* gentle top sheen (lighter than the old bright panel) */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 10%, rgba(255,255,255,0.12) 0%, transparent 60%);
}
.sb-cta-band {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  padding: 0; border: none; border-radius: 0; background: none;
}
.sb-cta-text { max-width: 1000px; }
.sb-cta-text h2 { font-size: var(--fs-cta); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 12px; line-height: 1.16; }
.sb-cta-text > p { font-size: 0.99rem; color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 640px; margin: 0 auto; }
.sb-cta-band .button { flex-shrink: 0; }
.sb-cta-band .button.primary { background: #fff; border: none; box-shadow: 0 12px 30px rgba(0,20,45,0.28); }
.sb-cta-band .button.primary span {
  color: #0A0A0A; -webkit-text-fill-color: #0A0A0A; background: none;
  font-weight: 700;
}
.sb-cta-band .button.primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,20,45,0.35); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sb-promise-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-promise-grid article::after { display: none; }
  .sb-stack-layout { grid-template-columns: 1fr; gap: 36px; }
  .sb-stats, .sb-scn-grid { grid-template-columns: 1fr; }
  .sb-services-list li { grid-template-columns: 56px 1fr 1.2fr; gap: 20px; }
  .sb-cta-band { flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px 32px; }
}
@media (max-width: 860px) {
  /* hero → re-centred on small screens */
  .sb-hero.sb-hero-split { text-align: center; }
  .sb-hero-left { max-width: 100%; }
  .sb-hero-split .sb-hero-sub { margin-left: auto; margin-right: auto; }
  .sb-hero-split .hero-actions { justify-content: center; }
}
@media (max-width: 768px) {
  .service-b main > section { padding: 80px 20px; }
  .sb-hero { padding-top: 120px !important; }
  .sb-promise-grid { grid-template-columns: 1fr; }
  /* integrated stack: label above value so long labels (INFRASTRUCTURE) don't overlap */
  .sb-stack-diagram .sb-layer { flex-direction: column; align-items: flex-start; gap: 5px; }
  .sb-stack-diagram .sb-layer-k { width: auto; }
  /* timeline collapses to a left rail */
  .sb-timeline::before { left: 26px; }
  .sb-station { grid-template-columns: 52px 1fr; }
  /* pin node + card to the same row: .left stations are card-then-node in
     source order, so sparse auto-placement otherwise drops the node to row 2 */
  .sb-station .sb-node { grid-column: 1; grid-row: 1; }
  .sb-station.left .sb-card, .sb-station.right .sb-card { grid-column: 2; grid-row: 1; text-align: left; }
  .sb-station.left .sb-card { flex-direction: row; }   /* icon on the left for both on mobile */
  .sb-tr { grid-template-columns: 1fr; gap: 4px; }
  .sb-tr.head { display: none; }
  /* seven services: number spans, title + desc stack in column 2 */
  .sb-services-list li { grid-template-columns: 44px 1fr; gap: 6px 16px; align-items: start; }
  .sb-services-list .sb-svc-k { grid-row: span 2; }
  .sb-services-list h3 { grid-column: 2; }
  .sb-services-list p { grid-column: 2; }
}

/* ── Obvious AIDC-blue hairline on all cards (Kuma 2026-06-22) ─────────
   Journey .sb-card handled inline above; this unifies the rest: promise,
   scenarios, global-ops stats, and the integrated-stack layers. The
   Chthonia stack layer keeps its green brand border. Placed at EOF so the
   colour wins over each card's earlier rest/hover border-color. */
.sb-promise-grid article,
.sb-scn-grid article,
.sb-stat,
.sb-layer:not(.sb-layer--chthonia) {
  border-color: rgba(26,107,255,0.5);
}
.sb-promise-grid article:hover,
.sb-scn-grid article:hover,
.sb-layer:not(.sb-layer--chthonia):hover {
  border-color: rgba(26,107,255,0.75);
}

/* ── Section divider hairlines (Kuma 2026-06-22) ──────────────────────
   Faint AIDC-blue centred fading line at the TOP and BOTTOM of the raised
   (surface) sections — mirrors the software page's section-divider effect,
   recoloured blue. background-color stays surface (only the image longhand
   is set here, after each section's earlier `background:` shorthand). */
.sb-promise, .sb-stack, .sb-validation {
  background-image:
    linear-gradient(90deg, transparent 0%, var(--b-line) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, var(--b-line) 50%, transparent 100%);
  background-size: 80% 1px, 80% 1px;
  background-position: top center, bottom center;
  background-repeat: no-repeat;
}

/* merged Global-ops + Scenarios (Kuma 2026-06-22): one base section, two
   alternating editorial rows — row 1 heading-left | stats-right, row 2
   cards-left | heading-right. Stats lose their card bg and are split by
   blue dividers; scenario cards keep their card style. */
.sb-coverage { background: var(--bg-base); }
.sb-cov-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.sb-cov-row + .sb-cov-row { margin-top: 88px; }
.sb-cov-row--rev { grid-template-columns: 0.55fr 1.45fr; }
.sb-cov-head { max-width: none; margin: 0; }
.sb-cov-head--right { text-align: right; }
/* slightly smaller than the standard section h2 so the heading keeps to two
   lines inside its narrower column */
.sb-cov-head h2 { font-size: var(--fs-section); }
/* scenario cards sit in the right column — tighten so titles fit one line */
.sb-cov-row--rev .sb-scn-grid article { padding: 22px 20px; }
.sb-cov-row--rev .sb-scn-grid h3 { font-size: 1.05rem; margin: 12px 0 8px; }
.sb-cov-row--rev .sb-scn-grid p { font-size: 0.86rem; }
/* stats strip — no card bg, blue vertical divider between the 3 figures */
.sb-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.sb-stat-strip .sb-stat { background: none; border: none; border-radius: 0; padding: 4px 20px; text-align: left; }
.sb-stat-strip .sb-stat + .sb-stat { border-left: 1px solid var(--b-border2); }
.sb-stat-strip .sb-stat strong { font-size: 3.2rem; margin-bottom: 10px; }
.sb-stat-strip .sb-stat span { font-size: 0.85rem; }
.sb-cov-row--rev .sb-scn-grid { gap: 16px; }
@media (max-width: 900px) {
  .sb-cov-row, .sb-cov-row--rev { grid-template-columns: 1fr; gap: 28px; }
  .sb-cov-head--right { text-align: left; }
  .sb-cov-row > .sb-cov-head { order: -1; }   /* heading before its content on mobile */
  .sb-stat-strip { grid-template-columns: 1fr; }
  .sb-stat-strip .sb-stat + .sb-stat { border-left: none; border-top: 1px solid var(--b-border2); padding-top: 16px; margin-top: 6px; }
}

/* ── ONE-STOP hub-and-spoke — arc/splay + connector lines (Kuma 2026-06-22)
   7 platform cards positioned in an arc around a central "One delivery model"
   core, each linked back by a faint blue spoke. All cards share one fixed
   width. Per-card position lives in inline --x/--y (matched by the SVG line
   endpoints). Collapses to a single stacked column on mobile. */
.sb-hub {
  position: relative;
  height: 680px;
  max-width: 1180px; margin: 0 auto;
}
.sb-hub-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.sb-hub-lines line {
  stroke: rgba(26,107,255,0.45); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.sb-hub-card {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 248px; z-index: 1;
  background: var(--b-panel);   /* opaque so the spoke lines don't bleed through */
  border: 1px solid rgba(26,107,255,0.5);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sb-hub-card:hover {
  border-color: rgba(26,107,255,0.75); background: #0E1E3A;
  box-shadow: 0 10px 30px -12px rgba(26,107,255,0.5);
}
.sb-hub-card h3 {
  font-size: 1rem; font-weight: 700; color: var(--text-1);
  margin: 0 0 7px; display: flex; align-items: center; gap: 10px;
}
.sb-hub-card h3::before {
  content: ''; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--b-blue); box-shadow: 0 0 8px rgba(26,107,255,0.75);
}
.sb-hub-card p {
  font-size: 0.84rem; color: var(--text-2); line-height: 1.55;
  position: relative; padding-left: 15px;
}
.sb-hub-card p::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--b-border2);
}
/* central core circle */
.sb-hub-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 230px; height: 230px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 30px;
  /* opaque fill so the converging spoke lines stay hidden behind the core */
  background: radial-gradient(circle at 50% 38%, #16305F 0%, #0B1628 70%);
  border: 1.5px solid rgba(26,107,255,0.6);
  box-shadow: 0 0 64px -8px rgba(26,107,255,0.55), inset 0 0 44px rgba(26,107,255,0.10);
}
.sb-hub-core span {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--text-1);
}
/* mobile — drop the absolute arc, stack into one column (core first) */
@media (max-width: 900px) {
  .sb-hub { height: auto; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
  .sb-hub-lines { display: none; }
  .sb-hub-card { position: static; transform: none; width: 100%; }
  .sb-hub-core {
    position: static; transform: none; order: -1;
    width: 100%; height: auto; min-height: 120px; border-radius: var(--radius-l);
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIXED TYPE-SCALE ENFORCEMENT (2026-06-23) — normalises scattered sizes
   Hero 64 / Section 44 / Sub-title 20 / Body 16 / Chart·Eyebrow 14 (px).
   Exempt (kept large): .sb-stat strong, .sb-svc-k, .sb-hub-core span (display figures).
   ═══════════════════════════════════════════════════════════════ */
/* 20px — card / sub-headings */
.sb-promise-grid h3, .sb-card h3, .sb-services-list h3,
.sb-scn-grid h3, .sb-cov-row--rev .sb-scn-grid h3 { font-size: var(--fs-subtitle); }
/* 16px — body / paragraphs / lists + one-stop hub titles + validation table */
.sb-head > p, .sb-promise-grid p, .sb-card p, .sb-stack-copy p,
.sb-services-list p, .sb-scn-grid p, .sb-cov-row--rev .sb-scn-grid p,
.sb-cta-text > p, .sb-hub-card h3,
.sb-tr.head span, .sb-tr span { font-size: var(--fs-body); }
/* 14px — diagram / stat labels + one-stop hub body */
.sb-journey-strip li, .sb-journey-strip li span,
.sb-layer-k, .sb-layer-n, .sb-hub-card p,
.sb-stat span, .sb-stat-strip .sb-stat span, .sb-scn-k { font-size: var(--fs-chart); }
/* Hero + section titles — Montserrat 600 (800 too heavy at display sizes) */
.sb-hero h1, .sb-hero-split h1, .sb-head h2, .sb-stack-copy h2,
.sb-cta-text h2, .sb-cov-head h2 { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX PASS — service (Kuma 2026-06-29)
   ═══════════════════════════════════════════════════════════════ */

/* promise: re-show the directional arrow as a DOWN chevron between the
   now-stacked cards (it's hidden at the 2-col tablet breakpoint). The base
   chevron is a border corner rotated -45deg (points right); rotate it to
   +45deg (points down) and re-anchor to the gap below each card. The
   drift keyframe translates X, which would clobber our centring transform,
   so disable it here. */
@media (max-width: 768px) {
  /* match software's operating-loop arrow: a down chevron that DRIFTS downward
     (same effect/cadence, page-brand cyan instead of green) — Kuma 2026-06-30 */
  .sb-promise-grid article:not(:last-child)::after {
    display: block;
    top: auto; right: auto; bottom: -25px; left: 50%;
    width: 22px; height: 22px;
    transform: translateX(-50%) rotate(45deg);
    animation: sb-arrow-flow-v 1.8s ease-in-out infinite;
  }
  @keyframes sb-arrow-flow-v {
    0%, 100% { transform: translateX(-50%) translateY(-3px) rotate(45deg); opacity: 0.5; }
    50%      { transform: translateX(-50%) translateY(3px) rotate(45deg); opacity: 1; }
  }
  /* journey: align the step number with the card content. Pin node + card to
     the top of the row and nudge the badge down so it optically centres on
     the card's leading icon instead of floating at the card's mid-height. */
  .sb-station { align-items: start; }
  .sb-station .sb-node { margin-top: 20px; }
  .sb-station.left .sb-card, .sb-station.right .sb-card { align-items: flex-start; }
}

/* phones: unify every section header to centre (matches index + software);
   stretch the lone CTA button to the shared 80% pill width. */
@media (max-width: 640px) {
  .sb-head, .sb-stack-copy { text-align: center; margin-left: auto; margin-right: auto; }
  .sb-head > p, .sb-stack-copy .eyebrow, .sb-stack-copy p { margin-left: auto; margin-right: auto; }
  .sb-cov-head, .sb-cov-head--right { text-align: center; }
  /* drop the band's side padding (set at the 1024 breakpoint) so the lone CTA
     button hits the same 80% width as the hero buttons */
  .sb-cta-band { align-items: center; text-align: center; padding-left: 0; padding-right: 0; }
  .sb-cta-band .button { width: 80%; max-width: 360px; justify-content: center; }
}

/* reduced-motion: re-assert no animation on the mobile promise arrow (placed
   after the @media 768 rule above so it wins) */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sb-promise-grid article:not(:last-child)::after { animation: none; }
}