:root {
  /* === PRIMITIVE ===
     Brand style, revision A.1 (03.09.2026), approved. Five values and no
     others. The sheet removed the grey halftones #3A3733 and #7A746A outright:
     hierarchy is carried by size, tracking and whitespace, never by tone. */
  --color-paper: #F4F1EA;      /* бумага   — фон всех страниц и носителей   */
  --color-paper-2: #EAE6DB;    /* подложка — фон врезок, никогда не текст   */
  --color-graphite: #1A1A1A;   /* графит   — всё написанное и начерченное   */
  --color-rule: #CFC8B9;       /* линейка  — только линии, 1 px             */
  --color-pencil: #B8503C;     /* красный карандаш — пометка от руки        */

  --font-family-serif: "Instrument Serif", Georgia, serif;
  --font-family-sans: "Archivo", -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;
  --font-family-hand: "Architects Daughter", "Bradley Hand", cursive;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --duration-fast: 0.2s;
  --duration-normal: 0.25s;
  --duration-slow: 0.35s;
  --duration-reveal: 0.8s;

  /* === SEMANTIC === */
  --color-background: var(--color-paper);
  --color-background-alt: var(--color-paper-2);
  --color-foreground: var(--color-graphite);
  --color-accent: var(--color-pencil);
  --color-border: var(--color-rule);

  --font-heading: var(--font-family-serif);
  --font-body: var(--font-family-sans);
  --font-label: var(--font-family-mono);
  --font-hand: var(--font-family-hand);

  /* Legacy aliases. The muted tones all resolve to graphite now — kept as
     names so the intent of each rule stays readable, not as separate colours. */
  --ivory: var(--color-background);
  --ivory-2: var(--color-background-alt);
  --ink: var(--color-foreground);
  --ink-soft: var(--color-foreground);
  --taupe: var(--color-foreground);
  --rust: var(--color-accent);
  --rust-text: var(--color-accent);
  --rust-soft: var(--color-accent);
  --line: var(--color-border);
  --serif: var(--font-heading);
  --sans: var(--font-body);
  --mono: var(--font-label);
  --hand: var(--font-hand);

  /* === COMPONENT === */
  --button-border: var(--color-foreground);
  --button-fg: var(--color-foreground);
  --button-bg-hover: var(--color-foreground);
  --button-fg-hover: var(--color-background);
  --button-solid-bg: var(--color-foreground);
  --button-solid-fg: var(--color-background);

  --card-bg: var(--color-background);
  --card-border: var(--color-border);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--ivory); }

/* Grain sits over everything: the style sheet calls for it across the page,
   not just the opening screen. Fixed, inert, and cheap — one tiled data URI. */
body::before {
  content: ""; position: fixed; inset: 0;
  pointer-events: none; z-index: 95; opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.15'/></svg>");
}
@media print { body::before { display: none; } }

/* ---------- Keyboard access ---------- */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
.skip-link {
  position: fixed; left: 6vw; top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--ink); color: var(--ivory);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
  transition: transform var(--duration-fast);
}
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

.wrap { max-width: 1300px; margin: 0 auto; padding: 0 6vw; }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: transparent;
}
.progress-bar { height: 100%; width: 0%; background: var(--ink); transition: width .12s linear; }

/* ---------- Header ---------- */
/* Wordmark + single nav row + hand-drawn rule, matching the opening sequence.
   --hdr-h is published to the page so the cover can size itself to exactly the
   space left below the header, on every viewport, without magic numbers. */
header {
  position: sticky; top: 0; z-index: 50; padding-bottom: 2px;
  background: color-mix(in srgb, var(--ivory) 86%, transparent);
  backdrop-filter: blur(14px);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 18px 6vw 14px;
}
.logo {
  font-family: var(--serif); font-size: 0.95rem;
  letter-spacing: 0.42em; padding-left: 0.42em;
  text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--ink);
}
nav.links { display: flex; align-items: center; gap: 1.9rem; }
nav.links a {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  position: relative; padding: 4px 0; white-space: nowrap;  /* 24px+ hit area */
  transition: color .2s;
}
nav.links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rust); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
nav.links a:hover { color: var(--ink); }
nav.links a:hover::after,
nav.links a.current::after { transform: scaleX(1); }
nav.links a.current { color: var(--ink); }
/* The call to action is marked by a standing red underline, not by red text:
   #B8503C on paper is 4.38:1, under AA at this size. */
nav.links a.cta-link { color: var(--ink); }
nav.links a.cta-link::after { transform: scaleX(1); }

