/* Public service pages: /services (listing) and the "ea_development" layout (/ea).
 *
 * Built on theme-dark.css, auth.css (aurora backdrop, gold and ghost buttons,
 * form fields, --auth-* tokens), contact.css (success message, honeypot,
 * contact cards) and mql-lock-page.css (container, sections, cards, steps,
 * scroll reveal); this file adds the service hero, the highlight cards, the
 * code editor mock, the form section and the listing cards.
 *
 * Motion (all decorative, all transform/opacity only, nothing changes size):
 * 1. Hero scene: floating coins, rising/falling candlesticks and a line chart
 *    that draws itself (a "wipe": an outer box slides in while the chart
 *    inside slides the other way, so the chart stays still and is revealed).
 * 2. Rotating words after the h1: stacked in one grid cell (the widest word
 *    sets the width, so swapping words never moves the layout).
 * 3. Code typing: a cover with the editor's colour slides off each line in
 *    steps, like a cursor typing.
 * Start states that hide something apply only once service-page.js has put
 * `svc-js` on <html>, so without JavaScript everything is visible. Under
 * prefers-reduced-motion nothing loops, types or reveals: the final state
 * is shown.
 */

.svc-body {
  --svc-editor-bg: #0b0c12;
  --svc-coin-light: #ffe27a;
  --svc-coin-dark: #b8860b;
  --svc-up: var(--auth-success);
  --svc-down: var(--auth-error);
  --svc-scene-loop: 12s;
  --svc-fs-h1: clamp(2.1rem, 1.15rem + 3.8vw, 5.5rem);
  --svc-fs-rotator: clamp(1.5rem, 0.95rem + 2.4vw, 3.6rem);
  /* Width of the hero copy; the decorations live in the gutters beside it. */
  --svc-copy: min(50rem, 100%);
  /* Decoration size: grows with the screen, inside sensible bounds. */
  --svc-decor: clamp(2.5rem, 1.2rem + 1.4vw, 4.5rem);
}

/* Wide monitors: a wider page column, so the content does not float in the middle. */
@media (min-width: 1680px) {
  .svc-body {
    --mql-max: clamp(84rem, 40rem + 36vw, 104rem);
    --mql-fs-h2: clamp(2.75rem, 1.6rem + 1.1vw, 3.4rem);
    --mql-fs-h3: clamp(1.25rem, 0.95rem + 0.3vw, 1.45rem);
    --mql-fs-lead: clamp(1.2rem, 0.95rem + 0.25vw, 1.4rem);
    --svc-copy: min(58rem, 100%);
  }

  .svc-body .svc-hero__inner {
    max-width: 68rem;
  }

  .svc-body .svc-hero__lead {
    max-width: 54rem;
  }

  .svc-body .mql-card__text,
  .svc-body .svc-point__text,
  .svc-body .mql-step__text {
    font-size: 1.0625rem;
  }
}

/* ------------------------------------------------------------------ Hero */

.svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 1.25rem + 4vw, 6.5rem) clamp(4.5rem, 3rem + 6vw, 9rem);
  border-bottom: 1px solid var(--auth-line);
  text-align: center;
}

/* A soft dark pool behind the copy keeps the text readable over the scene. */
.svc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(7, 8, 11, 0.78), transparent 75%);
  pointer-events: none;
}

.svc-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.85rem, 0.65rem + 0.7vw, 1.4rem);
  max-width: 60rem;
}

.svc-breadcrumb .mql-breadcrumb__list {
  justify-content: center;
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(235, 196, 42, 0.45);
  border-radius: var(--radius-pill);
  background-color: var(--auth-gold-soft);
  color: var(--auth-gold);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.svc-badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--auth-gold);
  box-shadow: 0 0 0 4px rgba(235, 196, 42, 0.18);
}

/* The h1 and the intro are the LCP elements: never animated. */
.svc-hero__title {
  max-width: 18ch;
  font-family: var(--font-brand);
  font-size: var(--svc-fs-h1);
  font-weight: var(--font-weight-brand);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.svc-hero__lead {
  max-width: 46rem;
  text-align: center;
}

.svc-hero__actions {
  justify-content: center;
}

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-chip {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--auth-line-strong);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--auth-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.svc-hero__words {
  color: var(--auth-subtle);
  font-size: var(--auth-fs-small);
  letter-spacing: 0.04em;
}

.svc-hero__words-label {
  color: var(--auth-muted);
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------- Rotating words */

.svc-rotator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--svc-fs-rotator);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* All words share one grid cell: the widest one sets the width. */
.svc-rotator__stack {
  display: inline-grid;
}

.svc-rotator__word {
  grid-area: 1 / 1;
  justify-self: center;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--auth-gold-strong), var(--auth-gold) 60%, #e0a800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 450ms var(--auth-ease), transform 450ms var(--auth-ease);
}

