/* buhr-consulting.com — all styles for the site.
   Every measurement below was taken from reference/wix/screenshots/.
   Desktop numbers are for the 1440 px capture (980 px content column, so the
   column starts at x=230); phone numbers are for the 320 px capture.
   No inline styles anywhere: the production CSP allows style-src 'self' only. */

/* ---------------------------------------------------------------- fonts --- */

@font-face {
  font-family: "Archivo Black";
  src: url("/fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens --- */

:root {
  /* Colours, spec §2.4. */
  --red: #E60005;
  --blue: #2DAAE1;
  --blue-dark: #045184;
  --cta: #160EF5;
  --grey: #E8E6E6;
  --grey-text: #818181;

  /* Three colours Wix uses that §2.4 does not name, all sampled from the
     reference screenshots: the hero pointer, the phone CTA bubble (which is
     NOT --cta — see reference/wix/screenshots/mobile-375.png) and the coral
     quote mark on the testimonial cards. */
  --hero-pointer: #AE633F;
  --cta-bubble: #008AFC;
  --quote-mark: #FF6161;

  /* Wix's own form-error colour, lifted from reference/wix/index.html, where
     it is the fallback of --wut-error-color: error borders, error icons and
     error text all use it. §2.4 listed it as the Send button colour, but the
     button in desktop-1440.png is --red; nothing on the page is #DF3131 until
     a field or the service reports a problem. */
  --error: #DF3131;

  --container: 980px;
  --header-height: 76px;
  --header-rule: 9px;

  --font-heading: "Arial Black", "Archivo Black", sans-serif;
  --font-body: Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-ui: Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-form: "Nunito Sans", Arial, Helvetica, sans-serif;
  --font-cta: "Poppins", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- reset --- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
}

/* Between the phone layout and the width at which the 980 px column starts to
   float, the column would otherwise touch both viewport edges. The padding
   fades in from 0 at 1020 px to 20 px at 980 px and stays there down to 768 px;
   at 1024 px and above, and on phones (which lay their own padding out inside
   each section), nothing changes. */
@media (min-width: 768px) {
  .container {
    padding-inline: clamp(0px, (1020px - 100vw) / 2, 20px);
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: #fff;
  color: #000;
  font-family: var(--font-ui);
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------- header --- */

.site-header {
  background: #fff;
  border-bottom: var(--header-rule) solid var(--red);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__home {
  display: block;
  flex: none;
  /* Wix insets the logo and the menu from the content column by these amounts;
     both are measured off reference/wix/screenshots/desktop-1440.png. */
  margin-left: 5px;
}

.site-header__logo {
  width: 212px;
  height: 64px;
}

/* Both the gap below and this inset shrink between 768 and ~1010 px: at their
   reference values the logo and the five items need about 860 px of header,
   and the desktop layout starts at 768. From 1012 px up both are back to the
   numbers measured on desktop-1440.png. */
.site-nav {
  margin-right: clamp(0px, (100vw - 620px) / 10, 39px);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, (100vw - 700px) / 5.2, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.8px;
  color: #000;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--blue);
}

.site-nav__link.is-current {
  color: var(--blue);
}

/* Hamburger. Hidden on desktop; the mobile menu itself is Task 2's. */
.nav-toggle {
  display: none;
  flex: none;
  width: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  background: #000;
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 7px;
}

/* ----------------------------------------------------------------- hero --- */

.hero__media {
  position: relative;
  height: 672px;
  overflow: hidden;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The crop is already baked into the file (see tools/optimize-images.mjs), so
   plain `cover` reproduces the Wix framing at every width. */

.hero__overlay {
  position: absolute;
  left: max(15px, calc(50% - var(--container) / 2 + 15px));
  bottom: 16px;
  width: min(615px, calc(100% - 30px));
}

.hero__box {
  padding: 32px 21px;
  background: rgba(45, 170, 225, 0.38);
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 56px;
  font-weight: 400;
  color: #fff;
}

/* Small downward triangle centred under the tagline box. */
.hero__pointer {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--hero-pointer);
}

.hero__band {
  /* Left padding puts the claim on the content column (x=266 at 1440 px)
     rather than centring an 980 px box. */
  padding: 38px 0 52px max(20px, calc(50% - var(--container) / 2 + 36px));
  background: var(--red);
}

.hero__claim {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 56px;
  font-weight: 400;
  color: #fff;
}

/* ------------------------------------------------------------ expertise --- */

/* Wix runs the four tiles full-bleed, a quarter of the viewport each (360 px
   at 1440), 439 px tall. Inside a tile the icon, the title and the description
   each sit in a fixed-height slot and are centred in it, so a one-line title
   lands on the same optical line as a two-line one — all three slot positions
   are measured off desktop-1440.png. */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  /* 26 px is the reference size; below a ~1040 px viewport the tile is too
     narrow for it and the type tracks the column instead. */
  --tile-font: min(26px, 2.5vw);

  display: flex;
  flex-direction: column;
  align-items: center;
  height: 439px;
  padding: 25px 8px 0;
  text-align: center;
}

.tile:nth-child(odd) {
  background: var(--grey);
}

.tile:nth-child(even) {
  background: var(--blue);
}

.tile__icon {
  flex: none;
  width: 103px;
  height: 121px;
}

/* The hard line breaks live in the markup as real newlines (see copy.md), so
   both slots honour them and wrap the rest at the reference's box width. */
.tile__title,
.tile__desc {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
  font-size: var(--tile-font);
}

.tile__title {
  width: min(256px, 100%);
  height: 73px;
  margin: 41px 0 0;
  font-family: var(--font-body);
  line-height: 1.4;
  font-weight: 700;
}

.tile__desc {
  width: min(235px, 100%);
  height: 120px;
  margin: 13px 0 0;
  line-height: 1.154;
}

/* ----------------------------------------------------------- references --- */

.references {
  padding: 40px 0 25px;
  background: #fff;
}

.references__heading {
  margin: 0 0 25px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
}

.references__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Wix lays a heavily darkened stock photo under the card colour. Those photos
   are licensed for Wix sites only (spec §2.5), so the mottled dark blue is
   rebuilt here out of the card colour and two soft highlights. */
.quote-card {
  min-height: 562px;
  margin: 0;
  padding: 38px 20px 24px;
  background-color: var(--blue-dark);
  background-image:
    radial-gradient(90% 55% at 30% 22%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 45% at 78% 62%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.06));
  color: #fff;
  text-align: center;
}

.quote-card__who {
  font-size: 14px;
  line-height: 1.4;
}

.quote-card__name,
.quote-card__role {
  display: block;
}

.quote-card__quote {
  margin: 40px 0 0;
  font-family: var(--font-form);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
}

.quote-card__quote p {
  margin: 0;
}

/* Wix separates the two halves of every quote with one blank line. */
.quote-card__quote p + p {
  margin-top: 1.7em;
}

/* Wix ships the opening-quote artwork and turns it upside down to get the
   closing mark; 34x32 and the rotation are its own numbers. */
.quote-card__mark {
  display: block;
  width: 34px;
  height: 32px;
  margin: 38px auto 0;
  transform: rotate(180deg);
  fill: var(--quote-mark);
}

/* ----------------------------------------------------------- logo grid --- */

/* Rows of 4 / 5 / 5 (copy.md). 20 columns is the smallest track count that
   splits cleanly into both, which keeps the whole thing one list. The PNGs
   ship at 2x and carry the whitespace Wix laid out around them, so they are
   placed at half their intrinsic size and the row gap is small. */
.logos {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  align-items: center;
  justify-items: center;
  row-gap: 5px;
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}

.logos > li:nth-child(-n + 4) {
  grid-column: span 5;
}

.logos > li:nth-child(n + 5) {
  grid-column: span 4;
}

.logos img {
  height: auto;
}

/* ---------------------------------------------------------------- about --- */

/* Wix positions this section full-bleed rather than on the 980 px column. At
   1440 px: grey band 968 px tall, portrait x=80..719 (640 wide, full height),
   text from x=810 in a column 470 px wide — the width at which every paragraph
   breaks on the same words as the reference — so 80/90/160 px of gutter. Those
   numbers are written as percentages of 1440 so the two columns keep their
   proportions all the way down to 768 px instead of overflowing. */
.about {
  background: var(--grey);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 470fr);
  /* A percentage gap resolves against the padding box, i.e. 1200 px at 1440. */
  column-gap: 7.5%;
  min-height: 968px;
  padding: 0 11.111% 0 5.5556%;
}

.about__figure {
  display: block;
}

/* The portrait is 1200x1601 and the desktop slot is narrower than that, so
   `cover` drops about 85 px of width. Wix takes most of that off the left,
   which leaves the subject where desktop-1440.png has her (her jacket spans
   x=96..616 inside the slot); a centred crop puts her 30 px too far right. */
.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% center;
}

.about__text {
  padding: 66px 0 60px;
}

.about__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 56px;
  font-weight: 400;
}

