/* ============================================================
   Variant C — «Editorial calm», restructured round 1
   Forked from variant A. Same tokens, same faces, same warm family.
   Round-1 changes are tagged C-R1 in the comment above each rule they replace.
   ============================================================ */

:root {
  /* palette — warm family only (no cool hues) */
  --paper: #F7F1E8;
  --cream: #EFE5D8;
  --oat: #E5D8C6;              /* C-R1 third ground tier, derived from --beige */
  --beige: #E7DCD0;
  --sand: #D2BEA7;
  --taupe: #97836D;
  --tan: #BA9A77;
  --espresso: #382C24;
  --espresso-deep: #2B211B;
  --ink: #2C3751;
  --ink-deep: #0F1D34;
  --accent: #B55806;
  --bronze: #9D6D40;
  --bronze-text: #7A5230;      /* AA-safe small-label bronze */
  --cream-on-dark: #F3EADF;
  --ivory: #F0E4D4;            /* C-R1 hero kicker — 10.78:1 on --espresso */
  --hairline: rgba(151, 131, 109, .38);
  --hairline-dark: rgba(243, 234, 223, .22);

  /* type scale (1.33 ratio, 17px base) */
  --step--1: 0.8235rem;   /* 14 */
  --step-0: 1.0625rem;    /* 17 */
  --step-1: 1.4118rem;    /* 24 */
  --step-2: 1.8824rem;    /* 32 */
  --step-3: 2.5rem;       /* 40 */
  --step-4: 3.3rem;       /* 53 */
  --step-display: clamp(3.4rem, 7.6vw, 6.5rem);

  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* spacing scale */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem;
  --s5: 4rem; --s6: 6.5rem; --s7: 9rem;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;                 /* one radius, used sparingly */
  --photo-grade: saturate(.96) sepia(.06) contrast(1.01);

  /* hero photo dissolve — see § hero. Eased multi-stop ramps (a single linear ramp
     bands on dark browns); the x-ramp lives entirely inside the asset's clean
     backdrop strip so the face is never touched. */
  --hero-mask-x: linear-gradient(to right,
      #000 0%, #000 74%,
      rgba(0,0,0,.97) 79%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.68) 88%,
      rgba(0,0,0,.42) 92%, rgba(0,0,0,.18) 96%, rgba(0,0,0,0) 100%);
  --hero-mask-y: linear-gradient(to bottom,
      #000 0%, #000 84%,
      rgba(0,0,0,.86) 89%, rgba(0,0,0,.58) 93%,
      rgba(0,0,0,.26) 97%, rgba(0,0,0,0) 100%);
  --hero-mask-y-m: linear-gradient(to bottom,
      #000 0%, #000 62%,
      rgba(0,0,0,.92) 71%, rgba(0,0,0,.74) 79%, rgba(0,0,0,.48) 86%,
      rgba(0,0,0,.24) 93%, rgba(0,0,0,.08) 97%, rgba(0,0,0,0) 100%);

  /* C-R1 linen/paper grain for the LIGHT tiers (F2) */
  --linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23l)'/%3E%3C/svg%3E");
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* the header is sticky (77px at 1440, ~62px on the phone) — every in-page anchor
   lands under it unless the scroll port is padded. Sized once, here, so future
   section edits can never re-introduce a hidden target. */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; filter: var(--photo-grade); }
ul, ol { list-style: none; }
a { color: inherit; }
main { display: block; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream-on-dark);
  padding: .6rem 1.2rem; font-family: var(--font-ui); font-size: var(--step--1);
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* editorial 12-col grid */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }

.eyebrow {
  font-family: var(--font-ui); font-weight: 600; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-text);
}
.eyebrow::after {
  content: ""; display: inline-block; width: 2.6rem; height: 1px;
  background: var(--bronze); margin-left: .9rem; vertical-align: middle;
}
.on-dark .eyebrow { color: var(--sand); }
.on-dark .eyebrow::after { background: var(--tan); }

h1, h2, .display { font-family: var(--font-display); font-weight: 500; line-height: 1.08; }
h2 { font-size: var(--step-3); letter-spacing: .005em; margin-bottom: var(--s3); }
h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--step-1); line-height: 1.3; }

/* plumb-line motif (architecture metaphor) */
.plumb { position: relative; }
.plumb::before {
  content: ""; position: absolute; top: -3.25rem; bottom: -3.25rem; left: 8.333%;
  width: 1px; background: var(--hairline); pointer-events: none;
}

