/*
Theme Name: RAUNF Fondas LT
Theme URI: https://www.raunffondas.lt
Author: RAUNF Foundation
Description: Custom theme for https://www.raunffondas.lt. All page copy lives in the theme's parts/ folder, so updating the site means uploading a new version of this theme — no page editing required.
Version: 1.14.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raunf-fondas-lt
*/

/* ==========================================================================
   РАУНФ ФОНД — raunffond.org
   Custom stylesheet (no frameworks, no build step)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --blue:        #2289E6;
  --blue-hover:  #1a72c4;
  --blue-soft:   rgba(34, 137, 230, .12);
  --bordo:       #870000;   /* hero badge outline only — every other pill is blue */

  /* Surfaces */
  --bg:          #212529;
  --bg-deep:     #171717;
  --surface:     #1a1c1f;
  --surface-2:   #16181a;

  /* Type */
  --white:       #ffffff;
  --text:        rgba(255, 255, 255, .60);
  --text-strong: rgba(255, 255, 255, .85);
  --text-dim:    rgba(255, 255, 255, .38);
  --line:        rgba(255, 255, 255, .14);

  /* Fonts */
  --font-head:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:   "Ubuntu", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap:        1200px;
  --radius:      12px;
  --radius-lg:   16px;
  --pill:        999px;
  --header-h:    108px;

  /* Motion */
  --ease:        cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.75;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--white);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.125rem; font-weight: 400; }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--white); }

ul { margin: 0; padding: 0; list-style: none; }

strong, b { color: var(--text-strong); font-weight: 500; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--blue); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-family: var(--font-head); font-size: .875rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--deep { background: var(--bg-deep); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.grid-2--top { align-items: start; }

.stack-lg > * + * { margin-top: 28px; }

.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* 4.1 Pill label — the outlined "ABOUT US" / "WHAT WE DO" chips */
.label {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--pill);
  padding: 12px 28px;
  margin-bottom: 28px;
  line-height: 1;
}
.label--plain { border-color: var(--line); }

/* 4.1b Hero badge — the burgundy pill above the headline. Spec taken from the UK
   original: 2px #870000, 50px radius, 8/16 padding, Montserrat 14px, 2px tracking. */
.hero__badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .143em;
  text-transform: uppercase;
  color: var(--white);
  border: 2px solid var(--bordo);
  border-radius: var(--pill);
  padding: 8px 16px;
  margin-bottom: 26px;
  line-height: 1.2;
}

/* 4.2 Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-hover); color: #fff; }

.btn--outline { background: transparent; color: var(--white); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--white); color: var(--white); }

/* Full-width buttons carry long labels ("About this membership"), so they trade
   the wide side padding for room to keep the label on one line. */
.btn--block { display: flex; width: 100%; padding-inline: 18px; }
.btn--sm { padding: 13px 26px; font-size: .8125rem; }

/* 4.3 Rounded media */
.media {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--surface-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }

/* 4.4 Thin divider */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 22px auto;
  max-width: 220px;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 24px 0;
  transition: background-color .3s var(--ease), padding .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(23, 23, 23, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Stays above the open mobile menu, which covers the header area */
.brand { display: inline-flex; align-items: center; position: relative; z-index: 2; }
.brand img { width: 148px; }

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 8px 16px;
}
.nav a {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--pill);
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--blue); }

/* The in-menu Support button is a mobile-only duplicate of .header-cta */
.nav .nav-cta-mobile { display: none; }

.header-cta { flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 2;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--white);
  margin: 4px auto;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 40px) 0 80px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("assets/img/first.jpg") center / cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23,23,23,.55) 0%, rgba(23,23,23,.80) 55%, rgba(23,23,23,.92) 100%),
    linear-gradient(180deg, rgba(23,23,23,.75) 0%, rgba(23,23,23,.25) 40%, rgba(23,23,23,.85) 100%);
}
.hero .wrap { position: relative; z-index: 1; }

/* Left edge stays on the logo. `margin-left: auto` pushed this block to the
   right instead — invisible on a phone, where the rule below zeroes it. */
.hero__inner { max-width: 880px; }

