/* ==========================================================================
   Services — client-specific engineering engagements (.sv-*)
   Loaded after the homepage's style.css, which supplies the shared chrome,
   tokens, fonts, the site close and the footer, and is never edited for this
   page. Every selector here is scoped to an .sv-page body or to the .sv-*
   prefix, so nothing reaches the homepage, Governed Bit Intervention, the
   product pages or the editorial pages.

   The surface order: the dark global header and a dark document head, a warm
   mineral / bone body (the site's light control surface, taken from the
   homepage ledger shelf and the Company positions sheet), a dark industrial
   close, the shared site close on the drilling horizon, and the footer.

   Grid, annotation margin and type scale are the GBI / product / editorial
   grammar. No motion anywhere on this page.
   ========================================================================== */

.sv-page {
  /* Dark head and close */
  --sv-dark: #0a0a0a;
  --sv-dark-2: #0b0b0c;
  --sv-dark-ink: #f6f5f2;
  --sv-dark-ink-2: rgba(246, 245, 242, 0.8);
  --sv-dark-label: #9c968b;

  /* The light body: warm mineral / bone ground, pale steel surfaces */
  --sv-bone: #e2dfd8;
  --sv-bone-2: #dbd7ce;
  --sv-plate: #eae7e0;
  --sv-steel: #d9dee0;
  --sv-steel-2: #e3e7e8;

  /* Graphite ink on the light ground */
  --sv-ink: #15171a;
  --sv-ink-2: rgba(21, 23, 26, 0.78);
  --sv-ink-3: rgba(21, 23, 26, 0.62);
  --sv-ink-4: rgba(21, 23, 26, 0.34);
  --sv-label: #625e56;
  --sv-hair: rgba(21, 23, 26, 0.14);
  --sv-rule: rgba(21, 23, 26, 0.3);
  --sv-rule-strong: rgba(21, 23, 26, 0.86);

  /* Restrained accents. Teal carries evidence and provenance; the single
     amber carries a boundary a person holds. Nothing else is coloured. */
  --sv-teal: #1f5f56;
  --sv-amber: #8a5d0c;

  --sv-gutter: 32px;
  background: var(--sv-bone);
}

/* Current destination (01 section 2): this page marks Services. */
.sv-page .site-nav-link[aria-current="page"] {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(255, 255, 255, 0.42);
}

.sv-page .compact-nav-link[aria-current="page"] {
  font-weight: 600;
}

.sv-page a:focus-visible,
.sv-page button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the light body the white focus ring would disappear. */
.sv-light a:focus-visible {
  outline-color: rgba(21, 23, 26, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  html:has(.sv-page) {
    scroll-behavior: auto;
  }
}

/* ---- Grid and annotation margin (the site grammar) ---------------------- */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sv-gutter);
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 var(--sv-gutter);
}

.sv-margin {
  grid-column: 1 / span 3;
  padding-top: 0.45em;
}

.sv-main {
  grid-column: 4 / span 8;
}

.sv-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--sv-dark-label);
}

.sv-light .sv-label {
  color: var(--sv-label);
}

/* Phone running head (01 section 3): a fixed label on this surface; it
   tracks nothing and never swaps. */
.sv-running-head {
  display: none;
}

/* ---- Type scale --------------------------------------------------------- */
.sv-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: #ffffff;
  text-wrap: balance;
}

.sv-deck {
  margin: 26px 0 0;
  max-width: 52ch;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.44;
  letter-spacing: -0.008em;
  color: var(--sv-dark-ink-2);
  text-wrap: pretty;
}

.sv-heading {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--sv-ink);
  text-wrap: balance;
}

.sv-lede {
  margin: 22px 0 0;
  max-width: 56ch;
  font-size: clamp(17.5px, 1.45vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--sv-ink-2);
  text-wrap: pretty;
}

.sv-body {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--sv-ink-3);
  text-wrap: pretty;
}

