/*
  consulting only (/assets/site-20261025/consulting.css). Loads after site.css.
  The hero with the service index, four service sections (each composed differently: the run across the width
  on the ink field; a reading column with the run on its right and the six apps under both; the run on the left
  of its lists on paper; a reading column beside a held run), the four steps as one lane, the questions in two
  columns (each question right over its answer) and the contact block.

  SERVICE LISTS  .svc-list is the site's square-bullet list. In a [data-svc] section consulting.js links the lists to
                 the section's run: .help-list li[data-span="a-b c-d"] gets [data-live] while the run is inside a span
                 and [data-passed] after it; .take-list li[data-at="n"] gets [data-delivered] once the run reaches n.
                 The section's --c (a lane token) colours the live and passed bullets. Without JS the lists stay plain.
  CONTACT        .contact-grid / .contact-text / .contact-form repeat home.css (a candidate for site.css).
*/

/* ---------- Hero: the title, then the four services as the page's index ---------- */
.c-hero { padding: clamp(20px, 3vw, 44px) 0 0; }
.c-hero-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.c-hero-head h1 { grid-column: 1 / span 8; }
.c-hero-side { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 24px; padding-bottom: 0.3em; }
.c-hero-side .lead { max-width: 42ch; }
.c-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

.svc-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--gutter); margin: clamp(56px, 6vw, 96px) 0 0; padding: 0; list-style: none; }
.svc-index li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.svc-index .ico { grid-row: 1 / span 2; margin-top: -3px; }
.svc-index a { justify-self: start; font: 640 22px/1.2 var(--display); letter-spacing: -0.012em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: var(--line-2); transition: text-decoration-color 180ms ease; }
.svc-index span { display: block; max-width: 34ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .svc-index a:hover { text-decoration-color: currentColor; }
}