.hero h1 {
  font-size: clamp(1.375rem, 2.35vw, 2.0625rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  /* Russian carries the longest words on the site — ПРЕДПРИНИМАТЕЛЬСТВО is
     nineteen capitals wide before letter-spacing is added. On a 320px screen it
     is wider than the column, and since the hero clips its own overflow the tail
     of the word simply disappeared. Let a word that cannot fit break instead. */
  overflow-wrap: break-word;
  line-height: 1.3;
  font-weight: 300;
  margin-bottom: 26px;
}
.hero__sub {
  font-family: var(--font-head);
  font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.75;
  color: var(--text-strong, rgba(255, 255, 255, .78));
  max-width: 62ch;
  margin-bottom: 32px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* A 1366x768 laptop leaves about 540px of page, and the hero wanted 586 —
   just enough to push "become a member" onto the second screen. */
@media (min-width: 861px) and (max-height: 720px) {
  .hero { min-height: 0; padding: calc(var(--header-h) + 24px) 0 40px; }
  .hero h1 { margin-bottom: 18px; }
  .hero__sub { margin-bottom: 22px; }
}

/* Page hero for interior pages */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 90px) 0 90px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.page-hero h1 { margin-bottom: .35em; }
.page-hero p { color: var(--text); max-width: 68ch; margin-inline: auto; }
.page-hero__kicker {
  font-family: var(--font-head);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   7. "What we do" image cards
   -------------------------------------------------------------------------- */
.do-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.do-card {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.do-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.do-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.94) 100%);
}
.do-card__body { padding: 34px 30px 32px; width: 100%; }
.do-card h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.do-card__body .rule { margin: 18px 0; max-width: 100%; }
.do-card p { font-size: .9375rem; line-height: 1.7; margin-bottom: 0; }
.do-card .more {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}
.do-card .more:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   8. Founder / why-us block
   -------------------------------------------------------------------------- */
.founder__photo { max-width: 380px; }
.founder__photo .media { aspect-ratio: 3 / 4; position: relative; }

/* LinkedIn's own tile, sitting on the corner of the photograph: the square with
   the softened corners and the house blue, not a generic round social button. */
.founder__social {
  flex: 0 0 auto;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: #0A66C2;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  transition: background-color .2s var(--ease);
  animation: founder-social-float 3.2s ease-in-out infinite;
}
.founder__social:hover { background: #004182; }

/* A slow rise and fall, so the badge reads as something to press rather than
   part of the photograph. The transform belongs to the animation, which is why
   the hover state only changes colour. */
@keyframes founder-social-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.founder__social svg { width: 22px; height: 22px; fill: currentColor; }

/* Name and role sit on the photograph itself, over a scrim dark enough to hold
   white type whatever the picture does underneath it. */
.founder__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 46px 20px 18px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.82) 62%, rgba(10,10,10,.94) 100%);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.founder__ident { min-width: 0; }
.founder__name {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 6px;
}
.founder__role {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

.founder__cta { margin-top: 0; flex: 0 0 auto; }

/* The letter closes the way a letter does: the sign-off ranged left under the
   text, with the one thing it asks of the reader standing beside it. */
.signature {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  text-align: left;
}
.signature__text { min-width: 0; }
/* The sign-off is part of the letter, not a headline over it — same face, same
   size, same colour as the paragraphs above. */
.signature .blessing,
.signature .name {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
.signature .role {
  font-family: var(--font-head);
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   9. Membership / pricing cards
   -------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--bg-deep);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: 44px 32px 40px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.plan--featured { box-shadow: 0 0 0 1px var(--blue), 0 18px 44px rgba(34,137,230,.16); }

.plan__name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300;
  margin-bottom: .5em;
}
.plan__blurb { font-size: .9375rem; margin-bottom: 1.2em; }
.plan__setup { font-size: .9375rem; color: var(--text-dim); margin-bottom: 1.6em; }

.plan__price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-head);
  color: var(--text-dim);
  line-height: 1;
  margin-bottom: 8px;
}
.plan__cur { font-size: 1.25rem; margin-top: 12px; }
.plan__amt { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 600; color: rgba(255,255,255,.42); }
.plan__cents { font-size: 1.25rem; margin-top: 12px; }
.plan__period {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.plan__note { font-size: .9375rem; margin-bottom: 26px; }

.plan__features-title {
  font-family: var(--font-head);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-strong);
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.plan__features li {
  position: relative;
  padding: 20px 0 20px 34px;
  text-align: left;
  font-size: .9375rem;
  line-height: 1.65;
  border-bottom: 1px solid var(--line);
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 27px;
  width: 16px; height: 16px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--bg-deep), inset 0 0 0 8px var(--blue);
}

