/* 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; }
.nowrap { white-space: nowrap; }
.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: 360px; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; }
/* the header is the front of Rich's printed card: its near-black charcoal, its faint rings, his portrait in a gold ring */
.t-name { background: #111419; }
.t-name::before, .t-name::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / 0.07); border-radius: 50%; pointer-events: none; }
.t-name::before { width: 520px; height: 520px; right: -170px; bottom: -300px; }
.t-name::after { width: 340px; height: 340px; right: 30px; bottom: -230px; }
.name { font-weight: 400; position: relative; max-width: 62%; }
.name__word { display: block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--step-name); line-height: 0.92; letter-spacing: 0; color: #F2F1EE; }
.name__sub { display: block; margin-top: 0.7em; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--step-note); line-height: 1.3; letter-spacing: 0.07em; color: var(--gold); }
.name__pill { position: relative; align-self: flex-start; padding: 6px 14px; border: 2px solid var(--gold); border-radius: 999px; background: rgb(214 154 45 / 0.16); color: var(--gold-3); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--step-note); }
.name__pill span { color: var(--gold); margin: 0 0.3em; }
.name__portrait { position: absolute; right: var(--pad); bottom: var(--pad); width: 32%; max-width: 200px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--gold); }
.name__links { margin-top: auto; 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: 0; 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 img { object-position: 35% 50%; }
.t-key img { object-position: 38% 50%; }

/* 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: 30svh; 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 { grid-column: 1 / -1; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; gap: 18px; }
.i-years__label { margin-top: -10px; }
.i-years__certs { display: grid; gap: 4px; margin-top: auto; }
.i-years__cert { font-size: var(--step-note); font-weight: 700; line-height: 1.25; }
.i-years__makes { font-size: var(--step-note); line-height: 1.35; }
.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 { grid-column: 1 / -1; aspect-ratio: 16 / 9; 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); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.s-cell__title span { display: block; }
.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; object-position: 50% 22%; }
.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%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--step-body); }
.price__corner { width: 25%; }
.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); } }

/* the beta offer: a pale banner at the top of the plans */
.plans { display: grid; gap: var(--gap); }
.refer { background: var(--gold); color: var(--on-gold); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; }
.refer__line { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; }
.refer__name { display: block; text-transform: uppercase; }
/* scan to pay: Rich's Zelle code, drawn crisp from the sign he prints */
.zelle { background: #fff; color: #111419; display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; }
.zelle__qr { width: 132px; height: 132px; }
.zelle__title { font-size: var(--step-lead); line-height: 1.15; text-transform: uppercase; margin-bottom: 6px; }
.zelle__say p { font-size: var(--step-note); max-width: 46ch; }
.zelle__or { margin-top: 6px; color: #4A4D54; }
@media (min-width: 768px) { .zelle { grid-template-columns: 168px 1fr; gap: 32px; } .zelle__qr { width: 168px; height: 168px; } }
/* desktop: the referral offer and the pay code share one row under the table */
@media (min-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } .plans > :not(.refer):not(.zelle) { grid-column: 1 / -1; } .refer { flex-direction: column; justify-content: center; } .refer .refer__how { margin-left: 0; } }
.refer__how { font-size: var(--step-note); max-width: 52ch; margin-left: auto; }
.beta { background: var(--ink); color: var(--bg); display: grid; gap: 22px; padding: 28px var(--pad) 32px; }
.beta__title { font-size: var(--step-stmt); line-height: 1; letter-spacing: 0.01em; }
.beta__who { margin-top: 8px; font-size: var(--step-lead); font-weight: 700; }
.beta__print { margin-top: 14px; max-width: 62ch; font-size: var(--step-note); }
.beta__deal { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.beta__price { font-family: var(--cond); font-weight: 700; font-size: var(--step-slogan); line-height: 0.9; font-variant-numeric: tabular-nums; }
.beta__price s, .price__amt s { font-weight: 400; text-decoration-thickness: 0.08em; margin-right: 0.15em; vertical-align: 0.35em; }
.beta__price s { font-size: var(--step-stmt); }
.price__amt s { font-size: var(--step-body); }
.beta__per { font-size: var(--step-note); font-weight: 700; max-width: 30ch; }
.beta .button { margin-top: 6px; }
.price__beta { display: block; margin-top: 6px; font-size: var(--step-note); font-weight: 700; }
@media (min-width: 768px) {
  .beta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; column-gap: 40px; padding: 32px var(--pad) 36px; }
  .beta__deal { align-items: flex-start; }
}

/* 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; width: auto; 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 220ms ease; }
.partners__pic img.is-on { opacity: 1; }
/* the affiliates' own business cards, laid on the dark tile like cards on Rich's desk */
.partners__pic { background: var(--deep); }
.partners__pic img.is-card { inset: 10% 8%; width: 84%; height: 80%; object-fit: contain; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.45)); }
.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; }
/* The member discount: the first thing in the shop list */
.perk10 { margin-top: 24px; background: var(--gold); color: var(--on-gold); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.perk10__num { font-family: var(--display); font-size: var(--step-head); font-weight: 800; line-height: 1; text-transform: uppercase; }
.perk10__say { flex: 1 1 20ch; font-size: var(--step-note); font-weight: 700; line-height: 1.3; }
/* East End's accessories line */
.kicks { margin-top: 32px; background: var(--gold); color: var(--on-gold); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 6px; }
.kicks__line { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.kicks__list { font-size: var(--step-note); font-weight: 700; }
.kicks__say { font-size: var(--step-note); font-style: italic; }
.partners__own { margin-top: 36px; max-width: 46ch; color: var(--muted); }
.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); text-align: right; flex: none; max-width: 45%; }
.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; visibility: hidden; transition: max-height 300ms var(--ease-out), padding-bottom 300ms var(--ease-out), visibility 0s linear 300ms; }
.row.is-active .row__more { max-height: 14em; padding-bottom: 16px; visibility: visible; transition-delay: 0s; }
.row__more span { display: block; }
.row__note { color: var(--muted); margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) { .row__head:hover { color: var(--ink); } }

