/* =====================================================================
   Vias Media v2 "Bauplan" — homepage
   hero (F, cranes) · projects (record sleeves) · why · how I work
   (horizontal scene + masked word) · services · pricing

   Flow: blocks are opaque sheets. The hero stays pinned while the next
   sheet slides over it; everything after it scrolls normally (the FAQ
   holds at its end while the footer covers it, components.css).
   ===================================================================== */

/* =====================================================================
   HERO — one full screen, laid out as an F: two bars of title across the
   top, the note as the stem on the left, the action in the bottom right.
   It stays pinned while the projects slide over it.
   ===================================================================== */
.hero {
  position: relative;
  z-index: 0;
  display: flex;
  min-height: calc(var(--vh, 1vh) * 100);
  padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  overflow: hidden;          /* the title lines drive apart sideways on scroll */
  overflow: clip;
}
@media (min-height: 36.0625rem) {
  .hero { position: sticky; top: 0; }
}
.hero__wrap {
  position: relative;
  z-index: 1;                /* above the cranes */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  row-gap: clamp(1.25rem, calc(var(--vh, 1vh) * 3.4), 2.5rem);
  padding-top: clamp(0.5rem, calc(var(--vh, 1vh) * 1.6), 1.5rem);
  padding-bottom: calc(clamp(1.25rem, calc(var(--vh, 1vh) * 3.4), 2.5rem) + env(safe-area-inset-bottom, 0px));
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  letter-spacing: 0.005em;
  line-height: 0.8;
  max-width: 8.4em;          /* phones and tablets: always four lines */
  text-wrap: balance;        /* no one-word lines; the splitter measures the balanced breaks */
}
/* --drive (px) is set by main.js while the next sheet covers the hero; odd
   and even lines travel in opposite directions */
.hero__title .ln { transform: translate3d(calc(var(--drive, 0) * var(--dir, 1) * 1px), 0, 0); }
.hero__title .ln > span { display: inline-block; }   /* so a line can be measured and fitted */

.hero__lead {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 30rem;
  text-wrap: pretty;
}
.hero__lead .em { color: var(--ink); font-weight: 600; }
.hero__actions {
  align-self: end;
  justify-self: end;         /* the F ends in the bottom right corner */
}
@media (min-width: 62.5rem) {
  /* two bars: line 1 runs the full width (fitted by main.js), line 2 is shorter */
  .hero__title { max-width: none; }
  .hero__lead { font-size: 0.875rem; line-height: 1.5; max-width: 26rem; }
}

/* the flock flies through the open band between the note and the action.
   --w is the nearest bird's width; --top / --rest place them without the script */
.hero .flock { --band-a: 0.46; --band-b: 0.72; }
.crane--1 { --top: 57%; --w: clamp(10rem, 19vw, 21rem); --o: 0.5; --rest: 56vw; }
.crane--2 { --top: 48%; --w: clamp(7rem, 13.5vw, 15rem); --o: 0.36; --rest: 40vw; }
.crane--3 { --top: 67%; --w: clamp(5.75rem, 10.5vw, 11.5rem); --o: 0.26; --rest: 30vw; }
@media (max-width: 47.9375rem) {
  /* phones: the title and the note fill the top; the cranes take the lower third */
  .hero .flock { --band-a: 0.64; --band-b: 0.82; }
  .crane--1 { --top: 72%; --w: 11rem; }
  .crane--2 { --top: 66%; --w: 8rem; }
  .crane--3 { --top: 79%; --w: 6.5rem; }
}

/* first-load order: lines rise, then the note, then the action */
.hero__lead-cover { --i: 4; }
.hero__actions { --i: 6; }
/* phones and touch screens: the action does not wait for the title face or the
   stagger (it came last, about two seconds in); main.js shows it at once */
.js .hero__actions.is-quick.is-in { transition-duration: 0.45s; transition-delay: 0.05s; }

/* the hero's action, docked in the bottom right corner as a calendar once
   the hero has been scrolled through (owner, 2026-10-15: "only appear when I
   have scrolled through the hero", "just make it a calendar icon"); it leaves
   when the footer (with its own call) comes up. A ground square keeps it
   readable over whatever scrolls beneath; the gold fill of the hover and
   press fills the whole square and the icon turns dark on it */