.plan__cta { margin: 32px 0 22px; }
.plan__who { font-size: .9375rem; margin-bottom: 28px; }
.plan__foot { margin-top: auto; }

/* --------------------------------------------------------------------------
   10. Icon cards ("Join a community of changemakers")
   -------------------------------------------------------------------------- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.icon-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.icon-card:hover { border-color: var(--blue); transform: translateY(-5px); }

.icon-card__icon {
  width: 58px; height: 58px;
  margin: 0 auto 24px;
  color: var(--blue);
}
.icon-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }

.icon-card h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.icon-card p { font-size: .9375rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   11. Feature / benefit lists on interior pages
   -------------------------------------------------------------------------- */
.checklist li {
  position: relative;
  padding: 16px 0 16px 40px;
  border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 4px; top: 24px;
  width: 14px; height: 14px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--bg), inset 0 0 0 7px var(--blue);
}
.section--deep .checklist li::before { box-shadow: inset 0 0 0 2.5px var(--bg-deep), inset 0 0 0 7px var(--blue); }

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.info-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.section--deep .info-card { background: var(--surface); }
.info-card h3 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.info-card p { font-size: .9375rem; line-height: 1.72; }

/* Inline price band on membership detail pages */
.price-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--bg-deep);
  border: 1px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.price-band__price {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}
.price-band__price small {
  font-size: .9375rem;
  font-weight: 400;
  color: var(--text-dim);
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   12. Contact section & form
   -------------------------------------------------------------------------- */
.contact-list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .k {
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 110px;
  padding-top: 4px;
}
.contact-list .v { color: var(--text-strong); }
.contact-list .v a { color: var(--text-strong); }
.contact-list .v a:hover { color: var(--blue); }

.form {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 18px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #101214;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.28); }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field select option { background: var(--surface-2); color: var(--white); }

.form__note { font-size: .8125rem; color: var(--text-dim); margin-top: 16px; text-align: center; }

/* Honeypot — off-screen for people, still reachable by bots that fill everything */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  background: rgba(242, 116, 116, .10);
  border: 1px solid rgba(242, 116, 116, .38);
  border-radius: 8px;
  color: #f27474;
  font-size: .9375rem;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.form-error a { color: #f27474; text-decoration: underline; }
.form-error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. Legal / long-form content pages
   -------------------------------------------------------------------------- */
.prose { max-width: 82ch; margin-inline: auto; }
.prose h2 {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  margin-top: 2.4em;
  margin-bottom: .8em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; font-weight: 500; margin-top: 1.8em; margin-bottom: .6em; }
.prose ul { margin: 0 0 1.35em; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
}
.prose address {
  font-style: normal;
  background: var(--bg-deep);
  border-left: 2px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 22px 26px;
  margin: 1.5em 0;
  line-height: 1.9;
}
.prose .updated {
  font-size: .8125rem;
  color: var(--text-dim);
  letter-spacing: .06em;
  margin-bottom: 2.5em;
}

/* --------------------------------------------------------------------------
   14. Callout / CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: clamp(56px, 8vw, 100px) 0;
}
.cta-band h2 { margin-bottom: .5em; }
.cta-band p { margin-inline: auto; max-width: 60ch; margin-bottom: 2em; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 84px) 0 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 56px;
}
.footer-brand img { width: 160px; margin-bottom: 22px; }
.footer-brand p { font-size: .9375rem; max-width: 34ch; }

.footer-col h4 {
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  color: var(--text);
  font-size: .9375rem;
  padding: 7px 0;
}
.footer-col a:hover { color: var(--blue); }

.footer-contact { font-size: .9375rem; line-height: 1.9; font-style: normal; }
.footer-contact a { color: var(--text); }
.footer-contact a:hover { color: var(--blue); }

.footer-socials { display: flex; gap: 12px; margin-top: 20px; }
.footer-socials a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--white);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.footer-socials a:hover { background: var(--blue); border-color: var(--blue); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }

/* The Foundation runs one site per country; this is the way between them. */
.footer-sites {
  border-top: 1px solid var(--line);
  padding: 26px 0 4px;
}
.footer-sites h4 {
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.footer-sites ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
}
.footer-sites a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text);
  font-size: .9375rem;
}
.footer-sites a:hover { color: var(--blue); }
.footer-sites a span { font-size: .8125rem; color: var(--text-dim); }
.footer-sites a:hover span { color: var(--blue); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 26px 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: .8125rem;
  color: var(--text-dim);
}
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   16. Floating helpers
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 90;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(23,23,23,.85);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s var(--ease), background-color .2s var(--ease);
  backdrop-filter: blur(8px);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue); border-color: var(--blue); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Cookie banner */