/* copy.md separates the paragraphs with a blank line, and Wix renders that as
   exactly one empty 30.8 px line between them. */
.about__text p {
  margin: 0;
  font-size: 22px;
  line-height: 30.8px;
}

.about__text p + p {
  margin-top: 30.8px;
}

.about__text .about__lead {
  margin-top: 19px;
  font-weight: 700;
}

.about__text .about__lead + p {
  margin-top: 57px;
}

/* -------------------------------------------------------------- contact --- */

.contact {
  position: relative;
  /* The off-screen spam trap is absolutely positioned inside this section. */
  overflow: hidden;
}

.contact__bg {
  display: block;
  position: absolute;
  inset: 0;
}

/* The source is only 978x550 (see site/img), so above ~978 px the photo is
   upscaled — that is what Wix served too. */
.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 80 px above the panel and 56 px below it make up the 536 px band of
   desktop-1440.png. */
.contact__inner {
  position: relative;
  padding-top: 80px;
  padding-bottom: 56px;
}

.contact__panel {
  width: 584px;
  max-width: 100%;
  /* Wix insets the panel 8 px from the content column's left edge. Kept off
     .contact__inner so the column's own side padding still applies. */
  margin-left: 8px;
  padding: 24px 25px;
  background: #fff;
}

/* Shown by site.js when the contact service redirects back with ?error=. No
   error state was captured in the screenshots, so the colour comes from the
   Wix source instead — see --error. */