/* Static state: only the first word (server-marked is-active) shows. */
.svc-rotator__word:not(.is-active) {
  opacity: 0;
  transform: translateY(0.55em);
}

.svc-rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-0.55em);
}

/* ---------------------------------------------------------- Hero scene */

.svc-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.svc-scene__chart {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(46%, 300px);
  opacity: 0.55;
}

/* The wipe: this box and the svg inside move in opposite directions. */
.svc-scene__chart-wipe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.svc-scene__chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.svc-scene__chart-line {
  fill: none;
  stroke: rgba(235, 196, 42, 0.7);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.svc-scene__chart-area {
  fill: rgba(235, 196, 42, 0.06);
}

.svc-scene__candles {
  position: absolute;
  right: 0;
  bottom: 12%;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 38%;
  padding-inline: 3%;
  opacity: 0.3;
}

.svc-candle {
  position: relative;
  display: grid;
  justify-items: center;
  width: clamp(0.55rem, 0.4rem + 0.5vw, 1rem);
  height: var(--svc-candle-h, 50%);
}

.svc-candle__wick {
  grid-area: 1 / 1;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background-color: currentColor;
}

.svc-candle__body {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  height: 58%;
  border-radius: 2px;
  background-color: currentColor;
}

.svc-candle--up { color: var(--svc-up); }
.svc-candle--down { color: var(--svc-down); }

/* Varied candle heights and lifts, so the row reads as a market. */
.svc-candle:nth-child(1) { --svc-candle-h: 34%; transform: translateY(-10%); }
.svc-candle:nth-child(2) { --svc-candle-h: 48%; transform: translateY(-4%); }
.svc-candle:nth-child(3) { --svc-candle-h: 40%; transform: translateY(-26%); }
.svc-candle:nth-child(4) { --svc-candle-h: 56%; transform: translateY(-38%); }
.svc-candle:nth-child(5) { --svc-candle-h: 44%; transform: translateY(-30%); }
.svc-candle:nth-child(6) { --svc-candle-h: 62%; transform: translateY(-48%); }
.svc-candle:nth-child(7) { --svc-candle-h: 38%; transform: translateY(-40%); }
.svc-candle:nth-child(8) { --svc-candle-h: 52%; transform: translateY(-60%); }
.svc-candle:nth-child(9) { --svc-candle-h: 66%; transform: translateY(-74%); }
.svc-candle:nth-child(10) { --svc-candle-h: 42%; transform: translateY(-66%); }
.svc-candle:nth-child(11) { --svc-candle-h: 58%; transform: translateY(-84%); }
.svc-candle:nth-child(12) { --svc-candle-h: 70%; transform: translateY(-96%); }

/* A gold coin: a radial gradient disc with an inner ring and a "$" face. */
.svc-coin {
  --svc-coin-size: calc(var(--svc-decor) * var(--k, 1));
  position: absolute;
  display: none;
  place-items: center;
  width: var(--svc-coin-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--svc-coin-light), var(--auth-gold) 45%, var(--svc-coin-dark) 100%);
  box-shadow: 0 10px 28px -10px var(--auth-gold-glow), inset 0 0 0 3px rgba(255, 255, 255, 0.18);
  opacity: 0.85;
}

.svc-coin__face {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border: 2px solid rgba(120, 84, 0, 0.45);
  border-radius: 50%;
  color: rgba(96, 66, 0, 0.85);
  font-family: var(--font-brand);
  font-size: calc(var(--svc-coin-size) * 0.42);
  font-weight: var(--font-weight-brand);
  line-height: 1;
}