/* The rule is the header's bottom edge — a drawn line rather than a border. */
/* The pencil filter displaces the stroke by up to ±1.5 units vertically. In a
   2px-tall box there was nowhere to displace to, so the line kept leaving its
   own area and coming back as gaps — measured at 56px on a 1440 viewport. The
   style sheet draws this rule in a 12-unit box for exactly that reason.
   Taken out of flow rather than pulled back with negative margins: a negative
   margin-bottom on the last child collapses out through the header instead of
   shortening it, which grew the bar by 5px. The 2px padding below the nav keeps
   the header exactly the height it was. */
.hdr-rule {
  position: absolute; left: 0; right: 0; bottom: -5px;
  display: block; width: 100%; height: 12px;
}

/* Mobile menu trigger. Hidden on desktop, where the row fits. */
.nav-toggle {
  display: none; align-items: center; gap: 0.6rem;
  background: none; border: 1px solid var(--line); cursor: pointer;
  padding: 0.55rem 0.85rem; color: var(--ink);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.nav-toggle-bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle-bars i { display: block; height: 1px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(2.5px) rotate(12deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-2.5px) rotate(-12deg); }

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; padding: 14px 6vw 12px; }
  .nav-toggle { display: inline-flex; }
  nav.links {
    flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 0; overflow: hidden;
    max-height: 0; transition: max-height .3s ease;
  }
  nav.links.open { max-height: 60vh; }
  nav.links a {
    width: 100%; padding: 0.95rem 0; font-size: 0.72rem;
    border-top: 1px solid var(--line);
  }
  nav.links a:first-child { margin-top: 0.6rem; }
  nav.links a::after { display: none; }
  /* No JS: the toggle can do nothing, so the row must never be collapsed. */
  html:not(.js-nav) nav.links { max-height: none; }
  html:not(.js-nav) .nav-toggle { display: none; }
}

/* ---------- Opening sequence (cover) ---------- */
/* Two bands hold the wordmark and the signature. At rest they are pulled to
   the middle of the visible area and the red rule fills like a loading bar;
   when it opens they slide back to their natural flow positions and the hero
   fades in between them. The open state IS the normal layout, so if the script
   never runs the section renders as an ordinary hero. */
.cover {
  position: relative;
  display: grid; grid-template-rows: auto auto auto;
  justify-items: center; align-content: center; text-align: center;
  min-height: calc(100svh - var(--hdr-h, 74px));
  padding: clamp(18px, 3.5vh, 40px) 6vw clamp(22px, 4.5vh, 52px);
  --cover-rhythm: clamp(28px, 4.4vw, 64px);
  --cover-rule-space: 27px;   /* rule height 18 + its 9px offset */
  gap: 0;
  overflow: hidden;
}
.cover > .band { position: relative; z-index: 2; }

/* The section keeps one height in both states on purpose. Clipping it to a
   single screen while the sequence is armed changes where the grid puts the two
   bands, and the offsets measured for the open layout would then be applied to
   a different one — the lockup lands off-centre on any viewport too short to
   hold the hero. `overflow: hidden` already keeps the waiting copy out of
   sight, and any scroll opens the sequence immediately. */

.band {
  width: 100%; display: grid; justify-items: center; transform-origin: 50% 50%;
  transition: transform 1.45s cubic-bezier(.22,.72,.24,1), opacity .5s ease;
}
.band.top { align-content: start; margin-bottom: calc(var(--cover-rhythm) - var(--cover-rule-space)); }
.band.mid { align-content: center; gap: clamp(11px, 2vh, 20px); margin-bottom: clamp(18px, 4vh, 54px); }
.band.bot { align-content: end; }

.cover-name {
  font-family: var(--serif); font-weight: 400; text-transform: uppercase;
  /* The mockup was set in Times, which is ~30% wider than Instrument Serif at
     the same size. Carrying its 58px/0.30em across made the wordmark both
     lighter and airier than approved: 413px against the mockup's 514px, with
     tracking twice as wide relative to the letterforms. Size up, track in. */
  font-size: clamp(29px, 4.9vw, 70px);
  letter-spacing: 0.24em; padding-left: 0.24em; line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1.15px var(--ink);
}
/* Outlined type is the whole idea, but a browser without text-stroke would
   render the wordmark invisible. Fall back to solid ink. */
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .cover-name { color: var(--ink); }
}
.cover-under { width: min(560px, 72vw); height: 18px; margin-top: 9px; display: block; }
.cover-said { font-family: var(--hand); font-size: clamp(1.85rem, 4.6vw, 3.2rem); line-height: 1; }