.form-message {
  margin: 0 0 16px;
  font-family: var(--font-form);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--error);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 25px;
}

.form__field + .form__field,
.form__row + .form__field {
  margin-top: 25px;
}

.form__row > .form__field + .form__field {
  margin-top: 0;
}

.form__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-form);
  font-size: 14px;
  line-height: 17px;
  font-weight: 300;
  color: var(--blue);
}

.form__input {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--grey);
  color: #000;
  font-family: var(--font-form);
  font-size: 16px;
  /* Wix ellipsises the Subject placeholder rather than clipping it. */
  text-overflow: ellipsis;
}

.form__textarea {
  height: 91px;
  padding: 9px 14px;
  line-height: 1.4;
  resize: vertical;
}

.form__input::placeholder {
  color: #6F6F6F;
  /* Firefox dims placeholders by default; Wix's are at full strength. */
  opacity: 1;
}

.form__input:focus-visible,
.form__send:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Off-screen, not display:none: a bot that reads the markup should still fill
   it in. Real visitors never reach it — it is out of the tab order and hidden
   from assistive technology. */
.form__trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__send {
  display: block;
  width: 162px;
  height: 43px;
  margin: 25px auto 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  /* The button is #E60005 in desktop-1440.png and mobile-375.png, the same red
     as the hero band — not the #DF3131 of §2.4, which is Wix's error colour. */
  background: var(--red);
  color: #fff;
  font-family: var(--font-form);
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 800;
  cursor: pointer;
}

/* ------------------------------------------------------ thank-you page --- */

.thanks {
  padding: 96px 0 120px;
}

.thanks__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 56px;
  font-weight: 400;
}

.thanks__text {
  margin: 24px 0 0;
  font-size: 22px;
  line-height: 30.8px;
}

.thanks__back {
  display: inline-block;
  margin-top: 32px;
  font-size: 22px;
  line-height: 30.8px;
}

/* ------------------------------------------------------------ floating CTA --- */

.cta {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 299px;
  height: 62px;
  border-radius: 7px;
  background: var(--cta);
  color: #fff;
  font-family: var(--font-cta);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}

.cta__dots {
  display: none;
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
  padding: 32px 0 27px;
  background: #fff;
  text-align: center;
}

.site-footer__line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16.8px;
  color: var(--grey-text);
}

.site-footer__line a {
  color: inherit;
  text-decoration: none;
}

.site-footer__line a:hover,
.site-footer__line a:focus-visible {
  text-decoration: underline;
}

/* ================================================================ phone === */