/*
  The coins are shown only where the gutters beside the hero copy are wide
  enough to hold them (from 1200px), so they never cover the text on any
  screen. Each coin sits at a fraction (--x) of its gutter's width, measured
  from the outer edge: left: calc(gutter * x - half the coin).
*/
@media (min-width: 1200px) {
  .svc-coin {
    display: grid;
  }

  .svc-coin:nth-of-type(odd) {
    left: calc((100% - var(--svc-copy)) / 2 * var(--x) - var(--svc-coin-size) / 2);
  }

  .svc-coin:nth-of-type(even) {
    right: calc((100% - var(--svc-copy)) / 2 * var(--x) - var(--svc-coin-size) / 2);
  }

  .svc-coin:nth-of-type(1) { --k: 1.15; --x: 0.45; top: 12%; }
  .svc-coin:nth-of-type(2) { --k: 0.9; --x: 0.5; top: 16%; }
  .svc-coin:nth-of-type(3) { --k: 0.75; --x: 0.25; top: 50%; }
  .svc-coin:nth-of-type(4) { --k: 1.25; --x: 0.35; top: 56%; }
  .svc-coin:nth-of-type(5) { --k: 0.65; --x: 0.85; top: 36%; }
  .svc-coin:nth-of-type(6) { --k: 0.8; --x: 0.8; top: 32%; }
}

/* Phones: a shorter candle row. */
@media (max-width: 639.98px) {
  .svc-candle:nth-child(n + 8) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .svc-badge__dot {
    animation: svc-pulse 2.4s ease-in-out infinite;
  }

  .svc-scene__chart {
    animation: svc-chart-fade var(--svc-scene-loop) var(--auth-ease) infinite;
  }

  .svc-scene__chart-wipe {
    animation: svc-wipe-box var(--svc-scene-loop) var(--auth-ease) infinite;
  }

  .svc-scene__chart-svg {
    animation: svc-wipe-content var(--svc-scene-loop) var(--auth-ease) infinite;
  }

  .svc-candle {
    animation: svc-candle-rise 7s ease-in-out infinite alternate;
  }

  .svc-candle:nth-child(odd) { animation-name: svc-candle-fall; animation-duration: 8.5s; }
  .svc-candle:nth-child(3n) { animation-delay: -2s; }
  .svc-candle:nth-child(4n) { animation-delay: -4.5s; }

  .svc-candle__body {
    animation: svc-candle-body 5.5s ease-in-out infinite alternate;
  }

  .svc-candle:nth-child(even) .svc-candle__body { animation-delay: -2.75s; }

  .svc-coin {
    animation: svc-coin-float 7s ease-in-out infinite alternate;
  }

  .svc-coin:nth-of-type(2) { animation-duration: 8s; animation-delay: -3s; }
  .svc-coin:nth-of-type(3) { animation-duration: 6s; animation-delay: -1.5s; }
  .svc-coin:nth-of-type(4) { animation-duration: 9s; animation-delay: -5s; }
  .svc-coin:nth-of-type(5) { animation-duration: 6.5s; animation-delay: -2s; }
  .svc-coin:nth-of-type(6) { animation-duration: 7.5s; animation-delay: -4s; }

  /* service-page.js pauses the scene while the hero is off screen. */
  .svc-hero.is-offscreen .svc-scene *,
  .svc-hero.is-offscreen .svc-scene,
  .svc-hero.is-offscreen .svc-badge__dot {
    animation-play-state: paused;
  }
}

@keyframes svc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* Draw (0-40%), hold, fade out (80-92%), restart hidden. */
@keyframes svc-chart-fade {
  0%, 80% { opacity: 0.55; }
  92%, 100% { opacity: 0; }
}

@keyframes svc-wipe-box {
  0% { transform: translateX(-100%); }
  40%, 100% { transform: translateX(0); }
}

@keyframes svc-wipe-content {
  0% { transform: translateX(100%); }
  40%, 100% { transform: translateX(0); }
}

/* The candles keep their own lift (set above) and drift up or down from it. */
@keyframes svc-candle-rise {
  from { translate: 0 0; }
  to { translate: 0 -18%; }
}

@keyframes svc-candle-fall {
  from { translate: 0 -12%; }
  to { translate: 0 10%; }
}

@keyframes svc-candle-body {
  from { transform: scaleY(0.75); }
  to { transform: scaleY(1.15); }
}

@keyframes svc-coin-float {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-18px) rotate(10deg); }
}

/* ------------------------------------------------------------ Highlights */

.svc-highlights {
  position: relative;
  z-index: 1;
  margin-top: clamp(-4rem, -1.5rem - 2.5vw, -2rem);
}