/* buttons */
.btn {
  display: inline-block; font-family: var(--font-ui); font-weight: 600;
  font-size: .93rem; letter-spacing: .04em; text-decoration: none;
  padding: 1.02rem 2.1rem; border-radius: var(--radius);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
  cursor: pointer; border: 1px solid transparent;
}
.btn-solid { background: var(--accent); color: #FFF8EF; }
.btn-solid:hover { background: #9A4A05; }
.btn-outline { border-color: var(--tan); color: inherit; background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.on-dark .btn-outline:hover { color: var(--sand); border-color: var(--sand); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.on-dark .btn:focus-visible, .on-dark a:focus-visible,
.on-dark input:focus-visible, .on-dark textarea:focus-visible, .on-dark select:focus-visible {
  outline-color: var(--sand);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.header-bar {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-block: .85rem;
}
.brand { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; }
.brand svg { width: 40px; height: 40px; }
.brand-name {
  font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .06em;
  color: var(--ink); white-space: nowrap;
}
/* C-R1 (J): the horizontal nav now starts at 1025px, so the brand name only has to
   yield in the 1025–1180 band. Below that the hamburger owns the row. */
@media (max-width: 1180px) and (min-width: 1025px) { .brand-name { display: none; } }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.7rem; }
.site-nav a {
  white-space: nowrap;
  font-family: var(--font-ui); font-weight: 500; font-size: .8rem;
  letter-spacing: .07em; text-decoration: none; color: var(--ink);
  padding-block: .4rem; border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.site-nav a:hover { border-bottom-color: var(--accent); color: var(--bronze-text); }
.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.header-cta { padding: .62rem 1.25rem; font-size: .78rem; white-space: nowrap; }
.lang-switch { display: flex; gap: .15rem; font-family: var(--font-ui); font-size: .72rem; }
/* inactive langs sit at --bronze-text (#7A5230 on #F7F1E8 = 5.92:1, AA at any size);
   the active/inactive distinction is carried by weight + rule, never by contrast. */
.lang-switch a {
  text-decoration: none; padding: .3rem .42rem; letter-spacing: .05em;
  color: var(--bronze-text); font-weight: 500;
}
.lang-switch a:hover { color: #9A4A05; text-decoration: underline; text-underline-offset: .25em; }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s ease, opacity .25s ease; }

/* ---------- hero (dark tier) ---------- */
/* Photo integration inherited from variant A round 2: the photo IS the field.
   Left/top/bottom edges bleed off the section; the one free edge dissolves through
   --hero-mask-x, entirely inside the asset's clean backdrop strip. */
.hero {
  background-color: var(--espresso);
  background-image:
    radial-gradient(150% 120% at 6% 100%, rgba(122, 88, 64, .22) 0%, rgba(122, 88, 64, 0) 55%),
    linear-gradient(90deg, rgba(16, 10, 7, .62) 0%, rgba(16, 10, 7, .50) 34%, rgba(16, 10, 7, 0) 74%);
  color: var(--cream-on-dark);
  position: relative; overflow: hidden;
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  min-height: min(88vh, 780px); position: relative;
}
.hero-photo {
  position: absolute; inset: 0 auto 0 0; width: 46%;
  margin: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: var(--hero-mask-x), var(--hero-mask-y);
          mask-image: var(--hero-mask-x), var(--hero-mask-y);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%;
}
/* C-R3 (T3): her hero copy is now two ledes plus a closing tagline (7 children, not
   5). The band's vertical padding drops one step and the CTA row tightens so the
   primary button still lands inside the first 900px viewport at 1440. */
.hero-copy {
  grid-column: 2; align-self: center;
  padding: var(--s5) var(--gutter) var(--s5) clamp(1.5rem, 3.5vw, 4rem);
  position: relative; z-index: 1; max-width: 620px; justify-self: start;
}
/* C-R1 (G): kicker lifted from --sand to --ivory. Measured on the field the kicker
   actually sits on (plain --espresso #382C24, both hero background layers are fully
   faded by 74% width): #F0E4D4 = 10.78:1, and the italic second line at --sand
   = 7.51:1. Both clear AAA (7:1). */
.hero-kicker {
  font-family: var(--font-ui); font-weight: 500; font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ivory);
  margin-bottom: var(--s3);
}
.hero-kicker em { font-style: normal; display: block; margin-top: .35rem; color: var(--sand); }
/* C-R1 (G): line-height 0.98 → 1.05 (the descender of «Наталія» was kissing the
   cap-line of «Кустова» at the clamp maximum). */
.hero-name {
  font-size: var(--step-display); font-weight: 500; line-height: 1.05;
  margin-bottom: var(--s2); letter-spacing: .01em;
}
.hero-name .line2 { display: block; margin-left: clamp(1.5rem, 6vw, 5rem); } /* asymmetry #1 */
.hero-sub {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-2); color: var(--sand); margin-bottom: var(--s3); line-height: 1.15;
}
/* C-R1 (G): two paragraphs condensed to one sentence — one weight, one colour. */
.hero-lede { max-width: 48ch; margin-bottom: var(--s2); font-size: var(--step-0); color: #E9DECF; }
/* C-R3 (T3): her closing line. NOT a new type object — it is the .hero-sub treatment
   (display serif, italic on the second half, --sand) one step down, set off by the
   same --hairline-dark rule the enquiry and footer bands already use. The identical
   rule closes the Методика section, so the two taglines read as one device. */
.hero-tagline, .method-closer {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  line-height: 1.25; color: var(--sand); max-width: 34ch;
}
.hero-tagline em, .method-closer em { display: block; font-style: italic; color: #F7EFE3; }
.hero-cta-row { margin-top: var(--s3); display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* grain on dark sections */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* C-R1 (F2): the same treatment extended to the LIGHT tiers at ~2.5% — a linen
   tooth, not a visible noise. pointer-events:none so it never intercepts a tap. */
.grain-soft { position: relative; }
.grain-soft::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .025; background-image: var(--linen); mix-blend-mode: multiply;
}

/* entrance: ONE orchestrated reveal, hero only, CSS-only */
.reveal > * { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.22,.7,.3,1) forwards; }
.reveal > *:nth-child(1) { animation-delay: .05s; }
.reveal > *:nth-child(2) { animation-delay: .17s; }
.reveal > *:nth-child(3) { animation-delay: .29s; }
.reveal > *:nth-child(4) { animation-delay: .41s; }
.reveal > *:nth-child(5) { animation-delay: .53s; }
.reveal > *:nth-child(6) { animation-delay: .65s; }
.reveal > *:nth-child(7) { animation-delay: .77s; }   /* C-R3: hero gained a 7th child */
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal > * { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- about — bio + stats, ONE authority section (cream tier) ---------- */
/* C-R1 (A, I): the standalone «Numbers» band is gone; the four figures now close
   the Про мене section they belong to, and the two orphaned notes that used to
   float under them are folded into the bio's last paragraph. */
/* overflow-x: clip (NOT hidden) — the taupe offset frame behind the portrait bleeds
   16px past the container's right edge and would otherwise add a horizontal scroll.
   `clip` creates no scroll container, so `.plumb::before` still bleeds vertically. */
.about { padding-block: var(--s7) var(--s6); background: var(--cream); overflow-x: clip; }
.about-grid { align-items: start; }
.about-copy { grid-column: 2 / 9; }
/* C-R4 (T1): her v2 bio is ~1.6× the round-3 copy, which left the portrait column an
   ~1500px void at 1440. The portrait now rides the copy — `position: sticky`, the same
   device .method-media, .safe-card and .res-head already use. It still starts on the
   -7.5rem overlap (asymmetry #2) and is still the containing block for its sand frame. */
.about-media { grid-column: 9 / 13; position: sticky; top: 6.5rem; align-self: start; margin-top: -7.5rem; }
.about-media img { width: 100%; height: auto; aspect-ratio: 1280 / 1155; background: var(--sand); }
.about-media::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  background: var(--sand); z-index: -1;
}
.about h2 { font-size: var(--step-4); max-width: 14ch; }
.about-copy > p { max-width: 62ch; margin-bottom: var(--s2); }
/* C-R2 (P7): the three reflective questions read as an aside, not as body copy —
   an indented callout on a 2px terracotta rule. */
.about-questions {
  margin: var(--s4) 0; padding: .35rem 0 .35rem clamp(1.1rem, 2vw, 1.6rem);
  border-left: 2px solid var(--accent);
}
.about-questions li {
  font-family: var(--font-display); font-style: italic; font-size: var(--step-1);
  line-height: 1.35; color: var(--bronze-text); margin-bottom: .65rem;
}
.about-tagline {
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-text);
  margin-top: var(--s3);
}
/* C-R3 (T5): her credential line under the name — the .about-tagline micro-cap object
   re-used at the head of the section instead of its foot. */
.about-role {
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-text);
  margin: 0 0 var(--s3);
}
/* C-R3 (T5): «Мій підхід до клієнтів» — the same display-serif h3 object the bounds
   and pricing cards already use, no new step. */
.about-copy h3 {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  line-height: 1.2; color: var(--ink-deep); margin: var(--s4) 0 var(--s2);
}

/* the four figures, closing the about section */
.numbers-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}
.numbers-row > div { padding: .5rem 1.6rem; border-left: 1px solid var(--hairline); }
.numbers-row > div:first-child { border-left: 0; padding-left: 0; }
/* C-R1 (I): all four numerals are now one type object — display serif, one size,
   one baseline, suffix inline. The stacked «Понад» qualifier that made cells 2 and 4
   sit differently from 1 and 3 is gone (the «+» carries the same meaning inline). */
.numbers-row p.num {
  font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 500; color: var(--ink-deep); line-height: 1; margin-bottom: .55rem;
  max-width: none; letter-spacing: .005em;
}
.numbers-row p { font-size: .9rem; line-height: 1.5; color: var(--ink); max-width: 26ch; }

/* ---------- topics «Теми з якими я працюю» ----------
   C-R3 (T2a): PORTED VERBATIM from variants/variant-a/css/main.css § topics — the
   client asked for «Напрямки» to be exactly as it is in version A. Two-column
   italic-serif register at full content width, diamond markers, no numerals, no row
   rules. Do not restyle it in C without restyling A. */
.topics { padding-block: var(--s7) var(--s6); }
.topics h2 { font-size: var(--step-4); max-width: 16ch; margin-bottom: var(--s4); }
.topics-list {
  columns: 2; column-gap: clamp(3rem, 7vw, 7rem); column-fill: balance;
  border-top: 1px solid var(--hairline); padding-top: var(--s3);
}
.topics-list li {
  break-inside: avoid; position: relative; padding: .62rem 0 .62rem 2rem;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.3; color: var(--ink-deep);
}
.topics-list li::before {
  content: ""; position: absolute; left: .1rem; top: 1.32rem; width: .5rem; height: .5rem;
  border: 1px solid var(--accent); transform: rotate(45deg);
}

/* ---------- results «Що ви отримуєте в результаті нашої роботи» (oat tier) ----------
   C-R4 (T2): her text is now three named groups of three, so the six-card grid is
   replaced by a three-row editorial ledger. The premium register is restraint, not
   ornament: nothing here is new to the page — the large roman numeral is the
   display-serif numeral object already used by .numbers-row and .step-n (in --tan),
   the group title is the same display-serif h3 as .about-copy h3 / .tier h3, the
   group rows are separated by the site's single hairline, and each item is a
   navy display-serif lead over body copy. No new colour, face, shadow or gradient. */
.results { background: var(--oat); padding-block: var(--s7) var(--s6); }   /* C-R4b #8: 144/104, the .about/.topics/.pricing seam rhythm */
.results h2 { font-size: var(--step-4); max-width: 18ch; margin-bottom: var(--s5); }
.res-groups { border-top: 1px solid var(--hairline); }
.res-group {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.2rem, 4vw, 3.6rem);
  border-bottom: 1px solid var(--hairline);
}
/* C-R4b #9: the sticky was inert (the head is never taller than its three items) but
   still slid the numeral up behind the nav before the items finished. Plain block now. */
.res-head { align-self: start; }
.res-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 5vw, 4.6rem); line-height: .9;
  /* C-R4b #6: --tan on --oat was 1.91:1 and read as a smudge. --bronze-text is the
     colour the eyebrow/micro-caps already use on this ground — 5.43:1. Size unchanged. */
  color: var(--bronze-text); letter-spacing: .04em; margin-bottom: .8rem;
}
.res-head h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-2);
  line-height: 1.16; color: var(--ink-deep); max-width: 28ch; text-wrap: balance;
}
.res-list li { padding-block: clamp(.95rem, 1.7vw, 1.4rem); border-top: 1px solid var(--hairline); }
.res-list li:first-child { border-top: 0; padding-top: .2rem; }
.res-list strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); line-height: 1.24; color: var(--ink-deep);
  margin-bottom: .35rem;
}
.res-list span { display: block; font-size: .95rem; line-height: 1.62; color: var(--ink); max-width: 48ch; }

/* ---------- method (dark split) + rings diagram ---------- */
.method { background: var(--espresso); color: var(--cream-on-dark); }
.method-grid { display: grid; grid-template-columns: 7fr 5fr; min-height: 640px; }
/* C-R3 (T6): the Методика copy is now ~4× longer, so the portrait column can no
   longer stretch with it (object-fit would crop it to a sliver). It sticks instead —
   the same device .safe-card already uses in the process section. */
.method-media {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--espresso-deep); order: 2;
}
.method-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.method-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(255deg, rgba(56,44,36,0) 60%, rgba(56,44,36,.85) 100%); }
.method-copy { order: 1; padding: var(--s6) clamp(2rem, 5vw, 4.5rem) var(--s6) var(--gutter); max-width: 820px; }
.method-copy h2 { font-size: var(--step-3); max-width: 22ch; color: #F7EFE3; }
.method-copy > p { margin-bottom: var(--s2); max-width: 58ch; color: #E4D7C4; }
.method-copy > p strong { color: var(--sand); letter-spacing: .04em; }
.method-combines { margin-top: var(--s3); font-family: var(--font-ui); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: var(--s2); }
.method-list li { position: relative; padding: .8rem 0 .8rem 2.2rem; border-top: 1px solid var(--hairline-dark); max-width: 52ch; }
.method-list li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 1.2rem; height: 1px; background: var(--tan); }
/* ---- C-R3 (T6): the section grew from 8 paragraphs to a five-part essay. No new
   visual language: the second heading line reuses the .line2 block device from the
   hero/footer, the subheads reuse the display-serif h3 object (--step-2) already used
   by .bounds h3 / .tier h3, the two «щоб:» lists reuse .method-list, and the five
   pillars are .method-list rows whose first line is a named title. ---- */
.method-copy h2 .line2 { display: block; }
.method-copy h3 {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  line-height: 1.2; color: #F7EFE3; margin: var(--s4) 0 var(--s2); max-width: 22ch;
}
.method-copy .method-list + h3 { margin-top: var(--s5); }
/* her five-beat staccato line, kept as one paragraph in the display serif */
.method-stacc {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.4; color: var(--sand);
  max-width: 44ch; margin-bottom: var(--s2);
}
.method-pillars li { max-width: 58ch; padding-top: 1.05rem; }
.pillar-t {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); line-height: 1.2; color: #F7EFE3; margin-bottom: .35rem;
}
/* C-R1 (F1): three organically-offset rings, 1px warm strokes on the espresso field,
   each exclusive lens carrying its own label — the labels sit INSIDE the regions, so
   the drawing needs no leader lines and reads as a diagram, not clip-art. */
