/* Services page: in-page nav, practice sections, technology partners */

/* ---------- Layout: sticky sidebar nav on desktop ---------- */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.svc-nav, .svc-body { min-width: 0; }
@media (min-width: 1000px) {
  .svc-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 4rem; align-items: start; }
}

/* Deep links (index.html -> services.html#cloud) jump straight to the section instead of
   animating across the whole page; the inline script restores smooth scrolling after load. */
html:not(.svc-smooth):has(.svc-layout) { scroll-behavior: auto; }

/* ---------- In-page nav ---------- */
/* Sticky offsets follow the shared header height (72px desktop, 60px phones, 56px short landscape)
   plus the notch padding the header adds on top of it. */
.svc-nav {
  --hdr: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  position: sticky; top: var(--hdr); z-index: 40;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}
.svc-nav__title { display: none; }
.svc-nav ul {
  display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0.5rem 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.svc-nav ul::-webkit-scrollbar { display: none; }
.svc-nav a {
  display: block; white-space: nowrap; padding: 0.55rem 0.75rem;
  font-size: 0.93rem; color: var(--ink-2); text-decoration: none; border-radius: var(--radius-control);
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.svc-nav a[aria-current="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cobalt); border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .svc-nav a:hover { background: rgb(var(--ink-rgb) / .06); }
}
/* Phones and tablets: one scroll row that bleeds to the screen edges and fades out instead of
   clipping. The fades switch off at either end of the row (is-start / is-end from the inline script). */
@media (max-width: 999px) {
  .svc-nav { --fade-l: var(--gutter); --fade-r: 2.5rem; }
  .svc-nav.is-start { --fade-l: 0px; }
  .svc-nav.is-end { --fade-r: 0px; }
  .svc-nav ul {
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .svc-nav ul::after { content: ""; flex: none; width: 1px; } /* keeps the end padding scrollable */
  .svc-nav a { display: flex; align-items: center; min-height: 44px; font-size: 0.9rem; padding-block: 0.4rem; }
  .svc-nav a:active { background: rgb(var(--ink-rgb) / .06); }
  /* The first tab's text starts on the page gutter, in line with the heading below */
  .svc-nav li:first-child > a { padding-inline-start: 0; }
}

@media (min-width: 1000px) {
  .svc-nav {
    top: calc(var(--hdr) + 24px); margin: 0; padding: 3.5rem 0 0; background: none; border: 0;
  }
  .svc-nav__title { display: block; font-size: var(--step--1); color: var(--slate); margin: 0 0 0.75rem; }
  .svc-nav ul { display: block; overflow: visible; padding: 0; border-inline-start: 1px solid var(--line); }
  .svc-nav a {
    padding-block: 0.45rem; padding-inline: 1rem 0; border-radius: 0;
    margin-inline-start: -1px; border-inline-start: 2px solid transparent;
  }
  .svc-nav a[aria-current="true"] { box-shadow: none; border-inline-start-color: var(--cobalt); }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .svc-nav a:hover { background: none; color: var(--ink); border-inline-start-color: var(--line); }
  .svc-nav a[aria-current="true"]:hover { border-inline-start-color: var(--cobalt); }
}

/* Motion layer: one cobalt indicator that slides between items instead of jumping. main.js measures the
   current link and sets --ind-* on the list, then adds .has-ind (which retires the per-link marks) and,
   one frame later, .ind-ready (so the first placement does not slide in from the corner).
   Phones and tablets: a 2px underline (translate + scaleX); desktop: the 2px side rule (translate + scaleY). */
.svc-nav.has-ind ul { position: relative; }
.svc-nav.has-ind ul::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 2px; pointer-events: none;
  background: var(--cobalt); transform-origin: 0 0; opacity: var(--ind-o, 0);
  transform: translate(var(--ind-x, 0px), calc(var(--ind-y, 0px) + var(--ind-h, 0px) - 2px)) scaleX(var(--ind-wn, 0));
}
.svc-nav.has-ind.ind-ready ul::before { transition: transform 320ms var(--ease-out), opacity var(--dur-state) ease; }
.svc-nav.has-ind a[aria-current="true"] { box-shadow: none; }
@media (min-width: 1000px) {
  .svc-nav.has-ind ul::before { width: 2px; height: 1px; transform: translate(var(--ind-x, 0px), var(--ind-y, 0px)) scaleY(var(--ind-hn, 0)); }
  .svc-nav.has-ind a[aria-current="true"],
  .svc-nav.has-ind a[aria-current="true"]:hover { border-inline-start-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .svc-nav.has-ind.ind-ready ul::before { transition: none; } }
@media (forced-colors: active) { .svc-nav.has-ind ul::before { display: none; } }

/* ---------- Practice sections ---------- */
.svc {
  padding-block: clamp(3rem, 6vw, 4.5rem); border-block-end: 1px solid var(--line);
  /* header + the sticky scroll row (58px) below it */
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 58px);
}
.svc:last-child { border-block-end: 0; }
@media (min-width: 1000px) { .svc { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 18px); } }
.svc h2 { font-size: var(--step-4); max-width: 16em; margin-block-end: 1.25rem; }
.svc h3 { font-size: var(--step-1); margin-block-end: 0.9rem; }
.svc-intro { font-size: var(--step-1); line-height: 1.5; max-width: 36em; }
.svc p { max-width: 40em; }

/* Phones: tighter rhythm inside each practice so the page is fewer screens long */
@media (max-width: 600px) {
  .svc { padding-block: 2.5rem; }
  .svc h2 { margin-block-end: 1rem; }
  .svc-split { gap: 1.75rem; }
  .svc-split--top { margin-block-start: 2rem; }
  .svc-rows { margin-block-start: 1.5rem; }
  .svc-row { gap: 0.5rem; padding-block: 1.1rem; }
  .svc-tags { margin-block-start: 1.25rem; }
  .svc-outcome { margin-block-start: 1.75rem; padding: 1rem 1.1rem; }
}

/* Phones: six-item lists show three, with a "Show all 6" button (added by the inline script) */
.svc-more { display: none; }
@media (max-width: 600px) {
  .check-list.is-clamped > li:nth-child(n+4) { display: none; }
  .svc-more {
    display: inline-flex; align-items: center; min-height: 44px; margin-block-start: 0.35rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    font: 500 var(--step-0)/1.2 var(--font-body); color: var(--cobalt-text);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  }
  .svc-more:active { text-decoration-thickness: 2px; }
  .svc--dark .svc-more { color: var(--sky); }
}

/* Service photos: short banners so the page stays scannable */
.svc-media { aspect-ratio: 16 / 9; margin-block: 0 2rem; }
@media (max-width: 600px) { .svc-media { aspect-ratio: 2 / 1; margin-block-end: 1.5rem; } }
@media (min-width: 700px) { .svc-media { aspect-ratio: 3 / 1; } }

.svc-split { display: grid; gap: 2rem; }
@media (min-width: 760px) {
  .svc-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .svc-split--reverse > :first-child { order: 2; }
}
.svc-split--top { margin-block-start: 2.5rem; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }

/* End-of-section summary: tinted block, no side stripe */
.svc-outcome {
  margin: 2.25rem 0 0; padding: 1.1rem 1.35rem; max-width: 44em;
  background: var(--cobalt-soft); border-radius: var(--radius-surface); color: var(--ink);
}
.svc-outcome strong { font-weight: 600; }

/* Networking diagram */
.svc-figure { margin: 2.5rem 0 0; color: var(--indigo); overflow-x: auto; }
.svc-figure svg { width: 100%; min-width: 480px; max-width: 640px; height: auto; }
/* Phones: a portrait drawing of the same topology replaces the wide one, so it fits at a legible size */
.svc-figure .svc-figure__port { display: none; min-width: 0; max-width: 24rem; }
@media (max-width: 600px) {
  .svc-figure { overflow: visible; margin-block-start: 2rem; }
  .svc-figure .svc-figure__land { display: none; }
  .svc-figure .svc-figure__port { display: block; }
}
.svc-figure rect { fill: var(--white); }
.svc-figure__trunk { stroke: var(--ink); stroke-width: 2.5; }
.svc-figure__link { stroke-dasharray: 3 4; }
.svc-figure__label text { font: 600 15px var(--font-display); fill: var(--ink); }
.svc-figure__label .svc-figure__sub { font: 400 13px var(--font-body); fill: var(--slate); }
.svc-figure figcaption { font-size: var(--step--1); color: var(--slate); margin-block-start: 0.75rem; }

/* Security: ruled rows */
.svc-rows { border-block-start: 2px solid var(--ink); margin-block-start: 2rem; }
.svc-row { display: grid; gap: 0.75rem; padding: 1.4rem 0; border-block-end: 1px solid var(--line); }
.svc-row h3 { margin: 0; }
@media (min-width: 760px) { .svc-row { grid-template-columns: 14rem 1fr; gap: 2rem; } }

/* Tables (cloud models, AMC coverage) */
.svc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.svc-table caption { text-align: start; font: 600 var(--step-1)/1.25 var(--font-display); margin-block-end: 0.9rem; }
.svc-table th, .svc-table td { text-align: start; vertical-align: top; padding-block: 0.85rem; padding-inline: 0 1rem; border-block-end: 1px solid var(--line); }
.svc-table thead th { font-size: var(--step--1); font-weight: 500; color: var(--slate); border-block-end: 2px solid var(--ink); }
.svc-table tbody th { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.svc-table td { color: var(--slate); }
.svc-table--wide { margin-block-end: 0.5rem; }
.svc-table--wide tbody th { width: 16rem; white-space: normal; }
/* Phones: the three-column cloud table becomes labelled rows (labels come from data-label) */
@media (max-width: 600px) {
  .svc-table:not(.svc-table--wide) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .svc-table:not(.svc-table--wide), .svc-table:not(.svc-table--wide) tbody,
  .svc-table:not(.svc-table--wide) caption { display: block; }
  .svc-table:not(.svc-table--wide) tbody { border-block-start: 2px solid var(--ink); }
  .svc-table:not(.svc-table--wide) tr { display: grid; gap: 0.3rem; padding-block: 0.9rem; border-block-end: 1px solid var(--line); }
  .svc-table:not(.svc-table--wide) th, .svc-table:not(.svc-table--wide) td { display: block; padding: 0; border: 0; }
  .svc-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 500; }
}
@media (max-width: 600px) {
  .svc-table--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .svc-table--wide tr { display: block; padding: 0.9rem 0; border-block-end: 1px solid var(--line); }
  .svc-table--wide th, .svc-table--wide td { display: block; border: 0; padding: 0; width: auto; }
  .svc-table--wide td { margin-block-start: 0.25rem; }
}

/* VAPT: dark panel */
.svc--dark {
  --focus: var(--sky);
  background: var(--ink); color: var(--white);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  border-block-end: 0;
}
@media (min-width: 1000px) {
  .svc--dark { margin-inline: 0; padding-inline: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-surface); margin-block: 1rem; }
}
.svc--dark .svc-intro, .svc--dark p { color: var(--on-dark-muted); }
.svc--dark .check-list li::before { border-color: var(--sky); }
.svc--dark .svc-outcome { background: rgb(255 255 255 / .07); color: var(--on-dark-strong); }
.svc--dark .svc-outcome strong { color: var(--white); }