.svc-highlights__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .svc-highlights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .svc-highlights__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.svc-highlight {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(235, 196, 42, 0.1), transparent 55%),
    var(--mql-surface-raised);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.95);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.svc-highlight:hover,
.svc-highlight:focus-within {
  border-color: rgba(235, 196, 42, 0.45);
}

.svc-highlight__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  padding: var(--mql-card-pad);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: default;
}

.svc-js .svc-highlight__toggle {
  cursor: pointer;
}

.svc-highlight__toggle:focus-visible {
  outline: 3px solid var(--auth-gold);
  outline-offset: -3px;
  border-radius: var(--auth-radius);
}

.svc-highlight__value {
  grid-column: 1;
  font-family: var(--font-brand);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: var(--font-weight-brand);
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--auth-gold-strong), var(--auth-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-highlight__label {
  grid-column: 1;
  margin-top: 0.25rem;
  color: var(--auth-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
}

/* The +/× marker only means something once JavaScript makes the card a toggle. */
.svc-highlight__icon {
  display: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--auth-line-strong);
  border-radius: 50%;
  color: var(--auth-gold);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.svc-js .svc-highlight__icon {
  display: inline-grid;
}

.svc-highlight__icon svg {
  width: 1rem;
  height: 1rem;
}

.svc-highlight__toggle[aria-expanded="true"] .svc-highlight__icon {
  border-color: var(--auth-gold);
  transform: rotate(45deg);
}

.svc-highlight__details {
  display: grid;
  gap: 0.4rem;
  padding: 0 var(--mql-card-pad) var(--mql-card-pad);
}

.svc-highlight__title {
  padding-top: 0.85rem;
  border-top: 1px solid var(--auth-line);
  font-family: var(--font-brand);
  font-size: var(--mql-fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.svc-highlight__text {
  color: var(--auth-muted);
  font-size: var(--auth-fs-small);
  line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
  .svc-highlight:hover {
    transform: translateY(-3px);
  }

  .svc-js .svc-highlight__details:not([hidden]) {
    animation: svc-open 320ms var(--auth-ease) both;
  }
}

@keyframes svc-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Expertise */

.svc-expertise {
  max-width: 64rem;
  margin-inline: auto;
}

.svc-bullets {
  position: relative;
  display: grid;
  gap: 0.55rem;
  margin: 0.4rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--auth-line);
  list-style: none;
  color: var(--auth-text);
  font-size: var(--auth-fs-small);
}

.svc-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}

.svc-bullets__check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  color: var(--auth-success);
}

.svc-bullets__link {
  color: var(--auth-gold);
  font-weight: var(--font-weight-semibold);
}

/* ----------------------------------------------------------------- Steps */

.svc-step {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

/* A thin gold line grows along the top of a step on hover (transform only). */
.svc-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--auth-gold-strong), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--auth-ease);
}

.svc-step:hover {
  border-color: var(--auth-line-strong);
}

.svc-step:hover::before {
  transform: scaleX(1);
}

/* ---------------------------------------------------------- Professional */

.svc-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
}

@media (min-width: 1024px) {
  .svc-pro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.svc-pro__copy {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.svc-points {
  display: grid;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.svc-point {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.svc-point__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(235, 196, 42, 0.4);
  border-radius: 14px;
  background-color: var(--auth-gold-soft);
  color: var(--auth-gold);
}

.svc-point__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.svc-point__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.svc-point__title {
  font-family: var(--font-brand);
  font-size: var(--mql-fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.svc-point__text {
  color: var(--auth-muted);
  line-height: 1.6;
}

/* ------------------------------------------------------------ Code editor */

.svc-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--auth-line-strong);
  border-radius: var(--auth-radius);
  background-color: var(--svc-editor-bg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.9rem);
}

.svc-editor__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--auth-line);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--auth-muted);
  font-size: var(--font-size-xs);
}

.svc-editor__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-editor__lang {
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background-color: var(--auth-gold-soft);
  color: var(--auth-gold);
  font-weight: var(--font-weight-bold);
}

.svc-editor__code {
  padding: 1rem 0 0.75rem;
  overflow-x: auto;
}

.svc-editor__line {
  display: flex;
  gap: 1rem;
  padding-inline: 1rem;
  line-height: 1.85;
}