.cookie-bar {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  /* Above the Bitrix24 chat bubble, which ships with z-index 10150 and would
     otherwise sit on top of the consent buttons on narrow screens. */
  z-index: 10200;
  max-width: 620px;
  margin-inline: auto;
  background: rgba(23,23,23,.97);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: none;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  /* With the per-category panel open the bar is tall; on a short screen it
     scrolls inside itself rather than running off the top. */
  max-height: calc(100svh - 120px);
  overflow-y: auto;
}
.cookie-bar.is-open { display: flex; }
.cookie-bar p { font-size: .875rem; margin: 0; flex: 1 1 280px; line-height: 1.6; }
.cookie-bar .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Marks the option already in force when the bar is reopened from the footer */
.cookie-bar [data-consent].is-current {
  box-shadow: 0 0 0 2px var(--blue);
}
.cookie-bar [data-consent].is-current::after {
  content: " ✓";
}

/* The per-category panel behind "Настроить". Refusing everything optional and
   accepting it are the same single click; this is for anyone who wants to pick
   and choose between the two. */
.cookie-prefs {
  flex: 1 1 100%;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}
.cookie-prefs[hidden] { display: none; }

.cookie-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .8125rem;
  line-height: 1.6;
  cursor: pointer;
}
.cookie-opt input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--blue);
}
.cookie-opt strong { color: var(--white); font-weight: 500; }
.cookie-opt--locked { opacity: .72; cursor: default; }

/* --------------------------------------------------------------------------
   16b. Certificate lookup
   --------------------------------------------------------------------------
   The form is ours; the verdict underneath it is rendered by the certificates
   plugin, so this only has to set the space around it.
   -------------------------------------------------------------------------- */
