/* DABB — SERVICES (dabb2): five lines between hairlines, on one screen.
   .svc__head     label · headline
   .svc__body     the list and, over its first column, the ONE canvas of the five small dabbs
   .svc__item     one line:  mark | name | one sentence | three tools      (phones: mark | name over sentence, no tools)
   .svc__go       the link, stretched over its line (the whole line is the target; the focus ring goes round the line)
   .svc__plant    the line's plant (a .plant, css/base.css): a seedling at rest, full grown once the line has been in hand
   .svc__mark     the place of the line's dabb; its dot shows only while there is no canvas (no script, no engine)
   State (script):  .svc.is-alive (the canvas draws the marks) · .svc.is-glyph (static glyphs stand in)
                    .svc__list.is-hot + .svc__item.is-on (the line pointed at / focused: THE SHADE LIFTS a little along it —
                    a wash of lit sand that runs out from the start edge, over a hairline of the same tone; the others dim)
                    .svc__item.is-current (+ aria-current on its link): the service a deep link chose
   IN THE SUN (AMENDMENT 7, css/base.css .in-sun — this section is in its list): the sand bare and lifted a little, the type
   deep umber (--fg … from --sun-ink), the hairlines ink at 20 %. The work above stands in the same sun.                   */

.svc {
  --sh: var(--shade-sun); --sh-in: var(--shade-sun);              /* the hour: the sun, like the work above it */
  --svc-mark: 48px;                                             /* the first column: the line's plant and its small dabb */
  --svc-plant-x: 24px; --svc-plant-y: 34px;                     /* where the plant is rooted, from the line's start corner (phones: over the dabb) */
  --svc-dabb-end: 0px; --svc-dabb-y: 0.72;                      /* the dabb: its middle from the column's END edge (0 = the column's middle) and how far down the line (read by the script) */
  --svc-plant-k: 0.62;                                          /* the plants' size on a phone, of their size on a desk */
  padding-block: clamp(48px, 6vw, 96px);
}

.svc__head { display: grid; gap: var(--s-4); margin-block-end: clamp(24px, 3vw, 40px); }
.svc__kicker { color: var(--fg-2); }

.svc__body { position: relative; }
.svc__list { list-style: none; margin: 0; padding: 0; border-block-start: var(--hair) solid var(--rule); }
.svc__item {
  position: relative; isolation: isolate;                       /* (its light lies under its words, over the section's shade) */
  display: grid; grid-template-columns: var(--svc-mark) minmax(0, 1fr); column-gap: var(--s-4); align-items: center;
  padding-block: 12px; border-block-end: var(--hair) solid var(--rule);
}
/* the line's plant: rooted at a point near the line's start corner (margins, not transforms: the page mirrors). Each
   species at its own natural size — the hanzal trails widest, the khuzama and the aqhuwan are small. */
.svc__plant {
  --plant: calc(56px * var(--svc-plant-k));
  position: absolute; z-index: 0; inset-inline-start: var(--svc-plant-x); inset-block-start: var(--svc-plant-y);
  margin-inline-start: calc(var(--plant) / -2); margin-block-start: calc(var(--plant) / -2);
}
.svc__item[data-id="games"] .svc__plant { --plant: calc(80px * var(--svc-plant-k)); }
.svc__item[data-id="ai"] .svc__plant { --plant: calc(44px * var(--svc-plant-k)); }
.svc__item[data-id="apps"] .svc__plant { --plant: calc(58px * var(--svc-plant-k)); }
.svc__item[data-id="web"] .svc__plant { --plant: calc(66px * var(--svc-plant-k)); }
.svc__item[data-id="ux"] .svc__plant { --plant: calc(42px * var(--svc-plant-k)); }
.svc__mark { grid-row: 1 / span 2; display: grid; place-items: center; block-size: 100%; }
.svc__mark::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent-mark); }
.svc.is-alive .svc__mark::before, .svc.is-glyph .svc__mark::before { display: none; }
.svc__mark > svg { display: block; inline-size: 46px; block-size: auto; }
[dir="rtl"] .svc__mark > svg { transform: scaleX(-1); }       /* the glyph is drawn facing right: it faces the name */
.svc__name {
  grid-column: 2; margin: 0;
  font-family: var(--f-display); font-size: var(--fs-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
}
html[lang="ar"] .svc__name { letter-spacing: 0; line-height: 1.38; font-weight: 600; }
.svc__say { grid-column: 2; margin: 0; color: var(--fg-2); font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; }

/* the whole line is the link */
.svc__go { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-2); }