/* ---------- Service sections ---------- */
.svc-head .stack > p { max-width: 46ch; }
.svc-run { margin: 0; min-width: 0; }
.svc-lists { display: grid; gap: 40px var(--gutter); align-content: start; }
.svc-lists h3, .native-lists h3 { margin-bottom: 18px; }
.svc-note { margin: 22px 0 0; max-width: 48ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* The list: square bullets in the text's ink; a live row sits on a tone step with its bullet in the section colour. */
.svc-list { margin: 0; padding: 0; list-style: none; }
.svc-list li { position: relative; margin: 0 -14px; padding: 7px 14px 7px 36px; max-width: calc(58ch + 50px); }
.svc-list li + li { margin-top: 4px; }
.svc-list li::before { content: ""; position: absolute; left: 16px; top: calc(7px + 0.62em); width: 8px; height: 8px; background: currentColor; }
.help-list li { background-color: transparent; }
.help-list li::before { transform-origin: 50% 50%; }
[data-sync] .help-list li[data-live] { background-color: var(--tone); }
[data-sync] .help-list li[data-live]::before, [data-sync] .help-list li[data-passed]::before { background: var(--c); }
[data-sync] .help-list li[data-live]::before { transform: scale(1.35); }
/* Take-away rows wait as an empty box and tick when the run delivers them. */
[data-sync] .take-list li::before { left: 13px; top: calc(7px + 0.78em - 7px); width: 14px; height: 14px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
[data-sync] .take-list li::after { content: ""; position: absolute; left: 13px; top: calc(7px + 0.78em - 7px); width: 14px; height: 14px; border-radius: 3px; background: var(--verify); opacity: 0; transform: scale(0.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect width='14' height='14' rx='3'/%3E%3C/svg%3E") 0 0 / 100% 100%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4l2.4 2.4 4.8-5.4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect width='14' height='14' rx='3'/%3E%3C/svg%3E") 0 0 / 100% 100%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4l2.4 2.4 4.8-5.4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask-composite: exclude; }
[data-sync] .take-list li[data-delivered]::after { opacity: 1; transform: none; }
[data-sync-anim] .help-list li { transition: background-color 200ms ease; }
[data-sync-anim] .help-list li::before { transition: background-color 200ms ease, transform 200ms var(--ease-out); }
[data-sync-anim] .take-list li::after { transition: opacity 160ms ease, transform 220ms var(--ease-out); }

/* Custom AI workflows: heading over text, the run across the width, the two lists under it. */
.c-hero + .svc-ai { margin-top: clamp(72px, 7.4vw, 112px); }
.svc-ai .svc-run { margin-top: clamp(44px, 4.6vw, 72px); }
.svc-ai .svc-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(56px, 5.4vw, 84px); }

/* Native apps: a reading column on the left (heading, text, lists), the run on the right from the heading's top,
   the six apps as one shelf across the width. The runs zig-zag down the page: across, right, left, right. */
.native { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.native-text { grid-column: 1 / span 5; }
.native-text .lead { margin-top: 24px; }
.native-lists { display: grid; gap: 44px; margin-top: clamp(44px, 4.4vw, 64px); }
.native .svc-run { grid-column: 6 / span 7; padding-top: 6px; }
.shelf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); margin: clamp(64px, 6.4vw, 104px) 0 0; padding: 0; list-style: none; }
.shelf a { display: grid; gap: 16px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.shelf-shot { display: block; aspect-ratio: 660 / 1434; border-radius: clamp(10px, 1.1vw, 16px); overflow: hidden; background: var(--tone); transition: transform 160ms var(--ease-out); }
.shelf-shot img { width: 100%; height: 100%; object-fit: cover; }
.shelf-name { display: flex; align-items: center; gap: 10px; font: 640 18px/1.2 var(--display); letter-spacing: -0.01em; }
.shelf-name img { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.shelf-name span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: transparent; transition: text-decoration-color 180ms ease; }
.shelf a:active .shelf-shot { transform: scale(0.97); }
.native-more { grid-column: 1 / -1; margin: 32px 0 0; }
@media (hover: hover) and (pointer: fine) {
  .shelf a:hover .shelf-name span { text-decoration-color: currentColor; }
}

/* On-device AI and audio: heading and text top-aligned (its text runs longer than the heading, so the split's
   bottom alignment would drop the heading below the text's start), then the run with its lists beside it. */
.svc-audio .svc-head { align-items: start; }
.svc-audio .svc-head .stack { padding-top: 0.35em; }
.svc-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; align-items: start; margin-top: clamp(44px, 4.6vw, 72px); }
.svc-audio .svc-run { grid-column: 1 / span 8; }
.svc-audio .svc-lists { grid-column: 9 / span 4; gap: 44px; padding-top: 4px; }

/* Architecture and reliability: a reading column, and the run held beside it while you read. */
.svc-arch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.svc-arch .svc-text { grid-column: 1 / span 5; }
.svc-arch .svc-text .lead { margin-top: 24px; }
.svc-arch .svc-lists { margin-top: clamp(44px, 4.4vw, 64px); gap: 44px; }
.svc-arch .svc-run { grid-column: 6 / span 7; position: sticky; top: calc(var(--head-h) + 28px); }

/* ---------- How working together starts: four steps as one lane ---------- */
.steps-head { display: grid; gap: 24px; max-width: 760px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 4px; margin: clamp(48px, 5vw, 80px) 0 0; padding: 0; list-style: none; }
.steps li { padding-right: var(--gutter); }
.steps li::before { content: ""; display: block; height: 12px; margin-bottom: 30px; border-radius: 4px; background: var(--c); }
.steps li:first-child::before { border-radius: 6px 4px 4px 6px; }
.steps li:last-child::before { border-radius: 4px 6px 6px 4px; }
.steps p { margin: 12px 0 0; max-width: 30ch; }

/* ---------- Questions: two columns of items, each question set small and right over its answer, all open ---------- */
.qa-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 4.4vw, 64px) var(--gutter); align-items: start; margin-top: clamp(48px, 5vw, 80px); }
.qa-row { max-width: 58ch; }
.qa-row h3 { font: 640 22px/1.25 var(--display); letter-spacing: -0.012em; }
.qa-row p { margin: 10px 0 0; }