.svc-editor__num {
  flex: 0 0 1.5rem;
  color: var(--auth-subtle);
  text-align: end;
  opacity: 0.6;
}

/* Each line clips its own typing cover (::after) and cursor (::before). */
.svc-editor__text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #d7dae3;
  white-space: pre;
  vertical-align: top;
}

.svc-tok--kw { color: #c792ea; }
.svc-tok--fn { color: #82aaff; }
.svc-tok--num { color: #f78c6c; }
.svc-tok--cm { color: #6b7385; font-style: italic; }
.svc-tok--str { color: #c3e88d; }

.svc-editor__output {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem 1.1rem;
  border-top: 1px solid var(--auth-line);
  color: var(--auth-muted);
  line-height: 1.6;
}

.svc-editor__out--ok {
  color: var(--auth-success);
}

/* Per line: --chars (typing steps) and --delay (start time) are set by
   service-page.js from each line's own text, so any editor mock types in
   order. The steps jump at the start of each interval (jump-start), so a
   line always ends fully shown even when the timing ends a hair short. */
.svc-editor__line,
.svc-editor__out {
  --chars: 1;
  --delay: 0ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* The cover and the cursor exist only once JavaScript can start the typing. */
  .svc-js .svc-editor__text::after,
  .svc-js .svc-editor__text::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .svc-js .svc-editor__text::after {
    background-color: var(--svc-editor-bg);
  }

  /* The cursor: a 2px bar at the left edge of a box as wide as the line. */
  .svc-js .svc-editor__text::before {
    z-index: 1;
    background: linear-gradient(90deg, var(--auth-gold) 2px, transparent 2px);
    opacity: 0;
  }

  .svc-js .svc-editor:not(.is-typing) .svc-editor__out {
    opacity: 0;
  }

  .svc-editor.is-typing .svc-editor__text::after {
    animation: svc-type calc(var(--chars) * 30ms) steps(var(--chars), jump-start) var(--delay) forwards;
  }

  .svc-editor.is-typing .svc-editor__text::before {
    animation: svc-cursor calc(var(--chars) * 30ms) steps(var(--chars), jump-start) var(--delay) forwards;
  }

  .svc-editor.is-typing .svc-editor__out {
    animation: svc-out 360ms var(--auth-ease) var(--delay) both;
  }
}

@keyframes svc-type {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}

@keyframes svc-cursor {
  0% { opacity: 1; transform: translateX(0); }
  99% { opacity: 1; transform: translateX(100%); }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes svc-out {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Form */

/* The form column grows with the screen (the card is about 700px on laptops and 900px on wide monitors). */
.svc-start__inner {
  max-width: clamp(44rem, 32rem + 26vw, 68rem);
}

.svc-form-card {
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.svc-success {
  margin-bottom: var(--auth-gap);
}

/* The optional strategy fields: short, growable text boxes in two columns. */
.svc-strategy__hint {
  margin: -0.35rem 0 0.9rem;
}

.svc-strategy__text {
  min-height: 4.75rem;
  padding-block: 0.7rem;
  line-height: 1.5;
  resize: vertical;
}

.svc-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) 0 clamp(1.25rem, 1rem + 1vw, 2rem);
  color: var(--auth-subtle);
  font-size: var(--auth-fs-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
}

.svc-or::before,
.svc-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auth-line-strong));
}

.svc-or::after {
  background: linear-gradient(90deg, var(--auth-line-strong), transparent);
}

.svc-expert {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.svc-expert__title {
  font-family: var(--font-brand);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.svc-expert__actions {
  justify-content: center;
}

.svc-contact {
  padding-top: 0;
}

/* --------------------------------------------------------------- Listing */

.svc-list-hero__inner {
  display: grid;
  justify-items: start;
  gap: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem);
}

.svc-list__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.svc-list__title {
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.svc-list__count {
  color: var(--auth-subtle);
  font-size: var(--auth-fs-small);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-width: 0;
  padding: var(--mql-card-pad);
  overflow: hidden;
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius);
  background-color: var(--mql-surface);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.svc-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(235, 196, 42, 0.14), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.svc-tile:hover,
.svc-tile:focus-within {
  border-color: rgba(235, 196, 42, 0.45);
}

.svc-tile:hover::before,
.svc-tile:focus-within::before {
  opacity: 1;
}

.svc-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--auth-gold-strong), var(--auth-gold));
  color: var(--color-brand-contrast);
  box-shadow: 0 10px 30px -12px var(--auth-gold-glow);
}

.svc-tile__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.svc-tile__title {
  font-family: var(--font-brand);
  font-size: var(--mql-fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.svc-tile__link {
  color: var(--auth-text);
  text-decoration: none;
}

/* The title link covers the whole card, so the card is one click target. */
.svc-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.svc-tile__link:focus-visible {
  outline: none;
}

.svc-tile:has(.svc-tile__link:focus-visible) {
  outline: 3px solid var(--auth-gold);
  outline-offset: 2px;
}

.svc-tile__text {
  position: relative;
  color: var(--auth-muted);
  line-height: 1.6;
}

.svc-tile__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--auth-gold);
  font-size: var(--auth-fs-small);
  font-weight: var(--font-weight-semibold);
}

.svc-tile__arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-normal);
}

.svc-tile:hover .svc-tile__arrow {
  transform: translateX(4px);
}

.svc-state {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.25rem;
  border: 1px dashed var(--auth-line-strong);
  border-radius: var(--auth-radius);
  text-align: center;
}

.svc-state__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--auth-gold-soft);
  color: var(--auth-gold);
}