@media (max-width: 767px) {
  :root {
    --header-height: 66px;
    --header-rule: 1px;
  }

  body {
    padding-top: calc(var(--header-height) + var(--header-rule));
  }

  /* Wix keeps the logo bar on screen while the page scrolls on phones. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  .site-header__inner {
    padding: 0 24px 0 16px;
  }

  .site-header__logo {
    width: 176px;
    height: 53px;
  }

  .nav-toggle {
    display: block;
    /* Wix sits the bars 2 px below the header's optical centre. */
    margin-top: 4px;
    /* The panel is a child of the header, so the button needs its own layer
       inside that stacking context or the panel paints over it. */
    position: relative;
    z-index: 46;
  }

  /* Anchor targets must clear the fixed header. */
  .site-header[id],
  section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--header-rule));
  }

  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    /* The desktop inset would eat 39 px off the right of a full-screen panel. */
    margin-right: 0;
    background: #fff;
    overflow-y: auto;
  }

  .nav-open .site-nav {
    display: block;
  }

  /* The panel covers the page, so lift the header (and with it the toggle)
     above it — otherwise the menu cannot be closed by tapping again. Wix shows
     nothing but the close button and the links, so the logo and the floating
     CTA step aside and the header bar itself goes transparent. */
  .nav-open .site-header {
    z-index: 46;
    background: none;
    border-bottom-color: transparent;
  }

  /* The logo keeps its box so the X lands exactly where the hamburger was. */
  .nav-open .site-header__home {
    visibility: hidden;
  }

  .nav-open .cta {
    display: none;
  }

  .nav-open {
    overflow: hidden;
  }

  /* Five centred links, first one centred ~100 px down, 65 px apart
     (reference/wix/screenshots/mobile-375-menu.png). */
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: 70px 24px 24px;
  }

  .site-nav__link {
    display: block;
    font-size: 25px;
    line-height: 65px;
    text-align: center;
  }

  /* Open, the hamburger becomes the X that sits where it used to. */
  .nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Phone hero: the photo sits on top at its natural aspect, then the tagline
     box and the claim share one red block. */
  .hero {
    background: var(--red);
  }

  .hero__media {
    height: auto;
    overflow: visible;
  }

  .hero__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1224 / 546;
  }

  .hero__overlay {
    position: static;
    width: auto;
    margin: 14px 20px 0;
  }

  .hero__box {
    padding: 11px;
  }

  .hero__tagline {
    font-size: 19px;
    line-height: 26.6px;
  }

  .hero__pointer {
    border-left-width: 9px;
    border-right-width: 9px;
    border-top-width: 9px;
  }

  .hero__band {
    padding: 13px 31px 35px;
  }

  .hero__claim {
    max-width: none;
    font-size: 20px;
    line-height: 28px;
  }

  /* Phone expertise: full-width blocks that keep the alternating colours, and
     the slots give way to ordinary flow — Wix stacks them the same way. */
  .tiles {
    grid-template-columns: 1fr;
  }

  .tile {
    --tile-font: 22px;

    height: auto;
    padding: 20px 12px 32px;
  }

  .tile__icon {
    width: 82px;
    height: 82px;
  }

  .tile__title {
    width: min(216px, 100%);
    height: auto;
    margin-top: 10px;
  }

  .tile__desc {
    width: min(195px, 100%);
    height: auto;
    margin-top: 11px;
  }

  /* Phone references: one full-bleed card per row, four logos per row. */
  .references {
    padding: 21px 0 40px;
  }

  .references__heading {
    margin-bottom: 8px;
    font-size: 24px;
  }

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

  .quote-card {
    min-height: 0;
    padding: 22px 20px 33px;
  }

  .quote-card__quote {
    margin-top: 21px;
  }

  .quote-card__mark {
    width: 30px;
    height: 28px;
    margin-top: 20px;
  }

  .logos {
    grid-template-columns: repeat(4, 1fr);
    /* The column gap is what sizes the logos here: they fill their track, and
       Wix leaves about this much air between them. */
    gap: 8px 14px;
    margin-top: 60px;
    padding: 0 8px;
  }

  .logos > li:nth-child(-n + 4),
  .logos > li:nth-child(n + 5) {
    grid-column: auto;
  }

  /* The CTA collapses to a bubble with three dots. */
  .cta {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cta-bubble);
  }

  .cta__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cta__dots {
    display: flex;
    gap: 4px;
  }

  .cta__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
  }

  /* Phone about: the portrait goes full-bleed on top at its own aspect (the
     phone shows the whole frame, 320x427), the text follows in the grey band. */
  .about__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0;
  }

  .about__photo {
    height: auto;
    aspect-ratio: 1200 / 1601;
  }

  .about__text {
    padding: 20px 20px 30px;
  }

  .about__heading {
    font-size: 24px;
    line-height: 33.6px;
  }

  .about__text p {
    font-size: 18px;
    line-height: 26px;
  }

  .about__text p + p {
    margin-top: 26px;
  }

  /* Wix tightens the gap around the bold intro on phones instead of widening
     it the way it does on desktop. */
  .about__text .about__lead,
  .about__text .about__lead + p {
    margin-top: 9px;
  }

  /* Phone contact: the panel becomes a 20 px margin off both edges and the
     first two fields stop sharing a row. */
  .contact__inner {
    padding: 30px 20px 23px;
  }

  .contact__panel {
    width: 100%;
    margin-left: 0;
    padding: 24px;
  }

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

  .form__row > .form__field + .form__field {
    margin-top: 25px;
  }

  .form__input {
    height: 36px;
  }

  .form__textarea {
    height: 92px;
  }

  .form__send {
    width: 100%;
  }

  .thanks {
    padding: 32px 20px 64px;
  }

  .thanks__heading {
    font-size: 24px;
    line-height: 33.6px;
  }

  .thanks__text,
  .thanks__back {
    font-size: 18px;
    line-height: 26px;
  }
}