/* Sytora, service and region pages (R54, 23.09.2026).
   Loaded only by the eight service pages and the two region pages, after
   pages.<hash>.css and before mobile-layout-r45.<hash>.css. It adds no colour,
   no radius and no shadow of its own: every value is a token of pages.css
   (--stage, --stage-hi, --ink, --ink-2, --hair, --accent, --r-card, the type
   scale). Each section has its own shape (rows, the orbit of the stations,
   figures, questions, links, one closing panel), so a long page does not
   read as one list.
   The site has no dark scheme on purpose (R52): light and dark system
   settings render the same page. */

/* ---------- head: the core passage under the h1 ----------
   Two short paragraphs in the lead's size and tone, no box. The measure is a
   little wider than .lead (52ch) because this is running text, not a line. */
.svc-core{margin-top:1.6rem;max-width:62ch;}
.svc-core p{margin:0;font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);}
.svc-core p + p{margin-top:1em;}

/* ---------- a section's own intro line under its h2 ---------- */
.svc-intro{margin:-.3rem 0 1.75rem;max-width:62ch;color:var(--ink-2);}

/* ---------- scope: term and text on hairline rows ----------
   The .legal-table / .rows pattern, as a description list: the term is the
   dt, its sentence the dd. */
.svc-scope{margin:0;border-top:1px solid var(--hair);}
.svc-scope > div{
  display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);gap:.3rem 2.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--hair);
}
.svc-scope dt{font-weight:600;color:var(--ink);line-height:1.45;}
.svc-scope dd{margin:0;color:var(--ink-2);max-width:60ch;}

/* ---------- the run of a project: «Projekt-Orbit» (R58, R58.1) ----------
   Replaces the numbered steps under a hairline (R54 to R57), which the owner
   rejected as a standard timeline (DESIGN-KRITIK §4). Every station carries a
   small copy of the mark itself, «Nordstern im Orbit», the same drawing as
   the brand mark in the bar (R59: identical, see below; R58 drew an empty
   ring with a dot, R58.1 a recoloured sign with the moon on the orbit, both
   rejected). project-orbit.js sets data-state; the markup starts with
   station 1 current. No card, no connecting line, no ground: the mark, the
   title, the sentence. The ol counts the stations for a screen reader; the
   marks are aria-hidden and carry no number.
     phone (to 760 px)   one column, mark 36 px wide beside the title
     761 to 1023 px      two by two, mark 40 px over the title
     from 1024 px        four in a row, mark 44 px over the title
   The width is --po-n (unitless px). The viewBox is the icon's, cut to what
   the drawing covers at rest, so the width is the width of the mark. */
.project-orbit{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  --po-n:36;
}
.project-orbit > li{
  display:grid;grid-template-columns:calc(var(--po-n) * 1px) minmax(0,1fr);column-gap:.9rem;
  align-items:start;padding-bottom:1.75rem;
}
.project-orbit > li > .po-mark{grid-column:1;grid-row:1;}
.project-orbit > li > h3,.project-orbit > li > p{grid-column:2;}
.project-orbit h3{
  margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.35;letter-spacing:-.011em;color:var(--ink);
  /* the title's first line centred on the mark */
  min-height:calc(var(--po-n) * .6974px);display:flex;align-items:center;
}
.project-orbit p{margin:.4rem 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);text-wrap:pretty;}
/* the mark and its states (R59, 28.09.2026; owner: the marks were «not the
   same as our logo, the dot going round the orbit is wrong»). The drawing is
   the brand mark of the bar, element for element: the orbit in the text
   colour at .45 with the icon's stroke of 1.3 units, the north star in
   #6E4BFF, the moon #9C82FF above the left end of the orbit, going round the
   sign's centre in 14 s exactly as in the bar (brandOrbit). Nothing is
   recoloured and nothing is added: the state of a station is the strength
   of the whole sign (future .32, done .6, current full), and only the
   current sign's moon goes round; every other moon stands where the logo
   has it. The moon may leave the cut viewBox on its way round (overflow). */
