/* Grumpy's Automotive Concierge Service, v2: the brand of Rich's business card.
   Direction: the well-kept board. The page is one board of filled tiles with 8px gaps, like the card
   and the things around it on Rich's desk. Charcoal, silver and gold; GRUMPY'S in Montserrat, everything
   else in Roboto Condensed, as printed on the card. */

:root {
  --bg: #1E2024;
  --tile: #26292E;
  --tile-2: #2E3137;
  --deep: #141518;
  --row-a: #17181B;
  --row-b: #1C1E22;
  --ink: #E8E6E1;
  --muted: #B9BCC2;
  --gold: #D69A2D;
  --gold-2: #E2B25B;
  --gold-3: #EFCF92;
  --on-gold: #1E2024;

  --display: Montserrat, "Arial Black", sans-serif;
  --cond: "Roboto Condensed", "Arial Narrow", sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-note: 1rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-stmt: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  --step-head: clamp(2.25rem, 1.2rem + 3vw, 4.25rem);
  --step-slogan: clamp(2.75rem, 0.4rem + 6.4vw, 5.5rem);
  --step-name: clamp(3.25rem, 1rem + 5.6vw, 6rem);

  --edge: 8px;
  --gap: 8px;
  --radius: 8px;
  --pad: 20px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --pad: 24px; } }
@media (min-width: 1100px) { :root { --edge: 12px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--cond); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 12px; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
.head { font-family: var(--cond); font-size: var(--step-head); line-height: 0.95; letter-spacing: 0.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -200px; z-index: 50; background: var(--gold); color: var(--on-gold); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; transition: text-decoration-color 180ms ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--radius);
  background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: var(--step-body); text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.button:active { transform: scale(0.97); }
.button--dark { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--gold-2); }
  .button--dark:hover { background: var(--deep); }
}