.verify-form {
  display: grid;
  gap: 12px;
  justify-items: stretch;
  max-width: 420px;
  margin-inline: auto;
  text-align: left;
}
.verify-form__label {
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.verify-form__input {
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.verify-form__input:focus {
  outline: 0;
  border-color: var(--blue);
  background: rgba(255, 255, 255, .06);
}
.verify-form .btn { justify-self: start; }

.verify-note {
  margin-top: 26px;
  font-size: .875rem;
  color: var(--text-dim);
}

@media (max-width: 620px) {
  .verify-form .btn { justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   17. Scroll animations
   --------------------------------------------------------------------------
   Every `.reveal` element gets a direction assigned by main.js based on where it
   sits: text in a two-column row slides in from the left, its image from the
   right, everything else rises. Direction can be forced with data-anim="…".
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   .85s var(--ease),
    transform .85s var(--ease),
    filter    .85s var(--ease);
  will-change: opacity, transform;
}

.js .reveal[data-anim="left"]  { transform: translateX(-52px); }
.js .reveal[data-anim="right"] { transform: translateX(52px); }
.js .reveal[data-anim="up"]    { transform: translateY(38px); }
.js .reveal[data-anim="down"]  { transform: translateY(-30px); }
.js .reveal[data-anim="scale"] { transform: scale(.93); filter: blur(4px); }
.js .reveal[data-anim="zoom"]  { transform: scale(1.08); }

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Images get a slightly slower, heavier settle than text */
.js .media.reveal { transition-duration: 1.05s; }

/* The badge and the buttons are simply there from the first paint — no fade, no
   drift, nothing for the eye to wait on. The headline and the standfirst are the
   exception: main.js splits them into lines that come in from the sides. */
.hero .reveal,
.hero__badge,
.hero__actions {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.hero h1,
.hero__sub {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   17c. Line-by-line text reveal
   --------------------------------------------------------------------------
   main.js splits marked headings and paragraphs into per-line wrappers so the
   copy arrives a line at a time instead of the whole block at once.
   -------------------------------------------------------------------------- */
.line {
  display: block;
  overflow: hidden;
}
.line__inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.22, .61, .36, 1),
    opacity   .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}
.is-in .line__inner,
.lines-in .line__inner {
  transform: translateY(0);
  opacity: 1;
}

/* Lines that arrive from the side rather than from below. The wrapper must not
   clip here — the words travel in across the background — so the section around
   them is what keeps the overflow off the page. Odd lines come from the left,
   even lines from the right, which reads as the copy assembling itself. */
.lines--x .line { overflow: visible; }
.lines--x .line__inner { transform: translateX(-70px); }
.lines--x .line:nth-child(even) .line__inner { transform: translateX(70px); }

/* Only `lines-in` may finish these — the hero headline also carries `reveal`,
   and `is-in` lands on it the moment the page opens, which used to put every
   line at its resting place before it had a chance to travel. */
.lines--x.lines-in .line__inner,
.lines--x.lines-in .line:nth-child(even) .line__inner {
  transform: translateX(0);
  opacity: 1;
}

/* The standfirst holds the two counting figures, so it cannot be cut into lines
   without losing them. It slides in whole instead, once the headline has landed.
   main.js sets the delay from how many lines the headline actually took. */
.js .hero__sub {
  opacity: 0;
  transform: translateX(70px);
  transition:
    transform .8s cubic-bezier(.22, .61, .36, 1),
    opacity   .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}
.js .hero__sub.hero-in {
  opacity: 1;
  transform: none;
}

/* Animated counters keep their own width so the layout does not jump. Equal
   digit widths are only half of it — main.js also measures the finished figure
   and holds that width open, since "0" and "10,000" are not the same length. */
.counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17b. Interactive polish
   -------------------------------------------------------------------------- */

/* Nav links grow an underline from the centre */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 4px;
  height: 1px;
  background: var(--blue);
  transition: left .28s var(--ease), right .28s var(--ease);
}
.nav a:hover::after,
.nav a.is-active::after { left: 18px; right: 18px; }

/* Buttons sweep a highlight across on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }

/* Section labels pulse their border on hover */
.label { transition: border-color .3s var(--ease), color .3s var(--ease); }
.label:hover { border-color: var(--white); }

/* Membership cards raise their border as well as themselves */
.plan { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }

/* Feature rows tint as you run down them */
.plan__features li,
.checklist li { transition: background-color .25s var(--ease), padding-left .25s var(--ease); }
.plan__features li:hover,
.checklist li:hover { background: rgba(34,137,230,.05); }

/* Contact rows and footer links shift slightly on hover */
.footer-col a { transition: color .2s var(--ease), transform .2s var(--ease); }
.footer-col a:hover { transform: translateX(4px); }

/* The "Read more…" link pushes its ellipsis along */
.do-card .more { transition: color .2s var(--ease), letter-spacing .25s var(--ease); }
.do-card .more:hover { letter-spacing: .22em; }

/* Form fields lift out of the surface when focused */
.field input, .field select, .field textarea {
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* Hero background drifts as the page scrolls (set by main.js) */
.hero__bg { will-change: transform; }

/* --------------------------------------------------------------------------
   18. Certificate verification page
   -------------------------------------------------------------------------- */
.verify-card {
  max-width: 560px;
  margin-inline: auto;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.verify-status {
  width: 76px; height: 76px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  line-height: 1;
}
.verify-status--ok   { background: rgba(57,181,74,.14); color: #39b54a; border: 1px solid rgba(57,181,74,.4); }
.verify-status--fail { background: rgba(242,116,116,.12); color: #f27474; border: 1px solid rgba(242,116,116,.4); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav a { padding: 11px 13px; font-size: .75rem; }
  .brand img { width: 128px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 88px; }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(17,17,17,.98);
    backdrop-filter: blur(16px);
    border: 0;
    border-radius: 0;
    padding: calc(var(--header-h) + 16px) 24px 32px;
    transform: translateY(-102%);
    transition: transform .38s var(--ease);
    max-height: 100svh;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a {
    padding: 18px 4px;
    font-size: .9375rem;
    border-bottom: 1px solid var(--line);
  }
  .nav .nav-cta-mobile {
    display: flex;
    margin-top: 24px;
    border-bottom: 0;
  }

  /* Like the original: once the menu collapses, the toggle sits in the middle
     and the Support button keeps its place on the right. */
  .nav-toggle { order: 2; }
  .header-cta { order: 3; display: inline-flex; }

  .do-grid { grid-template-columns: repeat(2, 1fr); }
  .plans   { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* A 52px sideways start offset is invisible on a desktop column but hangs off
     the edge of a phone, which is what lets the page be swiped left and right
     before anything has animated. Narrow screens rise from below instead. */
  .js .reveal[data-anim="left"],
  .js .reveal[data-anim="right"] { transform: translateY(38px); }

  /* The hero keeps its alternating sideways entry here too: it clips its own
     overflow, so nothing can be swiped into view. A shorter travel suits the
     narrower column. */
  .lines--x .line__inner { transform: translateX(-42px); }
  .lines--x .line:nth-child(even) .line__inner { transform: translateX(42px); }
  .js .hero__sub { transform: translateY(28px); }
  .js .hero__sub.hero-in { transform: none; }

  /* Stacked on a phone the portrait leads and the letter follows it, so the
     name on the photograph introduces the words rather than trailing them. */
  /* Not tied to the section id: one build had no id on this section and the
     portrait quietly stayed below the letter. */
  .grid-2 > .founder__photo { order: -1; }
  .founder__photo { max-width: 100%; }
  .founder__caption { padding: 40px 18px 16px; }
  .footer-sites ul { flex-direction: column; gap: 2px; }
  .footer-sites a { flex-direction: column; gap: 0; align-items: flex-start; padding: 5px 0; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .media--tall { aspect-ratio: 4 / 3; }
  .founder__photo { max-width: 100%; }
  .hero__inner { margin-left: 0; }
  .price-band { flex-direction: column; align-items: stretch; text-align: center; }
  .price-band .btn { width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .wrap { padding-inline: 20px; }
  .do-grid { grid-template-columns: 1fr; }
  .icon-grid { grid-template-columns: 1fr; }
  /* One column turned the footer into a very long ribbon; the three link
     groups sit two abreast and the brand keeps the full width above them. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-bottom: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 132px; margin-bottom: 14px; }
  .footer-brand p { font-size: .875rem; line-height: 1.65; max-width: none; }
  .footer-socials { margin-top: 14px; }
  .footer-socials a { width: 34px; height: 34px; }
  .site-footer { padding-top: 40px; }
  .footer-col a { padding: 5px 0; font-size: .875rem; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-contact { font-size: .875rem; line-height: 1.75; }
  .do-card { min-height: 380px; }

  /* Desktop heading sizes leave a section top-heavy on a phone: the label and
     headline eat the screen and the copy runs off the bottom. Tightening both,
     and the padding around them, puts the block back in proportion. */
  .section { padding: 52px 0; }
  .section--tight { padding: 40px 0; }
  h2 { font-size: 1.375rem; line-height: 1.32; }
  .label {
    padding: 10px 22px;
    font-size: .6875rem;
    letter-spacing: .16em;
    margin-bottom: 20px;
  }
  .grid-2 { gap: 26px; }
  /* Desktop button proportions read as slabs on a phone, so the whole set
     steps down together rather than each place overriding its own. */
  .btn { padding: 13px 24px; font-size: .75rem; letter-spacing: .1em; }
  .btn--sm { padding: 11px 18px; font-size: .6875rem; }
  .btn--block { padding-inline: 14px; }
  /* On a phone the support button was running the full width of the column,
     which read as a banner rather than a button. Size it to its own text. */
  .founder__cta { padding: 13px 24px; }
  .founder__photo { text-align: center; }
  .founder__photo .media { text-align: left; }

  .contact-list li { flex-direction: column; gap: 4px; }
  .contact-list .k { min-width: 0; }
  .to-top { right: 16px; bottom: 16px; }

  /* Logo left, Support right, and the toggle pinned to the true centre of the
     header the way the original does it — centring it by flex order alone drifts
     as soon as the logo and the button are different widths. */
  .header-inner { gap: 12px; position: relative; }
  .header-cta {
    display: inline-flex;
    order: 3;
    margin-left: auto;
    padding: 11px 16px;
    font-size: .6875rem;
    letter-spacing: .08em;
  }
  .nav-toggle {
    order: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }
  .brand img { width: 112px; }

  /* The copy now fits well inside one screen, so it sits in the middle of it
     rather than pinned under the header with the leftover space dumped at the
     bottom — that gap was what made the run into the next section feel abrupt.
     The top padding still clears the header, whatever the screen height. */
  .hero {
    align-items: center;
    padding: calc(var(--header-h) + 16px) 0 44px;
  }
  .hero__badge {
    margin-bottom: 18px;
    padding: 7px 14px;
    font-size: .75rem;
    letter-spacing: .12em;
  }
  /* Below this width the sideways entry stops paying for itself: the offset
     pushes the first and last characters of every line under the hero's own
     clip, which on a long Russian line reads as text sliding off the screen.
     The lines rise from below here instead, the way the rest of the page does,
     and the wrapper clips vertically again so nothing shows outside its row. */
  .lines--x .line { overflow: hidden; }
  .lines--x .line__inner,
  .lines--x .line:nth-child(even) .line__inner { transform: translateY(105%); }
  .lines--x.lines-in .line__inner,
  .lines--x.lines-in .line:nth-child(even) .line__inner { transform: translateY(0); }

  /* The Russian headline runs to eleven lines on a narrow screen, so the type
     is stepped down here to keep the whole hero inside one phone screen. */
  .hero h1 { font-size: 1.3125rem; line-height: 1.28; margin-bottom: 18px; }
  .hero__sub { font-size: .8125rem; line-height: 1.7; margin-bottom: 22px; }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { flex: 0 0 auto; }

  /* Lift the consent bar clear of the chat bubble parked in the bottom corner */
  .cookie-bar { left: 12px; right: 12px; bottom: 96px; padding: 18px 20px; }
  .cookie-bar .actions { width: 100%; }
  .cookie-bar .actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   20. Accessibility & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .cookie-bar, .hero__bg { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   22. Chat launcher
   --------------------------------------------------------------------------
   Shown to visitors who have not agreed to the chat widget, so that everyone
   can still start a conversation. It loads nothing until it is pressed.
   -------------------------------------------------------------------------- */
.chat-launch {
  position: fixed;
  right: 22px;
  /* Clear of the very bottom edge, where it read as an afterthought. */
  bottom: 74px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: min(260px, calc(100vw - 44px));
  text-align: right;
}
.chat-launcher__note {
  margin: 0;
  font-size: .625rem;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--muted, rgba(255, 255, 255, .55));
  text-wrap: balance;
}
.chat-launcher {
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-head);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand, #2f7bf6);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chat-launcher__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-launcher:hover,
.chat-launcher:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

/* The cookie bar sits at the same corner, so the button waits above it. */
.cookie-bar.is-open ~ .chat-launch { bottom: 150px; }

@media (max-width: 600px) {
  .chat-launch { right: 14px; bottom: 68px; max-width: calc(100vw - 28px); }
  .chat-launcher { padding: 9px 14px; font-size: .625rem; }
  .chat-launcher__note { font-size: .5625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher { transition: none; }
}

/* --------------------------------------------------------------------------
   21. Lithuanian type
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero h1 { font-size: 1.5rem; line-height: 1.26; }
  .hero__sub { font-size: .875rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23 · NARIŲ ISTORIJOS
   Įrodymas, ne reklama: prie kiekvienos citatos — nuoroda į sertifikato
   patikrą. Numeris puslapyje nerodomas, jis keliauja tik nuorodoje.
   ═════════════════════════════════════════════════════════════════════════ */
.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.story {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.story:hover { border-color: var(--blue); transform: translateY(-3px); }

.story__quote { margin: 0; position: relative; padding-top: 26px; }
.story__quote::before {
  content: "\201C";
  position: absolute;
  top: -14px; left: -4px;
  font-family: var(--font-head);
  font-size: 68px;
  line-height: 1;
  color: var(--blue);
  opacity: .5;
}
.story__quote p {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.story__by { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.story__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--white);
}
.story__meta { margin: 4px 0 0; font-size: .875rem; color: var(--text-dim); }

.story__verify {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.story__verify::before { content: "\2713"; font-size: .9375rem; }
.story__verify:hover { color: var(--blue-hover); border-bottom-color: currentColor; }
.story__verify:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }