/* R45 (10.09.2026, live-go): R44 with the real request form on the phone.

   Three parts:
   A. the request form, at EVERY width. R42 designed it for the phone; the
      owner's decision of 10.09.2026 makes it the design of the real
      #contactForm on the landing (R58: /kontakt is a section of the landing
      now, its page rules went with it).
   B. the contact area of a wide screen: the words on the left, the form
      beside them on the right, never underneath.
   C. the phone overlay of R41 to R43, carried over unchanged except where
      the structural correction removes something: the disclosure over the
      about section is gone, the portrait is back in that section, and the
      section order is the markup's. Scope is html.m42-mobile, set by
      mobile-layout-r45.js.

   No page background, header, opening button, canvas, iOS edge tint or
   animation-engine rule is replaced. Colours are the site's own tokens
   (#F1F0EC / #0E0F12 via --stage / --dark), the type is the site's own Inter.
   Layout after Sytora/vorschau/hig-mobile-tweak-codex.html and
   anfrage-konzept-codex.html (Codex, design lead). */

/* ==================================================================
   A. THE REQUEST FORM, EVERY WIDTH
   One design, one order: the job first, the way back to the reader under
   one heading, the consent, the button, the answer. 16px input type (below
   that iOS zooms the page on focus and stays there), 52px controls, one
   radius family (12px for fields, the site's pill for the button), a fine
   but visible outline instead of a card, all of it on the dark ground the
   contact area already has.
   ================================================================== */