.svc-steps { list-style: none; margin: 0; padding: 0; counter-reset: vstep; display: grid; gap: 0.9rem; }
.svc-steps li { counter-increment: vstep; position: relative; padding-inline-start: 2.5rem; color: var(--on-dark-muted); }
.svc-steps li::before {
  content: counter(vstep); position: absolute; inset-inline-start: 0; top: 0.05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgb(157 177 255 / .7); color: var(--sky); font: 600 0.85rem/1 var(--font-display);
}
.svc-steps strong { color: var(--white); font-weight: 600; }

.svc-finding { margin: 2.5rem 0 0; }
.svc-finding__scroll { overflow-x: auto; }
.svc-finding table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.93rem; }
.svc-finding figcaption { text-align: start; color: var(--on-dark-subtle); font-size: var(--step--1); margin-block-end: 0.75rem; }
.svc-finding th, .svc-finding td { text-align: start; vertical-align: top; padding-block: 0.85rem; padding-inline: 0 1rem; border-block-end: 1px solid var(--line-dark); }
.svc-finding thead th { font-weight: 500; color: var(--on-dark-subtle); font-size: var(--step--1); border-block-end-color: var(--line-dark-strong); }
.svc-finding td { color: var(--on-dark-strong); }
/* Phones: each finding becomes a card (risk, then labelled finding and fix) instead of a
   sideways-scrolling table */
@media (max-width: 600px) {
  .svc-finding { margin-block-start: 2rem; }
  .svc-finding__scroll { overflow: visible; }
  .svc-finding table, .svc-finding tbody { display: block; min-width: 0; }
  .svc-finding thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .svc-finding tbody { display: grid; gap: 0.75rem; }
  .svc-finding tr { display: grid; gap: 0.75rem; padding: 1rem 1.1rem; background: rgb(255 255 255 / .06); border: 1px solid var(--line-dark); border-radius: var(--radius-surface); }
  .svc-finding td { display: block; padding: 0; border: 0; line-height: 1.5; }
  .svc-finding td[data-label]::before { content: attr(data-label); display: block; font-size: var(--step--1); color: var(--on-dark-subtle); margin-block-end: 0.15rem; }
}
.svc-sev { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--sky); }
.svc-sev--high { background: var(--sky); color: var(--ink); }
.svc-sev--med { color: var(--sky); }

/* ---------- Technology partners ---------- */
.svc-platforms, #engagements { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
/* Partner wall: one row per category (heading left, logos right on wide
   screens). Logos are 2x assets shown at half size via width/height attributes. */
.partner-wall { border-block-start: 2px solid var(--ink); }
.partner-group { display: grid; gap: 0.75rem; padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
@media (min-width: 900px) {
  .partner-group { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: start; padding-block: 1.25rem; }
  .partner-group h3 { min-height: 5rem; display: flex; align-items: center; }
}
.partner-group h3 { margin: 0; font-size: var(--step-0); font-weight: 600; line-height: 1.35; color: var(--ink); }
.partner-logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, calc(50% - 0.5rem)), 1fr));
}
.partner-logos li { display: flex; align-items: center; justify-content: center; height: 5rem; padding-inline: 0.25rem; min-width: 0; }
/* Phones: three columns of capped marks so the wall stays short and optically even */
@media (max-width: 599px) {
  .partner-group { gap: 0.4rem; padding-block: 1rem; }
  .partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.75rem; }
  .partner-logos li { height: 3rem; padding-inline: 0; }
}
.partner-logos img {
  display: block; max-width: 100%; height: auto;
  filter: grayscale(1); opacity: 0.7;
  transition: filter var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out);
}
@media (min-width: 1100px) {
  .partner-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1rem; }
  .partner-logos li { padding-inline: 0; }
  /* Wide wordmarks keep some air between neighbours (and off the forced-colours plate edge) */
  .partner-logos img { max-width: calc(100% - 1rem); }
}
/* Rohde & Schwarz: the lockup is mostly air and fine type, so from 600px it also takes two columns and
   renders about 1.6x larger (64px tall) to sit optically level with its neighbours */
