/* Services hub (/services). The split hero, cards and FAQ come from site.css. */

/* ---------- Hero: the four layers as glass cards stepping down in depth, Strategy at the back ---------- */
.plates { position: relative; width: min(470px, 100%); aspect-ratio: 1 / 1; margin-inline: auto; transform: rotateY(-16deg) rotateX(8deg); transform-style: preserve-3d; }
.plate { position: absolute; left: calc(var(--i) * 5%); top: calc(var(--i) * 23%); width: 80%; transform: translateZ(calc(var(--i) * 40px)); transform-style: preserve-3d; }
.plate__card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--sf-radius-md); color: var(--sf-white);
  background: linear-gradient(160deg, rgba(27, 34, 66, 0.88), rgba(14, 18, 36, 0.84)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); animation: stack-bob 8s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
.page-hero.is-offscreen .plate__card { animation-play-state: paused; }
/* Strategy sets the direction for the rest, so its card carries the brand border. */
.plate--strategy .plate__card { border-color: transparent; background: linear-gradient(160deg, rgba(34, 40, 84, 0.94), rgba(20, 18, 50, 0.92)) padding-box, var(--sf-gradient-brand) border-box; }
/* Light theme: the plates are pictures of screens, so they stay dark, as solid Midnight instead of see-through slate
   (as the stack cards in site.css), on the level-3 shadow. Strategy keeps its brand border and only takes the shadow. */
:root[data-theme="light"] .plate:not(.plate--strategy) .plate__card { background: linear-gradient(160deg, #1A2142 0%, #0D1122 100%); border-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--sf-shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] .plate--strategy .plate__card { box-shadow: var(--sf-shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* Print flattens soft shadows into solid grey slabs. !important: the light plate rules above reach 0,5,0. */
@media print { :root[data-theme="light"] .plate__card { box-shadow: none !important; } }
/* The plates are light text on a dark fill, so they print their fill (as the stack cards in site.css). */
@media print { .plate__card { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.plate__n { font: 700 1.375rem/1 var(--sf-font-sans); color: #B9C8FF; }
.plate__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.plate__name { font-size: 1.0625rem; font-weight: var(--sf-fw-bold); }
.plate__role { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
.plate__chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plate__chips em { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 1023px) { .plates { width: min(420px, 100%); transform: rotateY(-8deg) rotateX(6deg); } }
@media (max-width: 559px) { .plates { aspect-ratio: 1 / 1.12; } .plate { width: 88%; left: calc(var(--i) * 4%); top: calc(var(--i) * 24%); } .plate__card { padding: 12px 14px; } }
/* Small phones: the nearest plate is brought forward (translateZ) so far that it hangs below the box, and the hero clips it.
   The margin makes room for it. Below 340px the chips also wrap onto a second row, so the plates spread out further. */
@media (max-width: 359px) { .plates { margin-bottom: 40px; } }
@media (max-width: 339px) { .plates { aspect-ratio: 1 / 1.5; margin-bottom: 64px; } .plate { top: calc(var(--i) * 28%); } .plate__chips em { padding: 2px 7px; font-size: 0.625rem; } }
/* One-column hero (below 1024px): the plates sit under the copy, where the hero's scroll parallax (sarafi.js) would already have
   pushed them together over each other's chips. They stay where they are laid out; the aurora behind keeps its parallax. */
@media (max-width: 1023px) { .plate { translate: none !important; } }

/* ---------- One section per layer ---------- */
/* No scroll-margin-top here: the html scroll-padding-top in sarafi.css already clears the header. */
.hub-layer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .hub-layer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } .hub-layer__head { position: sticky; top: calc(var(--sf-header-height) + 32px); } }
.hub-layer__n { display: inline-block; font: 700 clamp(3rem, 2.4rem + 2.4vw, 4.5rem)/1 var(--sf-font-sans); letter-spacing: -0.04em; background: var(--sf-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Gradient text is painted by its background, so without backgrounds it would print blank (as .sf-gradient-text). */
@media print { .hub-layer__n { background: none; color: var(--sf-fg-accent); } }
.hub-layer__head .sf-h2 { margin-top: 10px; }
.hub-layer__head .sf-lead { margin-top: 16px; }
.hub-layer__fixes { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; color: var(--sf-fg-body); }
.hub-layer__fixes .sf-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--sf-fg-accent); }
.hub-layer__fixes strong { color: var(--sf-fg); }
.hub-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .hub-services--2, .hub-services--3, .hub-services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-services--3 > :first-child { grid-column: 1 / -1; } }
.hub-service { display: flex; flex-direction: column; min-height: 200px; }
.hub-service .sf-icon-tile { color: var(--sf-fg-accent); }
.hub-service__title { margin-top: 18px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.hub-service__text { flex: 1; margin-top: 8px; color: var(--sf-fg-body); }
.hub-service .sf-link-arrow { margin-top: 20px; }

/* ---------- Measured end to end ---------- */
.hub-measure { padding-block: 0 clamp(56px, 7vw, 88px); }
.hub-measure__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 18px 20px; border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-radius-md); font-weight: var(--sf-fw-semibold); text-align: center; }
.hub-measure__line .sf-icon { width: 20px; height: 20px; color: var(--sf-fg-accent); }
/* Light theme: a solid hairline on Cloud instead of a dashed wireframe border. */
:root[data-theme="light"] .hub-measure__line { border-style: solid; border-color: var(--sf-hairline); background: var(--sf-cloud); }

/* ---------- Not sure where to start? ---------- */
.hub-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(20px, 4vw, 48px); }
@media (min-width: 1024px) { .hub-start { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 48px; } }
.hub-start .sf-lead { margin-top: 16px; }
.hub-start__cta { display: grid; gap: 18px; justify-items: start; }
/* Let the button wrap inside the card rather than push the page sideways (e.g. with larger text spacing on a 320px screen). */
.hub-start__cta .sf-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }