/* Phone fixes, top half of the page: nav + hero → results (#trust-results). Every rule sits inside a max-width media query,
   so desktop is untouched. Layout, size, spacing and cropping only: no words change.
   Crops are written as: width = image width / shown width; margin-left = −x0 / shown width; margin-top = −y0 / shown width
   (all % of the frame's width), and the frame's aspect-ratio = shown width / shown height. */
@media (max-width:900px){
  /* ── nav: the button is a 40px tap target ── */
  .nav .cta{min-height:40px}

  /* ── the hero must not vanish while it is still on screen: the page hides the curtain once scrollY ≥ one screen, which on
     desktop is when it has dropped out of view, but on a phone its last ~130px (the window) are still under the nav ── */
  .curtain{visibility:visible !important}
  /* the paper's upward shadow is for the desktop curtain sliding under it; on a phone it greys out the bottom of the hero window */
  #main.paper{box-shadow:none}

  /* ── the small caps labels over each heading: 10px → 11px ── */
  #clients .eyebrow,#story .eyebrow,#questions .eyebrow,#how .eyebrow,#work .eyebrow,#teail .eyebrow,#trust-results .eyebrow{font-size:11px}

  /* ── What we build: the section is as tall as its icons, not one full screen (it left ~400px empty under the grid) ── */
  #clients.s4{min-height:0}
  #clients .s4-bottom{padding-top:88px;padding-bottom:34px}
  #clients .orbit{padding-bottom:72px}   /* room for the tiles' soft shadow before the section clips it */
  #story .s2-inner{padding-top:60px}

  /* ── Work heading → first case: one gap, not two stacked ── */
  #teail{padding-top:72px;padding-bottom:44px}
  #teail-walk{padding-top:36px}

  /* ── TEAiL intro and cards ── */
  .case-story-link{padding:12px 4px}
  #teail .card3 .stamp,#teail .insight .src,#teail .evidence-view .ev-note{font-size:11px}
  #teail .insight .tag{font-size:11px;letter-spacing:.06em}
  #teail .phone__rec{font-size:11px}
  #teail .evidence-view .ev-replay{width:40px;height:40px;right:5px;bottom:1px}

  /* ── results: the chart's type is set in viewBox units (560 wide), so at 358px it needs ~17.5 units to reach 11px ── */
  .tr-slope .yr,.tr-slope .tk{font-size:17.5px}
  .tr-slope .v0{font-size:17.5px}
  .tr-slope .lab{font-size:20px}
  .tr-slope .nm{font-size:17.5px}
  /* Clifton and Thrybergh finish 21 units apart: ease the two labels 3 units away from each other */
  .tr-slope .s:nth-of-type(1) .lab{transform:translateY(-3px)}
  .tr-slope .s:nth-of-type(2) .lab{transform:translateY(3px)}
  .tr-fig2 figcaption{font-size:11px}
}

@media (max-width:860px){
  /* the four subject tiles, two by two: a rule between the rows, and the figure, bar and range sit on one line across each
     row whether the school and subject above them take two lines or four */
  .tr-tile{display:flex;flex-direction:column}
  .tr-tile:nth-child(n+3){border-top:1px solid var(--line)}
  .tr-tile .tr-pp{margin-top:auto;padding-top:14px}
}

@media (max-width:600px){
  /* ── hero: the blue panel is as tall as what is in it (it was a fixed 960px that only fitted by luck at one screen height) ── */
  .opening-teacher-overview .curtain{height:auto;min-height:0}
  .opening-teacher-overview .curtain__inner{position:relative;inset:auto}
  .opening-teacher-overview .hero{padding-top:112px}
  .opening-teacher-overview .client-proof-label{font-size:11px}
  .hero .pill .new{font-size:11px}
  .opening-teacher-overview .curtain__edge{display:none}   /* its dark fade fell across the window's caption */

  /* ── the opening window: toolbar, then a readable crop of the dashboard (past the dark sidebar: x 393–983, y 0–497 of
     1440×742 — the heading, the teaching pattern and the whole latest-lesson tile), then the caption as a slim footer bar ── */
  .opening-teacher-overview .browser.working-picture.teacher-browser{aspect-ratio:auto;height:calc(80px + (100vw - 40px) * .842)}
  #browser .teacher-overview-image{width:244.1%;max-width:none;margin-left:-66.6%;border-radius:0}
  #browser.working-picture .teacher-proof-caption{top:auto;bottom:0;left:8px;right:8px;padding:0 8px;font-size:11px;line-height:26px;
    text-align:center;white-space:nowrap;border-radius:0;border-top:1px solid rgba(82,96,120,.16)}

  /* ── the walk's four pictures: each is a deliberate crop with a margin on both sides, never a cut through text.
     Phones only: on a tablet the frame is wide enough that these close crops would be enlarged and soft ── */
  .walk__fig .frame,.walk__fig .doc{border-radius:14px}
  /* 01 the report: header card, the rated table and the storyline, full width of the report (x 322–1118, y −18–690 of 1440×900) */
  .walk__step:nth-of-type(1) .walk__fig .frame{aspect-ratio:796/708}
  .walk__step:nth-of-type(1) .walk__fig .frame img{width:180.9%;margin:2.26% 0 0 -40.45%}
  /* 02 the overview: past the sidebar, the first two columns of tiles, cut in the gutter (x 393–983, y 14–738 of 1440×742) */
  .walk__step:nth-of-type(2) .walk__fig .frame{aspect-ratio:590/724}
  .walk__step:nth-of-type(2) .walk__fig .frame img{width:244.1%;margin:-2.37% 0 0 -66.6%}
  /* 03 the threads page: "This week" and the one live next step, at a size that reads (x 124–528, y 412–800 of 1440×900) */
  .walk__step:nth-of-type(3) .walk__fig .frame{aspect-ratio:404/388}
  .walk__step:nth-of-type(3) .walk__fig .frame img{width:356.4%;margin:-101.98% 0 0 -30.7%}
  /* 04 the department review: the strand picture panel itself (x 112–737, y 513–935 of 1241×1754) */
  .walk__step:nth-of-type(4) .walk__fig .doc{aspect-ratio:625/422}
  .walk__step:nth-of-type(4) .walk__fig .doc img{width:198.56%;max-width:none;margin:-82.08% 0 0 -17.92%}
}