/* /approach, 21 Oct 2026 (the page's own pass; the owner: «пустые места в светлой теме, дырки, сильно много воздуха»,
   «некоторые 3д… обрезаются», «нужно вытягивать уровень до профессионального»; the coordinator: «слабые или повторяющиеся
   заменяй»). Loaded last on /approach only, so every rule is scoped to body[data-page=approach] and wins by its empty id
   tests (#_fa, #_fb, #_fc) over the layers before it. Findings, measurements and what to look at in the browser:
   work/_claude-qa/inner-20261021/approach/report.md. */

/* ---- The cycle: the subject takes the frame (1101 px and wider) ----
   The ring stood in the middle third of the frame at 603 px (67svh, the stage copy under it), with two empty bands of
   about 480 px either side (light-approach-2, -3, -4): the tiles read as small glass icons. The stage is now the page grid:
   the stage copy on columns 1-5, centred against the diagram, and the diagram on columns 6-12 as large as the window under
   the tabs allows (761 px at 1440 x 900, 1.26 times the old ring). The copy box keeps one height for all five stages, so
   the step line does not jump from stage to stage. */
@media (min-width:1101px){
 html body[data-page=approach] .cycle-scroll:not(.is-static)>.design-cycle:not(#_fa):not(#_fb){
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:0!important;
  align-items:center!important;align-content:center!important;justify-content:stretch!important;
  padding:64px calc(4vw - 10px) 12px!important}   /* the window: 12 px frame and 52 px tab above, the 12 px frame below */
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-diagram:not(#_fa):not(#_fb){
  grid-column:6/span 7!important;grid-row:1!important;justify-self:center!important;align-self:center!important;order:0!important;
  width:min(100%,calc(100svh - 124px))!important;height:auto!important;aspect-ratio:1/1!important;max-width:none!important;min-width:0!important;margin:0!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-detail:not(#_fa):not(#_fb){
  grid-column:1/span 5!important;grid-row:1!important;align-self:center!important;order:0!important;width:auto!important;max-width:none!important;margin:0!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panels:not(#_fa):not(#_fb){min-height:304px!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not([hidden]):not(#_fa):not(#_fb){display:block!important;max-width:none!important;margin:0!important;text-align:left!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not(#_fa):not(#_fb)>h3{max-width:none!important;margin:0 0 24px!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not(#_fa):not(#_fb)>p{max-width:30em!important;margin:0 0 16px!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not(#_fa):not(#_fb)>ul{margin:0!important}
}

/* ---- The foundation: one spread, no runs of empty paper ----
   «A clear journey needs a clear foundation.» sat between 173 px of padding above and below (chapters.css clamp(90px,
   12vw,200px)), the services' 140 px and the old services title: 330 to 390 px of empty paper before and after it
   (light-approach-5, -6; phone 6, 7). It keeps its staircase title and its dense column of three notes (grid-2026.css,
   E06), with 96 px above and below on desktop, 64 on tablets and 48 on phones. */
html body[data-page=approach] .practice-detail:not(#_fa):not(#_fb){padding-top:96px!important;padding-bottom:96px!important}
@media (max-width:1100px){html body[data-page=approach] .practice-detail:not(#_fa):not(#_fb){padding-top:64px!important;padding-bottom:64px!important}}
@media (max-width:700px){html body[data-page=approach] .practice-detail:not(#_fa):not(#_fb){padding-top:48px!important;padding-bottom:48px!important}}

/* ---- Services: a stage of its own, not the homepage's section again ----
   «From the system to the smallest detail.» and «One considered approach across every touchpoint.» are the homepage's
   services title and line, word for word, over the same four rows; here they stood as a second staircase title right
   after the foundation's, with 260 px of paper between the title and the rows as the stage came in (light-approach-7)
   and the title running under the tabs (night dark-approach-0). On /approach the section opens on its stage: the four
   rows and the plaster maquette. The title stays in the document for assistive tech (the section is labelled by it). */
html body[data-page=approach] #services>.section-heading:not(#_fa):not(#_fb):not(#_fc){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html body[data-page=approach] #services.services-section:not(#_fa):not(#_fb){padding-top:0!important}

/* The pinned stage was the full window (100svh) with its rows centred: about 200 px of empty paper above the rows as it
   came in and 400 px under the last row as it left (light-approach-7, -10). It is now as tall as the maquette needs
   (640 px at most, the window under the tabs less 48 px on short screens) and pins centred in the window under the tabs,
   so it comes in and leaves with its own content; the maquette's box takes its whole height. The track keeps its length
   (chapters.css 332svh), so each service still holds for 58svh of scroll; the first and the last hold a little longer. */
@media (min-width:821px){
 html body[data-page=approach] .svc-show:not(.is-static) .svc-stage:not(#_fa):not(#_fb){
  --svc-h:min(640px,calc(100svh - 124px));
  top:calc(64px + (100svh - 76px - var(--svc-h)) / 2)!important;height:var(--svc-h)!important;min-height:0!important;padding-block:0!important;align-items:center!important}
 html body[data-page=approach] .svc-show:not(.is-static) .svc-art:not(#_fa):not(#_fb){height:var(--svc-h)!important;align-self:center!important}
}

/* The static rows (phones, reduced motion): each service's maquette stands above its name, not under its button, where
   it read as the next service's (phone 8: the rings over «Pitch decks»); and the rows lose the frosted card the 1-bit
   site does not use (portfolio-polish-v54.css, a grey glass plate by night). */
html body[data-page=approach] .svc-show.is-static .service-rows:not(#_fa):not(#_fb){gap:48px!important}
html body[data-page=approach] .svc-show.is-static .service-rows>a:not(#_fa):not(#_fb){display:flex!important;flex-direction:column!important;align-items:flex-start!important;margin:0!important;padding:0!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;overflow:visible!important}
html body[data-page=approach] .svc-show.is-static .service-rows>a>.service-preview:not(#_fa):not(#_fb){order:-1!important;align-self:stretch!important;width:auto!important;max-width:none!important;margin:0 0 16px!important}

/* ---- The finale: a shorter hold on this page ----
   The closing line holds under the tab for 130svh while the world gathers the seven lenses into one sphere (space-ui.css,
   «The finale holds»); by day that sphere prints as a faint dotted ring, so the lower two thirds of the frame read as an
   empty page for a whole screen of scroll (light-approach-11). Here the hold is one window (720 px at least), and the line
   comes 64 px after the services instead of 173 (the footer's padding, portfolio-v39.css). */
@media (min-width:701px){
 html:is(.space-on,.airy,.room-live) body[data-page=approach] #footer .footer-top:not(#_u):not(#_fa){min-height:max(100svh,720px)!important;padding-bottom:max(24svh,192px,calc(100svh - var(--fin-rest,100svh) + 24px))!important}
 html body[data-page=approach] #footer:not(#_fa):not(#_fb){padding-top:64px!important}
}

/* -72 (23 Oct; the visual jury, approach 1440-20: «the text column starts at x ≈ 68, 10 px off the margin»): the cycle sits in
   the process story's old 10 px inset, so its 4vw padding is now 4vw less the inset and its grid meets the page grid */