/* the line in hand: the light comes up along it — a wash of the sand's own highlight, strongest where its dabb lies, gone
   before the end edge — and its hairline deepens. It runs out from the start edge. (In the sun its deep type only gains.) */
.svc__item::after {
  content: ""; position: absolute; z-index: -1; inset-inline: calc(var(--margin) * -0.5) 0; inset-block: 0 calc(var(--hair) * -1);
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(var(--sun-ink-rgb), 0.5), rgba(var(--sun-ink-rgb), 0.3) 55%, rgba(var(--sun-ink-rgb), 0.1)) 0 100% / 100% var(--hair) no-repeat,
    linear-gradient(to right, rgba(var(--sun-rgb), 0.42), rgba(var(--sun-rgb), 0.22) 40%, rgba(var(--sun-rgb), 0) 88%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--margin) * 0.5)); mask-image: linear-gradient(to right, transparent, #000 calc(var(--margin) * 0.5));
  opacity: 0; transform: scaleX(0.35); transform-origin: 0 50%;
}
[dir="rtl"] .svc__item::after {
  transform-origin: 100% 50%;
  background:
    linear-gradient(to left, rgba(var(--sun-ink-rgb), 0.5), rgba(var(--sun-ink-rgb), 0.3) 55%, rgba(var(--sun-ink-rgb), 0.1)) 0 100% / 100% var(--hair) no-repeat,
    linear-gradient(to left, rgba(var(--sun-rgb), 0.42), rgba(var(--sun-rgb), 0.22) 40%, rgba(var(--sun-rgb), 0) 88%);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 calc(var(--margin) * 0.5)); mask-image: linear-gradient(to left, transparent, #000 calc(var(--margin) * 0.5));
}
.svc__item:hover::after, .svc__item.is-on::after { opacity: 1; transform: none; }
/* … and the others step back a little — no more than the sun allows: at .96 their quiet lines (--fg-2) still measure
   4.7 : 1 on the darkest grain, lifted (their dabbs fade further, on the canvas) */
.svc__list.is-hot .svc__item:not(.is-on) { opacity: 0.96; }
/* a line whose plant has grown keeps its mark: a short rule of Najd green on its hairline, under the plant (green = life
   and growth, DESIGN2.md amendment 4). It comes with the flowers, last. */
.svc__item.is-grown::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: calc(var(--hair) * -1); z-index: 1;
  inline-size: 36px; block-size: 2px; background: var(--green-text);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .svc__item.is-grown:not(.is-current)::before { animation: svc-grown 0.5s var(--e-out, ease-out) 0.6s both; transform-origin: 0 50%; }
  [dir="rtl"]:not(.is-calm) .svc__item.is-grown:not(.is-current)::before { transform-origin: 100% 50%; }
}
@keyframes svc-grown { from { transform: scaleX(0); } to { transform: none; } }
/* the service a deep link chose: a short rule in its colour under its mark */
.svc__item.is-current::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: calc(var(--hair) * -1); z-index: 1;
  inline-size: var(--svc-mark); block-size: 2px; background: var(--accent-mark);
}

.svc__canvas {
  position: absolute; inset-block: 0; inset-inline-start: 0; display: none;
  inline-size: var(--svc-mark); block-size: 100%; pointer-events: none; color: var(--fg);
}
.svc.is-alive .svc__canvas { display: block; }

@media (min-width: 900px) {
  .svc { --svc-mark: 112px; --svc-plant-x: 24px; --svc-plant-y: 50%; --svc-dabb-end: 28px; --svc-dabb-y: 0.5; --svc-plant-k: 1; }      /* the plant, and beside it the dabb, facing the name */
  .svc__item {
    /* mark | the name, in a column as wide as the longest name (7.8 em of the name's size: "Web & Platforms" in Bricolage Grotesque
       is 7.53 em at its tracking; it was 7.5 for Manrope) | the sentence (the tools are gone: the owner, 2026-10-19) */
    grid-template-columns: var(--svc-mark) calc(var(--fs-h2) * 7.8) minmax(0, 1fr); column-gap: var(--gutter);
    min-block-size: clamp(66px, 8.2vh, 88px); padding-block: 10px;
  }
  .svc__mark { grid-row: auto; }
  .svc__name, .svc__say { grid-column: auto; }
}

@media (min-width: 1200px) {
  .svc__item { grid-template-columns: var(--svc-mark) calc(var(--fs-h2) * 7.8) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .svc__item { transition: opacity var(--t-2) var(--e-std); }
  html:not(.is-calm) .svc__item::after { transition: transform var(--t-4) var(--e-dash), opacity var(--t-3) var(--e-std); }
}