/* Page-only styles for it-services.html — loaded after styles.css, only on this page.
Numbers follow the 01_IT_Services Figma frame (1440 wide); desktop sizes scale as min(Xvw, Ypx). */
/* ---------- shared pieces restyled for this page (all widths) ---------- */
.logo-card { text-align: left; padding: 28px; }
.logo-card ul { margin: 0; }
.quote .qmark { display: block; width: 34px; height: 30px; color: var(--line); }
.fwd-wrap { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 1160px; }
.fwd-lead { color: var(--line); }
.reel img { flex: none; object-fit: cover; }
.reel img.sq { aspect-ratio: 1; }
.reel img.wide { aspect-ratio: 3 / 2; }
.ind-intro { max-width: 903px; }
.metric .num { color: var(--ink); margin-top: 0; }
/* hero → products arch: the design's #fafafa arch is shallow (rises ~64px across the 1440 frame, not ~127px) */
.arch-top::before { height: calc(var(--arch) * 1.2); }
@media (min-width: 768px) {
/* hero: this frame's text block sits at y=289 (other inner frames use 227); the hero keeps its height,
so the blurred lens and everything below stay put — only the bottom padding gives way */
.page-it-services .hero--inner { padding-top: max(clamp(110px, 20.07vw, 289px), 20svh); padding-bottom: calc(var(--arch) + min(1.944vw, 28px)); }
/* …and the lens's blurred lower edge moves down with the text (design: solid #111 until ~y=945) */
.page-it-services .hero--inner::before { bottom: calc(var(--svgh) * -.1 - min(4.306vw, 62px)); }
/* products: eyebrow sits ~319px below the arch apex (design), 32px under the intro, 64px under the tabs */
.arch-top > .section { padding-top: calc(var(--section) + min(6.25vw, 90px)); }
.arch-top .section-head { margin-bottom: min(2.222vw, 32px); }
.arch-top .tabs { margin-bottom: min(4.444vw, 64px); }
/* section rhythm: sections that touch the black bands keep 162px of air on that side */
#work { padding-bottom: min(11.25vw, 162px); }
section[aria-labelledby="ind-title"], .page-it-services #contact { padding-top: min(11.25vw, 162px); }
/* our IT services: 318×366 cards, 30px column / 36px row gaps */
#services .section-head { max-width: min(54.72vw, 788px); }
#services .section-head .body { max-width: min(48.89vw, 704px); }
#services .grid-4 { gap: min(2.5vw, 36px) min(2.083vw, 30px); }
.svc-card { min-height: min(25.42vw, 366px); padding: min(2.222vw, 32px) min(1.667vw, 24px); }
.svc-card ul { margin-top: min(3.611vw, 52px); gap: min(.417vw, 6px); }
.svc-card li { line-height: 1.25; }
/* our work: 584px intro, rows 64px apart, title→desc 4, desc→tag 12 */
#work .section-head { max-width: min(40.56vw, 584px); }
.work-grid { gap: min(4.444vw, 64px); }
.work .chip { margin-top: calc(min(.278vw, 4px) * -1); }
/* workflow intro: 547px text box, so line 1 ends at "…together from the" */
section[aria-labelledby="flow-title"] .section-head .body { max-width: 30.4em; }
/* workflow cards: one-line step label, 24px top/bottom, 8px title→copy */
.steps.stagger .step { padding: min(1.667vw, 24px) min(1.111vw, 16px); }
.steps.stagger .step .n { margin-top: 0; white-space: nowrap; }
.step p { margin-top: min(.556vw, 8px); }
/* industries: 4 × 318px tiles, 30px column / 32px row gaps, kept 4-up down to 768px (scales proportionally) */
.industries-grid { grid-template-columns: repeat(4, 1fr); gap: min(2.222vw, 32px) min(2.083vw, 30px); }
.ind-intro { max-width: min(62.71vw, 903px); }
.ind h3 { font-size: min(1.667vw, 24px); }
.ind { padding: min(1.389vw, 20px); }
/* about: 274px metric cards, 459px testimonial */
.metric { min-height: min(19.03vw, 274px); padding: min(2.222vw, 32px); gap: min(1.667vw, 24px); }
.metric .num { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; }
.metric h3 { font-size: min(1.667vw, 24px); line-height: 1.083; }
.metric div p { margin-top: min(.833vw, 12px); line-height: 1.25; }
.quote { grid-template-columns: 1fr min(24.44vw, 352px); gap: min(5.556vw, 80px); padding: min(2.222vw, 32px); min-height: min(31.875vw, 459px); }
.quote blockquote { grid-template-rows: auto auto 1fr; gap: 0; align-content: stretch; }
.quote .qmark { width: min(2.361vw, 34px); height: min(2.083vw, 30px); margin-top: min(1.111vw, 16px); }
.quote blockquote p { margin-top: min(2.639vw, 38px); max-width: min(27.85vw, 401px); font-size: var(--fs-intro); line-height: 1.29; }
.quote cite { align-self: end; font-size: var(--fs-body); }
.quote .media-radius { border-radius: min(.833vw, 12px); }
.quote .media-radius { position: relative; }
.quote .media-radius img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* trusted logos card: two columns (B3 Holding / Axion / RMG | EBB / B3 Bahnbau / Impex) */
.logo-card li:nth-child(1) { order: 1; } .logo-card li:nth-child(3) { order: 2; }
.logo-card li:nth-child(5) { order: 3; } .logo-card li:nth-child(2) { order: 4; }
.logo-card li:nth-child(4) { order: 5; } .logo-card li:nth-child(6) { order: 6; }
.logo-card li:nth-child(1) svg { height: min(2.306vw, 33px); }
.logo-card li:nth-child(3) svg { height: min(1.875vw, 27px); }
.logo-card li:nth-child(5) svg { height: min(2.708vw, 39px); }
.logo-card li:nth-child(2) svg { height: min(1.389vw, 20px); }
.logo-card li:nth-child(4) svg { height: min(1.75vw, 25.2px); }
.logo-card .impex { max-height: none; height: min(3.264vw, 47px); width: auto; }
/* built to move: 1046px lead, button 48px below, reel 100px below, 12px tile gaps, no edge fade */
.fwd-wrap { max-width: min(72.64vw, 1046px); padding-inline: 0; }
.fwd-wrap .btn { margin-top: min(1.667vw, 24px); }
.reel { margin-top: min(6.944vw, 100px); gap: min(.833vw, 12px); -webkit-mask-image: none; mask-image: none; }
.reel-track { gap: min(.833vw, 12px); }
.reel img { height: min(15.56vw, 224px); border-radius: 0; }
.reel img.wide { width: min(23.33vw, 336px); }
.reel img.sq { width: min(15.56vw, 224px); }
}
/* about grid (433 | 897, 30px gaps) only where it fits side by side; the tablet range keeps the stacked bento */
@media (min-width: 1025px) {
.bento { grid-template-columns: 433fr 897fr; gap: min(2.083vw, 30px); }
.bento-col, .bento-row { gap: min(2.083vw, 30px); }
.bento-col.logos-col { grid-template-rows: auto 1fr; }
/* trusted logos card: logos placed at the design's exact (uneven) offsets inside the 433×459 card */
.logo-card { position: relative; padding: 0; min-height: min(31.875vw, 459px); }
.logo-card ul { position: absolute; inset: 0; display: block; margin: 0; }
.logo-card li { position: absolute; display: block; line-height: 0; }
.logo-card li:nth-child(1) { left: min(2.708vw, 39px); top: min(4.306vw, 62px); } /* B3 Holding */
.logo-card li:nth-child(5) { left: min(2.708vw, 39px); top: min(13.68vw, 197px); } /* Axion */
.logo-card li:nth-child(4) { left: min(2.708vw, 39px); top: min(25.07vw, 361px); } /* RMG */
.logo-card li:nth-child(3) { left: min(16.6vw, 239px); top: min(4.583vw, 66px); } /* EBB */
.logo-card li:nth-child(2) { left: min(16.6vw, 239px); top: min(14.375vw, 207px); } /* B3 Bahnbau */
.logo-card li:nth-child(6) { left: min(16.6vw, 239px); top: min(24.31vw, 350px); } /* Impex */
}
/* phones */
@media (max-width: 767px) {
.hero { min-height: auto; padding-top: 140px; }
.svc-card { min-height: 0; }
.svc-card ul { margin-top: 24px; }
.logo-card ul { margin-top: 0; }
.steps.stagger { gap: 12px; }
.steps.stagger .step { padding: 16px; gap: 20px; }
.step p { margin-top: 6px; }
.industries-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ind { padding: 12px; }
.ind h3 { font-size: 1rem; line-height: 1.15; }
.quote .qmark { margin-bottom: 4px; }
.reel img.wide { width: 225px; }
.reel img.sq { width: 150px; }
}
/* integration: IT keeps its own hero -> products spacing (design eyebrow y1266 at 1440) after the shared
inner-page overview padding moved to .157 svgh; IT footer wordmark sits 200px below the 8-row menus */
body.page-it-services .hero--inner + .arch-top, body.page-it-services .hero--inner + div.arch-top > .section { padding-top: max(var(--section), calc(var(--svgh) * .12)) !important; }
@media (min-width: 768px) { .page-it-services .footer-wordmark { margin-top: min(13.89vw, 200px); } }