.cover h1 {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.95rem, 1.67vw, 1.5rem);
  line-height: 1.35; letter-spacing: 0.01em; text-wrap: balance; max-width: 52ch;
  margin-bottom: clamp(0.4rem, 2.6vw, 2.3rem);
}
/* Terracotta on a fragment of a display heading — the owner's fifth role for
   the pencil, alongside its drawn ones. Confined to display sizes on purpose:
   #B8503C measures 4.38:1 on paper and 3.52:1 on graphite, both past the 3:1
   that text of 24px and up needs, and both short of the 4.5:1 that smaller text
   needs. Every selector below carries a clamp whose *minimum* is already 24px
   or more, so the accent stays legal down to 320px. Do not reuse this colour on
   body copy, labels, or anything that can shrink under 24px — .position-line
   bottoms out at 20.8px, which is why it is not in this list. */
.cover h1 em,
h2 em,
.team-head em { font-style: italic; color: var(--rust); }
/* The lede carries the positioning at display size, so its red middle is
   legal: the clamp never lets it fall under 24px. At 1440 the 25em measure
   breaks it into the approved three lines, the red phrase alone on the
   second, without any forced break that would misbehave on a phone. */
.cover-lede {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw + 0.6rem, 3rem);
  line-height: 1; max-width: 25em; color: var(--ink);
  margin-bottom: clamp(0.8rem, 5vw, 4.5rem);
}
.cover-lede em { font-style: normal; color: var(--rust); }
/* A single call to action, ringed in pencil. The three numbered points that
   used to sit under it now open the next section, where they have room. */
.cover-actions {
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.4rem;
}
.cta-pencil {
  position: relative; display: inline-block; padding: 13px 28px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color .3s ease;
}
.cta-pencil svg {
  position: absolute; left: -14px; top: -10px;
  width: calc(100% + 28px); height: calc(100% + 20px); overflow: visible;
}
.cta-pencil path { transition: stroke-dashoffset 1.2s cubic-bezier(.25,.8,.3,1), stroke-width .3s ease; }
.cta-pencil:hover path { stroke-width: 3; }

/* Before the script has measured anything, the grid alone centres the lockup:
   two auto rows with the hero taken out of flow. That makes the very first
   painted frame the loading screen, instead of the finished hero collapsing
   into it once the deferred script catches up. Both conditions are needed —
   the stage flips to "open" during the measuring pass, and data-measured keeps
   the rule off once real offsets exist. */
.js-cover .cover[data-stage="rest"]:not([data-measured]) {
  grid-template-rows: auto;
  align-content: center;
}
.js-cover .cover[data-stage="rest"]:not([data-measured]) .band.mid { display: none; }

/* --- armed states. All scoped to .js-cover so no-JS renders the open layout --- */
.js-cover #coverline,
.js-cover #coverring { stroke-dasharray: 820; stroke-dashoffset: 820; }

.js-cover .cover[data-stage="rest"] .band.top { transform: translateY(var(--t1, 0px)) scale(var(--k, 1)); }
.js-cover .cover[data-stage="rest"] .band.bot { transform: translateY(var(--t2, 0px)) scale(var(--k2, 1)); }
.js-cover .cover[data-stage="rest"] .band.mid > * { opacity: 0; transform: translateY(16px); }

.js-cover .band.mid > * { transition: opacity .85s ease, transform .85s cubic-bezier(.25,.8,.3,1); }
.js-cover .cover[data-stage="open"] .band.mid > *:nth-child(1) { transition-delay: .66s; }
.js-cover .cover[data-stage="open"] .band.mid > *:nth-child(2) { transition-delay: .80s; }
.js-cover .cover[data-stage="open"] .band.mid > *:nth-child(3) { transition-delay: .96s; }
.js-cover .cover[data-stage="open"] .band.mid > *:nth-child(4) { transition-delay: 1.12s; }
.js-cover .cover[data-stage="open"] .band.mid > *:nth-child(5) { transition-delay: 1.28s; }
.js-cover .cover[data-line="out"] .cover-under { opacity: 0; transition: opacity .7s ease; }
/* Applied around a measurement pass so probing the open geometry never animates */
.cover.still .band,
.cover.still .band.mid > *,
.cover.still .cover-under { transition: none !important; }