.method-diagram { margin-top: var(--s5); max-width: 620px; }
.method-diagram .rings { width: 100%; height: auto; display: block; }
.rings-lbl text {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px;
}

/* ---------- process — C-R4 (T5): editorial step ledger on a vertical thread ----------
   Her text grew from 4 short stages to a 4-paragraph opening, SIX stages and a
   closing block. Four narrow columns cannot carry that, so the stepper is rebuilt as
   a full-measure ledger: one row per stage, a display-serif numeral hanging in its
   own rail, hairline rules between rows, and the monoline thread turned vertical
   (it is the same device the phone layout already used in round 1 — promoted to
   every width rather than invented). Luxury here is space and hierarchy: one
   numeral object, one heading object, one body measure, nothing decorative. */
.process { padding-block: var(--s7) var(--s6); background: var(--cream); }
/* C-R4b #2: the 1320 spread is gone. It existed so FOUR stepper columns kept a readable
   measure; the ledger is one stage per row, so it no longer earns a special width — and
   the spread was hanging the section's eyebrow and h2 60px off the site grid (l=108 vs
   l=168 everywhere else). Back on the 1200 container, the stage column is still ~551px
   (~58ch at 17px). */
.process-head h2 { font-size: var(--step-4); max-width: 20ch; margin-bottom: var(--s4); }

.process-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.process-main { min-width: 0; }
/* her opening: the first sentence keeps the italic display-serif lead the section
   already had (.process-intro), the rest is plain body at a reading measure. */
.process-lede p { max-width: 62ch; margin-bottom: var(--s2); color: #3D4661; }
.process-lede p:first-child {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.4; color: var(--bronze-text);
  max-width: 48ch; margin-bottom: var(--s3);
}
.process-sub, .process-closing h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-2);
  line-height: 1.2; color: var(--ink-deep);
}
.process-sub { margin: var(--s5) 0 var(--s3); }

/* the thread: a single hairline rail down the left of the ledger, one terracotta node
   per stage. A border, not an absolutely-positioned bar, so it always runs exactly
   the height of the six rows. */
.steps {
  --rail: clamp(1.7rem, 2.8vw, 2.6rem);
  position: relative;
  border-left: 1px solid rgba(181, 88, 6, .32);
  padding-left: var(--rail);
}
/* C-R4b #7: the rail used to stop in mid-air under stage 06. A closing node — the same
   7px terracotta dot each stage carries — terminates it. */
.steps::after {
  content: ""; position: absolute; left: -4px; bottom: -3.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.step {
  position: relative;
  display: grid; grid-template-columns: clamp(3.4rem, 6vw, 5.4rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.9rem); align-items: start;
  padding-block: clamp(1.5rem, 2.6vw, 2.3rem);
  border-top: 1px solid var(--hairline);
}
.step::before {
  content: ""; position: absolute; left: calc(var(--rail) * -1 - 4px);
  top: clamp(1.9rem, 3vw, 2.7rem);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
/* `.step > .step-n`, not `.step-n` — `.step p` below is the more specific selector and
   would otherwise win and set the numeral at body size (it did, in round 3). */
.step > .step-n {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: .95;
  color: var(--tan); letter-spacing: .02em; margin-bottom: 0; max-width: none;
}
.step-copy { min-width: 0; }
.step h4 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-2);
  line-height: 1.2; margin-bottom: .75rem; color: var(--ink-deep); max-width: 24ch;
}
/* C-R4b #3: stage prose was .95rem/15.2px — fine print against the 17px of
   .process-closing in the same column and of the certified .method-copy prose. Now on
   --step-0 at the body's own 1.68 leading; the bullet list keeps its old ~.98 ratio. */
.step p { font-size: var(--step-0); line-height: 1.68; color: #3D4661; margin-bottom: .8rem; max-width: 60ch; }
.step p:last-child { margin-bottom: 0; }
.step ul { max-width: 60ch; margin-bottom: .95rem; }
.step ul:last-child { margin-bottom: 0; }
.step ul li { position: relative; padding: .32rem 0 .32rem 1.3rem; font-size: 1.04rem; line-height: 1.6; color: #3D4661; }
.step ul li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .7rem; height: 1px; background: var(--bronze); }
/* stage 02 runs six questions in a row — set as the same indented italic-serif
   question register the About section uses (.about-questions), between hairlines so
   it reads as an aside inside the stage rather than a wall of body copy. */
.step .step-qs { margin: .3rem 0 1rem; padding-block: .5rem; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.step .step-qs li {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.35; color: var(--bronze-text);
  padding: .24rem 0 .24rem 1.3rem;
}
.step .step-qs li::before { top: 1.18rem; background: var(--accent); }

/* her closing block — body copy above the same tagline device the hero and Методика
   close with (display serif, one hairline above, short measure). */
/* C-R4b #1: .process-closing now sits OUTSIDE .process-body. While it was the last
   child of .process-main the grid was the sticky containing block, so at release the
   card travelled ~200px above the viewport top and showed a headless torso beside the
   closing tagline (measured cardTop -213). The sticky container now ends with the step
   ledger, the closing block runs the full measure below it, and on the phone the aside
   lands before the closing block instead of after it (#10). */
.process-closing { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.process-closing h3 { max-width: 26ch; margin-bottom: var(--s2); }
.process-closing p { max-width: 62ch; margin-bottom: var(--s2); color: #3D4661; }
.process-closer {
  margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--hairline);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.3; color: var(--bronze-text); max-width: 36ch;
}

/* C-R1 (E): the portrait is a sticky side card carrying only facts already in her
   copy — the confidentiality sentence and the online/offline formats. Nothing here
   is invented. C-R4: new photograph, and the frame is taller now that it rides a much
   longer ledger. */
.safe-card {
  position: sticky; top: 6.5rem;
  background: var(--paper); border: 1px solid var(--hairline);
  padding: var(--s3);
}
.safe-card .process-media { margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3); }
/* object-position read off the asset itself: her head begins at ~6% of the frame and
   her face occupies 12–25%, so a 12% top offset lands the crop on face + folded arms
   and never clips the top of her head. */
.safe-card .process-media img {
  width: 100%; height: 400px; object-fit: cover; object-position: 50% 12%;
  background: var(--sand);
}
.safe-h { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.2; margin-bottom: .8rem; color: var(--ink-deep); }
.safe-card p { font-size: .88rem; line-height: 1.55; color: #3D4661; margin-bottom: .7rem; }
.safe-meta { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--hairline); }
.safe-meta li {
  font-family: var(--font-ui); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-text);
  padding: .3rem 0 .3rem 1rem; position: relative;
}
.safe-meta li::before { content: ""; position: absolute; left: 0; top: .82rem; width: .42rem; height: .42rem; border: 1px solid var(--accent); transform: rotate(45deg); }

/* ---------- quote (breathing point, oat tier) ---------- */
.quote { padding-block: var(--s7); background: var(--oat); }
/* C-R2 (P5): the block is centred in its band and the quotation marks are a pair —
   the hanging « outside the measure, the closing » inline after the last word. */
.quote-inner { max-width: 820px; margin-inline: auto; position: relative; }
.quote blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.25; color: var(--ink-deep);
}
.quote blockquote::before {      /* asymmetry #4: hanging « */
  content: "«"; position: absolute; left: -0.72em; top: -0.05em;
  font-size: 1.4em; font-style: normal; color: var(--tan);
}
.quote blockquote p:last-child::after {   /* the closing half of the pair */
  content: "»"; font-style: normal; font-size: 1.4em; line-height: 0;
  color: var(--tan); margin-left: .08em; vertical-align: -.06em;
}
.quote cite { display: block; margin-top: var(--s3); font-family: var(--font-ui); font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); }

/* ---------- pricing — tier cards with their own CTA (cream tier) ---------- */
/* C-R1 (C): the hairline rows became cards, because each tier now carries actions:
   a primary button that jumps to the form AND pre-selects the format, plus two
   secondary channel links whose message already names the tier. */
