html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: var(--neutral--100);
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #000000;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: 500;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

figure {
  margin: 0 0 10px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

label {
  margin-bottom: 5px;
  font-weight: 500;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: var(--neutral--100);
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #000000;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #000000;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

@font-face {
  font-family: Mona Sans;
  src: url(../fonts/mona-sans-medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mona Sans;
  src: url(../fonts/mona-sans-regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --neutral--600: #4a4a4a;
  --neutral--800: #000000;
  --neutral--500: #766c72;
  --accent--primary-1: #000000;
  --neutral--100: #ffffff;
  --neutral--300: #d9d9d9;
  --general--shadow-01: #0000000f;
  --neutral--200: #ffffff;
  --general--shadow-02: #00000014;
  --secondary--color-1: #ffffff;
  --neutral--700: #262626;
  --neutral--400: #9c9c9c;
  --system--green-400: #000000;
  --system--blue-400: #000000;
  --system--blue-300: #000000;
  --system--blue-200: #c9c7c0;
  --system--blue-100: #ffffff;
  --system--green-300: #484848;
  --system--green-200: #c9c7c0;
  --system--green-100: #ffffff;
  --system--red-400: #000000;
  --system--300: #484848;
  --system--red-200: #c9c7c0;
  --system--red-100: #ffffff;
  --system--orange-400: #000000;
  --system--orange-300: #484848;
  --system--orange-200: #c9c7c0;
  --system--orange-100: #ffffff;
  --general--shadow-03: #0000001a;
  --general--shadow-04: #00000024;
  --general--shadow-05: #00000029;
  --general--shadow-06: #0000003d;
  --button-shadow--white-01: #0000000a;
  --button-shadow--white-02: #0000000f;
  --button-shadow--white-03: #0000001a;
  --secondary--color-2\<deleted\|variable-8edf41ba\>: #ffffff;
  --button-shadow--color-01: #0000000f;
  --button-shadow--color-2: #00000014;
  --button-shadow--color-03: #00000014;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }

  

  

  
}

body {
  color: var(--neutral--600);
  font-family: Mona Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.667em;
}

h1 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.222em;
}

h2 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.316em;
}

h3 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.417em;
}

h4 {
  color: var(--neutral--800);
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.273em;
}

p {
  margin-bottom: 16px;
}

a {
  color: var(--neutral--800);
  text-decoration: underline;
  transition: color .3s;
}

a:hover {
  color: var(--neutral--500);
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  margin-bottom: 8px;
  padding-left: 8px;
}

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

label {
  color: var(--neutral--800);
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 1.111em;
  display: block;
}

figure {
  margin-top: 24px;
  margin-bottom: 48px;
}

figcaption {
  text-align: center;
  margin-top: 16px;
}

.grid-2-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.grid-2-columns._1-5fr---1fr {
  grid-template-columns: 1.5fr 1fr;
}

.grid-2-columns.title-and-logo-strip {
  grid-column-gap: 48px;
  grid-template-columns: auto 1fr;
}

.grid-2-columns.gap-row-40px {
  grid-row-gap: 40px;
}

.card {
  border: 1px solid var(--neutral--300);
  background-color: var(--neutral--100);
  box-shadow: 0 2px 7px 0 var(--general--shadow-01);
  border-radius: 0;
}

.bg-accent-1 {
  background-color: var(--accent--primary-1);
}

.color-neutral-800 {
  color: var(--neutral--800);
}

.color-neutral-600 {
  color: var(--neutral--600);
}

.color-neutral-200 {
  color: var(--neutral--200);
}

.color-neutral-100 {
  color: var(--neutral--100);
}

.color-neutral-100.hover-color-neutral-400:hover {
  color: var(--neutral--400);
}

.color-neutral-400 {
  color: var(--neutral--400);
}

.divider {
  background-color: var(--neutral--400);
  height: 1px;
  margin-top: 80px;
  margin-bottom: 80px;
}

.divider.cta-section-divider {
  background-color: var(--neutral--600);
  margin-top: 80px;
  margin-bottom: 80px;
  margin-left: -50vw;
}

.mg-bottom-8px {
  margin-bottom: 8px;
}

.mg-bottom-16px {
  margin-bottom: 16px;
}

.mg-bottom-24px {
  margin-bottom: 24px;
}

.mg-bottom-32px {
  margin-bottom: 32px;
}

.mg-bottom-40px {
  margin-bottom: 40px;
}

.mg-bottom-64px {
  margin-bottom: 64px;
}

.text-200 {
  line-height: 1.111em;
}

.text-200.medium {
  font-weight: 500;
}

.display-1 {
  color: var(--neutral--800);
  font-size: 90px;
  font-weight: 500;
  line-height: 1.044em;
}

.display-1.color-neutral-100 {
  color: var(--neutral--100);
  margin-left: auto;
  margin-right: 44px;
}

.gap-row-16px {
  grid-row-gap: 16px;
}

.display-2 {
  color: var(--neutral--800);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.222em;
}

.display-3 {
  color: var(--neutral--800);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.294em;
}

.display-4 {
  color: var(--neutral--800);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.429em;
}

.text-300 {
  font-size: 20px;
  line-height: 1.1em;
}

.text-300.medium {
  font-weight: 500;
}

.grid-3-columns {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-3-columns.services-grid {
  align-items: start;
}

.inner-container._422px {
  max-width: 422px;
}

.inner-container._440px {
  max-width: 440px;
}

.inner-container._468px {
  max-width: 468px;
}

.inner-container._810px {
  max-width: 810px;
}

.inner-container._564px {
  max-width: 564px;
}

.mg-bottom-0 {
  margin-bottom: 0;
}

.btn-primary {
  border: 1px solid var(--neutral--800);
  background-color: var(--neutral--800);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--neutral--100);
  text-align: center;
  transform-style: preserve-3d;
  border-radius: 0;
  justify-content: center;
  padding: 20px 38px;
  font-weight: 500;
  line-height: 1.111em;
  text-decoration: none;
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}

.btn-primary:hover {
  border-color: var(--accent--primary-1);
  color: var(--accent--primary-1);
  background-color: #0000;
  transform: scale3d(1.02, 1.02, 1.01);
}

.btn-primary.small {
  padding: 14px 24px;
  font-size: 16px;
  line-height: 18px;
}

.btn-primary.white {
  border-color: var(--neutral--100);
  background-color: var(--neutral--100);
  color: var(--accent--primary-1);
}

.btn-primary.white:hover {
  border-color: var(--neutral--100);
  color: var(--neutral--100);
  background-color: #0000;
}

.btn-secondary {
  border: 1px solid var(--neutral--300);
  color: var(--neutral--800);
  text-align: center;
  transform-style: preserve-3d;
  background-color: #0000;
  border-radius: 0;
  padding: 20px 38px;
  line-height: 1.111em;
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}

.btn-secondary:hover {
  border-color: var(--neutral--800);
  background-color: var(--neutral--800);
  color: var(--neutral--100);
  transform: scale3d(1.02, 1.02, 1.01);
}

.btn-secondary.small {
  padding: 18px 24px;
  font-size: 16px;
  line-height: 14px;
}

.btn-secondary.white {
  color: var(--neutral--100);
  background-color: #0000;
}

.btn-secondary.white:hover {
  border-color: var(--neutral--100);
  background-color: var(--neutral--100);
  color: var(--neutral--800);
}

.input {
  border-style: none none solid;
  border-width: 1px;
  border-color: var(--neutral--300);
  min-height: 72px;
  color: var(--neutral--800);
  background-color: #0000;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  font-size: 18px;
  transition: color .3s, border-color .3s;
}

.input:hover {
  border-color: var(--accent--primary-1) var(--accent--primary-1) var(--neutral--400);
}

.input:focus, .input.-wfp-focus {
  border-color: var(--accent--primary-1);
  color: var(--neutral--800);
}

.input::placeholder {
  color: var(--neutral--600);
}

.input.white {
  border-bottom-color: var(--neutral--600);
  color: var(--neutral--100);
}

.input.white:hover {
  border-bottom-color: var(--neutral--500);
}

.input.white:focus {
  border-bottom-color: var(--neutral--100);
}

.input.white::placeholder {
  color: var(--neutral--300);
}

.line-rounded-icon.link-icon-right {
  margin-left: 6px;
  display: inline-block;
}

.line-rounded-icon.link-icon-right.mg-left-4px {
  margin-left: 4px;
}

.line-square-icon.link-icon-right {
  display: inline-block;
}

.container-default {
  max-width: 1316px;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section.pd-80px {
  padding-top: 80px;
  padding-bottom: 80px;
}

.header-wrapper {
  background-color: #0000;
}

.header-wrapper.h-z {
  background-color: var(--button-shadow--white-01);
}

.header-content-wrapper {
  border-bottom: 1px solid #fff3;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
}

.header-nav-menu-list {
  z-index: 1;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}

.header-nav-link {
  color: var(--neutral--100);
  padding: 0;
}

.header-nav-link:hover {
  color: var(--neutral--400);
}

.header-nav-link.w--current {
  color: var(--neutral--100);
}

.header-nav-list-item {
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 32px;
  line-height: 1.111em;
}

.header-nav-list-item.show-in-tablet, .header-nav-list-item.khfbdf, .header-nav-list-item.goodle-ads, .header-nav-list-item.jlnwd {
  display: none;
}

.header-logo-link {
  cursor: pointer;
  transform-style: preserve-3d;
  margin-right: 40px;
  padding-left: 0;
  transition: transform .3s;
}

.header-logo-link:hover {
  transform: scale3d(1.06, 1.06, 1.01);
}

.hamburger-menu-wrapper {
  transform-style: preserve-3d;
  padding: 0;
}

.hamburger-menu-wrapper.w--open {
  background-color: #0000;
}

.hamburger-menu-bar {
  background-color: var(--neutral--100);
  width: 52px;
  height: 4px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.header-right-side {
  grid-column-gap: 24px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.header-left-side {
  align-items: center;
  display: flex;
}

.overflow-hidden {
  overflow: hidden;
}

.text-decoration-none {
  text-decoration: none;
}

.cta-section {
  z-index: 1;
  background-color: var(--accent--primary-1);
  padding-top: 100px;
  padding-bottom: 126px;
  position: relative;
  overflow: hidden;
}

.buttons-flex-container {
  grid-column-gap: 24px;
  display: flex;
}

.buttons-flex-container.wrap {
  grid-row-gap: 12px;
  flex-wrap: wrap;
}

.position-relative---z-index-1 {
  z-index: 1;
  position: relative;
}

.top-section {
  z-index: 1;
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}

.top-section.large-image-right {
  background-color: var(--accent--primary-1);
  padding-top: 254px;
  padding-bottom: 100px;
}

.top-section.pd-bottom-120px {
  padding-bottom: 120px;
}

.header-position-absolute-wrapper {
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.top-section---image-right-wrapper {
  z-index: 0;
  width: 54%;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.top-section-bg-bottom {
  z-index: -1;
  background-color: var(--neutral--100);
  height: 8%;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.link-item-border-top {
  z-index: 1;
  border-top: 1px solid var(--neutral--300);
  padding-top: 20px;
  text-decoration: none;
  display: block;
  position: relative;
}

.mg-bottom-20px {
  margin-bottom: 20px;
}

.services-collection-item:first-child {
  margin-top: 72px;
}

.services-collection-item:last-child {
  margin-top: -72px;
}

.mg-left-4px {
  margin-left: 4px;
}

.mg-left-6px {
  margin-left: 6px;
}

.link-border {
  z-index: 1;
  background-color: var(--accent--primary-1);
  min-height: 1px;
  max-height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.link-border.top {
  top: -1px;
  bottom: auto;
}

.pd-sides-40px {
  padding-left: 40px;
  padding-right: 40px;
}

.btn-primary-2 {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
  transform-style: preserve-3d;
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 0;
  justify-content: center;
  padding: 20px 38px;
  font-weight: 500;
  line-height: 1.111em;
  text-decoration: none;
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}

.btn-primary-2:hover {
  color: #000000;
  background-color: #0000;
  border-color: #000000;
  transform: scale3d(1.02, 1.02, 1.01);
}

.display-6 {
  color: #000000;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.222em;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 30px;
  }

  

  

  .grid-2-columns._1-col-tablet {
    grid-template-columns: 1fr;
  }

  .divider {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .divider.cta-section-divider {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  

  

  

  

  .display-1 {
    font-size: 72px;
  }

  

  .display-2 {
    font-size: 48px;
  }

  .display-3 {
    font-size: 32px;
  }

  .display-4 {
    font-size: 22px;
  }

  

  

  

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

  

  

  

  

  .grid-3-columns.services-grid {
    grid-row-gap: 80px;
    grid-template-columns: 1fr;
  }

  

  

  

  

  .inner-container._100-tablet {
    max-width: 100%;
  }

  

  

  .btn-primary {
    padding-left: 32px;
    padding-right: 32px;
  }

  

  .btn-secondary {
    padding-left: 32px;
    padding-right: 32px;
  }

  

  

  

  

  

  

  

  

  

  

  .section {
    padding-top: 148px;
    padding-bottom: 148px;
  }

  

  

  .section.pd-80px {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  

  

  

  

  

  

  

  

  

  

  .header-content-wrapper {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  

  .header-nav-menu-wrapper {
    border-top: 1px solid var(--neutral--300);
    border-bottom: 1px solid var(--neutral--300);
    background-color: var(--neutral--100);
    margin-top: -1px;
    padding: 40px 24px 48px;
  }

  .header-nav-menu-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-nav-link {
    color: var(--neutral--800);
  }

  .header-nav-link:hover {
    color: var(--neutral--600);
  }

  .header-nav-list-item {
    margin-bottom: 24px;
    padding-left: 0;
    padding-right: 0;
  }

  .header-nav-list-item.show-in-tablet {
    margin-bottom: 0;
    display: block;
  }

  

  .hamburger-menu-wrapper {
    transition: transform .3s;
  }

  .hamburger-menu-wrapper:hover {
    transform: scale3d(1.04, 1.04, 1.01);
  }

  .hamburger-menu-wrapper.w--open {
    background-color: #0000;
  }

  .hamburger-menu-bar {
    width: 44px;
    height: 3px;
  }

  .hamburger-menu-bar.bottom {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .header-left-side {
    justify-content: space-between;
    width: 100%;
    margin-right: 24px;
  }

  

  .hidden-on-tablet {
    display: none;
  }

  

  

  

  

  

  

  

  

  

  .cta-section {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  

  

  

  

  

  

  

  .top-section.large-image-right {
    padding-top: 220px;
    padding-bottom: 64px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .services-collection-item:first-child, .services-collection-item:last-child {
    margin-top: 0;
  }

  

  

  

  

  

  

  

  

  

  .btn-primary-2 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .display-6 {
    font-size: 48px;
  }

}

@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 {
    margin-bottom: 12px;
    font-size: 38px;
  }

  h2 {
    margin-bottom: 12px;
    font-size: 28px;
  }

  h4 {
    font-size: 20px;
  }

  

  

  p {
    margin-bottom: 12px;
  }

  

  figcaption {
    margin-top: 12px;
  }

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

  

  .grid-2-columns._1-col-tablet.gap-row-16px {
    grid-row-gap: 12px;
  }

  .grid-2-columns.template-page-sidebar, .grid-2-columns.checkout-page, .grid-2-columns._1-5fr---1fr {
    grid-template-columns: 1fr;
  }

  

  

  .grid-2-columns.title-and-logo-strip {
    grid-row-gap: 20px;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .grid-2-columns.gap-row-40px {
    grid-row-gap: 32px;
  }

  .divider {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  

  

  .divider.cta-section-divider, .divider.full-width-right-divider.bg-neutral-300 {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  

  .mg-bottom-16px {
    margin-bottom: 12px;
  }

  .mg-bottom-24px {
    margin-bottom: 20px;
  }

  

  .mg-bottom-32px {
    margin-bottom: 24px;
  }

  

  .mg-bottom-40px {
    margin-bottom: 32px;
  }

  

  

  

  

  .mg-bottom-64px {
    margin-bottom: 56px;
  }

  

  

  

  

  .text-200 {
    font-size: 16px;
  }

  

  

  .display-1 {
    font-size: 56px;
  }

  

  .display-2 {
    font-size: 40px;
  }

  .display-3 {
    font-size: 26px;
  }

  .display-4 {
    font-size: 20px;
  }

  

  

  

  .text-300 {
    font-size: 18px;
  }

  

  

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

  

  

  

  

  .btn-primary {
    padding: 16px 28px;
  }

  

  

  .btn-secondary {
    padding: 16px 28px;
  }

  .btn-secondary.small {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  

  

  

  

  

  .input {
    min-height: 64px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .container-default {
    padding-left: 20px;
    padding-right: 20px;
  }

  

  .section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  

  

  

  .section.pd-80px {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .header-content-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  

  .header-nav-menu-wrapper {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .header-logo-link {
    margin-right: 32px;
  }

  .hamburger-menu-bar {
    width: 32px;
  }

  .header-left-side {
    margin-right: 20px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .cta-section {
    padding-top: 72px;
    padding-bottom: 92px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .buttons-flex-container {
    grid-column-gap: 20px;
  }

  

  

  

  

  

  

  .top-section {
    padding-top: 64px;
  }

  .top-section.large-image-right {
    padding-top: 148px;
    padding-bottom: 180px;
  }

  

  

  

  

  .top-section.pd-bottom-120px {
    padding-bottom: 88px;
  }

  

  

  .top-section---image-right-wrapper {
    width: 100%;
    top: 70%;
  }

  .mg-bottom-20px {
    margin-bottom: 16px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .pd-sides-40px {
    padding-left: 32px;
    padding-right: 32px;
  }

  

  

  

  

  

  

  

  

  

  

  .btn-primary-2 {
    padding: 16px 28px;
  }

  .display-6 {
    font-size: 40px;
  }

}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 32px;
  }

  

  

  

  

  .display-1 {
    font-size: 48px;
  }

  .display-2 {
    font-size: 34px;
  }

  .display-3 {
    font-size: 24px;
  }

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

  

  

  

  

  

  

  

  

  .btn-primary {
    width: 100%;
  }

  

  

  .btn-secondary {
    width: 100%;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .container-default {
    padding-left: 16px;
    padding-right: 16px;
  }

  

  .section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .header-nav-list-item {
    text-align: left;
    width: 100%;
  }

  .header-nav-list-item.show-in-tablet {
    justify-content: flex-start;
    width: 100%;
    display: flex;
  }

  .header-logo-link {
    margin-right: 24px;
  }

  

  .hamburger-menu-bar {
    width: 28px;
  }

  .header-left-side {
    margin-right: 16px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .buttons-flex-container {
    grid-row-gap: 16px;
    flex-direction: column;
  }

  

  

  

  .top-section {
    padding-top: 48px;
  }

  .top-section.large-image-right, .top-section.large-image-right.v2 {
    padding-top: 132px;
  }

  

  

  .top-section.large-image-right.jhkd.hbsd.jd.qnbs, .top-section.large-image-right.jdk-d {
    padding-bottom: 220px;
  }

  

  

  .top-section.pd-bottom-120px {
    padding-bottom: 80px;
  }

  

  

  .top-section---image-right-wrapper {
    padding-bottom: 0;
    top: 74%;
  }

  

  

  .top-section---image-right-wrapper.bs {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .pd-sides-40px {
    padding-left: 24px;
    padding-right: 24px;
  }

  

  

  

  

  

  

  

  

  

  .btn-primary-2 {
    width: 100%;
  }

  .display-6 {
    font-size: 34px;
  }

  
}

#w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c8017-131119fd, #w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c801d-131119fd, #w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c8023-131119fd {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_995d65e5-063f-3011-a122-760520206ecf-131119fd {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: start end;
}

#w-node-_35bc9acc-c127-ffa9-781b-23671a3a06cf-13111a05, #w-node-_41f404f4-51bb-e66a-0132-810c9d351c78-13111a05, #w-node-_41f404f4-51bb-e66a-0132-810c9d351c7e-13111a05, #w-node-_31f4fc78-867e-634a-c67f-5c460689bcf9-13111a05 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c8017-536d218a, #w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c801d-536d218a, #w-node-_6563b17f-2f82-565a-3ccf-bbf5a26c8023-536d218a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_995d65e5-063f-3011-a122-760520206ecf-536d218a {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: start end;
}

@media screen and (max-width: 767px) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  #w-node-_995d65e5-063f-3011-a122-760520206ecf-131119fd, #w-node-dad13e17-5c9f-9119-1e64-e5d0a673e413-131119fd {
    justify-self: auto;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  #w-node-_995d65e5-063f-3011-a122-760520206ecf-536d218a, #w-node-dad13e17-5c9f-9119-1e64-e5d0a673e413-536d218a {
    justify-self: auto;
  }
}

/* Meridian brand layer */
body { background-color: var(--neutral--100); color: #484848; }
.btn-primary { background-color: #000000; border-color: #000000; color: #ffffff; }
.btn-primary:hover { background-color: #0000; border-color: #000000; color: #000000; }
.btn-primary.white { background-color: #ffffff; border-color: #ffffff; color: #000000; }
.btn-primary.white:hover { background-color: #0000; border-color: #ffffff; color: #ffffff; }
/* Outline buttons: same contrast on white as the light grey border has on black (~14:1). */
.btn-secondary:not(.white) { border-color: #262626; }
.btn-secondary:not(.white):hover { border-color: #000000; background-color: #000000; color: #ffffff; }
::selection { background: #000000; color: #ffffff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-w-id], [style*="translate3d"], [style*="opacity: 0"] { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* Apple depth: inner top highlight + inner bottom shadow, tinted to each fill.
   Outline-only elements (btn-secondary, circle CTA) and full-bleed sections are skipped: no fill to shade. */
:root {
  --depth-bone: inset 0 2px 3px #ffffffe6, inset 0 -3px 6px #0000002e;
  --depth-ink: inset 0 2px 3px #ffffff26, inset 0 -3px 6px #000000a6;
}
.btn-primary, .btn-primary-2, .btn-circle-secondary.w-slider-arrow-left, .btn-circle-secondary.w-slider-arrow-right {
  transition: transform .13s cubic-bezier(.23,1,.32,1), border-color .22s, background-color .22s, color .22s, box-shadow .22s;
}
.btn-primary, .btn-primary-2 { box-shadow: inset 0 1px 2px #ffffff1a, inset 0 -2px 3px #00000059, 0 3px 8px -4px #00000040; }
.btn-primary.white, .btn-circle-secondary.w-slider-arrow-left, .btn-circle-secondary.w-slider-arrow-right { box-shadow: inset 0 1px 2px #ffffff99, inset 0 -2px 3px #00000017, 0 3px 8px -4px #00000026; }
.btn-primary:active, .btn-primary-2:active { transform: scale(.98); }
.card { box-shadow: var(--depth-bone); }
.top-section---image-right-wrapper { box-shadow: inset 0 3px 4px #ffffffb3, inset 0 -6px 12px #00000026; }

/* sticky nav (Evan, 2026-09-30) */
.header-position-absolute-wrapper { position: fixed; z-index: 1000; background: #000000; }
html { scroll-padding-top: 80px; }

/* No bold anywhere (Evan, 2026-09-30): max weight is 500, browser may not fake bold */
html { font-synthesis: none; }

/* Scroll reveal (js/reveal.js). Meant to go unnoticed: short fixed travel, blur on headlines only,
   hugeinc.com curve (power4.inOut), sped up to .6s (Evan, 2026-09-30). Tiers: docs/superpowers/plans/2026-09-30-reveal-choreography.md
   Hidden state only applies once the script has run. */
.reveal-on [data-reveal] { opacity: 0; visibility: hidden; transform: translate3d(0, 20px, 0); }
.reveal-on [data-reveal="focus"] { transform: translate3d(0, 16px, 0); filter: blur(8px); }
.reveal-on [data-reveal="fade"] { transform: none; }
.reveal-on [data-reveal].is-in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s cubic-bezier(.76,0,.24,1), transform .6s cubic-bezier(.76,0,.24,1), visibility 0s;
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
.reveal-on [data-reveal="focus"].is-in {
  filter: blur(0);
  transition: opacity .6s cubic-bezier(.76,0,.24,1), transform .6s cubic-bezier(.76,0,.24,1), filter .6s cubic-bezier(.76,0,.24,1), visibility 0s;
}
.reveal-on [data-reveal="fade"].is-in { transition: opacity .45s cubic-bezier(.76,0,.24,1), visibility 0s; }
@media (max-width: 767px) { .reveal-on [data-reveal="focus"]:not(.is-in) { filter: blur(4px); } }
/* Images unveil upward from a slight zoom; divider lines draw left to right (Evan, 2026-10-01). */
.reveal-on [data-reveal="unveil"] { opacity: 1; visibility: visible; transform: scale(1.06); clip-path: inset(100% 0 0 0); }
.reveal-on [data-reveal="unveil"].is-in { transform: none; clip-path: inset(0);
  transition: clip-path .9s cubic-bezier(.76,0,.24,1), transform 1.2s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--reveal-i, 0) * 60ms); }
.reveal-on [data-reveal="line"] { opacity: 1; visibility: visible; transform: scaleX(0); transform-origin: 0 50%; }
.reveal-on [data-reveal="line"].is-in { transform: scaleX(1); transition: transform .9s cubic-bezier(.76,0,.24,1); transition-delay: calc(var(--reveal-i, 0) * 60ms); }
/* Count-up stats stay visible and count in place (js/reveal.js); fixed-width digits so the line does not jitter. */
.reveal-on [data-reveal="count"] { opacity: 1; visibility: visible; transform: none; font-variant-numeric: tabular-nums; }
/* Work cards: the screenshot drifts up a touch on hover. */
.reveal-on a:hover > img[data-reveal="unveil"].is-in { transform: translateY(-6px); transition: transform .5s cubic-bezier(.22,1,.36,1); }

/* Universal Apple depth, near invisible (Evan, 2026-09-30). Pure #000/#fff palette.
   Each rule pairs a white rim (only shows on black) with a black rim (only shows on white),
   so one rule works on both. Buttons are excluded: brand layer above tunes them.
   box-shadow / text-shadow / filter only, no transition or transform (scroll reveal owns those). */
body { text-shadow: 0 0 1px color-mix(in srgb, currentColor 10%, transparent), 0 1px 1px rgb(0 0 0 / .04); }
section, .bg-accent-1, .footer-bottom {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), inset 0 28px 36px -28px rgb(255 255 255 / .03),
              inset 0 -1px 0 rgb(0 0 0 / .04), inset 0 -28px 36px -28px rgb(0 0 0 / .03);
}
.header-position-absolute-wrapper { box-shadow: inset 0 -1px 0 rgb(255 255 255 / .05), 0 8px 20px -14px rgb(0 0 0 / .10); }
input, textarea, select { box-shadow: inset 0 1px 2px rgb(0 0 0 / .05), inset 0 -1px 0 rgb(255 255 255 / .05); }
section img, .bg-accent-1 img { filter: drop-shadow(0 2px 4px rgb(0 0 0 / .06)) drop-shadow(0 0 6px rgb(255 255 255 / .03)); }

/* Nav: transparent bar over a progressive blur (hugeinc.com structure: the blur is its own fixed layer
   under the header; js/nav-theme.js adds .nav-blur-on and the .nav-blur div). Off until then, so the solid
   bar stays as fallback.
   Light enough that what passes underneath stays recognizable (Evan, 2026-09-30). Shown once scrolled:
   at the top it would only smear the hero's own black/white edge.
   The mask starts opaque at the top: in Chrome a layer masked out at the top edge lets the sharp
   page show through there, so content stayed crisp in the first ~20px (Evan's screenshot, 2026-09-30).
   Nav ink: everything in the header is white and the header blends with difference, so each pixel of text
   is the inverse of exactly what is under it (Evan: "change when it is exactly under", smooth fade).
   This only works because the blur is a separate layer: anything inside the fixed header is isolated from the page. */
.nav-blur-on .header-position-absolute-wrapper { background: transparent; box-shadow: none; mix-blend-mode: difference; }
.nav-blur-on .header-position-absolute-wrapper:has(.w--open) { mix-blend-mode: normal; }
.nav-blur-on .header-wrapper { background: transparent; }
.nav-blur-on .header-position-absolute-wrapper :is(.header-logo-link, .header-nav-link) { color: #fff !important; }
.nav-blur-on .header-position-absolute-wrapper .btn-primary.white { background-color: #fff; border-color: #fff; color: #000; box-shadow: none; }
.nav-blur-on .header-position-absolute-wrapper .btn-primary.white:not(.hv-roll):hover { color: #fff; } /* text follows the rising black fill; without this it stayed black on black */
.nav-blur-on .header-position-absolute-wrapper .hamburger-menu-bar { background-color: #fff; }
.nav-blur-on .header-position-absolute-wrapper:has(.w--open) :is(.header-logo-link, .header-nav-link) { color: #000 !important; }
.nav-blur-on .header-position-absolute-wrapper:has(.w--open) .hamburger-menu-bar { background-color: #000; }
/* Perf (2026-10-02, 6f measured the scroll into the footer): ONE blur layer instead of three stacked ones, and only
   as tall as the part that was ever visible (the old masks cleared by 50% of 15em). Strongest at the top, fading out. */
.nav-blur { position: fixed; top: 0; left: 0; right: 0; height: 7.5em; z-index: 999; pointer-events: none; opacity: 0; transition: opacity .3s;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  mask: linear-gradient(#000 0%, #000 40%, #0000 100%); -webkit-mask: linear-gradient(#000 0%, #000 40%, #0000 100%); }
.nav-scrolled .nav-blur { opacity: 1; }

/* Slim nav like hugeinc.com (Evan, 2026-09-30): 70px bar, no divider line */
.header-content-wrapper { padding-top: 0; padding-bottom: 0; min-height: 70px; border-bottom: 0; }
.header-nav-link { font-size: 18px; } /* was 16px; Evan asked for slightly larger, 2026-09-30 */
.header-position-absolute-wrapper .btn-primary { padding: 12px 20px; }
@media (max-width: 767px) { .header-content-wrapper { min-height: 60px; } }

/* Buttons: videinfra.com pill and circle shapes, sized up larger and fatter (Evan, 2026-09-30):
   one 50px pill (30px side padding, fully round), 44px arrow circles, 120px feature circle.
   Mona Sans only, our colors and words. */
.btn-primary, .btn-primary.small, .btn-primary.large, .btn-secondary, .btn-secondary.small, .btn-primary-2,
.header-position-absolute-wrapper .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap;
  height: 50px; min-height: 50px; padding: 0 30px; border-radius: 60px;
  font-family: Mona Sans, sans-serif; font-size: 17px; line-height: 1;
}
.w-button .line-square-icon { font-size: 16px; line-height: 1; }

/* Circles (videinfra.com pattern, Evan 2026-09-30). 44px, matches the 50px pills.
   1. Home "What we do": each service pill gets an attached arrow circle.
   2. Google Ads "How we work": "Step 0N" labels become numbered circles (real sequence).
   5. .mb-circle.mb-circle--up: back-to-top circle for the footer. */
:root { --mb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* Hover for every button (videinfra.com pattern, Evan 2026-09-30): a fill rises from the bottom.
   The fill is the button's own background (a solid gradient sized 0% -> 100% tall, anchored bottom), not a
   ::before layer: Chrome sometimes skipped the first transition on a never-painted, fully clipped ::before,
   so the first hover snapped straight to the end color (Evan saw it twice). A real background always has a
   start state, clips to the pill for free, and works on <input> submit buttons too.
   .35s on a custom curve cubic-bezier(.5,0,.15,1) (Evan: faster, not linear): eases in so the rise is
   visible from the first frame, then a long soft landing. Text/outline flip around the fill's midpoint (~.13s). On hover a single 2px outline (offset -2px, over
   the 1px border) draws the stroke: no resizing, and no seam like a border + inset ring had. Text color flips as the fill passes the label's middle. No scale.
   --btn-bg = rest fill, --btn-fill = rising fill, --btn-ink = hover text, --btn-line = hover border/ring. */
.w-button:is(.btn-primary, .btn-secondary, .btn-primary-2):not(.hv-roll, .hv-pass), .btn-circle-secondary {
  --btn-ease: cubic-bezier(.5,0,.15,1);
  background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  outline: 2px solid transparent; outline-offset: -2px;
  transition: background-size .35s var(--btn-ease), color .16s ease .06s, border-color .16s ease .06s,
    outline-color .16s ease .06s, transform .13s cubic-bezier(.23,1,.32,1);
}
.w-button:is(.btn-primary, .btn-secondary, .btn-primary-2):not(.hv-roll, .hv-pass):hover, .btn-circle-secondary.btn-circle-secondary:hover {
  background-color: var(--btn-bg); background-size: 100% 100%; color: var(--btn-ink); border-color: var(--btn-line);
  outline-color: var(--btn-line); transform: none;
}
.btn-primary, .btn-primary-2 { --btn-bg: #000; --btn-fill: #fff; --btn-ink: #000; --btn-line: #000; }
.btn-primary.white { --btn-bg: #fff; --btn-fill: #000; --btn-ink: #fff; --btn-line: #fff; }
.btn-secondary { --btn-bg: transparent; --btn-fill: #000; --btn-ink: #fff; --btn-line: #000; }
.btn-secondary.white { --btn-bg: transparent; --btn-fill: #fff; --btn-ink: #000; --btn-line: #fff; }

/* Button hovers B and D (picked in the button hover lab, screenshot ~/Desktop/meridian-ads-reviews/button-hover-lab-A-to-E.png, Evan 2026-09-30). js/buttons.js adds the classes and markup.
   B .hv-roll (primary actions): the label rolls up and an identical copy rolls in from below; the pill holds still.
   D .hv-pass ("See ..." links): the arrow slides out right and a fresh one slides in from the left; 2px outline.
   Same .35s custom curve as the rise so the three read as one family. */
.btn-primary, .btn-primary-2 { --btn-text: #fff; }
.btn-primary.white { --btn-text: #000; }
.btn-secondary { --btn-text: #000; }
.btn-secondary.white { --btn-text: #fff; }
.w-button:is(.hv-roll, .hv-pass) { --btn-ease: cubic-bezier(.5,0,.15,1); outline: 2px solid transparent; outline-offset: -2px;
  transition: outline-color .16s ease, transform .13s cubic-bezier(.23,1,.32,1); }
.w-button:is(.hv-roll, .hv-pass):hover { background-color: var(--btn-bg); color: var(--btn-text); transform: none; }
.w-button.hv-pass:hover { outline-color: var(--btn-line); }
.hv-roll .roll { display: block; overflow: hidden; height: 1.2em; line-height: 1.2; }
.hv-roll .roll > span { display: block; transition: transform .35s var(--btn-ease); }
.hv-roll .roll > span::after { content: attr(data-t); content: attr(data-t) / ""; display: block; }
.hv-roll:hover .roll > span { transform: translateY(-50%); }
.hv-roll [class*="-icon"] { transition: transform .35s var(--btn-ease); }
.hv-roll:hover [class*="-icon"] { transform: translateX(3px); }
.hv-pass { gap: 8px; }
.hv-pass .txt { transition: transform .35s var(--btn-ease); }
.hv-pass:hover .txt { transform: translateX(-2px); }
.hv-pass .arw { position: relative; flex: none; width: 16px; height: 16px; overflow: hidden; }
.hv-pass .arw::before, .hv-pass .arw::after { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--mb-arrow) center / contain no-repeat; mask: var(--mb-arrow) center / contain no-repeat; transition: transform .35s var(--btn-ease); }
.hv-pass .arw::after { transform: translateX(-120%); }
.hv-pass:hover .arw::before { transform: translateX(120%); }
.hv-pass:hover .arw::after { transform: translateX(0); }
/* Home services pills: the arrow already lives in the attached circle, so D plays there. */

/* Free visibility check, pushed site wide (Evan, 2026-10-01). Markup by main-pane, prefill by js/visibility.js.
   1. Nav: a system outline button (btn-secondary white small) next to Book a call. Between 992 and 1139px the
      four links plus both pills do not fit, so only Book a call stays; the check is still in the hero, band and nudge.
   3. .vc-teaser: black band with two fields that open seo.html#check prefilled. Inputs reuse the contact form's
      .input.white.w-input. 4. .vc-nudge: one line above every contact form. */

.vc-teaser { background: #000; color: #fff; padding: 120px 0; }
.vc-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: end; }
.vc-teaser-kicker { font-size: 16px; color: #bdbdbd; margin: 0 0 16px; }
.vc-teaser h2 { color: #fff; margin: 0 0 20px; }
.vc-teaser-lead { color: #d9d9d9; margin: 0; max-width: 460px; }
.vc-teaser-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.vc-teaser-form label { color: #fff; font-size: 16px; font-weight: 500; display: block; }
.vc-teaser-form .w-input { margin: 8px 0 0; }
.vc-teaser-form .w-input::placeholder { color: #7a7a7a; opacity: 1; } /* white placeholders read as answers already typed in */
.vc-teaser-form .w-button { grid-column: 1 / -1; width: 100%; }
.vc-teaser-note { grid-column: 1 / -1; color: #bdbdbd; font-size: 15px; margin: 0; }
@media (max-width: 767px) {
  .vc-teaser { padding: 80px 0; }
  .vc-teaser-grid, .vc-teaser-form { grid-template-columns: 1fr; }
}

.header-nav-link, .header-logo-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1139px) { .header-right-side a.btn-secondary { display: none; } }
/* Nav free check (Evan, 2026-10-01). Targeted as the nav's only outline button, never by href (the checker moved
   from seo.html#check to check.html and the old href selector silently dropped all of this). A size smaller than Book a call, centred in the gap between the links and
   Book a call, with a down arrow (it scrolls down to the checker) that drops through on hover. */
@media (min-width: 992px) {
  .header-right-side, .header-right-side .hidden-on-tablet { flex: 1 1 auto; }
  .header-right-side .hidden-on-tablet { justify-content: flex-end; } /* Book a call hugs the right even when the free check is hidden (992 to 1139px) */
  .header-right-side .hidden-on-tablet > a.btn-secondary { margin: 0 auto; position: relative; left: -10px; } /* the links block ends 20px past the last link */
}
.header-position-absolute-wrapper a.btn-secondary { height: 40px; min-height: 40px; padding: 0 20px; font-size: 15px; }
.hv-pass.hv-down .arw::before { transform: rotate(90deg); }
.hv-pass.hv-down .arw::after { transform: rotate(90deg) translateX(-120%); }
.hv-pass.hv-down:hover .arw::before { transform: rotate(90deg) translateX(120%); }
.hv-pass.hv-down:hover .arw::after { transform: rotate(90deg) translateX(0); }
/* Nav free check hover = "curtain" (picked in the nav check hover lab, screenshot ~/Desktop/meridian-ads-reviews/nav-free-check-hover-lab-1-to-5.png, Evan 2026-10-01): a fill drops from the top,
   the way the button takes you, text flips as it passes, arrow keeps dropping through. Fill/ink come from the
   button's own vars, so the white nav pill and the dark phone-menu pill both work. */
.header-position-absolute-wrapper a.btn-secondary {
  background-image: linear-gradient(var(--btn-fill), var(--btn-fill)); background-repeat: no-repeat;
  background-position: 50% 0; background-size: 100% 0%;
  transition: background-size .35s cubic-bezier(.5,0,.15,1), color .16s ease .1s, outline-color .16s ease, transform .13s cubic-bezier(.23,1,.32,1);
}
.header-position-absolute-wrapper a.btn-secondary:hover { background-size: 100% 100%; color: var(--btn-ink); outline-color: transparent; }
/* Logo pushed left, Book a call pushed right to match (Evan, 2026-10-01): each sits 40px from its screen edge on wide screens instead of lining up with
   the content column; never moves right where it is already closer than 40px. Links and buttons stay put. */
@media (min-width: 992px) {
  .header-logo-link { position: relative; left: min(0px, calc(40px - max(24px, (100vw - 1316px) / 2 + 24px))); }
  /* Book a call mirrors it: same gap to the right edge. The right group widens by that amount (negative margin)
     so the free check pill re-centres between the links and Book a call. */
  .header-right-side { margin-right: min(0px, calc(40px - max(24px, (100vw - 1316px) / 2 + 24px))); }
}

/* Polish (Evan, 2026-10-01). 1. Page to page: a native cross-document fade (Chrome/Edge/Safari; others just
   navigate). 4. Form fields: the underline sweeps across on focus and the label lifts. 5. Nav links: an underline
   draws in on hover; the current page keeps it (aria-current set by js/nav-theme.js). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.5,0,.15,1); }

.cm-f input, .cm-f textarea, .vc-teaser-form .w-input {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0% 2px; transition: background-size .5s cubic-bezier(.22,1,.36,1);
}
.cm-f input:focus, .cm-f textarea:focus, .vc-teaser-form .w-input:focus { background-size: 100% 2px; outline: none; }
.cm-f > span { display: inline-block; transition: color .3s, transform .3s cubic-bezier(.22,1,.36,1); }
.cm-f:focus-within > span { transform: translateY(-3px); }

.header-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.5,0,.15,1); }
.header-nav-link:hover::after, .header-nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .reveal-on [data-reveal="unveil"], .reveal-on [data-reveal="line"] { transform: none; clip-path: none; }
}

/* Example badge (Evan picked B, 2026-10-01): one grey frosted glass pill (Evan: "a blur, sort of grayish") everywhere a mockup shows example data. */
.gx-ex, .gcall-fig figcaption, .sai figcaption, .seo-shot figcaption, .gex-rep-meta > span:last-child {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; box-sizing: border-box;
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(120, 120, 128, .16);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 0, 0, .08); /* grey frost: tint + top highlight */
  color: #1d1d1f; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.gx-ex::before, .gcall-fig figcaption::before, .sai figcaption::before, .seo-shot figcaption::before, .gex-rep-meta > span:last-child::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.8'/%3E%3Cpath d='M6 5.4v3M6 3.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.8'/%3E%3Cpath d='M6 5.4v3M6 3.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Glass material (Evan picked from the glass lab, 2026-10-02): one recipe for things that float over moving content.
   Used by the phone menu (below), the SEO phone action bar (seo.css) and the project window top bar (project-window.css). */
:root { --glass-bg: rgba(255, 255, 255, .58); --glass-blur: blur(20px) saturate(1.8); --glass-edge: 1px solid rgba(255, 255, 255, .6);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px rgba(0, 0, 0, .08); }
@media (max-width: 991px) {
  .header-nav-menu-wrapper[data-nav-menu-open] { background-color: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-top: 0; border-bottom: var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: 0 0 24px 24px; }
}

/* Big glass (Evan picked 1, 4, 5 from the glass lab, 2026-10-02). Dark glass cards over our own work:
   "Let's talk" over a tilted wall of site and app screenshots, the free check over the site's examples
   (both layers added by js/glass-backdrops.js), and the footer content over the MERIDIAN wordmark. */
:root { --glass-dark: rgba(255, 255, 255, .08); --glass-dark-blur: blur(28px) saturate(1.5);
  --glass-dark-edge: 1px solid rgba(255, 255, 255, .16); --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 40px 80px rgba(0, 0, 0, .45); }
.has-gb { position: relative; overflow: hidden; }
.has-gb > .w-container { position: relative; z-index: 2; }
#contact.has-gb .cm, section.seo-chk.has-gb .ck-main { border-radius: 36px; background: var(--glass-dark);
  border: var(--glass-dark-edge); box-shadow: var(--glass-dark-shadow); } /* no backdrop-filter: the blur comes from .gb-frost */
/* The pre-blurred copy of the backdrop, clipped to the card by js/glass-backdrops.js. A plain filter on a still layer
   is drawn once, then only moved, so scrolling stays smooth. */
.gb-frost { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #000; } /* opaque base: the backdrops are semi-transparent, so without it the sharp copy shows through */
.gb-frost > * { filter: blur(28px) saturate(1.5); will-change: transform; }
#contact.has-gb .cm { padding: 56px; }
section.seo-chk.has-gb .ck-main { padding: 48px !important; }
.gb-wall { position: absolute; inset: -20% -10%; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px;
  transform: rotate(-8deg); opacity: .75; pointer-events: none; }
.gb-wall img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: top; border-radius: 18px; }
.gb-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gb-collage img { position: absolute; display: block; border-radius: 20px; opacity: .9; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.gb-c1 { left: 4%; top: 8%; width: 22%; transform: rotate(-6deg); }
.gb-c2 { left: 62%; top: 4%; width: 34%; transform: rotate(5deg); }
.gb-c3 { left: 70%; top: 52%; width: 26%; transform: rotate(-4deg); }
.gb-c4 { left: -4%; top: 56%; width: 36%; transform: rotate(4deg); }
@media (max-width: 767px) {
  .gb-wall { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .gb-wall img { height: 180px; border-radius: 14px; }
  #contact.has-gb .cm { padding: 28px 20px; border-radius: 28px; }
  section.seo-chk.has-gb .ck-main { padding: 32px 18px !important; border-radius: 28px; }
  .gb-c1, .gb-c3 { width: 46%; } .gb-c2, .gb-c4 { width: 58%; }
}
/* Footer: the content sits on a dark glass panel whose bottom overlaps the top of the big wordmark, which blurs behind it.
   The panel is a ::before so the link positions (aligned to the wordmark's letters) do not move. Desktop only. */
@media (min-width: 768px) {
  footer.mf > .w-container:first-of-type { position: relative; z-index: 2; margin-bottom: -7vw; }
  footer.mf > .w-container:first-of-type::before { content: ""; display: block; width: auto; height: auto; grid-area: auto; position: absolute; inset: -36px -24px -12px; z-index: -1; /* display:block beats the Webflow clearfix */ border-radius: 32px;
    background: var(--glass-dark);
    border: var(--glass-dark-edge); box-shadow: var(--glass-dark-shadow); }
  /* The blur only while the footer is on screen (.is-shown from js/footer-curtain.js): pinned under the page, it would
     otherwise be recomputed on every scroll frame of every page. */
  footer.mf.is-shown > .w-container:first-of-type::before { -webkit-backdrop-filter: var(--glass-dark-blur); backdrop-filter: var(--glass-dark-blur); }
  footer.mf .mf-mark { position: relative; z-index: 1; }
}
/* "Let's talk" on its glass card: every word pure white (Evan 2026-10-02), with a soft shadow so it holds over the
   brighter screenshots; the field lines a little stronger so they still read. */
#contact.has-gb .cm-lede, #contact.has-gb .cm-f > span, #contact.has-gb .cm-status { color: #ffffff; }
#contact.has-gb .cm-f textarea::placeholder, #contact.has-gb .cm-f input::placeholder { color: #ffffff; opacity: 1; }
#contact.has-gb .cm-f input, #contact.has-gb .cm-f textarea { border-bottom-color: rgba(255, 255, 255, .6); }
#contact.has-gb .cm-intro { border-bottom-color: rgba(255, 255, 255, .4); }
#contact.has-gb .cm { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
/* Apps page wall: app screens are tall, so taller tiles show more of each screen. */
.gb-wall.is-apps { grid-template-columns: repeat(7, 1fr); }
.gb-wall.is-apps img { height: 420px; }
@media (max-width: 767px) { .gb-wall.is-apps { grid-template-columns: repeat(4, 1fr); } .gb-wall.is-apps img { height: 260px; } }
/* Mostly-white walls (Google Ads, SEO examples) are dimmed so the white text on the card keeps its contrast. */
.gb-wall.is-light { opacity: .5; }
/* Soft edges (Evan 2026-10-02): the wall and the collage fade into black at the section's top and bottom, so they
   melt into the black sections around them instead of being sliced off. Sits between the backdrop and the card. */
.has-gb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, #000 3%, rgba(0, 0, 0, .85) 10%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, 0) 32%,
    rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .4) 78%, rgba(0, 0, 0, .85) 90%, #000 97%, #000 100%); }

/* Button arrows: our own SVG arrows, drawn to the same size, weight and position as the template icon font they
   replace (brand-pane 2026-10-05; pixel-checked). The span keeps its private-use character for old markup; it is hidden. */
.line-square-icon, .line-rounded-icon { font-family: inherit !important; -webkit-text-fill-color: transparent; background-color: currentColor; width: .96em; height: 1em; vertical-align: -.15em; line-height: 1;
  -webkit-mask: var(--arw) center / 100% 100% no-repeat; mask: var(--arw) center / 100% 100% no-repeat; }
/* Empty spans (no arrow character inside) drew nothing with the old font; keep it that way. */
.line-square-icon:empty, .line-rounded-icon:empty { width: 0; background: none; }
.line-square-icon { --arw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 1000'%3E%3Cpath transform='translate(488 494) scale(1.05) translate(-488 -494)' stroke='%23000' stroke-width='20' stroke-linejoin='miter' d='M80 454H852V534H80ZM502 99L897 494 502 889 445 833 783 494 445 156Z'/%3E%3C/svg%3E"); }
.line-rounded-icon { --arw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 1000' fill='none' stroke='%23000' stroke-width='100' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(480 498) scale(1.05) translate(-480 -498)' d='M120 498H840M501 159 840 498 501 837'/%3E%3C/svg%3E"); }

/* Accessibility (brand-pane, 2026-10-05). Skip link: off screen until a keyboard user tabs to it, then a black pill top left. */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 12px 18px; border-radius: 30px; background: #000; color: #fff; font: 500 15px "Mona Sans", sans-serif; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

@media (max-width: 359px) { .gy-tabs { flex-wrap: wrap; } } /* reflow at 320px: the example-business tabs wrap instead of widening the page */