/* Reduced motion: no lift, no draw-in, no stagger — the open layout, at once. */
@media (prefers-reduced-motion: reduce) {
  .js-cover .cover[data-stage="rest"] .band.top,
  .js-cover .cover[data-stage="rest"] .band.bot { transform: none; }
  .js-cover .cover[data-stage="rest"] .band.mid > * { opacity: 1; transform: none; }
  .js-cover #coverline,
  .js-cover #coverring { stroke-dasharray: none; stroke-dashoffset: 0; }
  .band, .band.mid > *, .cover-under, .cta-pencil path { transition: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.05rem 2rem; border: 1px solid var(--ink);
  color: var(--ink); background: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn.solid { background: var(--ink); color: var(--ivory); }
.btn.solid:hover { background: transparent; color: var(--ink); }

/* ---------- Section scaffolding ---------- */
section { padding: 12vh 6vw; }

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 1.08;
  max-width: 26ch; letter-spacing: -0.02em;
}

/* ---------- CTA / Footer ---------- */

/* Links run the full width on one line; under them the tagline, the signature
   and the small print share a row. The brand block is dissolved into the grid
   (display: contents) so the signature can take the middle column while its
   tagline goes left — same markup on every page, no per-page variant. */
footer {
  display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "links links links" "tag brand meta";
  align-items: center; column-gap: 2.5rem; row-gap: clamp(1.6rem, 3vw, 2.4rem);
  padding: 1rem 6vw 2rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink);
  border-top: 1px solid var(--line);
}
footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
footer a:hover { border-color: var(--ink); }
.footer-brand { display: contents; }
.footer-line {
  grid-area: brand; text-align: center;
  font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.2;
  letter-spacing: 0; color: var(--ink);
}
.footer-line em { font-style: normal; color: var(--rust); }
.footer-brand p:last-child {
  grid-area: tag; justify-self: start; text-align: center;
  font-weight: 700; line-height: 1.8; max-width: 27ch;
}
.footer-links {
  grid-area: links; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.2rem 2rem;
}
.footer-links a {
  border-bottom-color: transparent; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  /* 18px of type alone is under the 24px minimum hit area. */
  display: inline-block; padding: 0.35rem 0;
}
.footer-links a:hover { border-bottom-color: var(--ink); }
.footer-meta { grid-area: meta; justify-self: end; display: grid; gap: 0.5rem; line-height: 1.8; }
.footer-meta p:last-child { text-align: center; }
@media (max-width: 900px) {
  footer {
    grid-template-columns: 1fr; grid-template-areas: "links" "brand" "tag" "meta";
    justify-items: center; text-align: center; padding: 1.4rem 6vw 2.2rem;
  }
  .footer-links { justify-content: center; gap: 0.1rem 1.6rem; }
  .footer-brand p:last-child, .footer-meta { justify-self: center; }
  .footer-meta p:last-child { margin-top: 0.4rem; }
}

/* ---------- Reveal on scroll ---------- */
/* Reveal-on-scroll. The hidden start state is scoped to .js-reveal, which
   site.js sets on <html> before paint. Without JS — disabled, blocked, failed
   to load, or a crawler that does not run it — the class is never added and
   every .reveal element stays visible, instead of the whole page rendering
   blank at opacity: 0. */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-inner { animation: none; }
}