.po-mark{
  display:block;width:calc(var(--po-n) * 1px);height:calc(var(--po-n) * .6974px);overflow:visible;
  color:var(--ink);opacity:.32;transition:opacity .18s var(--ease);
}
.po-orbit{fill:none;stroke:currentColor;stroke-width:1.3;opacity:.45;}
.po-star{fill:#6E4BFF;}
.po-moon circle{fill:#9C82FF;}
.po-moon{transform-origin:16px 16px;}
.project-orbit li[data-state="done"] .po-mark{opacity:.6;}
.project-orbit li[data-state="current"] .po-mark{opacity:1;}
.project-orbit li[data-state="current"] .po-moon{animation:brandOrbit 14s linear infinite;}
.po-mark.po-hold .po-moon{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .po-mark{transition:none;}
  .project-orbit li[data-state="current"] .po-moon{animation:none;}
}
@media (min-width:761px){
  .project-orbit{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,2.4vw,2.25rem);row-gap:2.25rem;
    --po-n:40;
  }
  .project-orbit > li{display:block;padding-bottom:0;}
  .project-orbit h3{min-height:0;display:block;margin-top:1rem;}
  .project-orbit p{margin-top:.45rem;}
}
@media (min-width:1024px){
  .project-orbit{grid-template-columns:repeat(4,minmax(0,1fr));--po-n:44;}
}

/* ---------- examples: the demo websites ----------
   Three pictures side by side or one under the other, never two plus one.
   The caption starts with the name and «Demo-Website», so the picture is
   labelled where it stands. Every picture carries one hairline edge: the
   light Valchera screenshot otherwise dissolves into --stage, and one edge
   for all three keeps them equal (agreed with Codex, 23.09.2026). */
.svc-demos{
  list-style:none;margin:0;padding:0;
  display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);
}
.svc-demos figure{margin:0;}
.svc-demos img{
  width:100%;height:auto;aspect-ratio:1408 / 880;object-fit:cover;
  border:1px solid var(--hair);border-radius:var(--r-card);background:var(--stage-hi);
}
.svc-demos figcaption{margin-top:.9rem;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);max-width:46ch;}
.svc-demos figcaption strong{font-weight:600;color:var(--ink);}
.svc-more{margin:1.9rem 0 0;max-width:62ch;color:var(--ink-2);}

/* ---------- a link inside running text ----------
   Any section of these pages may carry one (the Projekte sentence, a phone
   number or mail address in an answer): ink, weight 600, the accent line of
   the menu's current page. Inline links in a sentence are exempt from the
   44 px target (WCAG 2.5.8). */
.svc-core a,.svc-intro a,.svc-scope a,.svc-more a,.svc-faq a,.svc-related p a,.svc-cta-note a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.24em;
  transition:text-decoration-color .35s var(--ease);
}
.svc-core a:hover,.svc-intro a:hover,.svc-scope a:hover,.svc-more a:hover,
.svc-faq a:hover,.svc-related p a:hover,.svc-cta-note a:hover{text-decoration-color:var(--ink);}

/* ---------- questions: visible, never folded ----------
   Question as h3, answer under it, each pair on a hairline. Two columns on a
   wide screen (four questions, so two full rows), one on a phone. */
.svc-faq{display:grid;gap:0 clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr);}
.svc-faq > div{border-top:1px solid var(--hair);padding:1.35rem 0 1.7rem;}
.svc-faq h3{
  margin:0;font-size:var(--fs-lead);font-weight:600;line-height:1.35;letter-spacing:-.015em;
  color:var(--ink);max-width:40ch;text-wrap:balance;
}
.svc-faq p{margin:.65rem 0 0;color:var(--ink-2);max-width:60ch;}

/* ---------- related services: two text links ----------
   Each link is a shrink-wrapped block whose padding a negative margin takes
   back: the text stands where an inline link would, and the hit area is
   44 px and more on every device, one line or two (WCAG 2.5.8, R40). */
.svc-related{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0 clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr);
}
.svc-related li{border-top:1px solid var(--hair);padding:1.2rem 0 1.5rem;}
.svc-related li > a{
  display:block;width:fit-content;max-width:100%;padding-block:.65rem;margin-block:-.65rem;
  font-size:var(--fs-lead);font-weight:600;line-height:1.4;letter-spacing:-.015em;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:.28em;
  transition:text-decoration-color .35s var(--ease);
}
.svc-related li > a:hover{text-decoration-color:var(--ink);}
.svc-related p{margin:.55rem 0 0;color:var(--ink-2);max-width:56ch;}