/* ---------- the board ---------- */
.board { padding: var(--edge); display: grid; gap: var(--gap); }
.board > * { min-width: 0; }
.tile { position: relative; background: var(--tile); border-radius: var(--radius); overflow: hidden; padding: var(--pad); }
.t-pic { padding: 0; }
.t-pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- first screen ---------- */
.first { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-name { grid-column: 1 / -1; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.name { font-weight: 400; }
.name__word { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step-name); line-height: 0.92; letter-spacing: 0.02em; }
.name__sub { display: block; margin-top: 0.7em; font-size: var(--step-note); line-height: 1.2; letter-spacing: 0.07em; color: var(--gold); }
.name__emblem { position: absolute; right: var(--pad); bottom: var(--pad); height: 48%; width: auto; }
.name__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step-note); max-width: 58%; position: relative; }
.t-statement { grid-column: 1 / -1; }
.statement { font-size: var(--step-stmt); line-height: 1.16; max-width: 40ch; }
.t-action { grid-column: 1 / -1; order: 1; background: var(--gold); color: var(--on-gold); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.t-action__line { font-size: var(--step-lead); font-weight: 700; line-height: 1.15; }
.t-action__phone { font-size: var(--step-note); font-weight: 700; }
.t-action .button { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .t-action .button:hover { background: var(--deep); } }
.t-card { grid-column: 1 / -1; order: 2; aspect-ratio: 1 / 0.92; padding: 0; background: var(--tile-2); }
.t-rich { grid-column: 1 / -1; order: 3; aspect-ratio: 3 / 2; }
.t-rich img { object-position: 55% 28%; }
.t-patent, .t-key { aspect-ratio: 3 / 4; order: 4; }
.t-patent { background: #e9e2d0; }
.t-patent img { object-position: 50% 44%; }

/* the card */
.card3d { touch-action: pan-y; }
.card3d__img { position: absolute; left: 12%; top: 18%; width: 76%; height: auto; rotate: -4deg; transition: opacity 400ms ease; }
.card3d__gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.card3d__gl:active { cursor: grabbing; }
.card3d.is-3d .card3d__img, .card3d.is-waiting .card3d__img { opacity: 0; }
.card3d__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; z-index: 2; font-size: var(--step-note); }
.card3d__turn { min-height: 44px; padding: 0 18px; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-weight: 700; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.card3d__turn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .card3d__turn:hover { background: #fff; } }
.card3d__save { font-weight: 700; }

/* ---------- intro: the card's tagline, his years, his words ---------- */
.intro { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-slogan { grid-column: 1 / -1; min-height: 46svh; background: var(--deep); display: flex; align-items: flex-end; }
.slogan { font-size: var(--step-slogan); line-height: 0.88; letter-spacing: 0.005em; }
.i-years { background: var(--ink); color: var(--bg); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; }
.i-years__label { font-size: var(--step-note); font-weight: 700; max-width: 14ch; line-height: 1.25; }
.i-years__figure { font-family: var(--cond); font-weight: 700; font-size: var(--step-slogan); line-height: 0.8; }
.i-film { aspect-ratio: 1; padding: 0; }
.i-film video { width: 100%; height: 100%; object-fit: cover; }
.i-words { grid-column: 1 / -1; background: transparent; padding: 28px var(--pad) 64px; }
.i-words p { font-size: var(--step-lead); line-height: 1.38; max-width: 40ch; }
.i-words .i-words__sign { margin-top: 18px; font-size: var(--step-note); color: var(--gold); font-weight: 700; }

/* ---------- services: a pale cell beside five dark rows ---------- */
.services { display: grid; gap: var(--gap); }
.s-cell { background: var(--ink); color: var(--bg); min-height: 70svh; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.s-cell__title span { display: block; }
.s-cell__title span:last-child { text-align: right; }
.s-cell__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.s-cell__foot p { max-width: 30ch; }
.s-rows { border-radius: var(--radius); overflow: hidden; display: grid; }
.s-row { background: var(--row-a); padding: 28px var(--pad); display: grid; gap: 10px; }
.s-row:nth-child(even) { background: var(--row-b); }
.s-row h3 { font-size: var(--step-lead); line-height: 1.1; }
.s-terms { color: var(--muted); font-size: var(--step-note); }
.s-terms li { display: inline; }
.s-terms li:not(:last-child)::after { content: ", "; }

/* ---------- how it works: the quote grows at every stage ---------- */
.how { position: relative; padding-top: 72px; }
.how__title { padding: 0 var(--pad) 28px; }
.stages { display: grid; gap: 28px; }
.stage__pic { display: grid; place-items: center; padding: 0; }
.stage--1 .stage__pic { height: 34vw; background: var(--ink); }
.stage--2 .stage__pic { height: 46vw; background: var(--muted); }
.stage--3 .stage__pic { height: 58vw; background: var(--gold); }
.stage--4 .stage__pic { height: 66vw; }
.stage__pic img { height: 84%; width: auto; }
.stage--1 .stage__pic img { mix-blend-mode: multiply; }
.stage--4 .stage__pic img { width: 100%; height: 100%; object-fit: cover; }
.stage__3d .sheet__gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.stage__3d.is-3d .stage__img { opacity: 0; }
.stage h3 { margin-top: 14px; padding-left: var(--pad); font-size: var(--step-lead); line-height: 1.15; }
.stage p { margin-top: 4px; padding: 0 var(--pad); color: var(--muted); font-size: var(--step-note); max-width: 36ch; }

/* ---------- plans: one large table ---------- */
.plans__frame { padding: 0; background: var(--tile); }
.price { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step-body); }
.price th, .price td { text-align: left; vertical-align: top; padding: 16px var(--pad); }
.price thead th { vertical-align: bottom; padding-top: 28px; padding-bottom: 24px; }
.price__corner { vertical-align: top !important; }
.price__corner .head { font-size: clamp(1.75rem, 0.8rem + 2.6vw, 3.5rem); }
.price__name { display: block; font-size: var(--step-lead); font-weight: 700; line-height: 1.1; }
.price__amt { display: block; margin-top: 8px; font-size: var(--step-stmt); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.price__per { display: block; margin-top: 4px; font-size: var(--step-note); font-weight: 400; }
.price tbody th { font-weight: 400; color: var(--muted); }
.price tbody tr:nth-child(odd) > * { background: var(--tile-2); }
.price .is-pick { background: var(--gold) !important; color: var(--on-gold); }
.price__go td, .price__go th { padding-top: 20px; padding-bottom: 40px; background: transparent; }
.price .is-pick .button--dark { background: var(--bg); }
.price td:not(.is-pick) .button--dark { background: var(--gold); color: var(--on-gold); }
@media (hover: hover) and (pointer: fine) { .price td:not(.is-pick) .button--dark:hover { background: var(--gold-2); } }

/* on a phone the table regroups by plan: each plan's name and price, then its answers with their labels */
@media (max-width: 767px) {
  .plans__frame { display: grid; background: transparent; padding: 0; gap: 0; }
  .price, .price thead, .price tbody, .price tr { display: contents; }
  .price th, .price td { display: block; padding: 12px var(--pad); background: var(--tile); }
  .price tbody th { display: none; }
  .price__corner { order: 0; border-radius: var(--radius); }
  .price thead th:nth-child(2) { order: 10; } .price td:nth-child(2) { order: 11; }
  .price thead th:nth-child(3) { order: 20; } .price td:nth-child(3) { order: 21; }
  .price thead th:nth-child(4) { order: 30; } .price td:nth-child(4) { order: 31; }
  .price thead th:not(.price__corner) { margin-top: var(--gap); border-radius: var(--radius) var(--radius) 0 0; padding-top: 24px; }
  .price__go td { border-radius: 0 0 var(--radius) var(--radius); padding-bottom: 24px; }
  .price tbody tr:nth-child(odd) > * { background: var(--tile); }
  .price .price__amt { font-size: var(--step-head); }
  .price td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--step-note); }
  .price .is-pick[data-label]::before { color: var(--on-gold); opacity: 0.8; }
  .price__go .button { width: 100%; }
}

/* ---------- affiliated shops: one picture, an active list ---------- */
.partners { display: grid; gap: var(--gap); }
.partners__pic { padding: 0; aspect-ratio: 4 / 3; }
.partners__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease; }
.partners__pic img.is-on { opacity: 1; }
.partners__list { background: var(--tile); border-radius: var(--radius); padding: 72px var(--pad) 28px; }
.partners__title { font-size: var(--step-head); }
.partners__lead { margin-top: 14px; max-width: 46ch; }
.rows { margin-top: 32px; }
.row__head { width: 100%; min-height: 58px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: left; padding: 14px 0; color: var(--muted); transition: color 200ms ease; }
.row__name { font-size: var(--step-lead); font-weight: 700; }
.row__perk { font-size: var(--step-note); white-space: nowrap; }
.row.is-active .row__head { color: var(--ink); }
.row.is-active .row__perk { color: var(--gold); }
.row__more { overflow: hidden; max-height: 0; max-width: 34ch; transition: max-height 300ms var(--ease-out), padding-bottom 300ms var(--ease-out); }
.row.is-active .row__more { max-height: 12em; padding-bottom: 16px; }
@media (hover: hover) and (pointer: fine) { .row__head:hover { color: var(--ink); } }

/* ---------- questions: filled tiles ---------- */
.faq { display: grid; gap: var(--gap); }
.faq__title { padding: 28px var(--pad) 8px; }
.qs { display: grid; gap: var(--gap); }
.q { background: var(--tile); border-radius: var(--radius); transition: background-color 220ms ease, color 220ms ease; }
.q summary { list-style: none; min-height: 64px; padding: 18px var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: var(--step-lead); font-weight: 700; line-height: 1.2; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q__sign { position: relative; flex: 0 0 16px; height: 16px; }
.q__sign::before, .q__sign::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform 240ms var(--ease-out); }
.q__sign::after { transform: rotate(90deg); }
.q[open] { background: var(--gold); color: var(--on-gold); }
.q[open] .q__sign::after { transform: rotate(0deg); }
.q p { padding: 0 var(--pad) 24px; max-width: 52ch; }

/* ---------- send me your quote: a gold field ---------- */
.send { background: var(--gold); color: var(--on-gold); border-radius: var(--radius); padding: 40px 0 72px; overflow: hidden; }
.strip { overflow: hidden; }
.strip__run { display: flex; width: max-content; }
.strip__img { flex: none; height: 110px; aspect-ratio: 5318 / 300; background: url(../strip.webp) 0 0 / 100% 100% no-repeat; }
.send__title { margin-top: 56px; padding: 0 var(--pad); }
.bar { margin: 32px var(--pad) 0; display: grid; gap: var(--gap); }
.cell { min-height: 60px; border: 0; border-radius: var(--radius); background: var(--gold-2); color: var(--on-gold); font-size: max(1rem, var(--step-body)); text-align: center; padding: 0 16px; transition: background-color 180ms ease; }
.cell::placeholder { color: rgba(30, 32, 36, 0.78); }
.cell:focus { background: var(--gold-3); outline: none; }
.cell:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.cell--go { background: var(--bg); color: var(--ink); font-weight: 700; cursor: pointer; }
.cell--go:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .cell--go:hover { background: var(--deep); } }
.send__print { margin: 14px var(--pad) 0; display: grid; gap: 6px; font-size: var(--step-small); }
.send__after { display: none; font-weight: 700; }
.send.is-sent .send__after { display: block; }

/* ---------- the close, as tiles ---------- */
.foot { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-mark { grid-column: 1 / -1; order: -2; min-height: 160px; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; gap: 4%; text-decoration: none; }
.f-mark img { height: 70%; max-height: 220px; width: auto; }
.f-mark__word { font-family: var(--display); font-weight: 600; font-size: var(--step-name); letter-spacing: 0.02em; line-height: 1; }
.f-go { grid-column: 1 / -1; order: -1; min-height: 140px; background: var(--gold); color: var(--on-gold); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.f-go__line { font-size: var(--step-stmt); font-weight: 700; line-height: 1.05; }
.f-go__arrow { align-self: flex-end; width: 40px; height: 40px; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .f-go:hover .f-go__arrow { transform: translate(4px, -4px); } }
.f-nav, .f-mail { display: flex; flex-direction: column; gap: 6px; font-size: var(--step-note); }
.f-mail__link { font-size: var(--step-note); font-weight: 700; word-break: break-all; }
.f-area__big { font-size: var(--step-lead); font-weight: 700; }
.f-area p:not(.f-area__big) { font-size: var(--step-note); margin-top: 6px; }
.f-say { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.f-say__line { font-size: var(--step-lead); line-height: 1.25; max-width: 24ch; }
.f-say__legal { font-size: var(--step-small); color: var(--muted); }
.f-area { grid-column: 1 / -1; }
.f-credits { grid-column: 1 / -1; background: transparent; font-size: var(--step-small); color: var(--muted); line-height: 1.55; }
.f-credits a { color: var(--ink); }

/* ================= tablet ================= */
@media (min-width: 768px) {
  .first { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t-name { grid-column: 1 / 5; grid-row: 1; min-height: 380px; }
  .name__sub { font-size: var(--step-lead); }
  .t-action, .t-card, .t-rich, .t-patent, .t-key { order: 0; }
  .t-action { grid-column: 5 / 7; grid-row: 1; justify-content: space-between; }
  .t-statement { grid-column: 1 / 7; grid-row: 2; }
  .t-card { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 16 / 9; }
  .t-rich { grid-column: 1 / 3; grid-row: 4; aspect-ratio: auto; min-height: 260px; }
  .t-patent { grid-column: 3 / 5; grid-row: 4; aspect-ratio: auto; }
  .t-key { grid-column: 5 / 7; grid-row: 4; aspect-ratio: auto; }
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 30svh 30svh auto; }
  .i-slogan { grid-column: 1 / 9; grid-row: 1 / 3; min-height: 0; }
  .i-years { grid-column: 9 / 13; grid-row: 1; aspect-ratio: auto; }
  .i-film { grid-column: 9 / 13; grid-row: 2; aspect-ratio: auto; }
  .i-words { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 40px var(--pad) 56px; }
  .i-words p { grid-column: 5 / 13; }
  .s-cell { min-height: 46svh; }
  .s-row { grid-template-columns: 5fr 4fr 3fr; gap: 24px; align-items: start; }
  .s-terms li { display: block; }
  .s-terms li:not(:last-child)::after { content: none; }
  .stages { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: var(--gap); }
  .stage--1 { grid-column: span 2; } .stage--2 { grid-column: span 3; } .stage--3 { grid-column: span 3; } .stage--4 { grid-column: span 4; }
  .stage--1 .stage__pic { height: 22vh; } .stage--2 .stage__pic { height: 30vh; } .stage--3 .stage__pic { height: 38vh; } .stage--4 .stage__pic { height: 46vh; }
  .partners { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .partners__pic { grid-column: 1 / 6; aspect-ratio: 4 / 5; position: sticky; top: 12vh; }
  .partners__list { grid-column: 6 / 13; min-height: 100%; }
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .faq__title { grid-column: 1 / 5; position: sticky; top: 24px; padding-top: 24px; }
  .qs { grid-column: 5 / 13; }
  .bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell { min-height: 96px; }
  .send__print { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .send__print p:nth-child(2) { grid-column: 3; grid-row: 1; }
  .send { min-height: 80svh; padding-top: 48px; }
  .strip__img { height: 150px; }
  .send__title { margin-top: 72px; }
  .foot { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .f-say { grid-column: 1 / 5; min-height: 220px; order: 0; }
  .f-nav { grid-column: 5 / 8; }
  .f-area { grid-column: 8 / 10; }
  .f-mail { grid-column: 10 / 13; justify-content: flex-end; }
  .f-mark { grid-column: 1 / 9; min-height: 320px; order: 1; }
  .f-go { grid-column: 9 / 13; min-height: 320px; order: 2; }
  .f-credits { order: 3; }
}

/* tablet only: four stages in one row would be too narrow, so they sit two by two, still growing */
@media (min-width: 768px) and (max-width: 1099px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .stage--1, .stage--2, .stage--3, .stage--4 { grid-column: auto; }
  .stage--1 .stage__pic { height: 26vh; } .stage--2 .stage__pic { height: 32vh; } .stage--3 .stage__pic { height: 38vh; } .stage--4 .stage__pic { height: 44vh; }
}

/* ================= desktop ================= */
@media (min-width: 1100px) {
  .first { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); height: calc(100svh - 2 * var(--edge)); min-height: 680px; max-height: 1080px; }
  .t-name { grid-column: 1 / 7; grid-row: 1 / 5; min-height: 0; }
  .t-card { grid-column: 7 / 13; grid-row: 1 / 7; aspect-ratio: auto; }
  .t-statement { grid-column: 1 / 7; grid-row: 5 / 7; }
  .t-rich { grid-column: 1 / 4; grid-row: 7 / 9; min-height: 0; }
  .t-action { grid-column: 4 / 7; grid-row: 7 / 9; }
  .t-patent { grid-column: 7 / 10; grid-row: 7 / 9; }
  .t-key { grid-column: 10 / 13; grid-row: 7 / 9; }
  .name__emblem { height: 62%; }
  .intro { grid-template-rows: 38svh 38svh auto; }
  .i-words p { grid-column: 7 / 13; }
  .services { grid-template-columns: 1fr 1fr; min-height: 90svh; }
  .s-cell { min-height: 90svh; padding: 28px; }
  .s-rows { grid-template-rows: repeat(5, 1fr); }
  .s-row { padding: 28px; }
  .how { padding-top: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
  .how__title { grid-column: 1 / 6; grid-row: 1; align-self: start; position: relative; z-index: 1; padding-top: 20px; padding-bottom: 0; }
  .stages { grid-column: 1 / -1; grid-row: 1; }
  .stage--1 .stage__pic { height: 30vh; } .stage--2 .stage__pic { height: 40vh; } .stage--3 .stage__pic { height: 50vh; } .stage--4 .stage__pic { height: 62vh; }
  .partners__list { padding: 40px 48px 36px; }
  .send__print p { max-width: 40ch; }
}

/* ================= motion (only where it is wanted; the page is whole without it) ================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-load] { opacity: 0; transform: translateY(18px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js .t-card[data-open] { clip-path: inset(100% 0 0 0 round var(--radius)); animation: load-open 1100ms var(--ease-in-out) 120ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .strip__run { animation: drift 70s linear infinite; }
  .t-pic img, .stage--4 .stage__pic img { transition: transform 900ms var(--ease-soft); }
  @media (hover: hover) and (pointer: fine) { .t-pic:hover img, .stage--4:hover .stage__pic img { transform: scale(1.04); } }
}
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes load-open { to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}