/* ---------- Back link (Privacy, Terms) ---------- */
/* The legal pages carry no section menu; this is their way back home. */
.back-link {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.back-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Graphite surfaces ---------- */
/* Three sections stand on graphite on the home page — the free review, search
   readiness and contact. Never two in a row. The style sheet fixes the theme as light, and this is the
   owner's amendment to it: graphite is already an approved ground for the mark
   ("два фона: бумага и графит"), so the surface is extended rather than
   invented, and it follows the same rules. Everything written on it is paper —
   no half-tones, exactly as on paper the other way round. Red keeps only its
   drawn roles and display-size accents, where 3.52:1 on graphite is past the
   3:1 that large text and non-text need. */
 .dark { background: var(--ink); color: var(--ivory); }

 .dark .mono-label { color: var(--ivory); }

 .dark .field-error, .dark .form-status.is-error { border-left-color: var(--rust); }

/* Buttons invert with the ground. */
 .dark .btn { border-color: var(--ivory); color: var(--ivory); }
 .dark .btn:hover { background: var(--ivory); color: var(--ink); }
 .dark .btn.solid { background: var(--ivory); color: var(--ink); }
 .dark .btn.solid:hover { background: transparent; color: var(--ivory); }

/* Form on graphite. */
.dark .field input,
.dark .field select,
.dark .field textarea { color: var(--ivory); border-bottom-color: var(--line); }
.dark .field input:hover,
.dark .field select:hover,
.dark .field textarea:hover { border-bottom-color: var(--ivory); }
.dark .field .req { color: var(--ivory); }
.dark .field select {
  /* Redrawn light, since the arrow is painted rather than native. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ivory) 50%),
                    linear-gradient(135deg, var(--ivory) 50%, transparent 50%);
}
.dark .form-status.is-ok { color: var(--ivory); }

/* The focus ring is red on paper; on graphite red sits too close to the ground
   to read as a ring, so it borrows the paper colour like the mark does. */
 .dark :focus-visible { outline-color: var(--ivory); }

/* ---------- Inquiry form ---------- */
.inquiry { display: grid; gap: 1.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: grid; gap: 0.5rem; min-width: 0; }
.field label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.field .req { color: var(--rust-soft); }
.field input,
.field select,
.field textarea {
  width: 100%; font-family: var(--sans); font-size: 0.95rem; line-height: 1.5;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.6rem 0; border-radius: 0;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select {
  appearance: none; cursor: pointer;
  /* Native arrow styling is not reachable across browsers, so draw one. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 1.05rem, calc(100% - 5px) 1.05rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}
.field select option { color: var(--ink); background: var(--ivory); }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--rust); }
/* A hint must still be readable; the sheet has no half-tone to dim it with,
   so it is set in italic rather than in a lighter grey. */
.field input::placeholder, .field textarea::placeholder { font-style: italic; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--rust); border-bottom-width: 2px; }
.field-error {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  line-height: 1.5; border-left: 2px solid var(--rust); padding-left: 0.6rem;
}
/* Honeypot: out of sight, out of the tab order, out of the a11y tree. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inquiry button[type="submit"] { justify-self: center; margin-top: 0.6rem; cursor: pointer; }
.inquiry button[type="submit"][disabled] { opacity: 0.55; cursor: progress; }
.form-status {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  line-height: 1.7; min-height: 1.2em;
}
.form-status:empty { display: none; }
.form-status.is-error { border-left: 2px solid var(--rust); padding-left: 0.7rem; }
.form-status.is-ok { color: var(--ink); }
.form-status a { color: inherit; }
.privacy-note { font-size: 0.78rem; line-height: 1.7; max-width: 52ch; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Home page (Figma frame «редакция», 24.09.2026) ---------- */
/* Everything is centred on one axis, the way the frame is drawn. Sizes are the
   frame's own at 1440 and scale down with the viewport; every clamp minimum is
   chosen for the 375 phone, and every red text accent keeps a minimum of 24px
   (or 18.7px bold) so #B8503C stays past the 3:1 large text needs.
   Labels are bold mono with almost no tracking — the frame dropped the wide
   0.2em letter-spacing the earlier revision used. */
.home main > section:not(.cover) { padding: clamp(3.5rem, 7vw, 6.25rem) 6vw; }
.home main > section > .wrap { max-width: 1128px; margin: 0 auto; padding: 0; }

.mono-label, .mono-head {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1.4;
}
.mono-label { font-size: 0.875rem; }
.home .mono-head { font-size: clamp(1rem, 1.64vw, 1.475rem); max-width: none; }
.home h2 { font-size: clamp(2.1rem, 3.8vw + 0.4rem, 3.4rem); }
.center-head { margin: 0 auto; text-align: center; }
.home h2, .mono-label, .mono-head, .member .role, .concept-name, .addon-items h4 { text-wrap: balance; }
h2 em.upright, h2 .upright { font-style: normal; }
/* Line breaks that only make sense on the wide layout. */
.br-d { display: none; }
@media (min-width: 1100px) { .br-d { display: inline; } }

/* 2 · Who it is for */
.intro { background: var(--ivory-2); text-align: center; }
.home main > section.intro { padding-top: clamp(2.5rem, 3vw, 2.75rem); padding-bottom: clamp(2.5rem, 3vw, 2.75rem); }
.intro-statement {
  font-family: var(--serif); font-size: clamp(1.75rem, 3.33vw, 3rem); line-height: 1.1;
  max-width: 19em; margin: clamp(1.4rem, 3vw, 2.6rem) auto 0; text-wrap: balance;
}
.points {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem clamp(1.5rem, 6vw, 7rem); margin-top: clamp(2rem, 2.8vw, 2.5rem);
}
.points li { position: relative; padding-top: 0.75rem; }
.points li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rust); opacity: .28;
}
.points .n { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--rust-text); }
.points h3 { font-family: var(--sans); font-weight: 700; font-size: 0.94rem; line-height: 1.35; margin: 0.45rem 0 0.4rem; }
.points p { font-family: var(--sans); font-size: 0.8rem; line-height: 1.55; max-width: 34ch; margin: 0 auto; }

/* 3 · Concept study */
.concept { text-align: center; }
.home main > section.concept { padding-top: clamp(1rem, 2.2vw, 2rem); padding-bottom: clamp(3.5rem, 6vw, 5.4rem); }
.home main > section.concept > .wrap { max-width: 1348px; }
.concept-frame { border: 1px solid var(--ink); padding: clamp(2rem, 4.2vw, 3.8rem) 1.25rem clamp(1.6rem, 2.1vw, 1.9rem); }
.concept-frame h2 { margin: 0 auto; max-width: none; letter-spacing: 0; }
.concept-name {
  font-family: var(--serif); color: var(--rust);
  font-size: clamp(1.75rem, 3.33vw, 3rem); line-height: 1.2;
}
.concept-go { margin-top: clamp(2rem, 3.9vw, 3.5rem); }
.concept-go a {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 1rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px;
}
.concept-go a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.concept-note {
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem; line-height: 1.4;
  max-width: 66ch; margin: 1.6rem auto 0; text-wrap: balance;
}