/* ---------- the closing panel: one call to action ----------
   The landing's card tone (--stage-hi) and card radius, flat, no border.
   Text on the left, the button on the right on a wide screen; stacked on a
   phone, where pages.css already gives .actions .btn the full width. */
.svc-cta{padding-bottom:clamp(2.5rem,5vw,4.5rem);}
.svc-cta-in{
  background:var(--stage-hi);border-radius:var(--r-card);
  padding:clamp(1.75rem,4.5vw,3.25rem);
  display:grid;gap:1.6rem 3rem;grid-template-columns:minmax(0,1fr);align-items:end;
}
.svc-cta-text{
  margin:0;font-size:clamp(1.25rem,.9vw + 1rem,1.625rem);font-weight:600;line-height:1.3;
  letter-spacing:-.018em;color:var(--ink);max-width:38ch;text-wrap:balance;
}
.svc-cta-note{margin:.8rem 0 0;color:var(--ink-2);max-width:52ch;}
.svc-cta .actions{margin:0;}

/* ---------- widths ----------
   The column counts follow the width, on a phone held sideways too. The
   mode stays a device decision (mobile-layout-r45 sets html.m42-mobile, the
   sections keep their order and nothing folds away); only the grids use the
   width. One column there would draw each demo picture taller than the
   screen (measured 23.09.2026: 426 px on 340 px, 529 px on 430 px). */