.svc-state--error .svc-state__icon {
  background-color: var(--auth-error-soft);
  color: var(--auth-error);
}

.svc-state__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.svc-state__title {
  font-weight: var(--font-weight-bold);
}

.svc-state__text {
  max-width: 34rem;
  color: var(--auth-muted);
}

.svc-state__text a {
  color: var(--auth-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .svc-tile:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-rotator__word,
  .svc-highlight,
  .svc-highlight__icon,
  .svc-step,
  .svc-step::before,
  .svc-tile,
  .svc-tile::before,
  .svc-tile__arrow {
    transition: none;
  }
}

/* ------------------------------------------------------- Short screens */

/* Landscape phones and short windows: a compact hero, so the heading, the
   intro and the buttons are reachable without a screen-tall title. */
@media (max-height: 560px) and (orientation: landscape) {
  .svc-hero {
    padding-block: 1.25rem 3.5rem;
  }

  .svc-hero__inner {
    gap: 0.65rem;
  }

  .svc-hero__title {
    max-width: 24ch;
    font-size: min(var(--svc-fs-h1), calc(1.2rem + 5.5vh));
  }

  .svc-rotator {
    font-size: min(var(--svc-fs-rotator), calc(0.9rem + 3.5vh));
  }

  .svc-highlights {
    margin-top: -1.5rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) and (max-width: 1199.98px) {
  .svc-scene__candles {
    opacity: 0.18;
  }
}

/* ---------------------------------------------------------------- Phones */

@media (max-width: 639.98px) {
  /* /ea steps: the number beside the text, so each card stays short. */
  .svc-step {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    row-gap: 0.3rem;
  }

  .svc-step .mql-step__number {
    grid-row: 1 / span 2;
  }
}

/* ------------------------------------------------------------------ Forms */

/* The enquiry form of every service page (/ea, /bc, /sc). Scoped to
   .svc-form, so the Contact us and sign-up forms are not affected. */

/* Two fields side by side only where each still has room (from 720px);
   phones and small tablets get one full-width field per row. */
@media (max-width: 719.98px) {
  .svc-form .auth-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 720px) {
  .svc-form .auth-grid {
    column-gap: clamp(1rem, 0.5rem + 1vw, 1.5rem);
    row-gap: 1.1rem;
  }
}

/* A long choice ends with "…" instead of running under the arrow. */
.svc-form .auth-field__select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Labels and hints readable at every size. */
.svc-form .auth-field__label {
  font-size: clamp(0.875rem, 0.82rem + 0.15vw, 1rem);
  font-weight: var(--font-weight-semibold);
}

.svc-form .auth-field__hint {
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
}

/* Phones: a little less padding inside the card, more room for the fields. */
@media (max-width: 479.98px) {
  .svc-form-card .auth-card__body {
    padding: 1.15rem 1rem 1.25rem;
  }

  .svc-form {
    gap: 1rem;
  }
}

/* Wide screens: a comfortable submit button instead of a 900px bar. */
@media (min-width: 1024px) {
  .svc-form > .auth-submit {
    justify-self: center;
    width: min(100%, 22rem);
  }
}