/* ---------- Contact (as on the home page) ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.contact-text { grid-column: 1 / span 5; }
.contact-text .lead { margin-top: 24px; }
.contact-text p + p { margin: 16px 0 0; }
.contact-text a { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; }
.contact-form { grid-column: 7 / span 6; min-width: 0; }

/* ---------- Entrances: the four step bars draw in order, like a lane ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .steps li::before { clip-path: inset(0 100% 0 0 round 4px); transition: clip-path 640ms var(--ease-out); transition-delay: calc(240ms + var(--s, 0) * 150ms); }
  .js [data-section].is-in .steps li::before { clip-path: inset(0 0 0 0 round 4px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .c-hero-head h1 { grid-column: 1 / -1; }
  .c-hero-side { grid-column: 1 / span 9; padding: 28px 0 0; }
  .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-audio .svc-run, .svc-audio .svc-lists { grid-column: 1 / -1; }
  .svc-audio .svc-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Narrow: the reading column opens up so the run sits between the text and its lists, as in the other runs. */
  .svc-arch { row-gap: 0; }
  .svc-arch .svc-text { display: contents; }
  .svc-arch h2, .svc-arch .svc-text .lead { grid-column: 1 / span 9; }
  .svc-arch .svc-run { grid-column: 1 / -1; order: 1; position: static; margin-top: clamp(44px, 4.6vw, 72px); }
  .svc-arch .svc-lists { grid-column: 1 / -1; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
  /* Narrow: the reading column opens up so the run sits between the text and its lists, as in the other runs. */
  .native-text { display: contents; }
  .native h2, .native-text .lead { grid-column: 1 / span 9; }
  .native .svc-run { grid-column: 1 / -1; padding-top: 0; margin-top: clamp(44px, 4.6vw, 72px); }
  .native-lists { grid-column: 1 / -1; order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); margin-top: 56px; }
  .native .shelf, .native-more { order: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shelf { display: flex; gap: 12px; margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; overscroll-behavior-x: contain; }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf li { flex: none; width: clamp(172px, 44vw, 220px); scroll-snap-align: start; }
  .shelf-name { font-size: 17px; }
  .contact-text, .contact-form { grid-column: 1 / -1; }
  .contact-text .lead { max-width: 52ch; }
  .qa-rows { grid-template-columns: minmax(0, 1fr); }
  .qa-row { max-width: 64ch; }
}
@media (max-width: 640px) {
  .c-hero { padding-top: 16px; }
  .c-hero-head h1 { font-size: clamp(38px, 10.6vw, 46px); }
  .c-hero-side { grid-column: 1 / -1; gap: 22px; padding-top: 18px; }
  .c-hero-act { width: 100%; }
  .c-hero-act .btn { width: 100%; }
  .svc-index { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 48px; }
  .svc-index li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; }
  .svc-index .ico { width: 24px; height: 24px; margin-top: 1px; }
  .svc-index a { font-size: 21px; }
  .svc-ai .svc-lists, .svc-audio .svc-lists, .svc-arch .svc-lists, .native-lists { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .svc-arch h2, .svc-arch .svc-text .lead, .native h2, .native-text .lead { grid-column: 1 / -1; }
  .svc-list li { padding-right: 10px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 20px; padding-right: 0; }
  .steps li::before { grid-row: 1 / span 2; width: 12px; height: auto; margin: 0; border-radius: 4px; }
  .steps li:first-child::before { border-radius: 6px 6px 4px 4px; }
  .steps li:last-child::before { border-radius: 4px 4px 6px 6px; }
  .steps h3, .steps p { grid-column: 2; }
  .qa-rows { gap: 40px; }
  .qa-row h3 { font-size: 20px; }
  .qa-row p { margin-top: 8px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .js .steps li::before { clip-path: inset(0 0 100% 0 round 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-shot { transition: none; }
  .shelf a:active .shelf-shot { transform: none; }
  [data-sync] .help-list li[data-live]::before { transform: none; }
  [data-sync-anim] .take-list li::after { transition: opacity 160ms ease; }
}

@media print {
  .svc-ai.band.on-dark { display: block !important; background: #fff; color: #0B0D12; --ink: #0B0D12; --ink-2: #454B57; --ink-3: #5E6571; --tone: #F3F4F6; }
  .svc-run, .shelf, .c-hero-act { display: none !important; }
  .svc-arch .svc-run { position: static; }
}