/* Paprika Media - Vazirmatn, self-hosted (measured from the approved comp) */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/vazirmatn-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 1u === 1 comp pixel at the comp's own 2752px frame, fluid at every other width */
  --u: min(calc(100vw / 2752), 1.15px);

  --navy:        #091d38;
  --navy-deep:   #04102a;
  --blue:        #1d64f2;
  --blue-press:  #1550c4;
  --ink:         #0d172c;
  --grey:        #5a6170;
  --grey-soft:   #8d94a4;
  --white:       #ffffff;
  --panel-tint:  #dfeafb;
  --panel-fade:  #f3f7fc;
  --page:        #ffffff;
  --hairline:    #e3e8f0;
  --rule-card:   #e6eaf2;

  --focus: var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Browser surfaces themed from the palette rather than left at defaults */
::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--navy); }
:focus-visible { outline: calc(3 * var(--u)) solid var(--focus); outline-offset: calc(3 * var(--u)); border-radius: calc(4 * var(--u)); }
:where(a, button, input, textarea, select):focus:not(:focus-visible) { outline: none; }
html { scrollbar-color: var(--grey-soft) var(--hairline); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--hairline); }
::-webkit-scrollbar-thumb { background: var(--grey-soft); border-radius: 6px; border: 3px solid var(--hairline); }
::-webkit-scrollbar-thumb:hover { background: var(--grey); }

a { color: inherit; }

/* ───────────── header ───────────── */