/* 4 · Free website review, the hook */
.free { text-align: center; }
.home main > section.free > .wrap { max-width: 1240px; }
.free h2 { text-transform: uppercase; letter-spacing: 0; margin: 0 auto; max-width: none; }
.free-sub { font-family: var(--serif); font-size: clamp(1.35rem, 2.32vw, 2.1rem); line-height: 1.2; margin-top: 0.6rem; }
.free-body {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.67vw, 2.4rem); line-height: 1.3;
  max-width: 31em; margin: clamp(2rem, 4.4vw, 3.9rem) auto 0; text-wrap: balance;
}
.free-cta { margin-top: clamp(2.4rem, 4.4vw, 4rem); }
.cta-pencil--serif {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.25vw, 2.025rem);
  letter-spacing: 0; text-transform: none; color: var(--ivory); padding: 12px 30px;
}
.cta-pencil--serif svg { left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }

/* 5 · Services */
.home main > section.services { padding-top: clamp(3.5rem, 6.2vw, 5.6rem); }
.services .center-head { max-width: 14em; }
.services .center-head em, .search .center-head em { display: block; }
.offers { margin-top: clamp(2.5rem, 7vw, 6.4rem); border-top: 1px solid var(--ink); }
.offer {
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center;
  gap: 2rem clamp(2rem, 4vw, 3.6rem);
  padding: clamp(1.8rem, 2.2vw, 2rem) 0 clamp(1.8rem, 2vw, 1.8rem);
  border-bottom: 1px solid var(--ink);
}
.offer-lead { text-align: center; }
.offer-name {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; color: var(--rust);
  font-size: clamp(1.17rem, 1.39vw, 1.25rem); letter-spacing: 0.02em; line-height: 1.3;
}
.offer-claim {
  font-family: var(--serif); font-size: clamp(1.6rem, 2.33vw, 2.1rem); line-height: 1.3;
  max-width: 11em; margin: 0.1rem auto 0; text-wrap: balance;
}
.offer-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rust); border: 1px solid var(--rust);
  max-width: 497px; margin: clamp(2rem, 4.2vw, 3.8rem) auto clamp(1.8rem, 3.5vw, 3.1rem);
}
.offer-meta > div { background: var(--ivory); padding: 0.9rem 0.8rem 1rem; min-width: 0; }
.offer-meta dt { font-family: var(--mono); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; }
.offer-meta dd { font-family: var(--serif); font-size: clamp(1.25rem, 1.67vw, 1.5rem); line-height: 1.25; margin-top: 0.15rem; }
.offer .btn, .review .btn {
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: none;
  min-width: min(287px, 100%); padding: 1.2rem 2rem;
}
.offer-detail { text-align: center; }
.offer-detail .mono-label { margin-bottom: 1.4rem; }
.offer-scope { font-family: var(--serif); font-size: 1rem; line-height: 1.3; max-width: 17em; margin: -0.6rem auto 1.4rem; text-wrap: balance; }
.offer-includes { list-style: none; border-top: 1px solid var(--rust); text-align: left; }
.offer-includes li {
  position: relative; padding: 0.55rem 0 0.55rem 1.5rem;
  border-bottom: 1px solid var(--rust);
  font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.3;
}
.offer-includes li::before {
  content: ""; position: absolute; left: 0; top: 1.25rem;
  width: 8px; height: 1px; background: var(--rust);
}
.offer-includes + .mono-label { margin-top: 2rem; margin-bottom: 0.8rem; }
.offer-help { font-family: var(--serif); font-size: 1rem; line-height: 1.32; max-width: 28em; margin: 0 auto; text-wrap: balance; }
.offer-help + .offer-help { margin-top: 1.3em; }

.addon {
  margin-top: clamp(3rem, 6.4vw, 5.6rem); padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ivory-2); border: 2px solid var(--rust); text-align: center;
}
@media (min-width: 1400px) { .addon { margin-left: -62px; margin-right: -62px; } }
.addon h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.45vw, 4rem);
  line-height: 0.96; letter-spacing: 0.02em; max-width: 13.5em; margin: 1.2rem auto 0; text-wrap: balance;
}
.addon-ask { font-family: var(--serif); font-size: clamp(1.5rem, 2.33vw, 2.1rem); line-height: 1.3; margin-top: clamp(2rem, 6vw, 5.2rem); }
.addon-items {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem clamp(1.5rem, 4vw, 4rem); margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.addon-items h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.33vw, 2.1rem); line-height: 1.2; color: var(--rust); }
.addon-items p { font-family: var(--serif); font-size: clamp(1.3rem, 1.94vw, 1.75rem); line-height: 1.29; max-width: 11em; margin: 0.15rem auto 0; }
/* Red frame, graphite words: #B8503C text at button size would be 3.9:1 on
   this ground, under the 4.5:1 small text needs. The red stays in the line. */