.dock {
  position: fixed;
  right: var(--margin);
  bottom: calc(clamp(1.25rem, calc(var(--vh, 1vh) * 3.4), 2.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 45;               /* above the fog band, under the header, menu and dialogs */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity 0.25s ease, transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.dock.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dock__btn.cta {
  justify-content: center;
  width: calc(var(--ctl-h) + 0.25rem);
  height: calc(var(--ctl-h) + 0.25rem);
  margin-inline: 0;
  padding: 0;
  background: var(--ground);
  border: 1px solid var(--line);
}
.dock__btn.cta::before { inset: -1px; }
.dock__btn svg { width: 1.375rem; height: 1.375rem; }
@media (prefers-reduced-motion: reduce) {
  .dock { transform: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
}

/* =====================================================================
   PROJECTS — sleeves on a wall, at every width. The sleeves lean against
   the wall, turned away and overlapping; the pulled one turns to face you
   and rises, the ones after it step aside, and its story stands beside
   the wall (laptops: in the panel on the left; phones and tablets: under
   the wall). Laptops with a mouse pull by the pointer's x over the wall
   (main.js), so the pull answers at once; a tap (or a sideways swipe on
   touch screens) pulls the next one. Sleeves are square covers: the
   screenshot whole at its own ratio, the name under it.
     --strip  the share of a leaning sleeve that shows before the next one
     --lean   how far a leaning sleeve is turned
     --step   how far the sleeves after the pulled one step aside
   ===================================================================== */
.crate-head__main { display: grid; gap: var(--block-gap); justify-items: start; }
@media (min-width: 48rem) {
  .crate-head__main { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.crate {
  /* phones and tablets: the wall is 1.8 sleeves wide at most (a pulled one,
     three strips and the turned edge of the last), so it fits the column */
  --S: min(calc((100vw - 2 * var(--margin) - 0.75rem) / 1.8), 19rem);
  --strip: 0.2;
  --lean: 68deg;
  --step: calc(var(--S) * (1 - var(--strip)) + 0.75rem);
  position: relative;                    /* the containing block of the stories and the hidden labels (.vh) */
  display: flex;
  margin-top: var(--head-gap);
  padding: calc(var(--S) * 0.1) 0 calc(var(--info-h, 17rem) + var(--S) * 0.16);
  touch-action: pan-y;                   /* a sideways swipe pulls the next sleeve, the page still scrolls */
}
.rec {
  flex: none;
  width: var(--S);
  margin-right: calc(var(--S) * (var(--strip) - 1));
}
.rec:last-child { margin-right: 0; }
.rec.is-on { z-index: 5; }
.rec__sleeve {
  position: relative;
  display: block;
  width: var(--S);
  aspect-ratio: 1;
  transform-origin: 0 50%;
  transform: perspective(1500px) translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotateY(var(--ry, var(--lean)));
  transition: transform 0.45s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.rec.is-on .rec__sleeve { --ry: 0deg; --sy: calc(var(--S) * -0.07); }
.rec.is-on ~ .rec .rec__sleeve { --sx: var(--step); }
.rec__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  background: var(--ground-2);
  container-type: inline-size;
}
/* sleeves that are not pulled sit in the wall's shade (a layer's opacity, no filter) */
.rec__cover::after { content: ""; position: absolute; inset: -1px; background: var(--ground); opacity: 0.38; transition: opacity 0.3s ease; pointer-events: none; }
.rec.is-on .rec__cover::after { opacity: 0; }
.rec__shot { display: block; border: 1px solid var(--line-soft); background: var(--ground); }
.rec__shot img { width: 100%; height: auto; }
.rec__no { margin-top: auto; color: var(--ink-3); }
.rec__name { font-size: 15cqi; line-height: 0.86; overflow-wrap: break-word; }
/* the story of the pulled sleeve. Hidden ones stay focusable: a keyboard
   focus pulls their sleeve first. Phones and tablets: under the wall */
.rec__info {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--S) * 1.24);
  display: grid;
  gap: 0.625rem;
  justify-items: start;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.4s var(--ease-out);
}
.rec.is-on .rec__info { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.05s; }
.rec__count,
.rec__tags { color: var(--ink-2); }
.rec__title { font-size: var(--fs-d2); line-height: 0.9; }
.rec__desc p { color: var(--ink-2); font-size: 0.9375rem; max-width: 30rem; text-wrap: pretty; }
.rec__btn { margin-top: 0.25rem; }
.rec__sleeve:active .rec__cover { border-color: var(--ink); }

@media (min-width: 62.5rem) {
  /* laptops: a wider wall, the story in the panel on the left */
  .crate {
    --S: clamp(13rem, 21.5vw, 26rem);
    --strip: 0.46;
    --lean: 46deg;
    --step: calc(var(--S) * 0.58);
    --panel: max(17rem, calc(2 * var(--pitch) - var(--gutter)));
    min-height: max(calc(var(--S) * 1.16), calc(var(--S) * 0.03 + var(--info-h, 0px)));   /* a long story on a narrow laptop */
    padding: calc(var(--S) * 0.1) 0 0 calc(var(--panel) + 2 * var(--gutter));
  }
  .rec__info {
    right: auto;
    top: calc(var(--S) * 0.03);
    width: var(--panel);
    gap: 0.75rem;
  }
  .rec__title { font-size: clamp(2.5rem, 1rem + 2.8vw, 4.5rem); line-height: 0.86; }
  .rec__desc p { font-size: 0.875rem; }
  .rec__btn { margin-top: 0.75rem; }
}
/* entrance: the sleeves swing in from flat against the wall, one after another */
.js .crate:not(.is-in) .rec__sleeve { --ry: 84deg; opacity: 0; }
.js .crate .rec__sleeve { transition: transform 0.45s var(--ease-out), opacity 0.4s ease; }
.js .crate:not(.is-settled) .rec__sleeve { transition-duration: 0.8s, 0.5s; }
.js .crate.is-in .rec__sleeve { transition-delay: calc(var(--k, 0) * 90ms), calc(var(--k, 0) * 90ms); }
.js .crate.is-in.is-settled .rec__sleeve { transition-delay: 0s; }
.rv-fallback .crate .rec__sleeve { opacity: 1 !important; }

/* =====================================================================
   WHY — a statement that fills with ink, then three reasons
   ===================================================================== */
.why { row-gap: var(--head-gap); }
.statement {
  font-size: clamp(2.5rem, 1.2rem + 5.8vw, 7rem);
  line-height: 0.9;
  text-wrap: balance;
}
.why__lead { grid-column: 1 / -1; }
.why__rows { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .statement { text-indent: var(--pitch); }
  .why__lead { grid-column: 3 / span 4; }
  .why__rows .row__n { grid-column: 1 / span 2; }
  .why__rows .row__t { grid-column: 3 / span 3; }
  .why__rows .row__d { grid-column: 6 / -1; }
}

/* =====================================================================
   HOW I WORK — default: a ruled list. With JS and motion (.is-scene):
   the section pins and seven panels pan sideways. The next section's name
   is the last thing in that row (an SVG clip path of the letters' outlines
   with a photograph showing through). When the row has been scrolled to
   its end, the word grows from its place into its letter I until the
   photograph is the whole screen; its lower edge fades to the page ground,
   where Services begins.
   ===================================================================== */
.hs { position: relative; z-index: 1; padding-bottom: var(--section); background: var(--ground); }
.features__head { display: grid; gap: var(--block-gap); }
.hs__viewport { padding-inline: var(--margin); margin-top: var(--head-gap); }
.hs__track { border-top: 1px solid var(--line); }
.hs__panel {
  display: grid;
  gap: 0.5rem;
  padding-block: var(--row-pad);
  border-bottom: 1px solid var(--line);
}
.hs__n { color: var(--ink-3); }
.hs__d p { color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.hs__mask,
.hs__wordcell { display: none; }
@media (min-width: 48rem) {
  .hs:not(.is-scene) .hs__viewport { padding-left: calc(var(--margin) + 2 * var(--pitch)); }
  .hs:not(.is-scene) .hs__panel { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: baseline; }
  .hs:not(.is-scene) .hs__n { grid-column: 1 / -1; }
}

.hs.is-scene {
  --bleed: 0px;
  padding-block: 0;          /* main.js sets the height from the track's length */
}
/* iOS: the frozen --vh is the height with the toolbar showing; when the toolbar
   slides away the screen grows, and the stage reaches further down */
@media (hover: none), (pointer: coarse) {
  .hs.is-scene { --bleed: 7rem; }
}
.is-scene .hs__stage {
  position: sticky;
  top: 0;
  height: calc(var(--vh, 1vh) * 100 + var(--bleed));
  overflow: hidden;
  overflow: clip;
}
.is-scene .hs__inner {
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--hdr-h) + clamp(0.75rem, calc(var(--vh, 1vh) * 3), 2rem));
}
.is-scene .hs__head { flex: none; row-gap: 0.75rem; }
.is-scene .hs__head .s__label { margin-bottom: 0; }
.is-scene .hs__head .lead { font-size: 0.9375rem; }
.is-scene .hs__viewport {
  flex: 1;
  min-height: 0;
  padding: 0;
  margin-top: clamp(1rem, calc(var(--vh, 1vh) * 3.5), 2.5rem);
}
.is-scene .hs__track {
  display: flex;
  width: max-content;
  height: 100%;
  padding-left: var(--margin);
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.is-scene .hs__panel {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(78vw, 24rem);
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1rem;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}
.is-scene .hs__panel:last-child { border-right: 1px solid var(--line); }
.is-scene .hs__t h3 {
  font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.is-scene .hs__d { margin-top: auto; }
.is-scene .hs__d p { font-size: 0.9375rem; }

/* the last cell of the row is empty and one screen wide (main.js sets the width):
   the word is drawn over it, in an SVG that covers the stage, and pans with the row */
.is-scene .hs__wordcell { display: block; flex: none; width: 100vw; border-left: 1px solid var(--line); }
.is-scene .hs__mask {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hs__svg { display: block; width: 100%; height: 100%; }
.hs__mask-fade {
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to bottom, rgba(20, 19, 18, 0), var(--ground) 82%);
  opacity: 0;
}
@media (max-height: 40rem) and (max-width: 47.9375rem) {
  /* short phones: the panels need the room */
  .is-scene .hs__head .lead { display: none; }
}
@media (min-width: 62.5rem) {
  /* label and note share the first columns; the title runs beside them */
  .is-scene .features__head { display: contents; }
  .is-scene .features__head > :nth-child(1) { grid-column: 3 / -1; grid-row: 1 / span 2; }
  .is-scene .features__head > :nth-child(2) { grid-column: 1 / span 2; grid-row: 2; align-self: start; }
  .is-scene .hs__head .s__label { grid-column: 1 / span 2; grid-row: 1; }
  .is-scene .hs__head { grid-template-rows: auto 1fr; }
  .is-scene .hs__head .lead { font-size: 0.875rem; }
  .is-scene .hs__track { padding-left: calc(var(--margin) + 2 * var(--pitch)); }
  .is-scene .hs__panel { width: clamp(21rem, 30vw, 28rem); padding: 1.25rem 1.75rem 1.75rem 1.25rem; }
  .is-scene .hs__d p { font-size: 1rem; }
}
/* layers are promoted only while the scene is near the screen (.is-near, set
   by main.js); a permanent will-change made every frame's bookkeeping heavier */
.is-near .hs__track { will-change: transform; }

/* =====================================================================
   SERVICES — big ruled links. On hover (fine pointers, wide screens) a
   drawing for the service slides in on the left.
   ===================================================================== */
/* the photograph before it already filled a whole screen: start sooner */
.hs.is-scene + .services-sec { padding-top: calc(var(--section) * 0.35); }
.services { row-gap: var(--head-gap); }
.services__head { display: grid; gap: var(--block-gap); justify-items: start; }
/* these rows are links and invert on hover, so they run edge to edge */
.services__rows { position: relative; grid-column: 1 / -1; margin-inline: calc(var(--margin) * -1); }
.services__rows .row {
  padding-inline: var(--margin);
  align-items: center;
}
.services__rows .row__n { grid-column: 1 / span 3; grid-row: 1; }
.services__rows .row__t { font-size: var(--fs-d2); line-height: 0.92; overflow-wrap: break-word; }
@media (min-width: 48rem) {
  /* tablet: number in the label columns, title and text stacked from column 3 */
  .services__rows .row__n { grid-column: 1 / span 2; }
  .services__rows .row__t { grid-column: 3 / -2; grid-row: 1; }
  .services__rows .row__d { grid-column: 3 / -2; grid-row: 2; }
  .services__rows .row__go { grid-column: -2 / -1; }
}
@media (min-width: 62.5rem) {
  .services__rows .row__t { grid-column: 3 / span 4; }
  .services__rows .row__d { grid-column: 7 / -1; grid-row: 1; padding-right: 2.5rem; }
}

.svc-pre { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 62.5rem) {
  /* a plate in the hovered row's colour, taller than the row, so the two read
     as one shape. It only ever changes transform and opacity. */
  .svc-pre {
    display: block;
    position: absolute;
    z-index: 3;
    left: calc(var(--margin) + 4.25rem);
    top: 0;
    width: calc(2 * var(--pitch) - var(--gutter) - 4.25rem);
    aspect-ratio: 4 / 3;
    background: var(--ink);
    color: var(--ground);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-0.75rem, var(--py, 0px), 0);
    transition: opacity 0.18s ease, transform 0.5s var(--ease-out);
  }
  .svc-pre.is-on { opacity: 1; transform: translate3d(0, var(--py, 0px), 0); }
  .svc-pre__fig {
    position: absolute;
    inset: 9%;
    width: 82%;
    height: 82%;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .svc-pre__fig.is-on { opacity: 1; }
  .svc-pre .a { fill: var(--accent); }
  .svc-pre .as { stroke: var(--accent); }
  .svc-pre .f { fill: currentColor; }
  .svc-pre text { font-family: var(--font-sans); }
}

/* =====================================================================
   PRICING — scrolls like any section (no overlap with Services, owner
   2026-10-14), but its photograph is fixed to the screen: the section
   moves over a picture that stays where it is (owner: "fixed as a
   background … keeping the same position visually"). The picture is cut
   to the section's box by clip-path on its wrapper, which clips fixed
   children (background-attachment: fixed does not work on iOS). The file
   is toned down so ink-coloured text keeps 4.6:1 on its brightest band
   (hills-1056.webp: 49 % brightness, 4.8:1 at the sun, measured 2026-10-15):
   text on the picture is --ink, not --ink-2.
   ===================================================================== */
.pricing__bg { position: absolute; inset: 0; clip-path: inset(0); }
.pricing__img {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 + 7rem);     /* covers the screen when a phone's toolbar slides away */
  object-fit: cover;
  object-position: 50% 30%;    /* landscape screens: the sun and the hills */
}
/* the picture's top and bottom edges melt into the page ground */
.pricing__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ground), rgba(20, 19, 18, 0) 14rem),
    linear-gradient(to top, var(--ground), rgba(20, 19, 18, 0) 14rem);
}
.pricing { position: relative; row-gap: var(--head-gap); }
.pricing .tag,
.pricing .lead { color: var(--ink); }
.pricing__head { display: grid; gap: var(--block-gap); }
.pricing__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;             /* a joint, not a gutter */
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
  background: rgba(29, 27, 25, 0.84);   /* the photograph glows through a little */
}
/* the duration sits above the name, so long names never collide with it */
.pcard__top {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.625rem;
}
.pcard__top h3 { font-size: clamp(2.25rem, 1.7rem + 1.5vw, 3.25rem); overflow-wrap: break-word; }
.pcard__time { color: var(--ink-2); white-space: nowrap; }
.pcard__time::before { content: "[\00a0"; content: "[\00a0" / ""; }
.pcard__time::after { content: "\00a0]"; content: "\00a0]" / ""; }
.pcard__list li {
  padding-block: 0.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.pcard__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.pcard__price {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.75rem);
  line-height: 0.92;
}
/* the plan: setup line above the monthly figure, the pair takes the push to the bottom */
.pcard__setup {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--ink-2);
}
.pcard__setup + .pcard__price {
  margin-top: -0.75rem;
  padding-top: 0;
}
.pcard__per {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink-2);
}
.pcard .btn { width: 100%; }
/* the one action that costs nothing is the one in colour */
.pcard--free { background: var(--accent); color: var(--on-accent); }
.pcard--free .pcard__time,
.pcard--free .pcard__list li { color: var(--on-accent); }
.pcard--free .pcard__list li { border-color: rgba(22, 21, 20, 0.28); }
.pcard--free .btn { background: #161514; border-color: #161514; color: #F3EFE8; }
@media (hover: hover) {
  .pcard--free .btn:hover { background: transparent; border-color: #161514; color: #161514; }
}
.pcard--free .btn:active { background: transparent; border-color: #161514; color: #161514; }
@media (min-width: 37.5625rem) {
  .pricing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .pricing__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* reduced motion: nothing is pinned or layered; every block is plain flow */
@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; top: auto; }
  .pricing__img { position: absolute; height: 100%; }
  .rec__sleeve,
  .rec__info { transition: none !important; }
}