.site-header {
  display: flex;
  align-items: center;
  height: calc(152 * var(--u));
  padding-inline: calc(251 * var(--u)) calc(248 * var(--u));
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  font-size: calc(63 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.045em);
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: calc(62 * var(--u));
}
.site-nav__link {
  font-size: calc(34.1 * var(--u));
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: calc(8 * var(--u));
  text-decoration-thickness: calc(2 * var(--u));
  white-space: nowrap;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__link:hover { color: var(--blue); text-decoration: underline; }

/* ───────────── buttons ───────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:active { transform: translateY(calc(1 * var(--u))); }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-press); }

.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); padding-inline: calc(60 * var(--u)); }
.btn--secondary:hover { background: var(--navy); color: var(--white); }

.btn--pill {
  height: calc(72 * var(--u));
  padding-inline: calc(39 * var(--u));
  border-radius: calc(11 * var(--u));
  font-size: calc(34 * var(--u));
  font-weight: 400;
  margin-inline-start: calc(62 * var(--u));
  position: relative;
  top: calc(-6 * var(--u));
  left: calc(3 * var(--u));
}

.btn--lg {
  font-weight: 600;
  height: calc(85 * var(--u));
  padding-inline: calc(57 * var(--u));
  border-radius: calc(14 * var(--u));
  font-size: calc(34 * var(--u));
}

/* ───────────── hero ───────────── */

.hero {
  margin: 0 calc(140 * var(--u));
  height: calc(1032 * var(--u));
  border-radius: calc(40 * var(--u));
  background: linear-gradient(to top right, #fafbff 0%, #eef5ff 26%, #e2eefe 52%, #d8e8fd 76%, #cee2fd 100%);
  display: grid;
  grid-template-columns: calc(1365 * var(--u)) 1fr;
  align-content: start;
  padding: calc(193 * var(--u)) calc(105 * var(--u)) 0 calc(111 * var(--u));
  column-gap: calc(106 * var(--u));
  overflow: hidden;
}

.hero__pitch { grid-column: 1; }

.hero__headline {
  margin: 0;
  font-size: calc(153 * var(--u));
  font-weight: 700;
  line-height: 0.915;
  letter-spacing: calc(-0.022em);
  color: var(--navy);
}

.hero__sub {
  margin: calc(74 * var(--u)) 0 0;
  max-width: calc(1170 * var(--u));
  font-size: calc(47.4 * var(--u));
  line-height: 1.32;
  color: var(--grey);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  margin-top: calc(76 * var(--u));
}

/* ───────────── attestation card ───────────── */

.attestation {
  grid-column: 2;
  align-self: start;
  justify-self: end;
  width: calc(785 * var(--u));
  margin: calc(-33 * var(--u)) 0 0;
  padding: calc(88 * var(--u)) calc(68 * var(--u)) calc(74 * var(--u));
  background: var(--white);
  border-radius: calc(28 * var(--u));
  box-shadow:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(8, 24, 55, 0.04),
    0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(8, 24, 55, 0.08);
  margin-block-end: 0;
}

.attestation__mark,
.quote-card__mark {
  position: relative;
  display: block;
  width: calc(85 * var(--u));
  height: calc(62 * var(--u));
  color: var(--blue);
}
.attestation__mark::before,
.quote-card__mark::before {
  content: '\201C';
  position: absolute;
  left: calc(-6 * var(--u));
  top: calc(-19 * var(--u));
  font-size: calc(183 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.attestation__quote {
  margin: calc(46 * var(--u)) 0 0;
  font-size: calc(39.1 * var(--u));
  line-height: 1.32;
  letter-spacing: calc(-0.018em);
  color: var(--ink);
}

.attestation__cite {
  display: block;
  margin-top: calc(32 * var(--u));
  padding-top: calc(26 * var(--u));
  line-height: 1;
  border-top: 1px solid var(--rule-card);
  font-size: calc(29.4 * var(--u));
  font-style: normal;
  letter-spacing: calc(-0.006em);
  white-space: nowrap;
  color: var(--grey);
}

/* ───────────── service rule row ───────────── */

.service-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(71 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  width: calc(1595 * var(--u));
}
.service-row__item {
  padding-inline: calc(46 * var(--u));
  font-size: calc(32.4 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.03em);
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.service-row__item + .service-row__item { border-inline-start: 1px solid var(--hairline); }

/* ───────────── capabilities band ───────────── */

.capabilities {
  margin: calc(90 * var(--u)) calc(251 * var(--u)) 0 calc(253 * var(--u));
  padding: calc(91 * var(--u)) calc(89 * var(--u)) calc(96 * var(--u));
  background: var(--navy);
  border-radius: calc(24 * var(--u));
  color: var(--white);
}

/* blockquote/p ship default margins that would widen the measured text block */
.attestation__quote > p { margin: 0; }
.attestation__cite { width: max-content; max-width: 100%; }

/* ───────────── shared section rhythm ───────────── */

.section { padding-inline: calc(251 * var(--u)); }
.section__head { max-width: calc(1500 * var(--u)); }
.section__title {
  margin: 0;
  font-size: calc(92 * var(--u));
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: calc(-0.02em);
  color: var(--navy);
}
.section__lede {
  text-wrap: pretty;
  margin: calc(36 * var(--u)) 0 0;
  max-width: calc(1240 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.45;
  color: var(--grey);
}

/* ───────────── capabilities ───────────── */

.capabilities { padding-bottom: calc(132 * var(--u)); }
.capabilities__title {
  margin: 0;
  max-width: calc(1600 * var(--u));
  font-size: calc(92 * var(--u));
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: calc(-0.02em);
  color: var(--white);
}
.capabilities__lede {
  text-wrap: pretty;
  margin: calc(34 * var(--u)) 0 0;
  max-width: calc(1180 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.45;
  color: #9fb4d0;
}

.lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(28 * var(--u));
  margin-top: calc(96 * var(--u));
  padding: 0;
  list-style: none;
}
.lead-card {
  padding: calc(56 * var(--u)) calc(52 * var(--u)) calc(60 * var(--u));
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(24 * var(--u));
}
.lead-card__name {
  margin: 0;
  font-size: calc(44 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.01em);
  color: var(--white);
}
.lead-card__desc {
  text-wrap: pretty;
  margin: calc(24 * var(--u)) 0 0;
  font-size: calc(34 * var(--u));
  line-height: 1.5;
  color: #9fb4d0;
}

.more-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u)) calc(28 * var(--u));
  margin: calc(56 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.more-list__item {
  padding: calc(18 * var(--u)) calc(34 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(999 * var(--u));
  font-size: calc(32 * var(--u));
  color: #cdd9ea;
}

/* ───────────── practice ───────────── */

.practice { padding-block: calc(150 * var(--u)) calc(140 * var(--u)); }
.practice__body {
  display: grid;
  grid-template-columns: calc(1230 * var(--u)) 1fr;
  column-gap: calc(120 * var(--u));
  margin-top: calc(60 * var(--u));
}
.practice__p {
  margin: 0 0 calc(34 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.5;
  color: var(--grey);
  text-wrap: pretty;
}
.practice__p strong { color: var(--navy); font-weight: 600; }
.ledger { margin: 0; align-self: start; }
.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(24 * var(--u));
  padding: calc(28 * var(--u)) 0;
  border-top: 1px solid var(--hairline);
  font-size: calc(32 * var(--u));
}
.ledger__row:last-child { border-bottom: 1px solid var(--hairline); }
.ledger__key { color: var(--grey); }
.ledger__val { color: var(--navy); font-weight: 600; text-align: right; }

/* ───────────── attestations ───────────── */

.attestations { padding-block: calc(140 * var(--u)) calc(150 * var(--u)); background: #f6f8fc; }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(34 * var(--u));
  margin-top: calc(84 * var(--u));
}
.quote-card {
  margin: 0;
  padding: calc(72 * var(--u)) calc(68 * var(--u)) calc(64 * var(--u));
  background: var(--white);
  border-radius: calc(28 * var(--u));
  box-shadow:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(9, 29, 56, 0.04),
    0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(9, 29, 56, 0.07);
}
.quote-card__text {
  margin: calc(44 * var(--u)) 0 0;
  font-size: calc(39.1 * var(--u));
  line-height: 1.32;
  letter-spacing: calc(-0.018em);
  color: var(--ink);
}
.quote-card__text > p { margin: 0; }
.quote-card__cite {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: calc(44 * var(--u));
  padding-top: calc(28 * var(--u));
  border-top: 1px solid var(--rule-card);
  font-size: calc(30 * var(--u));
  line-height: 1.3;
  font-style: normal;
  color: var(--grey);
}

/* ───────────── contact ───────────── */

.contact { padding-block: calc(150 * var(--u)) calc(160 * var(--u)); }
.contact__grid {
  display: grid;
  grid-template-columns: calc(1000 * var(--u)) 1fr;
  column-gap: calc(150 * var(--u));
  align-items: start;
}
.contact__intro { padding-top: calc(10 * var(--u)); }
.contact__form-col { max-width: calc(1100 * var(--u)); }
.form { margin-top: calc(14 * var(--u)); }
.field + .field { margin-top: calc(40 * var(--u)); }
.field__label {
  display: block;
  margin-bottom: calc(16 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  color: var(--navy);
}
.field__input,
.field__textarea {
  display: block;
  width: 100%;
  padding: calc(26 * var(--u)) calc(30 * var(--u));
  background: var(--white);
  border: 1px solid #c8d2e2;
  border-radius: calc(12 * var(--u));
  font-family: inherit;
  font-size: calc(34 * var(--u));
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field__input::placeholder,
.field__textarea::placeholder { color: #6a7180; }
.field__input:hover,
.field__textarea:hover { border-color: #9fadc4; }
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 calc(4 * var(--u)) rgba(29, 100, 242, 0.16);
}
.field__textarea { min-height: calc(220 * var(--u)); resize: vertical; }
.field__hint { margin: calc(14 * var(--u)) 0 0; font-size: calc(28 * var(--u)); color: var(--grey); }
.field__error {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(28 * var(--u));
  color: #b3261e;
}
.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: #b3261e; }
.form__actions { display: flex; align-items: center; gap: calc(30 * var(--u)); margin-top: calc(52 * var(--u)); }
.form__note { margin: calc(28 * var(--u)) 0 0; font-size: calc(28 * var(--u)); line-height: 1.5; color: var(--grey); }

/* ───────────── footer ───────────── */

.site-footer {
  padding: calc(76 * var(--u)) calc(251 * var(--u)) calc(90 * var(--u));
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  column-gap: calc(90 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.55;
  color: var(--grey);
}
.site-footer__brand { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.site-footer__mark { font-weight: 700; letter-spacing: calc(0.045em); color: var(--navy); }
.site-footer__tag { color: var(--grey); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  font-style: normal;
}
.site-footer__addr { color: var(--grey); }
.site-footer__tel {
  width: max-content;
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  text-underline-offset: calc(6 * var(--u));
  text-decoration-thickness: calc(2 * var(--u));
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__tel:hover { color: var(--blue); text-decoration: underline; }
.site-footer__legal { margin: 0; text-align: right; }

.form__notice { color: #b3261e; max-width: calc(1000 * var(--u)); }

/* ───────────── motion ─────────────
   One authored moment: the pitch sets, then the attestation lands beside it,
   so the claim and the person vouching for it resolve as one gesture.
   Everything animates FROM an offset TO its natural state, so if animation
   never runs the page is already correct. */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, calc(26 * var(--u)), 0); }
}
@keyframes land {
  from { opacity: 0; transform: translate3d(calc(34 * var(--u)), calc(18 * var(--u)), 0); }
}

.hero__headline,
.hero__sub,
.hero__actions,
.attestation {
  animation: rise 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__headline { animation-delay: 60ms; }
.hero__sub      { animation-delay: 150ms; }
.hero__actions  { animation-delay: 230ms; }
.attestation {
  animation-name: land;
  animation-duration: 920ms;
  animation-delay: 360ms;
}

/* Scroll reveals stay subordinate to the hero moment: smaller travel, one step. */
.reveal { animation: rise 640ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-play-state: paused; }
.reveal.is-in { animation-play-state: running; }
.lead-grid .lead-card:nth-child(2) { animation-delay: 80ms; }
.lead-grid .lead-card:nth-child(3) { animation-delay: 160ms; }
.quote-grid .quote-card:nth-child(2) { animation-delay: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__headline, .hero__sub, .hero__actions, .attestation, .reveal {
    animation: none !important;
  }
  .btn:active { transform: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ───────────── narrow viewports ─────────────
   Not the desktop composition shrunk: the columns collapse, the side margins
   become thumb-safe, and small functional text takes a real px floor so it
   never falls under the legibility line the --u scale would drag it to. */

@media (max-width: 1024px) {
  :root { --u: calc(100vw / 960); }

  .site-header {
    position: relative;
    height: auto;
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 16px 20px;
  }
  .wordmark { font-size: 19px; letter-spacing: 0.045em; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__link { font-size: 15px; }
  /* lifted out of the scrollable nav row, which was clipping it */
  .btn--pill {
    position: absolute;
    top: 14px;
    right: 20px;
    left: auto;
    margin-inline-start: 0;
    height: 38px;
    padding-inline: 16px;
    border-radius: 8px;
    font-size: 15px;
  }
  .site-nav { padding-inline-end: 0; }

  .hero {
    display: block;
    height: auto;
    margin: 16px;
    padding: 44px 24px 48px;
    border-radius: 20px;
  }
  .hero__headline { font-size: 46px; line-height: 1.04; letter-spacing: -0.02em; }
  .hero__break { display: none; }
  .hero__sub { margin-top: 20px; font-size: 18px; max-width: 34ch; }
  .hero__actions { margin-top: 28px; gap: 12px; flex-wrap: wrap; }
  .btn--lg { height: 50px; padding-inline: 24px; border-radius: 10px; font-size: 16px; }

  .attestation {
    width: auto;
    margin: 36px 0 0;
    padding: 30px 26px 28px;
    border-radius: 18px;
  }
  .attestation__mark { width: 40px; height: 30px; font-size: 84px; }
  .attestation__quote { margin-top: 18px; font-size: 17px; letter-spacing: 0; }
  .attestation__cite { margin-top: 22px; padding-top: 18px; font-size: 14px; white-space: normal; }

  .service-row {
    width: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 0;
    margin: 32px 20px 0;
  }
  .service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 0;
    justify-content: stretch;
  }
  .service-row__item { padding: 0; font-size: 13px; }
  .service-row__item + .service-row__item { border-inline-start: 0; }
  .service-row__item:nth-child(odd) {
    padding-inline-end: 14px;
    border-inline-end: 1px solid var(--hairline);
  }
  .service-row__item:nth-child(even) { padding-inline-start: 14px; }

  .section { padding-inline: 20px; }

  .capabilities { margin: 40px 16px 0; padding: 40px 24px 44px; border-radius: 20px; }
  .capabilities__title { margin-top: 0; font-size: 32px; }
  .capabilities__lede { margin-top: 14px; font-size: 16px; }
  .lead-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .lead-card { padding: 24px 22px 26px; border-radius: 14px; }
  .lead-card__name { font-size: 19px; }
  .lead-card__desc { margin-top: 10px; font-size: 15px; }
  .more-list { margin-top: 24px; gap: 10px; }
  .more-list__item { padding: 9px 16px; font-size: 14px; }

  .practice { padding-block: 56px 48px; }
  .practice__body { grid-template-columns: 1fr; row-gap: 32px; margin-top: 24px; }
  .section__title { font-size: 32px; }
  .section__lede { margin-top: 14px; font-size: 16px; }
  .practice__p { margin-bottom: 16px; font-size: 16px; }
  .ledger__row { padding: 14px 0; font-size: 15px; }

  .attestations { padding-block: 52px 56px; }
  .quote-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .quote-card { padding: 30px 26px 28px; border-radius: 18px; }
  .quote-card__mark { width: 40px; height: 30px; font-size: 84px; }
  .quote-card__text { margin-top: 18px; font-size: 17px; letter-spacing: 0; }
  .quote-card__cite { margin-top: 24px; padding-top: 18px; font-size: 14px; }

  .contact { padding-block: 52px 60px; }
  .contact__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .contact__form-col { max-width: none; }
  .field + .field { margin-top: 20px; }
  .field__label { margin-bottom: 8px; font-size: 15px; }
  .field__input, .field__textarea { padding: 13px 14px; border-radius: 10px; font-size: 16px; }
  .field__textarea { min-height: 120px; }
  .field__error, .form__note { font-size: 14px; }
  .form__actions { margin-top: 26px; }

  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding: 30px 20px 38px;
    font-size: 14px;
  }
  .site-footer__legal { text-align: left; }
}

@media (max-width: 420px) {
  .hero__headline { font-size: 40px; }
  .hero { padding: 36px 20px 40px; }
  .hero__actions .btn--lg { flex: 1 1 auto; justify-content: center; }
}