.pricing { padding-block: var(--s7) var(--s6); background: var(--cream); }
.pricing h2 { font-size: var(--step-4); }
.pricing-sub { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--bronze-text); margin-bottom: var(--s5); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.25rem); }
.tier {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--hairline);
  padding: var(--s4) clamp(1.5rem, 2.4vw, 2rem) var(--s3);
}
/* C-R1 (F4): one geometric mark per tier — a single point, a four-point
   constellation, an arch. Drawn, not iconography off a set. */
.tier-mark { color: var(--bronze); margin-bottom: var(--s3); }
.tier-glyph { width: 44px; height: 44px; display: block; }
.tier h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.15; color: var(--ink-deep); }
.tier-vol { font-family: var(--font-ui); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); margin: .55rem 0 var(--s2); }
.tier-body { font-size: .93rem; line-height: 1.6; color: #3D4661; margin-bottom: var(--s4); }
.tier-actions { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--hairline); }
/* C-R2 (P6): the messenger pair is a subordinate alternative, not a second CTA —
   a muted label and the 48px targets kept intact.
   C-R3 (T2b): the «Обрати цей формат» button is gone at the client's request, so this
   line is now the card's only action. It no longer needs a hairline of its own —
   .tier-actions already draws one directly above it — and the 1.1rem offset that
   separated it from the button is removed so the block sits flush under that rule. */
.tier-alt {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 0; padding-top: .15rem; border-top: 0;
  min-height: 48px;
}
/* C-R4 (T3): the label is now her own call to action («записатись у телеграм»), not a
   descriptive aside, so it carries the card's meaning and steps up one notch in size
   and contrast — still the same micro-cap object, still the only action on the card. */
.tier-alt-label {
  font-family: var(--font-ui); font-weight: 600; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-text);
  line-height: 1.4;
}
.tier-ico { display: flex; gap: .25rem; margin-left: auto; margin-block: -.35rem; }
.tier-ico a {
  display: grid; place-content: center; width: 48px; height: 48px;
  color: var(--bronze-text); border-radius: var(--radius);
  transition: color .2s ease, background-color .2s ease;
}
.tier-ico a:hover { color: var(--accent); background: var(--cream); }
.tier-ico svg { width: 22px; height: 22px; }

/* C-R4 (T4): the «Відгуки» testimonials section was deleted at the client's request
   (issue 8). Its entire rule block (.testimonials / .tst* / .tst-dots) and the two
   responsive overrides that went with it are removed rather than commented out —
   no selector below matches any element on the page any more. */

