/* DABB 2 — A SERVICE PAGE (/services/<slug>; src/parts/30-service.html): a reading page in the sun (base.css .in-sun), made of
   the site's own parts — section heads, hairline lines, chips, pills, a plant of Najd, plates in corner ticks. Logical
   properties only (base.css turns every .ico--dir). The first screen is text only: its largest paint is the h1. */

/* ── the first screen keeps its place while the faces arrive (28 Oct 2026, the service pages' CLS gate) ──
   Google Fonts sends IBM Plex Sans Arabic 400 · 500 · 600, Bricolage Grotesque and JetBrains Mono as five files that land one
   by one (display=swap); each landing rewrapped the first screen, and the frames in between moved it most (CLS 0.13 to 0.35).
   (the English pages less: Bricolage alone, 0.02 to 0.04). So on these pages the text waits in LOCAL system faces
   (html.fonts-wait), and the loaded faces come in TOGETHER, in
   one frame, and only if nothing on the screen moves (src/parts/30-service-fonts.html decides; else the waiting faces stay
   for that view). The waiting faces are scaled to advance like the loaded ones on the first screen's own text (measured
   28 Oct 2026 in Chrome on the five pages, 320 to 1920 px): the space, the Latin marks and the Latin letters apart, since
   Bricolage's text cut is wider than its display cut; Arial (Apple, Windows) or Roboto (Android) for them, at Bricolage's
   ascent and descent; Apple Geeza Pro, Windows Tahoma or Android Noto Naskh Arabic for the Arabic. No single scale keeps
   every line (Geeza and Plex differ word by word), so the scale only decides how often the faces can come in.
   T = the text, D = the display (h1 · h2 · h3). Without script the page swaps face by face as before, with the same faces
   behind Plex. Nothing here is downloaded, and no other page uses these faces. */
