/* Page-only styles for cost-commercial-management.html — loaded after styles.css, only on this page. */

/* capability topics: chips/image sit 44px under the description (design) */
@media (min-width: 768px) {
  .cap-row { margin-top: min(3.06vw, 44px); }
}

/* approach: description box is 765 wide in the design (two lines) */
@media (min-width: 768px) { .cost-approach .section-head .body { max-width: min(53.13vw, 765px); } }

/* business value: heading on one line (1096 box), description 704 */
@media (min-width: 768px) {
  .cost-value .section-head.center { max-width: min(76.11vw, 1096px); margin-inline: auto; }
  .cost-value .section-head .body { max-width: min(48.89vw, 704px); }
}
@media (min-width: 768px) {
  .cost-value .value-row li { padding: min(2.22vw, 32px) 0 min(5.42vw, 78px); }
  .cost-value .value-row h3 { margin-top: min(2.78vw, 40px); line-height: 1.1; }
  .cost-value .value-row p { margin-top: min(1.11vw, 16px); line-height: 18px; }
}
/* the design leaves 163px between the dark approach block and this heading */
@media (min-width: 768px) { .cost-value { padding-top: min(11.32vw, 163px); } }

/* design's manual line breaks in capability descriptions (wide screens only) */
.br-cap { display: none; }
@media (min-width: 1200px) { .br-cap { display: inline; } }
/* capability list ends 162px above the dark approach block */
#services { padding-bottom: min(11.25vw, 162px); }
@media (max-width: 767px) { #services { padding-bottom: var(--section); } }
@media (min-width: 768px) {
  /* topics start 51px right of the hairline; the last topic has no bottom padding */
  .cap-item { padding-left: min(3.54vw, 51px); }
  .cap-item:last-child { padding-bottom: 0; }
}

/* phones: stack the approach cards (inline grid-column would keep five columns), readable icon sizes */
@media (max-width: 767px) {
  .zig-card, .zig-card.low { grid-column: auto !important; }
  .cost-value .value-row .icon svg, .stat-card .icon svg { width: 32px; height: 32px; }
  .cost-value .value-row h3 { margin-top: 16px; }
}

/* hero: tagline 18/23, subheading box 822 wide (design) */
@media (min-width: 768px) {
  .hero .eyebrow { font-size: min(1.25vw, 18px); }
  .hero .intro { max-width: min(57.08vw, 822px); }
}

/* overview arch: the design's #fafafa ellipse is 1780 wide with a shallow curve
   (64px rise at the frame edges); the label sits ~284px under the apex */
.overview.arch-top::before { left: -11.8%; right: -11.8%; border-radius: 50% 50% 0 0 / min(11.1vw, 160px) min(11.1vw, 160px) 0 0; }
@media (min-width: 768px) { .overview { padding-top: calc(var(--section) + min(3.68vw, 53px)); } }

/* approach: the step row runs past the right edge, so it gets prev/next arrows,
   mouse drag and keyboard focus (assets/js/pages/cost-commercial-management.js) */
.ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ap-head .section-head { flex: 1 1 auto; min-width: 0; }
.ap-ctrl { flex: none; margin: 0 0 min(4.444vw, 64px); }
.ap-ctrl.is-idle { visibility: hidden; }
.ap-ctrl button { transition: background .2s, color .2s, opacity .2s; }
.ap-ctrl button:disabled { opacity: .3; cursor: default; }
.ap-ctrl button:disabled:hover { background: none; color: var(--white); }
.ap-ctrl button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
#cost-steps[tabindex] { cursor: grab; }
#cost-steps:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; border-radius: var(--radius); }
#cost-steps.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 767px) {
  .ap-head { display: block; }
  .ap-ctrl { display: none; }
}

/* approach cards: content inset 33 on all sides (incl. the 1px border); number 24/26, title 20/22, 16 gap, text 14/18 */
.cost-approach .zig-card { padding: min(2.22vw, 32px); }
.cost-approach .zig-card .n { line-height: min(1.81vw, 26px); }
.cost-approach .zig-card h3 { line-height: min(1.53vw, 22px); margin-bottom: min(1.11vw, 16px); }
.cost-approach .zig-card p { line-height: min(1.25vw, 18px); }

/* business value (like conceptzilla.com): a soft blurred glow rises above the dark underline of the active item;
   both follow the hover / the 3s cycle */
.cost-value .value-row li::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 84%; height: min(4.4vw, 64px);
  background: radial-gradient(60% 100% at 50% 100%, rgba(110, 110, 110, .55), rgba(110, 110, 110, 0) 75%);
  filter: blur(12px); transform: translateY(6px) scaleY(.6); transform-origin: bottom;
  opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease-out); pointer-events: none;
}
.cost-value .value-row li.on::before { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .cost-approach .zig-card { padding: 18px 20px; }
  .cost-approach .zig-card .n, .cost-approach .zig-card h3, .cost-approach .zig-card p { line-height: 1.3; }
  .cost-approach .zig-card h3 { margin-bottom: 8px; }
  .cta-glass .inner { padding: 20px; }
  .cost-value .value-row li::before { height: 40px; }
}

/* CTA card: the 32px heading box (494) is a touch wider than the 485 text column, so it stays on one line */
@media (min-width: 1000px) { .cta-glass .inner h2 { white-space: nowrap; } }

/* approach graphic: centred 23px above the middle of the two card rows (design graphic 504x504 at y+394) */
@media (min-width: 768px) { .cost-approach .zig-mark { top: 45.3%; } }

/* phones: keep the glass card inside the photo with the standard 16px gutter below it */
@media (max-width: 767px) { .cta-glass { padding-bottom: 16px; } }