/* ==========================================================================
   01 - Document head. Dark, so the fixed header keeps its ground before the
   page turns to the light body.
   ========================================================================== */
.sv-head {
  padding: clamp(148px, 19vh, 188px) 0 clamp(80px, 7vw, 112px);
  background: var(--sv-dark);
}

.sv-head .sv-main {
  grid-column: 4 / -1;
}

/* The turn from the dark head into the mineral body: an edge the page is
   cut on, not a gradient. */
.sv-turn {
  height: 0;
  border-top: 1px solid rgba(246, 245, 242, 0.14);
}

/* ==========================================================================
   02 - The three service areas. One ruled register, three entries. Not
   cards: each entry is a row of the same sheet, opened by a hairline.
   ========================================================================== */
.sv-areas {
  padding: clamp(96px, 9vw, 136px) 0 clamp(96px, 9vw, 132px);
  background: var(--sv-bone);
  color: var(--sv-ink);
}

.sv-areas-intro .sv-heading {
  max-width: 21ch;
}

.sv-register {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: clamp(52px, 5vw, 76px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--sv-rule-strong);
}

.sv-service {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding: clamp(40px, 3.8vw, 56px) 0 clamp(44px, 4.2vw, 64px);
  border-bottom: 1px solid var(--sv-hair);
}

.sv-service:last-child {
  border-bottom: 1px solid var(--sv-rule);
}

.sv-service-margin {
  grid-column: 1 / span 3;
}

.sv-index {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--sv-ink-4);
}

.sv-service-title {
  margin: 14px 0 0;
  max-width: 12ch;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--sv-ink);
}

.sv-service-body {
  grid-column: 4 / span 4;
}

.sv-service-core {
  margin: 0;
  max-width: 44ch;
  padding-top: 0.2em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sv-ink-2);
  text-wrap: pretty;
}

/* The supporting idea: held off the core copy by its own rule, at reading
   size, never collapsed and never styled as an alert. */
.sv-service-note {
  margin: 24px 0 0;
  max-width: 44ch;
  padding-top: 16px;
  border-top: 1px solid var(--sv-hair);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sv-ink-3);
  text-wrap: pretty;
}

/* The schematic sits on a pale steel plate: a separate material from the
   bone ground, so the drawing reads as an instrument, not decoration. */
.sv-service-figure {
  grid-column: 8 / -1;
  margin: 0;
  padding: clamp(18px, 1.8vw, 26px);
  background: var(--sv-steel-2);
  border: 1px solid var(--sv-hair);
  border-radius: 2px;
}

.sv-art {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Schematic grammar (shared by the three drawings) ------------------- */
.sv-art-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: rgba(21, 23, 26, 0.46);
}

