/* ============ tokens ============ */
  :root {
    --ink: #17161a;
    --ink-60: rgba(23,22,26,.62);
    --ink-40: rgba(23,22,26,.66);
    --paper: #faf9f2;
    --light: #faf9f2;
    --light-60: rgba(250,249,242,.82);
    --light-40: rgba(250,249,242,.78);
    --hair: rgba(23,22,26,.14);
    --hair-l: rgba(250,249,242,.3);
    --lav: #5a72f9;
    --lav-deep: #1217f7;
    /* same hue, darker value — for small accent text sitting on the mist */
    --lav-ink: #0d10b8;
    --lav-pale: #d6e0fe;
    /* the acid from code21.io — 6.9:1 on the brand blue, invisible on white,
       so it is the accent everywhere the ground is blue */
    --acid: #a8f73f;
    /* same hue, far darker — a hover state must not borrow a ground colour */
    --acid-deep: #7fb51a;
    --card: #ececf0;
    /* a step down from the brand blue — enough to lift a plate off the pattern */
    --blue-deep: #080ba0;
    /* one step UP from the brand blue: the hover on the services rows.
       +20% toward white — 64% more luminance, still 5.8:1 under white type */
    --blue-lift: #4145f9;
    --dark: #131217;
    /* the measure is the process card grid: five cards, and everything on
       the page lines up with their outer edges */
    --w: 1440px;
    --display: "Clash Display", "Segoe UI", Arial, sans-serif;
    --body: "Satoshi", "Segoe UI", Arial, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: var(--body);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--lav-pale); color: var(--ink); }

  #bgfog, #bg3d { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  main, header, footer { position: relative; z-index: 1; }
  .wrap { max-width: var(--w); margin: 0 auto; padding: 0 40px; width: 100%; }

  .meta {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-40);
  }
  .meta b { color: var(--lav-ink); font-weight: 500; }

  /* ============ nav ============ */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair);
    transition: background .4s, border-color .4s;
  }
  /* the admin bar is fixed too, and would sit on top of the logo */
  body.admin-bar header { top: 32px; }
  /* Below 782px WordPress makes its own bar `position: absolute`, so it scrolls
     away with the page — offsetting for it would leave the header hanging in
     mid-air with a strip of content above it. */
  @media (max-width: 782px) {
    body.admin-bar header { top: 0; }
  }
  /* The screens are viewport-tall only where the snap layout runs, so the
     bar's 32px come off them only there. Scoped to that breakpoint because
     `body.admin-bar .screen` outranks the mobile `.screen { height: auto }` and would
     otherwise lock stacked sections to one screenful. */
  @media (min-width: 901px) {
    body.admin-bar .screen { height: calc(100vh - 32px); }
  }
  .nav { max-width: var(--w); margin: 0 auto; padding: 0 40px; height: 64px; display: flex; align-items: center; gap: 40px; }
  /* The mark is a single-colour PNG used as a mask. The bar is white on every
     ground, so the mark is brand blue on every ground too. */
  .logo {
    display: block; width: 146px; height: 30px;
    background-color: var(--lav-deep);
    -webkit-mask: url(../img/code21-logo.png) no-repeat left center / contain;
    mask: url(../img/code21-logo.png) no-repeat left center / contain;
    text-indent: -9999px; overflow: hidden;
    transition: background-color .4s;
  }
  /* wp_nav_menu() prints nav.nav-wrap > ul.nav-links > li > a. */
  .nav-wrap { margin-left: auto; }
  .nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
  .nav-links a { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); text-decoration: none; transition: color .25s; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--lav-deep); }
  /* The bar carries one action, and it sits at the end of the row. */
  .nav > .btn { margin-left: 8px; }
  .nav .btn .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin-right: 9px; vertical-align: 1px;
    background: var(--acid); animation: pulse 2.4s ease infinite;
  }
  @keyframes pulse { 50% { opacity: .35; } }

  /* The bar is deliberately kept white on every ground — it is the one
     neutral element on the page and carries the contrast. */

  .btn {
    display: inline-block;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 15px 30px;
    background: var(--ink); color: var(--paper);
    text-decoration: none;
    border: 1px solid var(--ink);
    transition: background .22s, color .22s, border-color .22s;
  }
  .btn:hover, .btn:focus-visible { background: var(--lav-deep); border-color: var(--lav-deep); color: #fff; }
  /* The parent theme sets `a:hover, a:focus, a:active { color: var(--contrast) }`
     inline — near-black type on the brand blue once a button has been clicked.
     Both states are named here so that rule never lands. */
  .btn:focus { color: #fff; }
  .btn:active { background: var(--acid); border-color: var(--acid); color: var(--ink); }
  .btn.ghost:focus { color: var(--ink); }
  .btn.ghost:active { background: var(--acid); border-color: var(--acid); color: var(--ink); }
  .sec-dark .btn:focus { color: var(--ink); }
  .sec-dark .btn:active { background: var(--ink); border-color: var(--ink); color: var(--acid); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn.solid { background: var(--acid); border-color: var(--acid); color: var(--ink); }
  .btn.solid:hover { background: #fff; border-color: #fff; color: var(--ink); }
  header .btn { padding: 11px 22px; }

  /* Shown only below 900px, where the inline menu is hidden. The parent theme
     styles every <button>, and its :hover/:focus/:active rules would repaint
     this one as a filled dark square, so each state is declared. */
  .burger,
  .burger:hover,
  .burger:focus,
  .burger:active,
  .burger:focus-visible {
    align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 4px; padding: 0;
    border: 1px solid var(--hair); border-radius: 0;
    background: transparent; box-shadow: none; color: var(--ink);
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  .burger { display: none; }
  .burger:focus-visible { border-color: var(--lav-deep); }
  .burger span,
  .burger:hover span, .burger:focus span, .burger:active span {
    display: block; position: relative; width: 17px; height: 1px;
    background: var(--ink); transition: background .2s;
  }
  .burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 1px;
    background: var(--ink); transition: transform .25s;
  }
  .burger span::before { top: -5px; }
  .burger span::after { top: 5px; }
  body.menu-open .burger span,
  body.menu-open .burger:hover span,
  body.menu-open .burger:focus span { background: transparent; }
  body.menu-open .burger span::before { transform: translateY(5px) rotate(45deg); }
  body.menu-open .burger span::after { transform: translateY(-5px) rotate(-45deg); }

  /* ============ dots nav ============ */
  .dots {
    position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 14px; z-index: 11;
  }
  .dots button {
    width: 8px; height: 8px; border-radius: 999px;
    border: 1px solid var(--ink-40); background: transparent;
    cursor: pointer; padding: 0;
    transition: background .3s, border-color .3s, height .3s;
  }
  .dots button:hover { border-color: var(--lav-deep); }
  .dots button.on { height: 26px; background: var(--lav-deep); border-color: var(--lav-deep); }
  html.on-dark .dots button { border-color: var(--light-40); }
  html.on-dark .dots button.on { background: var(--acid); border-color: var(--acid); }

  /* ============ screens (fullpage snap) ============ */
  .screen {
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 84px 0 40px;
    overflow: hidden;
    position: relative;
  }
  .slide-head { text-align: center; margin-bottom: 40px; }
  /* Ordinary screens keep their column on the left and hand the right-hand
     band to the pattern; the three break screens stay centred and full bleed. */
  /* a fraction of the wrap, not of the viewport — a percentage here resolves
     against the section and swallowed the column on wide screens */
  .sec-zone .wrap { padding-right: clamp(0px, calc(var(--w) * var(--prf, .3)), 38%); }
  .sec-zone .slide-head { text-align: left; }
  .sec-zone .slide-head .lead { margin-left: 0; margin-right: 0; }
  #hero.sec-zone .wrap { --prf: .17; }
  #studio.sec-zone .wrap { --prf: .27; }
  /* The zone rule sets padding-right for the pattern band. Below 1100px the
     band is gone, and the clamp then resolved to 0 — which stripped the
     container's own right padding and let every line run to the screen edge. */
  @media (max-width: 1100px) {
    .sec-zone .wrap { --prf: 0 !important; padding-right: 40px; }
  }
  /* Short viewports: every screen still has to hold one screenful. */
  .slide-head .meta { display: block; margin-bottom: 14px; }
  .slide-head h2 {
    font-family: var(--display);
    font-size: clamp(34px, 4.8vw, 64px);
    font-weight: 600; letter-spacing: -.01em; line-height: 1.0;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .slide-head h2 em, .slide-head h2 .c21-accent { font-style: normal; color: var(--lav-deep); }
  .slide-head .lead { margin: 16px auto 0; max-width: 52ch; font-size: 18px; color: var(--ink-60); }

  .sec-dark { color: var(--light); }
  .sec-dark .meta { color: var(--light-40); }
  .sec-dark .meta b { color: var(--acid); }
  .sec-dark .slide-head h2 em, .sec-dark .slide-head h2 .c21-accent { color: var(--acid); }
  .sec-dark .slide-head .lead { color: var(--light-60); }

  /* A field can hold more than one paragraph now: a blank line in the
     inspector starts a new one, and the reset zeroed every margin. */
  .sub + .sub, .lead + .lead, .note + .note, .svc-note + .svc-note,
  .detail .body p + p, .detail .aside p + p,
  .q-inner p + p, .svc p + p { margin-top: .75em; }

  .rv { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.2,1); }
  .rv.in { opacity: 1; transform: none; }

  /* ============ hero ============ */
  .hero h1 {
    font-family: var(--display);
    /* sized to the column, not to a character count — a ch box narrower than
       the measure broke the first line in two */
    font-size: clamp(44px, 6.9vw, 96px);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: .94;
    text-transform: uppercase;
  }
  .hero .meta { display: block; margin-bottom: 28px; }
  /* [text] in the hero is a stroke, not a fill */
  .hero h1 .outline,
  /* In em, not px: 2px against a 96px headline is a hairline, the same 2px
     against a 42px one on a phone reads as a heavy outline. */
  .hero h1 .c21-accent { color: transparent; -webkit-text-stroke: .021em var(--lav-deep); }
  /* {text} anywhere: the accent colour, never a stroke — blue on the paper
     grounds, acid on the dark ones, matching [text] outside the hero */
  .c21-fill { color: var(--lav-deep); -webkit-text-stroke: 0; }
  .sec-dark .c21-fill,
  .statement .c21-fill,
  .contact .c21-fill { color: var(--acid); }
  .line-mask { display: block; overflow: hidden; padding-bottom: .06em; }
  .line-mask > span { display: block; transform: translateY(112%); animation: lineUp 1s cubic-bezier(.2,.85,.2,1) forwards; }
  .line-mask:nth-child(2) > span { animation-delay: .1s; }
  .line-mask:nth-child(3) > span { animation-delay: .2s; }
  @keyframes lineUp { to { transform: translateY(0); } }
  .hero-foot {
    margin-top: 40px;
    display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-end;
    opacity: 0; animation: fadeIn .8s ease .6s forwards;
  }
  .hero-foot .sub { max-width: 34ch; font-size: 17px; color: var(--ink-60); }
  .hero-foot .cta { display: flex; gap: 12px; }
  /* the accent belongs where the eye goes; acid is unreadable as type on
     the light ground but carries ink at 13.8:1 as a field */
  .hero .cta .btn:not(.ghost) { background: var(--acid); border-color: var(--acid); color: var(--ink); }
  .hero .cta .btn:not(.ghost):hover { background: var(--acid-deep); border-color: var(--acid-deep); color: var(--ink); }
  @keyframes fadeIn { to { opacity: 1; } }
  /* Three facts, and only facts — no invented counts. */
  .proof {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin-top: 34px; padding-top: 18px;
    border-top: 1px solid var(--hair);
    list-style: none;
    opacity: 0; animation: fadeIn .8s ease .8s forwards;
  }
  .proof li {
    position: relative;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
  }
  .proof li::before { content: "+"; margin-right: 9px; color: var(--lav-deep); }


  /* ============ services ============ */
  .svc-rows { background: var(--blue-deep); }
  /* the band starts where this ends, so its width is what leaves room for the pattern */
  #uslugi .slide-head { max-width: 58%; margin-left: auto; margin-right: auto; }
  .svc {
    display: grid; grid-template-columns: 90px 1fr 1.1fr; gap: 40px; align-items: baseline;
    padding: 30px 24px;
    border-bottom: 1px solid var(--hair-l);
    transition: background .28s, color .28s;
    cursor: default;
  }
  .svc .idx { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--acid); transition: color .28s; }
  .svc h3 { font-family: var(--display); font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; }
  .svc p { font-size: 17px; color: var(--light-70, rgba(250,249,242,.76)); max-width: 46ch; transition: color .28s; }
  .svc:last-child { border-bottom: none; }
  /* hover lifts the row off the ground instead of darkening it */
  .svc:hover, .svc:focus-within { background: var(--blue-lift); }
  .svc:hover h3, .svc:focus-within h3 { color: var(--acid); }
  .svc-note {
    max-width: 62ch; margin: 26px auto 0;
    text-align: center; font-size: 16px; color: var(--light-60);
  }

  /* ============ works — 3×2 tiles ============ */
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; margin: 78px auto 0; }
  /* Room above the heading so the field shows between the bar and the stripe:
     the engine cuts that stripe from where the type actually is, so space
     above it becomes pattern. Enough to read as a band, not so much that the
     tiles are pushed off the bottom of the screen. */
  /* Anchored to the top rather than centred: on a centred screen the padding
     only sets a minimum and the slack is split evenly, so this gap could not be
     set directly. Anchored, it is exactly the field showing between the bar and
     the stripe the engine cuts — the tiles are brought up by packing the block,
     not by moving it. */
  #realizacje { justify-content: flex-start; padding-top: 122px; }
  /* Two destinations per tile — the live site and, optionally, the case study —
     so the tile is a container and each link stands on its own. */
  .tile { position: relative; color: var(--ink);
          background: var(--acid); transition: background .25s; }
  .tile-main { display: block; text-decoration: none; color: inherit; }
  .tile-vis {
    display: block;
    aspect-ratio: 16 / 8.6;
    position: relative; overflow: hidden;
  }
  .tile-vis::before {
    content: ""; position: absolute; inset: -2%;
    background: var(--tv, linear-gradient(135deg, #1217f7, #6f9dfd));
    transition: transform .5s cubic-bezier(.2,.85,.2,1);
  }
  .tile:hover .tile-vis::before { transform: scale(1.06); }
  .tile-vis::after {
    content: ""; position: absolute; inset: 0;
    background:
      repeating-linear-gradient(115deg, rgba(244,244,246,.05) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(25deg, rgba(244,244,246,.04) 0 1px, transparent 1px 34px);
  }
  .tile-vis .go {
    position: absolute; right: 14px; bottom: 12px;
    font-family: var(--mono); font-size: 14px; color: var(--acid);
    opacity: 0; transform: translate(-8px, 8px);
    transition: opacity .3s, transform .3s;
  }
  .tile:hover .go { opacity: 1; transform: none; }
  /* an acid plate under each thumbnail: the caption carries its own ground */
  .tile-info {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 12px; background: var(--acid); color: var(--ink);
    margin-top: -1px;                    /* fractional edges must not leave a seam */
    transition: background .25s;
  }
  .tile-info .name { font-family: var(--display); font-size: 19px; font-weight: 600; text-transform: uppercase;
                     color: inherit; text-decoration: none; }
  .tile-info .meta { flex-shrink: 0; font-size: 12px; color: rgba(23,22,26,.75); }
  .tile:hover, .tile:hover .tile-info { background: var(--acid-deep); }
  .tile:hover .tile-info { color: var(--ink); }
  .tile:hover .tile-info .meta { color: rgba(23,22,26,.75); }
  /* Nothing hovers on a touch screen, so the link has to stand there. */

  .tv-navy    { --tv: linear-gradient(140deg, #0f1420 10%, #23386b 55%, #5b86d6 130%); }
  .tv-steel   { --tv: linear-gradient(150deg, #0e151c 5%, #2a3f52 60%, #7ca0b8 140%); }
  .tv-ink     { --tv: linear-gradient(130deg, #0c0f14 15%, #1d2a3f 60%, #5f7bab 135%); }
  .tv-olive   { --tv: linear-gradient(145deg, #12130f 10%, #313329 65%, #85836d 145%); }
  .tv-sky     { --tv: linear-gradient(140deg, #1f2733 0%, #55708c 55%, #b9c9da 130%); }
  .tv-indigo  { --tv: linear-gradient(135deg, #0f1318 10%, #223350 60%, #5a7cb2 140%); }

  /* ============ statement — fog does the work ============ */
  .statement { text-align: center; }
  .statement::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .06; mix-blend-mode: overlay;
  }
  .statement h2 {
    font-family: var(--display);
    font-size: clamp(40px, 6.2vw, 84px);
    font-weight: 600; letter-spacing: -.012em; line-height: .98;
    text-transform: uppercase; text-wrap: balance;
    margin-top: 20px;
  }
  .statement h2 em, .statement h2 .c21-accent { font-style: normal; color: var(--acid); }
  .statement .lead { margin: 22px auto 0; max-width: 54ch; font-size: 19px; color: var(--light-60); }
  .statement .cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .statement .btn.ghost { color: var(--light); border-color: var(--hair-l); }
  .statement .btn.ghost:hover { background: var(--light); color: var(--ink); border-color: var(--light); }

  /* ============ process — the rail ============ */
  /* Six stations on one spine. Only the titles stand on it; the description of
     the station under the cursor appears once, large, below — so the screen
     carries one step at a time. A click pins a station so the text stays put
     when the pointer leaves. */
  .rail { position: relative; }
  .rail-line { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: rgba(23,22,26,.24); }
  .rail-fill { position: absolute; left: 0; top: 10px; height: 3px; width: 0; background: var(--lav-deep);
               transition: width .45s cubic-bezier(.2,.85,.2,1); }
  .stations { position: relative; display: grid; grid-template-columns: repeat(var(--stations, 6), 1fr); }

  /* the parent theme styles every <button>, so each state is declared here */
  .station,
  .station:hover,
  .station:focus,
  .station:active {
    position: relative;
    /* a <button> centres its own contents, which staggered every dot down the
       rail by a different amount; a column flex box lays them out from the top */
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: inherit;
    /* the theme paints a ring on plain :focus, which a mouse click leaves
       sitting on the row afterwards; only the keyboard ring below is wanted */
    outline: none;
    font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  }

  .station .dot {
    display: flex; align-items: center; justify-content: center;
    width: 23px; height: 23px;
    border: 1px solid var(--hair); background: var(--paper);
    transition: background .25s, border-color .25s, transform .25s;
  }
  .station .dot i { width: 5px; height: 5px; background: var(--ink-40); transition: background .25s, transform .25s; }
  .station[aria-selected="true"] .dot { background: var(--lav-deep); border-color: var(--lav-deep); transform: scale(1.12); }
  .station[aria-selected="true"] .dot i { background: var(--acid); transform: scale(1.5); }
  .station:hover .dot { border-color: var(--lav-deep); }
  /* a pinned station keeps its ring after the pointer has gone */
  .station[data-pinned] .dot { box-shadow: 0 0 0 3px rgba(18,23,247,.18); }
  /* Inset, not offset: at +4px the ring sat outside the row, and with the
     phone rows 14px apart two of them nearly met and read as stacked boxes. */
  .station:focus-visible { outline: 2px solid var(--lav-deep); outline-offset: -3px; }
  .station .lbl {
    display: block; margin-top: 18px; padding-right: 22px;
    /* two lines' worth, so a label that wraps does not push its title out of
       line with the rest of the rail */
    min-height: 2.9em;
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40);
    transition: color .25s;
  }
  .station[aria-selected="true"] .lbl { color: var(--lav-deep); }
  .station .ttl {
    display: block; margin-top: 10px; padding-right: 26px;
    font-family: var(--display); font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 600; line-height: 1.14; text-transform: uppercase;
    color: var(--ink-60); transition: color .25s;
  }
  .station[aria-selected="true"] .ttl { color: var(--ink); }

  .detail {
    display: grid; grid-template-columns: 1.35fr auto minmax(300px, .72fr); gap: 40px; align-items: start;
    margin: 54px 0 0; padding-top: 30px; border-top: 1px solid var(--hair);
  }
  /* left as it was: this size is the one that reads right */
  .detail .body { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.44; max-width: 44ch; }
  .detail .body b { font-weight: 500; }
  /* The rail is walked with these: they sit in the gap the reading column
     leaves before the terms box, which is space that exists at every width. */
  .rail-nav { display: flex; align-items: center; gap: 10px; align-self: center; }
  .rail-nav button,
  .rail-nav button:hover,
  .rail-nav button:focus,
  .rail-nav button:active {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--hair); border-radius: 0;
    background: transparent; box-shadow: none;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: background .22s, border-color .22s;
  }
  .rail-nav button::before {
    content: "";
    width: 11px; height: 11px;
    border-top: 2.5px solid var(--lav-deep);
    border-right: 2.5px solid var(--lav-deep);
    transition: border-color .22s;
  }
  .rail-nav .prev::before { transform: rotate(-135deg); margin-left: 4px; }
  .rail-nav .next::before { transform: rotate(45deg); margin-right: 4px; }
  .rail-nav button:hover { background: var(--lav-deep); border-color: var(--lav-deep); }
  .rail-nav button:hover::before { border-color: var(--acid); }
  .rail-nav button:focus-visible { outline: 2px solid var(--lav-deep); outline-offset: 3px; }
  .rail-nav button[disabled] { opacity: .3; cursor: default; }
  .rail-nav button[disabled]:hover { background: transparent; border-color: var(--hair); }
  .rail-nav button[disabled]:hover::before { border-color: var(--lav-deep); }
  .sec-dark .rail-nav button { border-color: var(--hair-l); }
  .sec-dark .rail-nav button::before { border-color: var(--acid); }

  .detail .aside { padding: 22px 24px; background: var(--acid); color: var(--ink); }
  .detail .aside .note-label {
    display: block; margin-bottom: 12px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(23,22,26,.6);
  }
  .detail .aside p { font-size: 16px; line-height: 1.55; }

  /* on the inverted ground the rail keeps its own contrast */
  .sec-dark .rail-line { background: var(--hair-l); }
  .sec-dark .station .dot { background: transparent; border-color: var(--hair-l); }
  .sec-dark .station .dot i { background: var(--light-40); }
  .sec-dark .station .lbl { color: var(--light-40); }
  .sec-dark .station[aria-selected="true"] .lbl { color: var(--acid); }
  .sec-dark .station .ttl { color: var(--light-60); }
  .sec-dark .station[aria-selected="true"] .ttl { color: var(--light); }
  .sec-dark .detail { border-top-color: var(--hair-l); }

  /* a short laptop gives up the gap under the rail first */
  @media (min-width: 901px) and (max-height: 820px) {
    .detail { margin-top: 38px; padding-top: 22px; gap: 40px; }
    .detail .body { font-size: clamp(17px, 1.35vw, 20px); }
    .detail .aside { padding: 18px 20px; }
    .detail .aside p { font-size: 15px; }
    .station .ttl { font-size: clamp(16px, 1.2vw, 19px); }
    .station .lbl { font-size: 11px; }
  }

  /* ============ studio ============ */
  .studio-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
  .studio-grid .big {
    font-family: var(--display);
    font-size: clamp(24px, 2.9vw, 36px); font-weight: 500;
    line-height: 1.24; text-wrap: balance;
  }
  .studio-grid .big em,
  .studio-grid .big .c21-accent { font-style: normal; color: var(--lav-deep); }
  .studio-grid .side .meta { display: block; margin-bottom: 16px; }
  .studio-grid .note { margin-top: 20px; max-width: 46ch; font-size: 16px; color: var(--ink-60); }
  .nums { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
  .num { padding: 22px 6px 24px; border-bottom: 1px solid var(--ink); }
  .num b { display: block; font-family: var(--display); font-size: 42px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .num span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); }

  /* ============ audience — who we are for ============ */
  /* Two columns on one ground, told apart by their markers rather than by a
     box each: the same hairline language as the services rows. */
  .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1180px; margin: 0 auto; }
  .fit-col { padding: 30px 34px; border-top: 1px solid var(--hair-l); }
  .fit-yes { border-right: 1px solid var(--hair-l); }
  .fit-col > .meta { display: block; margin-bottom: 20px; color: var(--light-40); }
  .fit-yes > .meta { color: var(--acid); }
  .fit-col ul { list-style: none; display: flex; flex-direction: column; gap: 15px; }
  .fit-col li {
    position: relative; padding-left: 30px;
    font-size: 17px; line-height: 1.5; color: var(--light-60);
  }
  .fit-col li::before {
    position: absolute; left: 0; top: -1px;
    font-family: var(--mono); font-size: 15px; font-weight: 700;
  }
  .fit-yes li::before { content: "+"; color: var(--acid); }
  .fit-no li::before { content: "—"; color: var(--light-40); }

  /* ============ faq ============ */
  /* Two columns of accordions. Rows are sized to their own content and the
     items sit at the top of them, so opening one entry pushes nothing but the
     rows beneath it. */
  /* The block stands on its own ground rather than straight on the field: the
     pattern reaches this far right, and an answer opening over it was being
     read through the fog. Paper on paper, so the plate shows only as the point
     where the pattern stops — the hairline gives that edge a reason. */
  .qa {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
    align-items: start; align-content: start;
    max-width: 1180px; margin: 0 auto;
    padding: 6px 36px 20px;
    /* grey rather than paper: the block should read as its own object on the
       page, not as a patch of the ground with a line around it */
    background: var(--card);
    border: 1px solid var(--hair);
  }
  .q { border-top: 1px solid var(--hair); }
  /* the plate's own edge already draws the line above the first row */
  .q:nth-child(-n+2) { border-top: 0; }

  /* The parent theme paints every <button>, so each state is declared. */
  .q-btn,
  .q-btn:hover,
  .q-btn:focus,
  .q-btn:active,
  .q-btn:focus-visible {
    display: flex; align-items: flex-start; gap: 20px;
    width: 100%; padding: 20px 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .q-btn:focus-visible { outline: 2px solid var(--lav-deep); outline-offset: 3px; }
  .q h3 {
    flex: 1;
    font-family: var(--display); font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600; line-height: 1.15; text-transform: uppercase; letter-spacing: -.005em;
    transition: color .22s;
  }
  .q-btn:hover h3, .q-btn[aria-expanded="true"] h3 { color: var(--lav-deep); }

  /* a plus that becomes a minus — two rules, one of which rotates away */
  .q-mark {
    position: relative; flex: 0 0 auto;
    width: 15px; height: 15px; margin-top: 6px;
  }
  .q-mark::before, .q-mark::after {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 15px; height: 1.5px; background: var(--lav-deep);
    transition: transform .35s ease;
  }
  .q-mark::after { transform: rotate(90deg); }
  .q-btn[aria-expanded="true"] .q-mark::after { transform: rotate(0deg); }

  /* The opening itself, ported from the prostapielegnacja course page: a grid
     row travelling between 0fr and 1fr. It transitions in both directions
     because the panel is always in the document — the <details> version had
     nothing to animate from, since a closed one stops rendering its content.
     Collapsed only once the script marks the list ready, so the answers stay
     readable if it never runs. */
  .q-content {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .35s ease;
  }
  .qa--ready .q-content { grid-template-rows: 0fr; }
  .qa--ready .q-content.is-open { grid-template-rows: 1fr; }
  /* the clipper carries no padding of its own, or it could never reach zero */
  .q-answer { overflow: hidden; min-height: 0; }
  /* Scroll anchoring is what shook the section on a phone. One panel closes
     while another opens, so the page height wobbles frame by frame, and the
     browser answers every wobble by nudging the scroll position to keep the
     anchor still — for the whole 350ms. Desktop never saw it: the screens are
     a fixed viewport tall there, so the document height cannot move. Taking
     this section out of the anchor hunt leaves the rest of the page anchored. */
  .faq, .faq * { overflow-anchor: none; }
  .q-inner { padding: 0 44px 22px 0; }
  .q p { font-size: 16.5px; line-height: 1.58; color: var(--ink-60); }
  @media (prefers-reduced-motion: reduce) {
    .q-content { transition: none; }
  }

  /* ============ contact (footer docked) ============ */
  .contact { text-align: center; }
  .contact h2 {
    font-family: var(--display);
    font-size: clamp(46px, 7.6vw, 108px);
    font-weight: 600; letter-spacing: -.015em; line-height: .96;
    text-transform: uppercase;
    margin-top: 22px;
  }
  .contact h2 em, .contact h2 .c21-accent { font-style: normal; color: var(--acid); }
  .contact .lead { margin: 22px auto 0; max-width: 56ch; font-size: 18px; color: var(--light-60); }
  .contact .cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .contact .btn.ghost { color: var(--light); border-color: var(--hair-l); }
  .contact .btn.ghost:hover { background: var(--light); color: var(--ink); border-color: var(--light); }
  .contact .mail-line { margin-top: 44px; }
  .contact .mail-big {
    font-family: var(--display); font-size: clamp(20px, 3vw, 36px); font-weight: 500;
    color: var(--light); text-decoration: none;
    border-bottom: 2px solid var(--acid);
    padding-bottom: 6px;
    transition: color .25s, border-color .25s;
  }
  .contact .mail-big:hover { color: var(--acid); border-color: var(--acid); }
  /* ============ contact form ============ */
  .c-form { max-width: 640px; margin: 30px auto 0; text-align: left; display: flex; flex-direction: column; gap: 16px; }
  .c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .c-field { display: flex; flex-direction: column; gap: 7px; }
  .c-field > span {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--acid);
  }
  .c-field input, .c-field textarea {
    font-family: var(--body); font-size: 18px; color: var(--paper);
    background: rgba(250,249,242,.08); border: 0;
    border-bottom: 2px solid rgba(250,249,242,.5);
    padding: 11px 12px; width: 100%; resize: none;
    transition: border-color .25s, background .25s;
  }
  .c-field input::placeholder, .c-field textarea::placeholder { color: rgba(250,249,242,.66); }
  .c-field input:focus, .c-field textarea:focus {
    outline: none; border-bottom-color: var(--acid); background: rgba(250,249,242,.14);
  }
  .c-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
  .c-send .btn { border: 0; cursor: pointer; }
  .c-send .meta { color: var(--light-60); font-size: 12px; }
  .c-send .mail-big { font-family: var(--mono); font-size: 13px; color: var(--acid); border: 0; padding: 0; }
  @media (max-width: 700px) { .c-row { grid-template-columns: 1fr; } }

  .contact .foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    border-top: 1px solid var(--hair-l);
    padding: 18px 0;
  }
  .contact .foot .wrap { display: flex; justify-content: space-between; align-items: center; }
  .contact .foot .meta { color: var(--light-60); }
  .contact .foot .meta b { color: var(--acid); }
  .contact .foot nav { display: flex; gap: 26px; }
  .contact .foot nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--light-60); text-decoration: none; }
  .contact .foot nav a:hover { color: var(--acid); }

  /* ============ responsive ============ */

  @media (max-width: 900px) {
    .nav-links, .dots { display: none; }
    /* The wrapper hands its place in the row to the list, so hiding the list
       leaves no empty box collecting the bar's 16px gap. */
    .nav-wrap { display: contents; }

    /* On the band screens the pattern sits in a strip beside the reading
       column, and a phone has no room for that strip. The full-bleed screens
       are worse off: their clearing is cut in viewport units against a screen
       one viewport tall, and a phone section runs two or three times that, so
       the stripe crossed the heading and left the eyebrow unreadable on the
       field. Every screen takes a flat ground here. */
    #hero, #studio, #faq, #realizacje, #proces { background: var(--paper); }
    #uslugi, #dlakogo, #kontakt, #statement { background: var(--lav-deep); }
    .screen { height: auto; min-height: 100vh; overflow: visible; padding: 100px 0 60px; }
    .hero-foot { align-items: flex-start; }
    .svc { grid-template-columns: 50px 1fr; }
    .svc p { grid-column: 2; }
    .tiles { grid-template-columns: 1fr 1fr; }
    /* The desktop rules are attribute-scoped and the four-column one carries
       two attributes, so this has to out-specify both or the cards collapse to
       a fraction of their width. */
    /* the spine is horizontal by nature, so on a phone it becomes a plain
       stack: three stations to a row, and every description under its own */
    /* Three fixed columns became 71px each on a phone. The track count follows
       the room instead: three on a tablet, one on a handset. Row alignment
       across columns stops mattering once they stack, so the subgrid goes. */
    /* the spine is horizontal by nature, so on a phone it becomes a stack */
    .stations { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); row-gap: 26px; }
    .rail-line, .rail-fill { display: none; }
    .detail { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
    .rail-nav { justify-content: flex-start; }
    .fit { grid-template-columns: 1fr; }
    .fit-yes { border-right: none; }
    /* one column, so only the very first entry sits under the plate's edge */
    .qa { grid-template-columns: 1fr; gap: 0; padding: 4px 20px 12px; }
    .q-inner { padding-right: 30px; }
    .q:nth-child(2) { border-top: 1px solid var(--hair); }
    .studio-grid { grid-template-columns: 1fr; gap: 48px; }
    .contact .foot { position: static; margin-top: 60px; }

    /* A grid item's default minimum is its content, so two columns of cards
       measured wider than the screen and pushed the page sideways. */
    .station, .tile, .svc, .q, .fit-col { min-width: 0; }

    /* Four links in a row that never wrapped — the other half of that 71px. */
    .contact .foot .wrap { flex-wrap: wrap; gap: 14px 20px; }
    .contact .foot nav { flex-wrap: wrap; gap: 10px 20px; }

    /* Tracked uppercase mono breaks into three lines inside a narrow button. */
    .btn { padding: 14px 20px; font-size: 11.5px; letter-spacing: .1em; }
    header .btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
    /* the row is a flex item, so it shrinks to its content unless told otherwise */
    .hero .cta, .statement .cta, .contact .cta { display: grid; gap: 10px; width: 100%; }
    .hero-foot { width: 100%; }
    .hero .cta .btn, .statement .cta .btn, .contact .cta .btn { text-align: center; }

    /* 11px tracked mono is past the point of being readable on a phone. */
    .meta { font-size: 11.5px; }
    .num span, .station .lbl, .tile-info .meta, .proof li { font-size: 11.5px; }

    /* The menu the bar can no longer hold. */
    .burger { display: flex; }
    .nav { gap: 16px; }
    /* None of the three may be squashed to make the row fit: flex was
       scaling the mask down to 47px on the longest button, which reads as
       a smaller logo rather than as a fault. */
    .logo, .burger, header .btn { flex-shrink: 0; }
    .logo { width: 110px; height: 23px; }
    /* Ported from code21.io: the action stays in the bar and shrinks to fit,
       rather than being moved anywhere. Tracked uppercase mono breaks into
       three lines inside a narrow button, so the tracking gives way first. */
    .nav { gap: 16px; }
    header .btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
    /* The spacer sits on the logo rather than on the button, so the burger
       still lands on the right edge when the action is cleared away. */
    .logo { margin-right: auto; }
    /* The reset above sets margin-left for :hover too, and a state selector
       beats a plain class — so the button grew a 4px margin the moment the
       pointer arrived and shoved its neighbour aside. */
    .burger,
    .burger:hover,
    .burger:focus,
    .burger:active,
    .burger:focus-visible { margin-left: 0; }
    .wrap, .sec-zone .wrap { padding-left: 24px; padding-right: 24px; }

    /* the hero's pair of buttons stacks instead of running off the screen */
    .hero-foot .cta, .statement .cta, .contact .cta { display: grid; gap: 10px; }
    .hero-foot .cta .btn, .statement .cta .btn, .contact .cta .btn { text-align: center; }
    .hero-foot { flex-direction: column; align-items: stretch; }
    .hero-foot .sub { max-width: none; }

    /* a long project name and its metadata shared one row and overflowed it */
    .tile-info { flex-wrap: wrap; gap: 2px 10px; }
    .tile-info .name { min-width: 0; overflow-wrap: anywhere; }
    .tile-info .meta { flex-shrink: 1; }
    h1, h2, h3 { overflow-wrap: anywhere; }
    .proof { flex-wrap: wrap; gap: 6px 18px; }

    /* a thumb needs something to land on */
    .contact .foot nav { gap: 4px 18px; }
    .contact .foot nav a { display: inline-block; padding: 9px 0; }
    .contact .mail-big { display: inline-block; padding: 6px 0; }
    body.menu-open header .nav-links {
      display: flex; flex-direction: column; gap: 0;
      position: absolute; left: 0; right: 0; top: 100%;
      max-height: calc(100vh - 64px);
      margin: 0; padding: 4px 24px 12px;
      background: var(--paper); border-bottom: 1px solid var(--hair);
      overflow-y: auto;
    }
    body.menu-open header .nav-links li { width: 100%; }
    body.menu-open header .nav-links a {
      /* the padding runs to the panel edges so the whole row is the target,
         which is also what the highlight fills */
      display: block;
      margin: 0 -24px; padding: 22px 24px;
      font-size: 15px; letter-spacing: .1em; color: var(--ink);
      border-bottom: 1px solid var(--hair);
      transition: background .2s, color .2s;
    }
    /* :last-child on the link matches every one of them once each sits in its
       own <li> — the last row is the one to strip. */
    body.menu-open header .nav-links li:last-child a { border-bottom: 0; }
    body.menu-open header .nav-links a:hover,
    body.menu-open header .nav-links a:focus-visible,
    body.menu-open header .nav-links a:active {
      background: var(--lav-deep); color: var(--paper);
    }
    body.menu-open header .nav-links a:focus-visible { outline: none; }
  }
  @media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }

  @media (prefers-reduced-motion: reduce) {
    .line-mask > span { animation: none; transform: none; }
    .hero-foot { animation: none; opacity: 1; }
    .nav .btn .dot { animation: none; }
    .chip { animation: chipIn 0s forwards; }
    .rv { opacity: 1; transform: none; transition: none; }
  }

  /* Compaction for short viewports — last in the sheet so it wins on order. */
  @media (max-height: 980px) {
    .screen { padding: 76px 0 30px; }
    .slide-head { margin-bottom: 26px; }
    .slide-head h2 { font-size: clamp(28px, 3.5vw, 46px); }
    .slide-head .lead { margin-top: 12px; font-size: 17px; }
    .hero h1 { font-size: clamp(42px, 6.9vw, 96px); }
    .hero .meta { margin-bottom: 18px; }
    .hero-foot { margin-top: 26px; }
    .hero-foot .sub { font-size: 16px; }
    .svc { padding: 18px 24px; gap: 28px; }
    .svc h3 { font-size: clamp(21px, 2.3vw, 29px); }
    .svc p { font-size: 16px; }
    .tiles { gap: 14px; margin-top: 72px; }
    #realizacje { padding-top: 140px; }
    .tile-vis { aspect-ratio: 16 / 7.5; }
    .btn { padding: 13px 26px; }
  }
  @media (max-height: 800px) {
    .screen { padding: 70px 0 24px; }
    .slide-head { margin-bottom: 18px; }
    .slide-head h2 { font-size: clamp(24px, 3.0vw, 38px); }
    .slide-head .lead { margin-top: 10px; font-size: 14px; }
    .hero h1 { font-size: clamp(38px, 6.6vw, 84px); }
    .hero .meta { margin-bottom: 14px; }
    .hero-foot { margin-top: 20px; }
    .hero-foot .sub { font-size: 14px; }
    .svc { padding: 11px 24px; gap: 26px; }
    .svc h3 { font-size: clamp(18px, 1.9vw, 25px); }
    .svc p { font-size: 15px; max-width: none; }
    .hero-foot { margin-top: 16px; }
    .tiles { gap: 12px; margin-top: 60px; }
    #realizacje { padding-top: 112px; }
    .tile-vis { aspect-ratio: 16 / 7; }
    .btn { padding: 12px 24px; }
  }

  /* ============ Contact Form 7 ============ */
  /* CF7 brings its own wrapper and form element; they take the same dress as
     the mockup's form so there is one set of rules, not two. */
  .contact .wpcf7 { display: block; }
  .contact .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
  .contact .wpcf7-spinner { display: none; }
  .contact .wpcf7 input[type="submit"] { cursor: pointer; border: 0; }
  .contact .wpcf7-not-valid-tip {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    color: var(--acid); margin-top: 6px;
  }
  .contact .wpcf7-response-output {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
    color: var(--paper); border: 1px solid var(--hair-l);
    padding: 12px 14px; margin: 16px 0 0;
  }
  .contact .wpcf7 form.invalid .wpcf7-response-output,
  .contact .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--acid); }

  /* The plugin's scaffolding, kept out of the layout whatever happens to its
     own stylesheet: a fieldset draws a browser border by default, and a loose
     spinner would take a slot of its own. */
  .contact .wpcf7-form .hidden-fields-container,
  .contact .wpcf7-form > .wpcf7-spinner { display: none; }
  .contact .wpcf7-form.submitting > .wpcf7-spinner { display: inline-block; }
  /* The response box only when it has something to say — naming the states
     that should show it means a state nobody anticipated stays silent. */
  .contact .wpcf7-form .wpcf7-response-output:empty { display: none; }

  /* The sister site's bar holds a two-word label; ours reads "Skontaktuj się
     z nami" and stayed 195px wide even at 10.5px, which put the burger 42px
     past the screen. Below 560px the label is allowed to break instead. */
  @media (max-width: 560px) {
    .nav { gap: 12px; padding: 0 20px; }
    /* 100px of top padding plus centring left a hole under the bar on a phone */
    /* Room under the bar, and no screenful of padding below the fold: a
       section that ends where its content ends reads better on a phone than
       one stretched to 100vh with the slack dumped at the bottom. */
    .screen { min-height: 0; padding: 104px 0 64px; }
    #hero { justify-content: flex-start; }
    #kontakt { padding-bottom: 0; }

    /* 11.5px tracked uppercase mono is past the point of being read */
    .meta, .proof li, .num span, .station .lbl, .tile-info .meta,
    .contact .foot .meta { font-size: 12.5px; letter-spacing: .12em; }
    .slide-head { margin-bottom: 22px; }
    .slide-head .lead, .hero-foot .sub { font-size: 16.5px; line-height: 1.55; }
    .hero h1 { font-size: clamp(34px, 11.2vw, 46px); }
    .slide-head h2 { font-size: clamp(26px, 8.4vw, 36px); }
    .proof { margin-top: 26px; padding-top: 18px; }
    .logo { width: 96px; height: 20px; }
    header .btn {
      white-space: normal; text-align: center;
      max-width: 132px; padding: 8px 12px; line-height: 1.25;
      letter-spacing: .06em; font-size: 10px;
    }
    header .btn .dot { margin-right: 6px; }
    .wrap, .sec-zone .wrap { padding-left: 20px; padding-right: 20px; }
  }

  /* ============ the client's path on a phone ============ */
  /* Two columns of dots with the rail hidden read as a grid of orphaned marks,
     and only one description showed at a time behind a pair of arrows. Here
     each step is a row on its own grey ground: the order is unmistakable, and
     the text has somewhere to sit.

     The description is the first child in the markup — it travels as rendered
     HTML for the desktop rail — so the flex order is set explicitly rather
     than left to the DOM, which had it printing above its own heading. */
  @media (max-width: 620px) {
    .rail { padding-left: 0; }
    .rail-line, .rail-fill { display: none; }
    .stations { grid-template-columns: 1fr; row-gap: 14px; }

    /* The button reset above declares `border: 0` for :hover, :focus and
       :active as well, and those beat a plain .station — so the marker
       vanished the moment the pointer arrived and the text jumped 3px left.
       Every state carries the row's own border and ground. */
    .station,
    .station:hover,
    .station:focus,
    .station:active {
      background: var(--card);
      border: 0;
      border-left: 3px solid var(--lav-deep);
      padding: 18px 18px 20px;
      gap: 0;
    }
    .station .dot { display: none; }
    .station .lbl {
      order: 1; margin-top: 0; min-height: 0; padding-right: 0;
      color: var(--lav-deep);
    }
    .station .ttl {
      order: 2; margin-top: 9px; padding-right: 0;
      font-size: 19px; color: var(--ink);
    }
    /* the text rides with its own step instead of waiting behind a click */
    .station .station-body[hidden] { display: block; order: 3; margin-top: 10px; }
    .station .station-body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-60); }

    /* A finger has no hover, and on a touch screen the state sticks after a
       tap — the row would stay lit until something else was pressed. The only
       feedback here is the press itself: the grey goes one step darker. */
    .station { transition: background .18s; -webkit-tap-highlight-color: transparent; }
    .station:hover { background: #e3e3e9; }
    .station:active { background: #d7d7df; }
    /* nothing else on press: no frame, no lift, no shadow */
    .station:focus { outline: none; }
    .station:hover .lbl, .station:hover .ttl { color: inherit; }
    .station:hover .lbl { color: var(--lav-deep); }
    .station:hover .ttl { color: var(--ink); }

    /* the single description and its arrows have nothing left to do */
    .detail .body, .rail-nav { display: none; }
    .detail { border-top: 0; padding-top: 0; margin-top: 18px; }
  }