@media (min-width: 600px) {
  .partner-logos li:has(> img.logo--span) { grid-column: span 2; }
  .partner-logos img.logo--span { width: auto; max-height: 4rem; max-width: 100%; }
}
@media (max-width: 599px) {
  .partner-logos img { width: auto; max-width: 88%; max-height: 1.5rem; object-fit: contain; }
  .partner-logos img.logo--square { max-height: 2rem; }
  /* Per-logo weight balance: solid, blocky marks (IBM, NEC) sit smaller; marks whose artwork is
     mostly air or fine type (HPE, Rohde & Schwarz) get more room so their words stay readable. */
  .partner-logos img.logo--compact { max-height: 1.125rem; }
  .partner-logos img.logo--tiny { max-height: 2.25rem; max-width: 100%; }
  .partner-logos li:has(> img.logo--span) { grid-column: span 2; }
  .partner-logos img.logo--span { max-height: 2.5rem; }
}
/* Optical balance in the dimmed state: pale marks darker, heavy marks lighter */
.partner-logos img.logo--light { filter: grayscale(1) brightness(0.6); }
.partner-logos img.logo--heavy { opacity: 0.55; }
/* Hover last: (0,2,2) beats the (0,2,1) modifiers above */
@media (hover: hover) and (pointer: fine) {
  .partner-logos li:hover img { filter: none; opacity: 1; }
}
/* Motion layer: hovered marks also lift in scale a touch (individual scale, so the reveal transform is untouched) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .partner-logos img { transition: filter var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out), scale var(--dur-state) var(--ease-out); }
  .partner-logos li:hover img { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) { .partner-logos img { transition: none; } }
/* High-contrast modes: no dimming, and a light plate so dark marks never sit on a dark canvas. */
@media (forced-colors: active) {
  .partner-logos li { forced-color-adjust: none; background: #fff; border-radius: var(--radius-control); }
  .partner-logos img,
  .partner-logos img.logo--light,
  .partner-logos img.logo--heavy { filter: none; opacity: 1; }
}

/* ---------- Windows High Contrast ---------- */
@media (forced-colors: active) {
  .svc-sev { border-color: CanvasText; }
  .svc-outcome { border: 1px solid CanvasText; }
  /* The current in-page link is drawn with a box-shadow (mobile) or border (desktop); box-shadow is dropped */
  .svc-nav a[aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; text-decoration: underline 2px; text-underline-offset: 0.3em; }
}