@font-face { font-family: "DABB T Space A"; src: local("Arial"), local("ArialMT"); font-weight: 100 550; size-adjust: 90.2%; ascent-override: 103.1%; descent-override: 29.9%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB T Space A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 85.4%; ascent-override: 108.9%; descent-override: 31.6%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB T Punct A"; src: local("Arial"), local("ArialMT"); font-weight: 100 550; size-adjust: 67.9%; ascent-override: 137.0%; descent-override: 39.8%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB; }
@font-face { font-family: "DABB T Punct A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 67.9%; ascent-override: 137.0%; descent-override: 39.8%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB; }
@font-face { font-family: "DABB T Latin A"; src: local("Arial"), local("ArialMT"); font-weight: 100 550; size-adjust: 102.0%; ascent-override: 91.2%; descent-override: 26.5%; line-gap-override: 0%; unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB T Latin A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 88.4%; ascent-override: 105.2%; descent-override: 30.5%; line-gap-override: 0%; unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB T Space R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 550; size-adjust: 101.0%; ascent-override: 92.1%; descent-override: 26.7%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB T Space R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 95.4%; ascent-override: 97.5%; descent-override: 28.3%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB T Punct R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 550; size-adjust: 76.5%; ascent-override: 121.6%; descent-override: 35.3%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB; }
@font-face { font-family: "DABB T Punct R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 76.5%; ascent-override: 121.6%; descent-override: 35.3%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB; }
@font-face { font-family: "DABB T Latin R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 550; size-adjust: 106.2%; ascent-override: 87.6%; descent-override: 25.4%; line-gap-override: 0%; unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB T Latin R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 97.2%; ascent-override: 95.7%; descent-override: 27.8%; line-gap-override: 0%; unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB T Arabic G"; src: local("Geeza Pro Regular"), local("GeezaPro"); font-weight: 100 450; size-adjust: 108.5%; ascent-override: 100.5%; descent-override: 37.8%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic G"; src: local("Geeza Pro Regular"), local("GeezaPro"); font-weight: 451 550; size-adjust: 113.9%; ascent-override: 95.7%; descent-override: 36.0%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic G"; src: local("Geeza Pro Bold"), local("GeezaPro-Bold"); font-weight: 551 900; size-adjust: 93.2%; ascent-override: 117.0%; descent-override: 44.0%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic T"; src: local("Tahoma"); font-weight: 100 450; size-adjust: 90.5%; ascent-override: 120.4%; descent-override: 45.3%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic T"; src: local("Tahoma"); font-weight: 451 550; size-adjust: 96.0%; ascent-override: 113.5%; descent-override: 42.7%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic T"; src: local("Tahoma Bold"), local("Tahoma-Bold"); font-weight: 551 900; size-adjust: 80.2%; ascent-override: 135.9%; descent-override: 51.1%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic N"; src: local("Noto Naskh Arabic UI"), local("NotoNaskhArabicUI-Regular"), local("Noto Naskh Arabic"), local("NotoNaskhArabic-Regular"); font-weight: 100 450; size-adjust: 102.2%; ascent-override: 106.6%; descent-override: 40.1%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic N"; src: local("Noto Naskh Arabic UI"), local("NotoNaskhArabicUI-Regular"), local("Noto Naskh Arabic"), local("NotoNaskhArabic-Regular"); font-weight: 451 550; size-adjust: 106.4%; ascent-override: 102.4%; descent-override: 38.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB T Arabic N"; src: local("Noto Naskh Arabic UI Bold"), local("NotoNaskhArabicUI-Bold"), local("Noto Naskh Arabic Bold"), local("NotoNaskhArabic-Bold"); font-weight: 551 900; size-adjust: 106.1%; ascent-override: 102.7%; descent-override: 38.6%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB D Space A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 81.5%; ascent-override: 114.1%; descent-override: 33.1%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB D Latin A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 88.4%; ascent-override: 105.2%; descent-override: 30.5%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB D Space R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 91.0%; ascent-override: 102.2%; descent-override: 29.7%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB D Latin R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 97.2%; ascent-override: 95.7%; descent-override: 27.8%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB D Arabic G"; src: local("Geeza Pro Bold"), local("GeezaPro-Bold"); font-weight: 100 900; size-adjust: 96.4%; ascent-override: 113.1%; descent-override: 42.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB D Arabic T"; src: local("Tahoma Bold"), local("Tahoma-Bold"); font-weight: 100 900; size-adjust: 84.5%; ascent-override: 129.0%; descent-override: 48.5%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB D Arabic N"; src: local("Noto Naskh Arabic UI Bold"), local("NotoNaskhArabicUI-Bold"), local("Noto Naskh Arabic Bold"), local("NotoNaskhArabic-Bold"); font-weight: 100 900; size-adjust: 107.0%; ascent-override: 101.9%; descent-override: 38.3%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "DABB E T Latin A"; src: local("Arial"), local("ArialMT"); font-weight: 100 450; size-adjust: 106.1%; ascent-override: 87.7%; descent-override: 25.4%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E T Latin A"; src: local("Arial"), local("ArialMT"); font-weight: 451 550; size-adjust: 107.5%; ascent-override: 86.5%; descent-override: 25.1%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E T Latin A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 97.0%; ascent-override: 95.9%; descent-override: 27.8%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E T Latin R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 450; size-adjust: 105.7%; ascent-override: 88.0%; descent-override: 25.5%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E T Latin R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 451 550; size-adjust: 107.6%; ascent-override: 86.4%; descent-override: 25.1%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E T Latin R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 97.0%; ascent-override: 95.9%; descent-override: 27.8%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E DS Space A"; src: local("Arial"), local("ArialMT"); font-weight: 100 900; size-adjust: 84.5%; ascent-override: 110.1%; descent-override: 32.0%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB E DS Latin A"; src: local("Arial"), local("ArialMT"); font-weight: 100 900; size-adjust: 105.0%; ascent-override: 88.6%; descent-override: 25.7%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E DS Space R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 900; size-adjust: 94.5%; ascent-override: 98.4%; descent-override: 28.6%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB E DS Latin R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 900; size-adjust: 103.3%; ascent-override: 90.1%; descent-override: 26.1%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E DL Space A"; src: local("Arial"), local("ArialMT"); font-weight: 100 900; size-adjust: 81.0%; ascent-override: 114.8%; descent-override: 33.3%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB E DL Latin A"; src: local("Arial"), local("ArialMT"); font-weight: 100 900; size-adjust: 102.0%; ascent-override: 91.2%; descent-override: 26.5%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "DABB E DL Space R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 900; size-adjust: 90.6%; ascent-override: 102.6%; descent-override: 29.8%; line-gap-override: 0%; unicode-range: U+0020, U+00A0; }
@font-face { font-family: "DABB E DL Latin R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 900; size-adjust: 100.3%; ascent-override: 92.7%; descent-override: 26.9%; line-gap-override: 0%; unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00AB, U+00BB, U+0030-0039, U+0041-005A, U+0061-007A, U+00A1-00AA, U+00AC-00BA, U+00BC-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2013-206F, U+20AC, U+2122, U+2212, U+FEFF; }
html[lang="ar"][data-page="service"] {
  --f-ar-wait-t: "DABB T Space A", "DABB T Space R", "DABB T Punct A", "DABB T Punct R", "DABB T Latin A", "DABB T Latin R", "DABB T Arabic G", "DABB T Arabic T", "DABB T Arabic N";
  --f-ar-wait-d: "DABB D Space A", "DABB D Space R", "DABB D Latin A", "DABB D Latin R", "DABB D Arabic G", "DABB D Arabic T", "DABB D Arabic N";
  --f-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", var(--f-ar-wait-d), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Bricolage Grotesque", "IBM Plex Sans Arabic", var(--f-ar-wait-t), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Sans Arabic", "DABB T Arabic G", "DABB T Arabic T", "DABB T Arabic N", ui-monospace, "SF Mono", Menlo, monospace;
}
html.fonts-wait[lang="ar"][data-page="service"] {
  --f-display: var(--f-ar-wait-d), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: var(--f-ar-wait-t), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, "DABB T Arabic G", "DABB T Arabic T", "DABB T Arabic N", monospace;
}
/* the English page: Bricolage alone waits in Arial (or Roboto) scaled to it; the h1's display cut narrows as it grows, so two
   sizes of it (one column, two columns) */
html[lang="en"][data-page="service"] {
  --f-en-wait-t: "DABB T Space A", "DABB T Space R", "DABB E T Latin A", "DABB E T Latin R", "DABB T Arabic G", "DABB T Arabic T", "DABB T Arabic N";
  --f-en-wait-d: "DABB E DS Space A", "DABB E DS Space R", "DABB E DS Latin A", "DABB E DS Latin R", "DABB D Arabic G", "DABB D Arabic T", "DABB D Arabic N";
  --f-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", var(--f-en-wait-d), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Bricolage Grotesque", "IBM Plex Sans Arabic", var(--f-en-wait-t), system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 900px) { html[lang="en"][data-page="service"] { --f-en-wait-d: "DABB E DL Space A", "DABB E DL Space R", "DABB E DL Latin A", "DABB E DL Latin R", "DABB D Arabic G", "DABB D Arabic T", "DABB D Arabic N"; } }
html.fonts-wait[lang="en"][data-page="service"] {
  --f-display: var(--f-en-wait-d), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: var(--f-en-wait-t), system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
[data-page="service"] main { --sp-top: calc(var(--band-h) + var(--header-h)); --sp-rule: var(--hair) solid var(--rule); }
.sp-sec { padding-block: clamp(56px, 7vw, 120px); }
.sp-sec + .sp-sec { padding-block-start: 0; }
.sp-head { margin-block-end: clamp(28px, 4vw, 64px); }
.sp-head__lead { max-inline-size: 46ch; }
:is(.sp-cap__text, .sp-wk__blurb, .sp-wk__role, .sp-note__excerpt, .sp-step__text, .sp-step__gets, .sp-tech__note, .sp-qa__a, .sp-cta__text, .sp-more__say) { text-wrap: pretty; }
:is(.sp-cap__text, .sp-note__excerpt, .sp-step__text, .sp-tech__note, .sp-qa__a, .sp-cta__text, .sp-more__say, .sp-wk__role) { color: var(--fg-2); }
:is(.sp-cap__name, .sp-note__title, .sp-tech__title, .sp-faq__title, .sp-qa__q, .sp-cta__title, .sp-hero__title) { text-wrap: balance; }
:is(.sp-cap__n, .sp-step__n) { font-size: var(--fs-xs); color: var(--fg-3); }

/* ───────── 1 · the first screen ───────── */
.sp-hero { padding-block: calc(var(--sp-top) + clamp(24px, 4.5vw, 72px)) clamp(56px, 7vw, 120px); }
.sp-hero__wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "main" "plant"; }
.sp-crumbs { grid-area: crumbs; margin-block-end: clamp(28px, 4vw, 56px); }
.sp-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sp-crumbs__item { display: inline-flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }
.sp-crumbs__item + .sp-crumbs__item::before { content: ""; flex: none; inline-size: var(--hair); block-size: 0.95em; background: var(--rule-2); transform: skewX(-18deg); }
[dir="rtl"] .sp-crumbs__item + .sp-crumbs__item::before { transform: skewX(18deg); }
.sp-crumbs__link { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--fg-2); }
:is(.sp-crumbs__link, .sp-qa__a a) { text-decoration: underline 1px transparent; text-underline-offset: 0.3em; }
:is(.sp-crumbs__link, .sp-qa__a a):hover { color: var(--fg); text-decoration-color: currentColor; }
.sp-crumbs__here { color: var(--fg); font-weight: 500; }
.sp-hero__main { grid-area: main; display: grid; justify-items: start; min-inline-size: 0; }
.sp-hero__kicker { gap: var(--s-2); margin-block-end: var(--s-5); }
/* The measures in em and px, not ch: a ch is the width of the 0 of the first face that has loaded, so it changed as the faces
   arrived. These reproduce Bricolage's 17ch (h1), 16ch (the Arabic h1) and 60ch (the lead) as they stood with the faces
   loaded (measured 28 Oct 2026 at 320…1920 px, within 0.3 px: the 0's width follows the optical size, hence the px term). */
.sp-hero__title { max-inline-size: calc(10.3502em + 18.6px); }
html[lang="ar"] .sp-hero__title { max-inline-size: calc(9.817em + 16.72px); line-height: calc(var(--lh-head) + 0.14); }
@media (min-width: 700px) { .sp-hero__title { max-inline-size: calc(10.0852em + 30.03px); } html[lang="ar"] .sp-hero__title { max-inline-size: calc(9.5729em + 26.59px); } }
@media (min-width: 1100px) { .sp-hero__title { max-inline-size: calc(9.8118em + 44.78px); } html[lang="ar"] .sp-hero__title { max-inline-size: calc(9.3096em + 39.91px); } }
.sp-hero__lead { max-inline-size: calc(38.1141em + 14.09px); margin-block-start: clamp(20px, 2.6vw, 36px); }
html[lang="ar"] .sp-hero__lead { max-inline-size: calc(38.0208em + 15.87px); }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-block-start: clamp(28px, 3.4vw, 44px); }
.sp-actions__wa-ico { inline-size: 1.15em; block-size: 1.15em; margin-inline-start: -4px; }
/* one column: the plant stands at the START, under the pills, away from the floating chat (it keeps the inline end in both
   languages); its canvas is up to 1.72 × --plant wide (the shadow and the tips: js/parts/09-footer.js fit()), so 28 px keep it
   inside the screen at 320 px and up */
.sp-hero__plant { --plant: 120px; grid-area: plant; justify-self: start; margin-block-start: var(--s-5); margin-inline-start: 28px; }
@media (min-width: 900px) {
  .sp-hero__wrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "main plant"; column-gap: clamp(32px, 5vw, 96px); align-items: end; }
  .sp-hero__plant { --plant: clamp(168px, 17vw, 260px); justify-self: end; margin: 0 0 clamp(8px, 1.4vw, 24px); margin-inline-end: clamp(0px, 4vw, 72px); }
}

/* ───────── 2 · what we build · 5 · how we work ───────── */
.sp-caps, .sp-steps { display: grid; border-block-start: var(--sp-rule); }
.sp-cap, .sp-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s-3); align-content: start; border-block-end: var(--sp-rule); }
.sp-cap { padding-block: clamp(20px, 2.4vw, 32px); scroll-margin-block-start: calc(var(--sp-top) + var(--s-6)); }
.sp-cap__n { grid-row: 1 / span 2; padding-block-start: 0.5em; }
.sp-cap__name, .sp-step__name { margin: 0; }
.sp-cap__text { margin-block-start: var(--s-2); max-inline-size: 52ch; }
/* reached by its own address (#ai-video): a 2 px rule of the service's colour */
.sp-cap:target::before { content: ""; position: absolute; inset-block: -1px; inset-inline-start: 0; inline-size: 2px; background: var(--accent-mark); }
.sp-cap:target .sp-cap__n { color: var(--fg); }
.sp-step { padding-block: var(--s-5) var(--s-6); }
.sp-step > :not(.sp-step__n) { grid-column: 2; }
.sp-step__n { grid-row: 1 / span 3; padding-block-start: 0.45em; }
.sp-step__text { margin-block-start: var(--s-2); max-inline-size: 48ch; }
.sp-step__gets { margin-block-start: var(--s-3); max-inline-size: 48ch; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sp-step__gets-k { display: flex; margin-block-end: var(--s-1); }
.sp-method__more { margin-block-start: clamp(24px, 3vw, 40px); }
.sp-method__more .ico--dir { margin-inline-start: 0.4em; }
@media (min-width: 720px) {
  .sp-caps, .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 1100px) {
  .sp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); border-block-end: var(--sp-rule); }
  .sp-step { grid-template-columns: minmax(0, 1fr); border-block-end: 0; padding-block: var(--s-5) var(--s-7); }
  .sp-step > :not(.sp-step__n) { grid-column: 1; }
  .sp-step__n { grid-row: auto; padding-block: 0 var(--s-4); }
}