.btn-pencil {
  display: inline-block; margin-top: 1.2rem; padding: 0.7rem 1.1rem;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; color: var(--ink);
  text-decoration: none; border: 1px solid var(--rust); border-radius: 12px;
  transition: background .25s, color .25s;
}
.btn-pencil:hover { background: var(--rust); color: var(--ivory); }

/* 6 · Search readiness */
.search { text-align: center; }
.home main > section.search { padding-top: clamp(3rem, 4.2vw, 3.8rem); padding-bottom: clamp(2.4rem, 3.2vw, 2.6rem); }
.search .center-head { max-width: 14em; }
.search-copy { max-width: 23em; margin: clamp(2rem, 3.9vw, 3.4rem) auto 0; }
.search-copy p { font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.3; }
.search-copy p + p { margin-top: 1.3em; }
.fine {
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem; line-height: 1.45;
  max-width: 108ch; margin: clamp(2.5rem, 4.8vw, 4.4rem) auto 0; text-wrap: balance;
}

/* 7 · How we work */
.home main > section.process { padding-top: clamp(3.5rem, 10vw, 9rem); }
.process .center-head { max-width: 9em; font-size: clamp(2.4rem, 4.45vw, 4rem); line-height: 1.02; }
.stages-label { width: 170px; margin: clamp(2.5rem, 9.5vw, 8.6rem) 0 1.1rem 160px; text-align: center; font-size: 1rem; }
.stages { list-style: none; border-top: 1px solid var(--rust); }
.stage {
  display: grid; grid-template-columns: 160px 170px 1fr; align-items: center;
  min-height: 133px; padding: 1.4rem 0; border-bottom: 1px solid var(--rust);
}
.stage .n { font-family: var(--mono); font-size: 0.75rem; color: var(--rust-text); }
.stage h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; text-align: center; }
.stage p { font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.35; text-align: right; }

/* 8 · About, mission, team */
.home main > section.about { padding-top: clamp(3.5rem, 6vw, 5.4rem); }
.about .center-head { font-size: clamp(2.4rem, 4.45vw, 4rem); max-width: none; }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem clamp(2rem, 8vw, 8rem);
  margin-top: clamp(2.5rem, 8.8vw, 7.8rem); text-align: center;
}
.about-grid .mono-label { margin-bottom: 1.6rem; }
.about-copy p { font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.45; max-width: 24em; margin: 0 auto; }
.about-copy p + p { margin-top: 1.1em; }
.mission p { font-family: var(--serif); font-size: clamp(1.3rem, 1.67vw, 1.5rem); line-height: 1.67; max-width: 15.5em; margin: 0 auto; }
.team-head {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.67vw, 2.4rem);
  line-height: 1.2; text-align: center; margin: clamp(3rem, 8.3vw, 7.5rem) 0 clamp(1.6rem, 3vw, 2.7rem);
}
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem clamp(1.5rem, 3vw, 3rem); text-align: center; }
.member .photo {
  display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 1.5rem;
  aspect-ratio: 1 / 1; object-fit: cover;
  /* The file is cut to the circle's bounding square and carries no ground of
     its own; the round is made here, so whatever is behind shows through. */
  border-radius: 50%;
}
.member h4 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; }
.member h4::first-letter { color: var(--rust); }
.member .role { font-family: var(--mono); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; line-height: 1.4; margin: 0.9rem 0 1.2rem; }
.member p:not(.role) { font-family: var(--serif); font-size: 1.125rem; line-height: 1.39; max-width: 18.5em; margin: 0 auto; }

/* 9 · Free review, repeated */
.review { background: var(--ivory-2); text-align: center; }
.home main > section.review { padding-top: clamp(2.5rem, 3.5vw, 3.1rem); padding-bottom: clamp(3rem, 4.9vw, 4.4rem); }
.review .mono-label { font-size: 1rem; }
.review h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.28; letter-spacing: 0; max-width: none; margin: clamp(1.4rem, 3.3vw, 2.9rem) auto 0; }
.review h2 em { display: block; }
.review-body { font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.3; max-width: 28em; margin: clamp(1.6rem, 3.3vw, 2.9rem) auto 0; text-wrap: balance; }
.review-cta { margin-top: clamp(2rem, 3.5vw, 3.1rem); }