/* Direct enquiry delivery feedback: a prominent, focused completion panel. */
.form-status { margin-top: 1.5rem; padding: 1rem; border: 1px solid currentColor; line-height: 1.6; }
.form-status[hidden] { display: none; }
#enquiry-form.is-sent > :not(.form-status) { display: none; }
#enquiry-form.is-sent .form-status {
  margin: 0; padding: clamp(1.5rem, 4vw, 3rem); background: #F7EFE3; color: #29231F;
  border: 2px solid #D2BEA7; scroll-margin: 6rem; min-height: 20rem;
}
.form-success-icon { display: block; font-size: 2.5rem; line-height: 1; margin-bottom: 1rem; color: #37553C; }
.form-status h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; color: #29231F; margin-bottom: 1rem; }
.form-status p { max-width: 38ch; margin-bottom: 1.5rem; }
.form-status .btn { color: #29231F; border: 1px solid #29231F; white-space: normal; }
.form-status:focus-visible { outline: 3px solid #D2BEA7; outline-offset: 5px; }

/* ---------- enquiry form (dark band tier) ---------- */
/* C-R1 (H): the form band is one of the four dark tiers, so every control is
   re-tuned for the espresso ground (labels --sand 7.51:1, help copy #C9BBA6 7.17:1). */
.enquiry { background: var(--espresso); color: var(--cream-on-dark); padding-block: var(--s6); }
.enquiry-grid { display: grid; grid-template-columns: 5fr 6fr; column-gap: clamp(2.5rem, 6vw, 6rem); }
.enquiry h2 { font-size: var(--step-3); max-width: 14ch; color: #F7EFE3; }
.enquiry-note { max-width: 40ch; color: #E4D7C4; font-size: .95rem; }
.enquiry-copy { display: flex; flex-direction: column; }
/* C-R2 (M3): the phone block used to carry its own `margin-top:auto`, which split
   the free space into two voids. Only the privacy line is bottom-anchored now; the
   phone follows it 2rem below, so the pair reads as one bottom-set contact group. */
.enquiry-aside { margin-top: 2rem; }
.enquiry-label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: .55rem; }
.enquiry-phone { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.enquiry-phone a { color: var(--cream-on-dark); text-decoration: none; }
.enquiry-phone a:hover { color: var(--sand); }
.enquiry-privacy { font-size: .9rem; font-style: italic; color: #C9BBA6; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--hairline-dark); max-width: 32ch; }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: .45rem; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; border-bottom: 1px solid var(--tan); background: transparent;
  font-family: var(--font-body); font-size: var(--step-0); color: var(--cream-on-dark);
  padding: .55rem 0; border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #C9BBA6; opacity: 1; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%),
                    linear-gradient(135deg, var(--sand) 50%, transparent 50%);
  background-position: right 12px top 1.35rem, right 6px top 1.35rem;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select option { color: var(--ink); background: var(--paper); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--sand); }
/* C-R1 (C): visible confirmation that the card's button actually set the format. */
.tier-confirm {
  margin-top: .6rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; color: var(--sand); display: flex; gap: .5rem; align-items: baseline;
}
.tier-confirm::before { content: "→"; color: var(--accent); }
.consent { display: flex; gap: .85rem; align-items: flex-start; font-size: .82rem; color: #C9BBA6; margin-bottom: var(--s3); max-width: 46ch; }
.consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--tan); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  display: grid; place-content: center; position: relative;
  transition: border-color .2s ease, background-color .2s ease;
}
.consent input[type="checkbox"]::before {
  content: ""; width: 12px; height: 7px;
  border-left: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
  transform: rotate(-45deg) translate(1px, -2px) scale(.6);
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
.consent input[type="checkbox"]:hover { border-color: var(--sand); }
.consent input[type="checkbox"]:checked { border-color: var(--sand); }
.consent input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -2px) scale(1); }
/* ≥44px touch target without moving the 22px box */
.consent input[type="checkbox"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.consent label { cursor: pointer; padding-block: .1rem; }
@media (prefers-reduced-motion: reduce) {
  .consent input[type="checkbox"], .consent input[type="checkbox"]::before { transition: none; }
}

/* ---------- not-topics «Межі роботи» (cream tier) ----------
   C-R3 (T2e): PORTED VERBATIM from variants/variant-a/css/main.css § not-topics — the
   client asked for «межі роботи» to be exactly as it is in version A, and to stay at
   the end of the page. The C-R1 two-card bounds module (sand «Мій фокус» column +
   espresso-ruled exclusions column) is gone: the focus list now lives in its own
   § topics section, also ported from A. */
.not-topics { padding-block: var(--s6); background: var(--cream); }
.not-topics h2 { max-width: 18ch; }
.not-topics-note { font-size: .9rem; color: var(--taupe); font-style: italic; margin-bottom: var(--s3); max-width: 52ch; }
.not-list { columns: 2; column-gap: clamp(2.5rem, 6vw, 6rem); column-fill: balance; max-width: none; }
.not-list li { break-inside: avoid; display: flex; gap: 1.1rem; align-items: baseline; padding: .55rem 0; font-size: .97rem; color: #3D4661; max-width: 46ch; }
.not-list .x { color: var(--taupe); font-family: var(--font-ui); font-size: .8rem; }

/* ---------- footer (dark tier) ---------- */
.site-footer { background: var(--espresso-deep); color: var(--cream-on-dark); padding-block: var(--s7) var(--s4); }
.footer-head { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.12; max-width: 22ch; color: #F7EFE3; margin-bottom: var(--s3); }
.footer-head .indent { display: block; margin-left: clamp(1.5rem, 5vw, 4rem); }
.footer-closer { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; margin-bottom: var(--s5); margin-left: clamp(1.5rem, 5vw, 4rem); }
.footer-closer .btn-solid { background: var(--accent); color: #FFF8EF; }
.footer-closer .btn-solid:hover { background: #C96A12; }
.footer-cols { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline-dark); }
.footer-meta { font-size: .88rem; color: #C9BBA6; margin-top: .6rem; }
.footer-label { font-family: var(--font-ui); font-weight: 600; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-bottom: 1rem; }
.footer-nav li { margin-bottom: .55rem; }
.footer-nav a { text-decoration: none; font-size: .92rem; color: #E4D7C4; }
.footer-nav a:hover { color: var(--sand); }
.footer-contact a { color: #E4D7C4; text-decoration: none; }
.footer-contact a:hover { color: var(--sand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--hairline-dark); font-family: var(--font-ui); font-size: .72rem; letter-spacing: .06em; color: #C9BBA6; flex-wrap: wrap; }
.footer-bottom .lang-switch a { color: #C9BBA6; }
.footer-bottom .lang-switch a[aria-current="true"] { color: var(--cream-on-dark); border-bottom-color: var(--tan); }

/* ---------- mobile micro-bar (phone only) ---------- */
/* C-R1 (J): appears once the hero has scrolled away, retires before the footer so it
   never sits on top of the closing content. */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  gap: .6rem; align-items: center;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--espresso) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline-dark);
  transform: translateY(110%); transition: transform .28s ease;
}
.mobile-bar .btn { flex: 1 1 auto; text-align: center; padding: .95rem 1rem; font-size: .82rem; min-height: 48px; }
.mb-ico {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-content: center;
  color: var(--sand); border: 1px solid var(--hairline-dark); border-radius: var(--radius);
}
.mb-ico svg { width: 22px; height: 22px; }
.mb-ico:hover { color: var(--cream-on-dark); border-color: var(--tan); }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }

/* ============================================================
   responsive
   ============================================================ */
/* C-R1 (J): the tablet band 861–1024 used to run the full horizontal nav and
   overflowed the header by 174px. The hamburger now owns everything ≤1024. */
@media (max-width: 1024px) {
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: .2rem; }
  .site-nav a { display: block; padding: .7rem 0; font-size: .95rem; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav + .header-actions { margin-left: 0; }

  .about-media { margin-top: -4rem; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .method-copy { padding-block: var(--s5); }

  /* C-R4: the ledger already runs one stage per row, so below the spread it simply
     takes the full width and the portrait card drops underneath it. */
  .process-body { grid-template-columns: 1fr; row-gap: var(--s4); }
  .safe-card { position: static; display: grid; grid-template-columns: 240px 1fr; gap: var(--s3); align-items: start; }
  .safe-card .process-media { margin: calc(var(--s3) * -1) 0 calc(var(--s3) * -1) calc(var(--s3) * -1); grid-row: span 4; }
  .safe-card .process-media img { height: 100%; min-height: 300px; }

  .res-group { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 3.5vw, 3rem); }

  .tiers { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .header-actions .lang-switch { display: flex; }

  /* stacked, the photo is full-width, so the desktop field's HORIZONTAL vignette
     would cut across the dissolve. Phone gets the plain espresso field. */
  .hero { background-image: none; }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  /* C-R1 (G): ~45vh so the H1, the subtitle and the primary CTA all sit above the
     fold on a 390px-wide phone; the bottom of the frame still dissolves. */
  .hero-photo {
    position: relative; inset: auto; width: auto;
    /* C-R3 (T3): her hero copy grew by a second lede and a closing tagline. The photo
       band gives back the height so the kicker→CTA column still lands inside one
       390×844 screen. */
    order: -1; height: clamp(160px, 24vh, 210px);
    margin: 0;
    -webkit-mask-image: var(--hero-mask-y-m);
            mask-image: var(--hero-mask-y-m);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  /* C-R1 (G): every gap in the stacked hero is tuned so the kicker, H1, subtitle
     AND the primary CTA all land above the fold on a 390x844 phone (measured). */
  .hero-copy { grid-column: 1; justify-self: start; padding: var(--s2) var(--gutter) var(--s5); }
  .hero-kicker { margin-bottom: .65rem; }
  .hero-name { margin-bottom: .55rem; }
  .hero-sub { margin-bottom: .7rem; font-size: var(--step-1); }
  /* C-R3: TWO ledes now — they need a gap between them, and a tighter measure. */
  .hero-lede { margin-bottom: .6rem; font-size: .95rem; line-height: 1.45; }
  .hero-lede:last-of-type { margin-bottom: 0; }
  .hero-tagline { margin-top: .9rem; padding-top: .8rem; font-size: 1.15rem; }
  .hero-cta-row { margin-top: 1rem; }

  .grid12 { display: block; }
  /* stacked, the portrait is its own block again — sticky would pin it while the
     copy beneath scrolled past. */
  .about-media { position: static; margin: var(--s4) 0 0; max-width: 420px; }
  .about { padding-top: var(--s6); }
  .plumb::before { display: none; }

  .numbers-row { grid-template-columns: 1fr 1fr; row-gap: var(--s4); margin-top: var(--s5); }
  .numbers-row > div:nth-child(3) { border-left: 0; padding-left: 0; }

  .method-grid { grid-template-columns: 1fr; }
  /* C-R3: stacked, the portrait is its own band again — no stickiness. */
  .method-media { position: static; height: 52vh; min-height: 340px; }
  .method-media::after { background: linear-gradient(0deg, rgba(56,44,36,0) 60%, var(--espresso) 98%); }
  .method-diagram { margin-top: var(--s4); }

  /* C-R4 (T2): stacked, the roman numeral and the group title sit above their three
     items; the numeral steps down so it never dominates the phone column. */
  .res-group { grid-template-columns: 1fr; row-gap: 1.3rem; padding-block: var(--s4); }
  .res-head { position: static; }
  .res-num { font-size: 2.6rem; margin-bottom: .45rem; }
  /* C-R4b #5: at --step-1 the group title (22.59/500) sat almost level with the item
     leads (19.52/600) and the three groups read as one flat 12-item list. Held at
     --step-2 so the group head clearly outranks its items. */
  .res-head h3 { font-size: var(--step-2); max-width: none; }
  .res-list span { max-width: none; }

  /* C-R4 (T5): on the phone the numeral sits above its stage title rather than in a
     rail of its own, and the thread tightens against the left edge. */
  .steps { --rail: 1.35rem; }
  .step { grid-template-columns: 1fr; row-gap: .35rem; }
  .step::before { top: 1.75rem; }
  .step > .step-n { font-size: 2.2rem; }
  .step h4 { font-size: var(--step-1); max-width: none; }
  .step p, .step ul { max-width: none; }
  .step .step-qs li { font-size: var(--step-0); }
  .safe-card { grid-template-columns: 1fr; }
  .safe-card .process-media { margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3); grid-row: auto; }
  .safe-card .process-media img { height: 300px; min-height: 0; }

  .process-lede p, .process-closing p, .process-closer { max-width: none; }
  .process-sub, .process-closing h3 { font-size: var(--step-1); max-width: none; }
  .quote-inner { margin-left: 0; padding-left: 2.2rem; }
  /* C-R2 (P5): at 390 the hanging « was falling 2px off the left edge and rendering
     half-cut, which broke the pair the closing » completes. */
  .quote blockquote::before { left: -1.05rem; font-size: 1.2em; }

  .enquiry-grid { grid-template-columns: 1fr; row-gap: var(--s4); }
  .enquiry-privacy { display: none; }

  /* C-R3: both ported A registers collapse to one column on the phone, as in A. */
  .topics-list { columns: 1; }
  .not-list { columns: 1; }

  .footer-cols { grid-template-columns: 1fr; }
  .site-footer { padding-bottom: 6rem; }   /* room for the micro-bar */

  .mobile-bar { display: flex; }
  .mobile-bar.is-on { transform: translateY(0); }
}

@media (max-width: 600px) {
  .header-cta { display: none; }      /* CTA lives in the hero one swipe below */
  .header-bar { gap: .8rem; }
  .brand-name { font-size: 1rem; }
  .brand svg { width: 34px; height: 34px; }
  .footer-closer { margin-left: 0; gap: 1.1rem; }
  .footer-closer .btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  :root { --step-3: 2.1rem; --step-4: 2.5rem; }
  .hero-name { font-size: clamp(2.5rem, 12vw, 3.1rem); }
  .hero-cta-row .btn { width: 100%; text-align: center; }
  .numbers-row { grid-template-columns: 1fr; }
  .numbers-row > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 1rem; }
  .numbers-row > div:first-child { border-top: 0; }
  .res-list strong { font-size: 1.22rem; }   /* keep a clear step over the .95rem description */
  .topics-list li { font-size: 1.15rem; }   /* C-R3: as in A at this width */
}