/* ───────── 3 · selected work: a plate of lit sand in corner ticks ───────── */
.sp-works { display: grid; gap: clamp(40px, 5vw, 72px) var(--gutter); }
.sp-wk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) clamp(20px, 2.6vw, 40px); align-items: start; }
.sp-wk__pic { position: relative; display: grid; place-items: center; padding: clamp(16px, 2.4vw, 28px); background: rgba(var(--sun-rgb), 0.3); border-radius: var(--r-1); }
.sp-wk__ticks { position: absolute; inset: 0; pointer-events: none; }
.sp-wk__img { border-radius: var(--r-1); box-shadow: 9px 12px 22px rgba(var(--shade-rgb), 0.3), 2px 3px 5px rgba(var(--shade-rgb), 0.24); }
.sp-wk--portrait .sp-wk__img { inline-size: min(100%, calc(360px * var(--ar))); max-block-size: 360px; }   /* a definite width: the box is held before the lazy file loads */
.sp-wk--landscape .sp-wk__img { inline-size: 100%; }
.sp-wk__body { display: grid; justify-items: start; min-inline-size: 0; }
.sp-wk__name { margin: 0; }
.sp-wk__meta, .sp-note__meta { flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.sp-wk__meta { margin-block-start: var(--s-2); }
.sp-wk__blurb { margin-block-start: var(--s-4); max-inline-size: 52ch; }
.sp-wk__role { margin-block-start: var(--s-3); max-inline-size: 52ch; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sp-wk__role-k { margin-inline-end: var(--s-2); }
.sp-wk__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-5); }
.sp-wk__open { --btn-h: 44px; }
.sp-wk__out { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sp-wk__out-link { display: inline-flex; align-items: center; min-block-size: 24px; padding-block-end: 1px; background-position-y: 85%, 85%; }
@media (min-width: 720px) {
  .sp-wk { grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); }
  .sp-wk--landscape { grid-template-columns: minmax(240px, 46%) minmax(0, 1fr); }
}
@media (min-width: 1100px) { .sp-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────── 4 · notes (the title's link covers the entry) · 6 · tools · 7 · questions ───────── */
.sp-notes__wrap, .sp-tech__wrap, .sp-faq__wrap { display: grid; gap: var(--s-5) var(--gutter); }
.sp-tech__head, .sp-faq__head { display: grid; gap: var(--s-4); justify-items: start; align-self: start; }
.sp-notes__title { align-self: start; }
.sp-note__in { position: relative; display: grid; justify-items: start; padding-block: var(--s-5) var(--s-6); border-block-start: var(--hair) solid var(--rule-2); }
.sp-note__meta { margin-block-end: var(--s-3); }
.sp-note__title { margin: 0; max-inline-size: 32ch; }
.sp-note__link { text-decoration: none; }
.sp-note__link::after { content: ""; position: absolute; inset: 0; }
.sp-note__link:focus-visible { outline: none; box-shadow: none; }
.sp-note__in:has(.sp-note__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-gap); }
.sp-note__excerpt { margin-block-start: var(--s-3); max-inline-size: 60ch; }
.sp-note__arrow, .sp-more__arrow { color: var(--fg-2); }
.sp-note__arrow { margin-block-start: var(--s-4); }
:is(.sp-note__in, .sp-more__link):hover :is(.sp-note__title, .sp-more__name) { text-decoration: underline 1px; text-underline-offset: 0.22em; }
.sp-tech__title { max-inline-size: 18ch; }
.sp-tech__note { max-inline-size: 52ch; }
.sp-tech__list { margin-block-start: var(--s-5); }
.sp-faq__wrap { row-gap: var(--s-6); }
.sp-faq__title { max-inline-size: 16ch; }
.sp-qa { padding-block: var(--s-5) var(--s-6); border-block-start: var(--sp-rule); }
.sp-qa:last-child { border-block-end: var(--sp-rule); }
.sp-qa__q { margin: 0; max-inline-size: 40ch; }
.sp-qa__a { margin-block-start: var(--s-3); max-inline-size: 62ch; }
.sp-qa__a a { color: var(--fg); font-weight: 500; text-decoration-color: var(--link-rule); }
@media (min-width: 900px) {
  .sp-notes__wrap, .sp-tech__wrap, .sp-faq__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sp-notes__title { grid-column: 1 / span 3; padding-block-start: var(--s-5); }
  .sp-notes__list { grid-column: 4 / -1; }
  .sp-tech__wrap { align-items: end; }
  .sp-tech__head { grid-column: 1 / span 6; }
  .sp-tech__body { grid-column: 7 / -1; }
  .sp-faq__head { grid-column: 1 / span 4; position: sticky; inset-block-start: calc(var(--sp-top) + var(--s-6)); }
  .sp-faq__list { grid-column: 5 / -1; }
}

/* ───────── 8 · the call · 9 · the other four services ───────── */
.sp-cta__wrap { position: relative; display: grid; justify-items: start; padding-block-start: clamp(40px, 5vw, 72px); }
.sp-cta__wrap::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--margin); border-block-start: var(--hair) solid var(--rule-2); }
.sp-cta__title { max-inline-size: 20ch; }
.sp-cta__text { max-inline-size: 52ch; margin-block-start: var(--s-4); }
.sp-cta__mail { display: inline-flex; align-items: center; min-block-size: 44px; padding-block-end: 0; background-position-y: 78%, 78%; }
.sp-more__title { margin-block-end: clamp(24px, 3vw, 40px); }
.sp-more__list { border-block-start: var(--sp-rule); }
.sp-more__item { border-block-end: var(--sp-rule); }
.sp-more__link {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; grid-template-areas: "mark name arrow" ". say arrow";
  align-items: center; gap: var(--s-1) var(--s-4); padding-block: var(--s-5); text-decoration: none;
}
.sp-more__mark { grid-area: mark; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent-mark); }
.sp-more__name { grid-area: name; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--w-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-h3); }
html[lang="ar"] .sp-more__name { letter-spacing: 0; font-weight: 600; }
.sp-more__say { grid-area: say; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sp-more__arrow { grid-area: arrow; }
:is(.sp-more__link, .sp-note__in):hover :is(.sp-more__arrow, .sp-note__arrow) { color: var(--fg); }
@media (min-width: 900px) { .sp-more__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) :is(.sp-crumbs__link, .sp-qa__a a) { transition: color var(--t-2) var(--e-std), text-decoration-color var(--t-2) var(--e-std); }
  html:not(.is-calm) :is(.sp-more__arrow, .sp-note__arrow) { transition: color var(--t-2) var(--e-std); }
}