/* 10 · Contact */
.home main > section.contact { padding-top: clamp(4rem, 9.8vw, 8.8rem); padding-bottom: clamp(4rem, 9.8vw, 8.8rem); }
.contact-grid { display: grid; grid-template-columns: 1fr 0.95fr; gap: 3.5rem clamp(2.5rem, 10vw, 10.5rem); align-items: start; }
.contact-copy { text-align: center; }
.contact h2 { font-size: clamp(2.1rem, 3.78vw, 3.4rem); line-height: 1.3; letter-spacing: 0; max-width: none; margin-top: 0.4rem; }
.contact h2 em { display: block; }
.contact-copy > p:not([class]) { font-family: var(--serif); font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.6; max-width: 17.5em; margin: clamp(1.6rem, 3.5vw, 3.2rem) auto 0; }
.contact .contact-meta {
  margin-top: clamp(2rem, 7vw, 6.2rem); font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 2;
}
.contact .contact-meta a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--ivory); }
.contact .inquiry { gap: 1.1rem; }
.contact .privacy-note { font-family: var(--serif); font-size: 1rem; line-height: 1.3; text-align: center; max-width: 24em; margin: 0.4rem auto 0; }
.contact .inquiry button[type="submit"] { min-width: 195px; letter-spacing: 0.04em; }
.contact .field label { letter-spacing: 0.06em; }

/* ---- Tablet: 768–1099 ---- */
@media (max-width: 1099px) {
  .stage { grid-template-columns: 70px 150px 1fr; }
  .stage p { text-align: left; }
  .stages-label { margin-left: 70px; width: 150px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact .inquiry { max-width: 640px; width: 100%; margin: 0 auto; }
  .contact .contact-meta { margin-top: 1.6rem; }
}
@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; padding: 2.4rem 0; }
  .offer-detail { max-width: 572px; width: 100%; margin: 0 auto; }
  .addon-items { grid-template-columns: 1fr; max-width: 30em; margin-left: auto; margin-right: auto; }
  .about-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 30em; margin: 0 auto; gap: 3.2rem; }
  .member .photo { max-width: 220px; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .team-grid { max-width: 640px; gap: 2.8rem; }
  .member { display: grid; grid-template-columns: 180px 1fr; column-gap: 2rem; align-items: center; text-align: left; }
  .member .photo { grid-row: 1 / span 3; max-width: 180px; margin: 0; }
  .member h4 { align-self: end; }
  .member .role { margin: 0.5rem 0 0.8rem; }
  .member p:not(.role) { margin: 0; align-self: start; }
}

/* ---- Phone: up to 767 ---- */
@media (max-width: 767px) {
  .points { grid-template-columns: 1fr; max-width: 30em; margin-left: auto; margin-right: auto; }
  .concept-frame { padding-left: 1rem; padding-right: 1rem; }
  .concept-go a { font-size: 0.875rem; }
  .concept-note { font-size: 0.75rem; }
  .offer-meta dt { font-size: 0.75rem; }
  .stages-label { width: auto; margin-left: 0; text-align: left; }
  .stage { grid-template-columns: 2.6rem 1fr; gap: 0.5rem 0.4rem; min-height: 0; padding: 1.4rem 0; align-items: baseline; }
  .stage h3 { text-align: left; }
  .stage p { grid-column: 2; }
  .search .center-head .br-d, .fine .br-d { display: none; }
}
@media (max-width: 420px) {
  .offer-meta > div { padding: 0.8rem 0.5rem 0.9rem; }
  .offer-meta dd { font-size: 1.125rem; }
  .cta-pencil--serif { padding: 10px 20px; }
}

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 10vh 6vw 12vh; }
.legal h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}
.legal .updated {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe);
  padding-bottom: 2.4rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem;
}
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 3.2rem 0 1rem; max-width: none;
  letter-spacing: -0.01em;
}
.legal p, .legal li { color: var(--ink-soft); line-height: 1.85; font-size: 0.98rem; }
.legal p + p { margin-top: 1rem; }
.legal ul { list-style: none; margin: 1rem 0; }
.legal li { position: relative; padding: 0.45rem 0 0.45rem 1.5rem; }
.legal li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 8px; height: 1px; background: var(--rust); }
.legal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.legal a:hover { border-color: var(--ink); }

/* ---------- Back to top ---------- */
/* Appears once the visitor is far enough down that returning by scrolling is a
   chore. Square, hairline, ivory-on-ink — same language as the buttons, not a
   circular drop-shadowed badge from another design system. The solid ivory fill
   keeps it legible where it floats over the dark contact section. */
.to-top {
  position: fixed;
  right: clamp(0.9rem, 3vw, 2.4rem);
  bottom: clamp(0.9rem, 3vh, 2rem);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s, color .2s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--ivory); }
.to-top-arrow { font-size: 0.85rem; line-height: 1; }

.footer-meta [data-to-top] { border-bottom-color: transparent; }
.footer-meta [data-to-top]:hover { border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}
@media print {
  .to-top { display: none; }
}