.ask-form{margin:0;max-width:none;}
.ask-form .ask-req{margin:0 0 24px;font-size:13px;line-height:1.5;color:#B6B8BF;}
.ask-form .cf-grid{display:block;}
.ask-form .cf-field{display:block;margin:0 0 20px;}
.ask-form .cf-field > label{
  display:block;margin:0 0 8px;
  font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;
  text-transform:none;color:var(--stage);
}
.ask-form .cf-field input,
.ask-form .cf-field textarea{
  display:block;width:100%;min-width:0;box-sizing:border-box;
  min-height:52px;padding:14px 16px;
  border:1px solid #747780;border-radius:12px;
  background:transparent;color:var(--stage);
  font-family:inherit;font-size:16px;line-height:1.45;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s cubic-bezier(.23,1,.32,1);
}
.ask-form .cf-field textarea{min-height:164px;resize:vertical;overscroll-behavior:contain;}
.ask-form .cf-field input::placeholder,
.ask-form .cf-field textarea::placeholder{color:#A6A8B1;opacity:1;}
.ask-form .cf-field input:hover:not(:focus),
.ask-form .cf-field textarea:hover:not(:focus){border-color:#9A9CA4;}
.ask-form .cf-field input:focus,
.ask-form .cf-field textarea:focus{border-color:var(--stage);outline:1px solid var(--stage);outline-offset:0;}
/* the marked state is a brighter edge and a sentence under the field, not a
   red ring around the control (design catalogue, 09.09.2026) */
.ask-form .cf-field.is-bad input,
.ask-form .cf-field.is-bad textarea,
.ask-form .cf-field [aria-invalid="true"]{border-color:var(--stage);}
.ask-form .ask-hint{margin:10px 0 0;font-size:13px;line-height:1.5;color:#B6B8BF;}
.ask-form .cf-err{display:block;margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--stage);}
.ask-form .cf-err:empty{display:none;}
.ask-form .ask-group{margin-top:28px;}
.ask-form .ask-group > h3,
.ask-form .ask-group > h2{
  margin:0 0 20px;font-size:17px;font-weight:600;line-height:1.4;
  letter-spacing:0;color:var(--stage);
}
.ask-form .cf-foot{display:block;margin-top:28px;}
.ask-form .cf-consent{
  display:flex;align-items:flex-start;gap:12px;flex:none;margin:0;
  font-size:16px;line-height:1.5;color:#B6B8BF;
}
.ask-form .cf-consent input{
  width:24px;height:24px;min-height:24px;flex:0 0 24px;margin:0;
  accent-color:var(--stage);cursor:pointer;font-size:16px;
}
.ask-form .cf-consent label{cursor:pointer;}
.ask-form .cf-consent a{color:var(--stage);text-decoration:underline;text-underline-offset:3px;}
.ask-form .cf-consent .cf-err{margin-left:0;}
.ask-form #cfSend{
  display:flex;justify-content:center;align-items:center;gap:16px;width:100%;
  min-height:52px;margin-top:24px;padding:12px 24px;
  border:0;border-radius:999px;
  background:var(--stage);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600;
}
.ask-form .ask-after{margin:16px 0 0;font-size:13px;line-height:1.5;text-align:center;color:#B6B8BF;}
.ask-form .cf-status{margin:0;max-width:none;font-size:15px;line-height:1.5;color:var(--stage);}
.ask-form .cf-status:not(:empty){margin-top:24px;padding-top:20px;border-top:1px solid #55575E;}
.ask-form .cf-status.is-bad{color:#E8A0A0;}
.ask-form .cf-status.is-ok{color:var(--stage);}
.ask-form :where(a,button,input,textarea):focus-visible{outline:2px solid #9C82FF;outline-offset:3px;}
.ask-form .cf-field input:focus-visible,
.ask-form .cf-field textarea:focus-visible{outline:1px solid var(--stage);outline-offset:0;}

/* ==================================================================
   B. THE CONTACT AREA ON A WIDE SCREEN
   The column is one grid: the words on the left, the form on the right. The
   phone keeps them stacked (part C and the base sheet), which is the one
   difference the owner asked for.
   ================================================================== */
@media (min-width:761px){
  html:not(.m42-mobile) .contact-in{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,4.4vw,4.5rem);
    align-items:start;
  }
  html:not(.m42-mobile) .contact-in > .mark-close{grid-column:1 / -1;}
  html:not(.m42-mobile) .contact-in > .contact-copy > .lead{max-width:46ch;}
  /* the form column carries the reading measure of a form, not of prose */
  html:not(.m42-mobile) .contact-in > .ask-form{max-width:34rem;}
}
/* THE LANDING KEEPS THE MARK'S LANE FREE.
   The closing screen of the landing carries the live mark on its right: on
   the deck as the engine's own layer over #kontakt .mark-slot (right:5.5%,
   up to 400px wide), on a still page as .mark-close (right:2%, up to 380px).
   The form that stood here before R44 was capped at 56rem and ended exactly
   where that lane began. The two columns are given the same treatment: a
   measure of their own, set from the left, so the words, the form and the
   mark each keep their own third and nothing is drawn over an input field.
   The measure is given in per cent of the column and not in rem: the deck
   draws its pages at a factor (CSS zoom), and a rem inside that factor comes
   out at different widths in Blink and in WebKit — measured on the iPad, the
   same rule gave 213px in Chromium and 368px in Safari, and only the second
   one ran into the mark. A percentage is the same fraction in both. */
@media (min-width:761px){
  html.deck-on .contact-in,
  html.mark-flat:not(.mobile-live):not(.m42-mobile) .contact-in{
    grid-template-columns:minmax(0,34%) minmax(0,31%);
    justify-content:start;
    column-gap:2.5%;
  }
  html.deck-on .contact-in > .ask-form,
  html.mark-flat:not(.mobile-live):not(.m42-mobile) .contact-in > .ask-form{max-width:none;}
}
/* a short deck page has no room for a hint under every field; the labels and
   the placeholder say the same thing there */
@media (min-width:761px) and (max-height:820px){
  html.deck-on .contact-in .ask-hint{display:none;}
  html.deck-on .contact-in .cf-field{margin-bottom:14px;}
  html.deck-on .contact-in .cf-field textarea{min-height:120px;}
  html.deck-on .contact-in .ask-group{margin-top:18px;}
  html.deck-on .contact-in .ask-group > h3{margin-bottom:14px;}
  html.deck-on .contact-in .cf-foot{margin-top:18px;}
  html.deck-on .contact-in .ask-req{margin-bottom:18px;}
}

/* ==================================================================
   C. THE PHONE OVERLAY
   The query below is the one in mobile-layout-r44.js. Both have to say
   the same thing, or a layout would be built without its stylesheet.
   ================================================================== */
@media (max-width:760px), (pointer:coarse) and (hover:none) and (max-height:520px){
  /* ---------- section rhythm (carried over from R41) ---------- */
  html.m42-mobile #angebot,html.m42-mobile #arbeiten,html.m42-mobile #studio,
  html.m42-mobile #team,html.m42-mobile #kontakt{padding-block:56px;}
  html.m42-mobile .panel:not(#start) .h2{font-size:32px;line-height:1.14;letter-spacing:-.033em;font-weight:700;}
  html.m42-mobile .panel:not(#start) .sec-head{gap:20px;margin-bottom:28px;}
  html.m42-mobile .panel:not(#start) .lead{font-size:17px;line-height:1.55;}

  /* ---------- shared disclosure parts ---------- */
  html.m42-mobile summary{list-style:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  html.m42-mobile summary::-webkit-details-marker{display:none;}
  html.m42-mobile summary:not(.m43-press-ready):active,
  html.m42-mobile summary[data-m43-pressed]{opacity:.75;}
  html.m42-mobile summary:focus-visible,
  html.m42-mobile .m42-project-arrow:focus-visible,
  html.m42-mobile .m42-media-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
  html.m42-mobile .m42-chevron{
    position:absolute;right:0;top:24px;width:20px;height:20px;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s cubic-bezier(.23,1,.32,1);
  }
  html.m42-mobile details[open]>summary .m42-chevron{transform:rotate(180deg);}
  html.m42-mobile details[data-m43-open="false"]>summary .m42-chevron{transform:none;}
  html.m42-mobile .m42-arrow{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- 1. services: four groups, dark title, benefit under it, one
       quietly divided detail area (landing #angebot) ---------- */
  html.m42-mobile .svc-track{display:block;}
  html.m42-mobile .m42-service{border-top:1px solid var(--hair);}
  html.m42-mobile .m42-service:last-of-type{border-bottom:1px solid var(--hair);}
  html.m42-mobile .m42-service>summary{position:relative;display:flex;flex-direction:column;padding:22px 40px 22px 0;min-height:56px;}
  html.m42-mobile .m42-title{display:block;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.5px;color:var(--ink);}
  html.m42-mobile .m42-benefit{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink);}
  html.m42-mobile .m42-names{display:block;margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--ink-2);}
  html.m42-mobile .m42-service-body{
    display:block;border:1px solid var(--hair);border-radius:12px;padding:24px;margin:0 0 24px;
    list-style:none;
  }
  html.m42-mobile .m42-service .m42-service-body .svc{
    display:block;flex:none;width:auto;padding:0;margin:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;
    scroll-snap-align:none;position:static;
  }
  html.m42-mobile .m42-service .m42-service-body .svc+.svc{border-top:1px solid var(--hair);padding-top:24px;margin-top:24px;}
  html.m42-mobile .m42-service .m42-service-body .svc::before{display:none;content:none;}
  html.m42-mobile .m42-service .m42-service-body .svc-cat{display:none;}
  html.m42-mobile .m42-service .m42-service-body .svc h3{margin:0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.4px;color:var(--ink);}
  html.m42-mobile .m42-service .m42-service-body .svc p:not(.svc-cat){margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);}
  html.m42-mobile #angebot>.panel-in>.linkline{
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    min-height:48px;margin-top:24px;padding-bottom:0;background-image:none;
    font-size:16px;font-weight:600;line-height:1.5;
  }
  html.m42-mobile #angebot>.panel-in>.linkline .arrow{flex:none;}

  /* ---------- 2. projects: swipe track kept, pause on the medium, action
       under the medium, counter and svg arrows ---------- */
  html.m42-mobile #arbeiten .hdots{display:none;}
  html.m42-mobile #arbeiten .work-grid{margin-inline:0;padding-inline:0;width:100%;gap:20px;scroll-padding-inline:0;}
  html.m42-mobile #arbeiten .tile{flex:0 0 100%;width:100%;}
  /* Keep the control above the stretched project link even when focus or
     touch creates a stacking context. The rest of the image still links. */
  html.m42-mobile #arbeiten .tile-media{border-radius:12px;z-index:5;pointer-events:none;}
  html.m42-mobile #arbeiten .tile-link::after{border-radius:12px;}
  html.m42-mobile #arbeiten .tile-open{display:none;}
  html.m42-mobile #arbeiten .tile-body{padding:0;}
  html.m42-mobile #arbeiten .tile-badge{margin:24px 0 10px;}
  html.m42-mobile #arbeiten .tile-body p{font-size:16px;line-height:1.55;}
  html.m42-mobile .m42-media-toggle{
    position:absolute;right:12px;bottom:12px;z-index:6;
    display:inline-flex;align-items:center;gap:6px;
    min-height:48px;padding:0 14px;
    border:1px solid rgba(241,240,236,.45);border-radius:999px;
    background:rgba(14,15,18,.92);color:var(--stage);
    font-family:inherit;font-size:14px;font-weight:500;line-height:1;
    cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  html.m42-mobile .m42-media-toggle:not(.m43-press-ready):active,
  html.m42-mobile .m42-media-toggle[data-m43-pressed]{opacity:.85;}
  html.m42-mobile .m42-media-toggle svg{width:18px;height:18px;flex:none;}
  html.m42-mobile .m42-media-toggle .m42-ico-play{display:none;}
  html.m42-mobile .m42-media-toggle[data-state="paused"] .m42-ico-pause{display:none;}
  html.m42-mobile .m42-media-toggle[data-state="paused"] .m42-ico-play{display:block;}
  html.m42-mobile .m42-project-link{
    position:relative;z-index:5;
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    min-height:48px;margin-top:18px;padding-bottom:16px;
    border-bottom:1px solid rgba(241,240,236,.18);
    font-size:16px;font-weight:600;line-height:1.5;color:var(--stage);text-decoration:none;
  }
  html.m42-mobile .m42-project-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;}
  html.m42-mobile .m42-project-count{font-size:14px;font-variant-numeric:tabular-nums;color:inherit;}
  html.m42-mobile .m42-project-arrows{display:flex;gap:12px;}
  html.m42-mobile .m42-project-arrow{
    display:grid;place-items:center;width:48px;height:48px;padding:0;
    border:1px solid rgba(241,240,236,.45);border-radius:50%;
    background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  html.m42-mobile .m42-project-arrow:not(.m43-press-ready):active,
  html.m42-mobile .m42-project-arrow[data-m43-pressed]{transform:scale(.96);}
  html.m42-mobile .m42-project-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- 3. studio ---------- */
            html.m42-mobile #studio .stance{display:block;gap:0;margin-top:0;padding:0;border:0;}
  html.m42-mobile #studio .stance li{display:block;margin:0;padding:20px 0;border:0;border-top:1px solid var(--hair);border-radius:0;background:transparent;}
  html.m42-mobile #studio .stance strong{display:block;font-size:18px;line-height:1.35;letter-spacing:-.3px;margin-bottom:8px;}
  html.m42-mobile #studio .stance span{display:block;font-size:16px;line-height:1.55;max-width:none;}
  html.m42-mobile #studio .studio-cta{
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    min-height:48px;margin-top:24px;padding-bottom:0;background-image:none;
    font-size:16px;font-weight:600;line-height:1.5;
  }
                    

  /* ---------- 3b. the about section, a section of its own again ----------
     R42/R43 put the portrait into the studio and folded the rest of this
     section behind a row that read «Mehr über Sytora». On the owner's
     decision of 10.09.2026 the section stands here in full and in the place
     the markup gives it: label, title, the owner's text in three levels
     (statement, two short blocks, close; R59), the portrait with name and
     role, the call to action. The base sheet already lays it
     out in one column on a phone (html.mobile-live .team-grid); what is set
     here is only the rhythm and the type step, so that the section reads like
     its neighbours. */
  html.m42-mobile #team .team-grid{display:block;}
  html.m42-mobile #team .team-statement{margin-top:16px;}
  html.m42-mobile #team .team-facts{grid-template-columns:minmax(0,1fr);row-gap:16px;}
  html.m42-mobile #team .team-figure{margin:28px 0 0;}
  html.m42-mobile #team .team-photo{display:block;width:100%;max-width:none;margin:0;}
  html.m42-mobile #team .team-caption{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
    max-width:none;margin:0;padding-top:14px;border-top:1px solid var(--hair);
  }
  html.m42-mobile #team .team-name{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.3px;color:var(--ink);}
  html.m42-mobile #team .team-role{font-size:14px;line-height:1.4;color:var(--ink-2);}
  html.m42-mobile #team .team-cta{
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    min-height:48px;margin-top:24px;padding-bottom:0;background-image:none;
    font-size:16px;font-weight:600;line-height:1.5;
  }
  html.m42-mobile #team .team-cta .arrow{flex:none;}

  /* ---------- 3c. a phone that was OPENED sideways ----------
     The engine decides once, at boot, whether it carries the phone
     choreography, and it asks for a width of 760px to do so. A reader who
     opens the page with the phone already turned therefore gets the ordinary
     scrolling page without html.mobile-live, and the base sheet's phone rules
     (the swipe track above all) never come. The layout of this file is asked
     for all the same, so the few base rules it builds on are repeated here
     for that one state. Nothing about the engine, the bars or the hero is
     touched: this is a stylesheet talking about a grid. */
  html.m42-mobile:not(.mobile-live) .work-grid{
    display:flex;grid-template-columns:none;
    gap:calc(var(--gutter) * 2);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  html.m42-mobile:not(.mobile-live) .work-grid::-webkit-scrollbar{display:none;}
  html.m42-mobile:not(.mobile-live) .tile{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;}
  html.m42-mobile:not(.mobile-live) .team-grid{display:block;}
  html.m42-mobile:not(.mobile-live) .panel{scroll-margin-top:calc(var(--navh,62px) + 8px);}

  /* ---------- 5. the request form on the phone ----------
     R45: the phone fills the real #contactForm; the demo copy of R42 to R44
     and its rule that hid the real form are gone. The form's design at every
     width is part A of this sheet. Here only the phone's place for it: the
     distance to the words above, the clear from the bar when it is scrolled
     to, and the press feedback of the button (mobile-layout-r45.js). */
  html.m42-mobile .ask-form{margin-top:24px;scroll-margin-top:calc(var(--navh,62px) + 8px);color:var(--stage);}
  html.m42-mobile .ask-form #cfSend{cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  html.m42-mobile .ask-form #cfSend:not(.m43-press-ready):active,
  html.m42-mobile .ask-form #cfSend[data-m43-pressed]{transform:scale(.985);}

  /* the landing's contact links follow the form, the mailto button is the
     form now and stands down */
  html.m42-mobile #kontakt .closing-actions{margin-top:32px;border-top:1px solid rgba(241,240,236,.2);padding-top:16px;flex-direction:column;align-items:flex-start;gap:8px;}
  html.m42-mobile #kontakt #askBtn{display:none;}
  html.m42-mobile #kontakt .closing-actions .mailto{min-height:48px;}

  /* ---------- 6b. the wordmark on a dark bar ----------
     Audit form-bottom-393.png: bar dark (on-dark: light pill, light burger)
     but the wordmark stayed ink. The base sheet's own rule for this state is
     .nav.on-dark .brand{color:var(--stage)}; the cause of it not taking
     effect could not be proven by reading alone, so the tone is stated here
     once more, at higher weight and on the svg itself (the wordmark paths
     fill with currentColor). Phone only, no other bar rule is touched. */
  html.m42-mobile .nav.on-dark .brand,
  html.m42-mobile .nav.on-dark .brand svg{color:var(--stage);}
  html.m42-mobile .tile.m42-user-paused video{opacity:1;}

  html.m42-mobile .m43-press-ready{transition:transform .14s cubic-bezier(.23,1,.32,1),opacity .14s cubic-bezier(.23,1,.32,1);}
  html.m42-mobile [data-m43-pressed]{transition-duration:0s;}
  html.m42-mobile [data-m43-key-pressed]{opacity:.75;transition:none;}
}
@media (max-width:760px) and (hover:none), (pointer:coarse) and (hover:none) and (max-height:520px){
  html.m42-mobile .ask-form #cfSend:hover{background:var(--stage);}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce), (pointer:coarse) and (hover:none) and (max-height:520px) and (prefers-reduced-motion:reduce){
  html.m42-mobile .m42-chevron,
  html.m42-mobile .m42-service-body,
  html.m42-mobile .ask-form .cf-field input,
  html.m42-mobile .ask-form .cf-field textarea{animation:none !important;transition:none !important;}
  html.m42-mobile .m43-press-ready{transition:none !important;}
  html.m42-mobile .m43-press-ready[data-m43-pressed]{transform:none !important;opacity:.75;}
}

/* ==================================================================
   C2. THE PHONE HELD SIDEWAYS
   Same build, same components; only the measures are answered for a viewport
   that is nearly a thousand pixels wide and four hundred tall. A line of text
   and an input field keep the width they can be read and filled at, the
   portrait keeps a size a face is looked at in, and the edges keep clear of
   the notch, which in landscape sits on the left or the right rather than the
   top (viewport-fit=cover is set on every page).
   Only inner spacing and measures are set here; no bar colour, no tint, no
   fixed element, nothing the iOS bar solution depends on.
   ================================================================== */
@media (pointer:coarse) and (hover:none) and (max-height:520px) and (min-width:761px){
  html.m42-mobile .nav-inner,
  html.m42-mobile .menu,
  html.m42-mobile .panel-in,
  html.m42-mobile .wrap{
    padding-left:calc(var(--gutter) + env(safe-area-inset-left,0px));
    padding-right:calc(var(--gutter) + env(safe-area-inset-right,0px));
  }
  html.m42-mobile .panel:not(#start) .lead,
  html.m42-mobile .m42-benefit,
  html.m42-mobile .m42-service .m42-service-body .svc p:not(.svc-cat){max-width:56ch;}
  html.m42-mobile .m42-service-body{max-width:42rem;}
  html.m42-mobile #team .team-photo{width:auto;max-width:min(300px,38vw);}
  html.m42-mobile #team .team-caption{max-width:min(300px,38vw);}
  html.m42-mobile .ask-form{max-width:34rem;}
  html.m42-mobile #kontakt .closing-actions{max-width:34rem;}
}

/* ==================================================================
   R54 (23.09.2026): the text link under each service («Mehr zu …»).
   The card text is now selected as «the paragraph that is not the
   category» instead of «the last paragraph», because the link stands
   after it; for every element that existed before, both selectors match
   the same paragraph with the same weight. On the phone the link is a
   finger-sized line under the text, ink with the accent underline of the
   service pages; the card itself stays a card, only the link is a link.
   ================================================================== */
@media (max-width:760px), (pointer:coarse) and (hover:none) and (max-height:520px){
  html.m42-mobile .m42-service .m42-service-body .svc-link{
    display:inline-flex;align-items:center;min-height:44px;margin:4px 0 -10px;padding:0;
    font-size:16px;font-weight:600;line-height:1.5;color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--accent);
    text-decoration-thickness:1.5px;text-underline-offset:.28em;
  }
  html.m42-mobile .m42-service .m42-service-body .svc-link:active{opacity:.7;}
}