@media (min-width:700px){
  .svc-demos{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
}
@media (min-width:760px){
  .svc-related{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:900px){
  .svc-faq{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svc-cta-in{grid-template-columns:minmax(0,1fr) auto;}
}
@media (max-width:720px){
  .svc-scope > div{grid-template-columns:minmax(0,1fr);gap:.25rem;}
}
@media (max-width:760px){
  .svc-demos figcaption{max-width:none;}
}
@media (max-width:760px) and (hover:none){
  .svc-related li > a:hover,.svc-core a:hover,.svc-intro a:hover,.svc-scope a:hover,
  .svc-more a:hover,.svc-faq a:hover,.svc-related p a:hover,.svc-cta-note a:hover{text-decoration-color:var(--accent);}
}
@media (max-width:760px){
  .svc-related li > a:active,.svc-core a:active,.svc-intro a:active,.svc-scope a:active,
  .svc-more a:active,.svc-faq a:active,.svc-related p a:active,.svc-cta-note a:active{opacity:.7;}
}

/* ---------- R54 fix round (23.09.2026) ----------
   1. Headings set as lines, not as a column of leftovers: the h1 and the
      section titles are balanced, so a title of two lines does not end on
      one lonely word («… und / der Schweiz»). A compound in a title stays
      in one piece (.nw around «KI-Sichtbarkeit», «Website-Redesign» and so
      on): the browser broke them at their hyphen («KI- / Sichtbarkeit»).
      The words themselves are unchanged. No non-breaking hyphen, because
      the subset of Inter has none.
   2. The short texts of the blocks (scope rows, stations, answers, related
      services) avoid a last line of one word. Not the core passage: on a
      long paragraph WebKit's pretty wraps early and ragged.
   3. The two related-service links and the linked terms of the scope list
      show the keyboard focus as a heavier line in ink instead of a frame.
      Their hit area is grown by padding (R40), and a frame around it ran
      into the first line of the sentence under the link.
   4. On a phone a linked term of the scope list is 44 px tall to the
      finger; the padding is taken back by a negative margin, so the row
      keeps its height. */
.nw{white-space:nowrap;}
main h1,main h2{text-wrap:balance;}
.svc-scope dd,.svc-faq p,.svc-related p{text-wrap:pretty;}
.svc-related li > a:focus-visible,.svc-scope dt a:focus-visible{
  outline:none;text-decoration-thickness:3px;text-decoration-color:var(--ink);
}
@media (max-width:760px){
  .svc-scope dt a{display:inline-block;padding-block:.7rem;margin-block:-.7rem;}
}

/* ===== R57 (24.09.2026): the ten pages in the deck's family =====
   Spec: qa/r57-unterseiten/SPEC.md, section 6. Same gate as the R57 block
   of pages.css (a wide window or a tablet; the phone keeps R56 to the
   pixel). The words, links and order are untouched; the blocks change
   shape: the scope is a set of the deck's service cards, the questions
   stand in two columns (R58: the stations are the orbit above), the related
   services are cards the whole of which is the link, and the closing call
   is the deck's dark closing screen in small. No new colour, radius or
   shadow: --stage-hi, --dark, --r-card, the hairline. */
@media (min-width:761px) and (pointer:fine), (min-width:761px) and (hover:hover), (min-width:761px) and (min-height:521px){
  /* ---------- the core passage ----------
     Only the first sentence stands in the lead's size (.svc-lede, a span
     around it in the ten pages, words unchanged); the rest is running text.
     Two walls of lead type read as a document, and DESIGN-KRITIK §4 forbids
     long paragraphs in lead size (fix round 1, Codex's proposal: before, the
     whole first paragraph of 66 to 93 words stood in the lead's size). The
     running text goes from the phone's 18.6 px at 761 to 17 px at 1101,
     where the head turns into two columns: a line, not a step. On a phone
     the span has no rule and stays a plain part of the paragraph. */
  .svc-core p{font-size:max(var(--fs-body),calc(1.386rem - .47vw));line-height:1.6;}
  .svc-core .svc-lede{display:block;margin-bottom:1rem;font-size:var(--r57-lead);line-height:1.55;color:var(--ink-2);}
  .svc-intro{margin:-.6rem 0 2rem;font-size:var(--fs-body);}
  .svc-more{margin-top:2rem;}

  /* ---------- scope: cards, 2 columns here, 3 from 1101 px ---------- */
  .svc-scope{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r57-gap);}
  .svc-scope > div{
    display:block;padding:var(--r57-pad);
    background:var(--stage-hi);border-radius:var(--r-card);border-bottom:0;
  }
  /* the term runs from the phone's 17 px at 761 to 18 px at 1440, the
     sentence from the phone's 17 px at 761 to the cards' 16 px at 1101, as
     the labels do (fix round 1: both jumped by a pixel at 761) */
  .svc-scope dt{font-size:clamp(1.0625rem,.9924rem + .1473vw,1.125rem);font-weight:600;letter-spacing:-.015em;line-height:1.3;}
  .svc-scope dd{margin-top:.55rem;font-size:max(1rem,calc(1.2024rem - .2941vw));line-height:1.55;max-width:none;}
  /* seven cards on two columns: the seventh takes the whole row rather than
     standing alone next to a hole (DESIGN-KRITIK, no half empty rows) */
  .svc-scope > div:first-child:nth-last-child(7) ~ div:last-child{grid-column:1 / -1;}
  /* a compound in a scope title stays whole where the card holds it
     («Google-Unternehmensprofil» on /webdesign-zuerich broke at its hyphen
     on every laptop; fix round 1, R54 house rule). With a large default font
     it breaks at its hyphen as before instead of running out of the card.
     14.9rem = «Google-Unternehmensprofil» at 1.125rem, weight 600. */
  .svc-scope > div{container-type:inline-size;}
  @container (min-width:14.9rem){ .svc-scope .nw-fit{white-space:nowrap;} }

  /* ---------- the stations: the title in the cards' title size ---------- */
  .project-orbit h3{font-size:clamp(1.0625rem,.9924rem + .1473vw,1.125rem);letter-spacing:-.015em;line-height:1.3;}

  /* ---------- questions ----------
     The question runs from the phone's 18.6 px at 761 to 19 px at 1440; the
     title of a related card below does the same (fix round 1). */
  .svc-faq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,5rem);}
  .svc-faq > div{padding:1.5rem 0 2.1rem;}
  .svc-faq h3{font-size:clamp(1.1625rem,1.1371rem + .056vw,1.1875rem);line-height:1.35;letter-spacing:-.016em;max-width:34ch;}
  .svc-faq p{margin-top:.7rem;font-size:var(--fs-body);line-height:1.6;}

  /* ---------- related services: cards, the whole card is the link ----------
     The link keeps its words and its href; a pseudo element of it lays its
     hit area over the card, with the card's own radius, so a tap just
     outside the rounded corner does not count (fix round 1). At rest the
     title carries the accent line of R54, as the links of the deck's cards,
     /angebot and the phone do: a card without it looked like the scope cards,
     which are not links, and a tablet never showed any sign (fix round 1).
     On hover the card lifts two pixels and the line turns to ink, as
     .svc-link does. The keyboard focus stays the heavier ink line of the R54
     fix round. */
  .svc-related{gap:var(--r57-gap);}
  .svc-related li{
    position:relative;border-top:0;padding:var(--r57-pad);
    background:var(--stage-hi);border-radius:var(--r-card);
    transition:transform .35s var(--ease),background-color .35s var(--ease);
  }
  .svc-related li > a{
    display:inline;width:auto;padding:0;margin:0;
    font-size:clamp(1.1625rem,1.1371rem + .056vw,1.1875rem);line-height:1.35;letter-spacing:-.016em;
  }
  .svc-related li > a::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);}
  .svc-related p{margin-top:.6rem;font-size:max(1rem,calc(1.2024rem - .2941vw));line-height:1.55;}
  @media (hover:hover) and (pointer:fine){
    .svc-related li:hover{transform:translateY(-2px);background:#FFFFFF;}
    .svc-related li:hover > a{text-decoration-color:var(--ink);}
  }

  /* ---------- the demos keep their row ---------- */
  .svc-demos{gap:clamp(1.25rem,2vw,1.75rem);}
  .svc-demos figcaption{font-size:var(--fs-sm);}

  /* ---------- the closing call: the deck's closing screen in small ---------- */
  .svc-cta{padding-bottom:var(--r57-sec);}
  .svc-cta-in{background:var(--dark);padding:clamp(2.25rem,4.5vw,4rem);gap:1.75rem 3rem;}
  /* fix round 1: the statement is set in the role of a section title (700,
     -.03em), and its size carries a rem term, so it grows with the browser's
     zoom (clamp(1.5rem,1.9vw,2rem) stood still between about 1263 and 1684
     px). It starts at the phone's 22.85 px at 761 px. The note beside it is
     the size of the note in the panel «Nächster Schritt». */
  .svc-cta-text{
    color:var(--stage);font-size:clamp(1.4275rem,.75rem + 1.07vw,2rem);
    font-weight:700;letter-spacing:-.03em;line-height:1.15;max-width:30ch;
  }
  .svc-cta-note{
    margin-top:.9rem;color:#B4B6BD;
    font-size:clamp(1.0625rem,.893rem + .356vw,1.25rem);line-height:1.55;max-width:46ch;
  }
  /* the counter rule to the ink links of these pages (top of the sheet): a
     link in the note would otherwise stand in ink on the dark ground */
  .svc-cta-note a{color:var(--stage);text-decoration-color:#9C82FF;}
  .svc-cta .btn-primary{background:var(--stage);color:var(--ink);}
  .svc-cta .btn-primary:hover{background:#FFFFFF;}
}
@media (min-width:1101px) and (pointer:fine), (min-width:1101px) and (hover:hover), (min-width:1101px) and (min-height:521px){
  /* the core passage beside the title, starting at the title's top edge.
     Fix round 1 (agreed with Codex): the title column is narrower and the
     text column wider than on the other sub pages (.85 / 1.15 instead of
     1.1 / .9), the text at most 37.5 rem, about 48 to 72 characters a line;
     before, it stood in 365 to 433 px, 34 to 47 characters, with 388 to
     734 px of empty room under the title. min-content keeps a compound of
     the title (.nw, «Website-Redesign», «KI-Sichtbarkeit») inside its column.
     The crumbs take the whole row, so they stay on one line. */
  .head:has(> .svc-core){grid-template-columns:minmax(min-content,.85fr) minmax(0,1.15fr);}
  .head:has(> .svc-core) > .crumbs{grid-column:1 / -1;}
  .head > .svc-core{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:37.5rem;}
  /* the core passage is taller than the title; the title stays in view
     beside it while it is read (sticky inside its own grid cell, so it lets
     go where the passage ends) instead of leaving the left half of the head
     empty */
  .head:has(> .svc-core) > h1{position:sticky;top:calc(var(--navh) + 2.75rem);}
  /* the title of these ten pages tops out at 54 px, from 1652 px, so its
     column (in em) is never narrower than at 1440 and the title gains no
     extra line on a large screen (fix round 1; from 1708 px it broke into
     four lines). Same middle term as the h1 of pages.css: width, or the
     deck's height on a short window. */
  .head:has(> .svc-core) > h1{font-size:clamp(2.0625rem,min(.942rem + 2.356vw,.5rem + 4.8vh),3.375rem);}
  /* and the title column is never narrower than 7.9 em of the title, so the
     words after a compound find a line of their own: between about 1317 and
     1578 px (the edge of the deck on a short window) the column fell to
     7.8 em and put «für» alone on a line of /geo-ki-sichtbarkeit, because
     neither «KI-Sichtbarkeit für» (8.4 em) nor «für Unternehmen» (7.83 em)
     fitted. As a min-width of the item it raises the column's min-content.
     Fix round 2: 8.6 em. At 7.9 em the MacBook windows (1221 to 1671 px on
     767 and 832 px of height) still left one word alone on the last line:
     «Webdesign / in Uster und / im Zürcher / Oberland» (/webdesign-uster)
     and, in WebKit only, «... und der / Schweiz» (/website-redesign,
     /website-analyse). Measured 1101 to 2600 px at 767/832/900/1100 in
     both engines: no last line of one word left, text column at least
     453 px. */
  .head:has(> .svc-core) > h1{min-width:8.6em;}
  /* scope in three columns: six cards 3/3, seven cards 3/2/2, eight cards
     3/3/2 (R58, /webdesign-uster: «Logo Design» and «Rebranding» are two
     cards now, one link each). The grid of these pages is a row of three
     on six tracks, so the last two of eight share their row in halves, the
     figure the seven cards already use; a row of four (Codex's proposal)
     would put the long sentences of this page into 260 px columns. */
  .svc-scope{grid-template-columns:repeat(6,minmax(0,1fr));}
  .svc-scope > div{grid-column:span 2;}
  .svc-scope > div:first-child:nth-last-child(7) ~ div:nth-child(n+4){grid-column:span 3;}
  .svc-scope > div:first-child:nth-last-child(8) ~ div:nth-child(n+7){grid-column:span 3;}
}
/* ===== end R57 ===== */

/* ===== R58 (24.09.2026): desktop, the deck's new reading size =====
   Same gate and same numbers as the R58 block of pages.css: the card text is
   running text (18 k, at least 17 px), the card and question titles are the
   deck's third level (22 k), the h1 of these ten pages follows the deck's
   title up to its own cap of 54 px. A tablet keeps R57. */
@media (min-width:761px) and (pointer:fine), (min-width:761px) and (hover:hover){
  .svc-scope dd,.svc-related p{font-size:var(--fs-body);}
  .svc-scope dt,.project-orbit h3{font-size:var(--r58-h3);}
  .project-orbit p{font-size:var(--fs-body);}
  .svc-related li > a,.svc-faq h3{font-size:max(1.1625rem,var(--r58-h3));}
}
@media (min-width:1101px) and (pointer:fine), (min-width:1101px) and (hover:hover){
  .head:has(> .svc-core) > h1{font-size:clamp(2.0625rem,min(.451rem + 3.387vw,.2rem + 6vh),3.375rem);}
}
/* ===== end R58 ===== */

/* ===== R57 fix round 1 (24.09.2026): touch tablets =====
   A tablet has no hover, and the rule that puts every :hover back to its
   rest value stands up to 760 px only (above). Needed here as well, because
   this sheet loads after pages.css, where the same block stands for the
   shared parts. The rest value of the related cards is the accent line
   (see above). */
@media (min-width:761px) and (min-height:521px) and (hover:none){
  .svc-cta .btn-primary:hover{background:var(--stage);}
  .svc-related li > a:hover{text-decoration-color:var(--accent);}
  .svc-core a:hover,.svc-intro a:hover,.svc-scope a:hover,.svc-more a:hover,
  .svc-faq a:hover,.svc-related p a:hover{text-decoration-color:var(--accent);}
  .svc-cta-note a:hover{text-decoration-color:#9C82FF;}
}
/* ===== end R57 fix round 1 ===== */