/* ---------- questions: filled tiles ---------- */
.faq { display: grid; gap: var(--gap); }
.faq__title { margin-top: 64px; padding: 0 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 128px; overflow: hidden; }
.strip { overflow: hidden; }
.strip__run { display: flex; width: max-content; }
.strip__img { flex: none; height: 110px; aspect-ratio: 3526 / 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)); }
/* the sign-off is the front of his card again: near-black, his portrait in a gold ring, GRUMPY'S over the gold line */
.f-mark { grid-column: 1 / -1; order: -2; min-height: 160px; background: #111419; color: #F2F1EE; display: flex; align-items: center; justify-content: center; gap: 5%; text-decoration: none; }
.f-mark__portrait { width: 26%; max-width: 180px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--gold); }
.f-mark__name { display: flex; flex-direction: column; gap: 0.5em; }
.f-mark__word { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--step-name); line-height: 0.92; }
.f-mark__sub { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--step-note); letter-spacing: 0.07em; color: var(--gold); }
@media (max-width: 767px) {
  .f-mark { padding: 28px var(--pad); gap: 16px; }
  .f-mark__portrait { width: 84px; }
  .f-mark__word { font-size: 2.25rem; }
  .f-mark__sub { letter-spacing: 0.04em; }
  .f-nav, .f-mail { order: 1; }
  .f-credits { order: 2; }
}
.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; overflow-wrap: anywhere; }
.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-note); }
  .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-card { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 9; }
  .t-statement { grid-column: 1 / 7; grid-row: 3; }
  .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: minmax(30svh, auto) 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 { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .s-cell__foot { flex: 1 1 380px; justify-content: flex-end; gap: 20px 32px; }
  .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; margin-top: 0; 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; padding-bottom: 72px; }
  .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, .f-mail { 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__portrait { width: 30%; max-width: 220px; }
  .intro { grid-template-rows: minmax(38svh, auto) 38svh auto; }
  .i-words p { grid-column: 7 / 13; }
  .s-cell { padding: 28px; }
  .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; }
}