.sv-sheet { fill: #f2f0ea; stroke: rgba(21, 23, 26, 0.34); stroke-width: 1; }
.sv-sheet-back { fill: #e6e3dc; stroke: rgba(21, 23, 26, 0.22); stroke-width: 1; }
.sv-glyph { fill: rgba(21, 23, 26, 0.2); }
.sv-mark { fill: rgba(31, 95, 86, 0.16); stroke: var(--sv-teal); stroke-width: 1.4; }
.sv-tether { fill: none; stroke: var(--sv-teal); stroke-width: 1.3; }
.sv-tether-reached { fill: none; stroke: rgba(21, 23, 26, 0.34); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sv-node { fill: #ffffff; stroke: var(--sv-teal); stroke-width: 1.5; }
.sv-reg-rule { fill: none; stroke: rgba(21, 23, 26, 0.24); stroke-width: 1; }
.sv-reg-top { fill: none; stroke: rgba(21, 23, 26, 0.7); stroke-width: 1.5; }
.sv-key { fill: rgba(21, 23, 26, 0.3); }
.sv-value { fill: rgba(21, 23, 26, 0.62); }
.sv-station { fill: #f2f0ea; stroke: rgba(21, 23, 26, 0.5); stroke-width: 1.3; }
.sv-station-check { fill: #ffffff; stroke: var(--sv-teal); stroke-width: 1.6; }
.sv-rail { fill: none; stroke: rgba(21, 23, 26, 0.5); stroke-width: 1.3; }
.sv-tick { fill: none; stroke: rgba(21, 23, 26, 0.3); stroke-width: 1; }
.sv-bound { fill: none; stroke: rgba(21, 23, 26, 0.38); stroke-width: 1.2; stroke-dasharray: 6 5; }
/* The one amber on the page: the line authority is held at. */
.sv-authority { fill: none; stroke: var(--sv-amber); stroke-width: 1.6; }
.sv-authority-node { fill: #ffffff; stroke: var(--sv-amber); stroke-width: 1.8; }
.sv-authority-label { fill: var(--sv-amber); }

/* ==========================================================================
   03 - How an engagement works. Four stages on one line: hanging numerals
   under a continuous rule with a tick at each stage. No arrows, chevrons,
   bars, percentages or dates.
   ========================================================================== */
.sv-engagement {
  padding: clamp(96px, 9vw, 132px) 0 clamp(100px, 9.2vw, 140px);
  background: var(--sv-steel);
  color: var(--sv-ink);
}

.sv-stages {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(28px, 3vw, 44px);
  margin: clamp(56px, 5.2vw, 80px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--sv-rule-strong);
}

.sv-stage {
  position: relative;
  padding: 26px 0 0;
}

/* The tick that marks this stage on the rule above it. */
.sv-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 14px;
  background: var(--sv-rule-strong);
}

.sv-stage-index {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--sv-ink-4);
}

.sv-stage-title {
  margin: 14px 0 0;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--sv-ink);
}

.sv-stage-copy {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.56;
  color: var(--sv-ink-3);
  text-wrap: pretty;
}

/* ==========================================================================
   04 - Where DataEnergy starts. Prose on the bone ground.
   ========================================================================== */
.sv-domain {
  padding: clamp(96px, 9vw, 132px) 0 clamp(96px, 9vw, 132px);
  background: var(--sv-bone);
  color: var(--sv-ink);
}

.sv-domain .sv-heading {
  max-width: 14ch;
}

.sv-domain .sv-lede {
  max-width: 58ch;
}

/* ==========================================================================
   05 - What this does not mean. The quiet ledger: a recessed plate, four
   ruled entries, a mark that is a rule end and not an icon. Static and fully
   visible; nothing here opens or collapses.
   ========================================================================== */
.sv-boundaries {
  padding: clamp(88px, 8vw, 120px) 0 clamp(96px, 9vw, 132px);
  background: var(--sv-bone-2);
  color: var(--sv-ink);
}

.sv-ledger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: clamp(44px, 4.2vw, 60px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--sv-plate);
  box-shadow: 0 0 0 24px var(--sv-plate);
  border-top: 2px solid var(--sv-rule-strong);
  border-bottom: 1px solid var(--sv-rule-strong);
}

.sv-ledger li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 22px 0 24px;
}

.sv-ledger li + li {
  border-top: 1px solid var(--sv-hair);
}

.sv-ledger li::before {
  content: "";
  grid-column: 1 / span 1;
  align-self: center;
  width: 22px;
  height: 1px;
  background: var(--sv-rule-strong);
}

.sv-ledger p {
  grid-column: 2 / -1;
  margin: 0;
  max-width: 78ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sv-ink-2);
  text-wrap: pretty;
}

/* ==========================================================================
   06 - The closing invitation. The page returns to the dark industrial
   ground before the shared site close.
   ========================================================================== */
.sv-cta {
  padding: clamp(104px, 9.5vw, 136px) 0 clamp(72px, 6.6vw, 96px);
  background: var(--sv-dark-2);
}

.sv-cta .sv-heading {
  max-width: 22ch;
  color: var(--sv-dark-ink);
}

.sv-cta .sv-lede {
  max-width: 56ch;
  color: var(--sv-dark-ink-2);
}

/* The established plain action (homepage filing strip, Company): underlined
   text, never a signing field. */
.sv-action {
  margin: 30px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.sv-action a {
  color: var(--sv-dark-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  transition: text-decoration-color var(--transition-fast);
}

.sv-action a:hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Responsive - the same folding as the product and editorial pages.
   ========================================================================== */
@media (max-width: 1100px) {
  .sv-margin { grid-column: 1 / span 2; }
  .sv-main   { grid-column: 3 / span 10; }
}

@media (max-width: 900px) {
  /* The margin folds into the flow: label over the clause. */
  .sv-margin,
  .sv-main {
    grid-column: 1 / -1;
  }

  .sv-margin { padding-top: 0; }
  .sv-main   { margin-top: 18px; }

  /* Each service becomes one column: title, copy, then the drawing. */
  .sv-service {
    row-gap: 26px;
  }

  .sv-service-margin,
  .sv-service-body,
  .sv-service-figure {
    grid-column: 1 / -1;
  }

  .sv-service-title { max-width: none; }
  .sv-service-core  { padding-top: 0; }
  .sv-service-core,
  .sv-service-note  { max-width: 62ch; }

  .sv-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34px;
  }

  .sv-stage:nth-child(n + 3) {
    padding-top: 26px;
    border-top: 1px solid var(--sv-hair);
  }

  .sv-stage:nth-child(n + 3)::before {
    background: var(--sv-rule);
  }
}

@media (max-width: 768px) {
  .sv-page { --sv-gutter: 24px; }

  .sv-head {
    padding-top: 150px;
  }

  .sv-stages {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .sv-stage {
    padding: 22px 0 24px;
    border-top: 1px solid var(--sv-hair);
  }

  .sv-stage:first-child {
    border-top: 0;
  }

  .sv-stage:nth-child(n + 3) {
    padding-top: 22px;
  }

  .sv-stage::before {
    display: none;
  }

  .sv-ledger {
    box-shadow: 0 0 0 16px var(--sv-plate);
  }

  .sv-ledger li::before { width: 16px; }

  /* Phone running head (01 section 3), as on the product and editorial
     pages. */
  .sv-running-head {
    display: block;
    margin: 0;
    padding: 7px var(--sv-gutter) 8px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(10, 10, 10, 0.9);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: var(--sv-dark-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 560px) {
  .sv-ledger li {
    row-gap: 10px;
  }

  .sv-ledger li::before,
  .sv-ledger p {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Print (01 section 14): paper, not the screen. The light body already
   prints as paper; the dark head, close and footer return to ink on white.
   ========================================================================== */
@media print {
  @page {
    margin: 16mm 15mm 18mm;
  }

  .sv-page {
    --sv-bone: #ffffff;
    --sv-bone-2: #ffffff;
    --sv-plate: #ffffff;
    --sv-steel: #ffffff;
    --sv-steel-2: #ffffff;
    --sv-dark-label: #555555;
    background: #ffffff;
  }

  .sv-head,
  .sv-cta,
  .site-close,
  .site-footer {
    background: #ffffff !important;
    color: #111111;
  }

  .sv-title,
  .sv-cta .sv-heading {
    color: #111111;
  }

  .sv-deck,
  .sv-cta .sv-lede,
  .sv-action a {
    color: #333333;
  }

  .sv-head {
    padding-top: 0;
  }

  .sv-turn {
    border-top-color: #999999;
  }

  .site-header {
    position: static;
  }

  .sv-running-head,
  .compact-nav-panel,
  .nav-disclosure,
  .close-horizon {
    display: none !important;
  }

  .sv-page a[href^="/"]::after,
  .sv-page a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.86em;
    font-weight: 400;
    color: #555555;
  }

  .sv-service,
  .sv-stage,
  .sv-ledger li {
    break-inside: avoid;
  }
}