/* ==========================================================================
   ThunderBird Protection Group — base styles
   Shared tokens, reset, typography and the components used on every page
   (top navigation, CTA buttons, social pill, footer).
   Desktop frames are 1440px wide; mobile frames are 402px wide.
   ========================================================================== */

:root {
  --font-sans: "SF Pro", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --navy: #091d51;
  --navy-deep: #081538;
  --blue: #177beb;
  --ice: #d7dfe2;
  --steel: #839aa3;
  --white: #ffffff;
  --black: #000000;

  --desktop-w: 1440px;
  --mobile-w: 402px;

  /* Radial gradients exported from Figma, normalised to the element box */
  --btn-gradient: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(1 1 -0.0402 3.711 0 0)'><stop stop-color='rgb(7,20,33)' offset='0'/><stop stop-color='rgb(9,33,58)' offset='0.054549'/><stop stop-color='rgb(11,46,84)' offset='0.1091'/><stop stop-color='rgb(15,72,134)' offset='0.21819'/><stop stop-color='rgb(19,97,185)' offset='0.32729'/><stop stop-color='rgb(23,123,235)' offset='0.43639'/></radialGradient></defs></svg>");
  --icon-gradient: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(1 1 -0.7185 0.7185 0 0)'><stop stop-color='rgb(215,223,226)' offset='0'/><stop stop-color='rgb(167,198,228)' offset='0.1091'/><stop stop-color='rgb(119,173,231)' offset='0.21819'/><stop stop-color='rgb(71,148,233)' offset='0.32729'/><stop stop-color='rgb(47,136,234)' offset='0.38184'/><stop stop-color='rgb(23,123,235)' offset='0.43639'/></radialGradient></defs></svg>");
  --ghost-gradient: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(0 -1 0.345 0 0.5 1)'><stop stop-color='rgb(50,50,50)' offset='0.45'/><stop stop-color='rgb(75,75,75)' offset='0.51875'/><stop stop-color='rgb(101,101,101)' offset='0.5875'/><stop stop-color='rgb(127,127,127)' offset='0.65625'/><stop stop-color='rgb(152,152,152)' offset='0.725'/><stop stop-color='rgb(204,204,204)' offset='0.8625'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  --ghost-gradient-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(0 -1 0.345 0 0.5 1)'><stop stop-color='rgb(255,255,255)' offset='0.45'/><stop stop-color='rgb(195,200,215)' offset='0.5875'/><stop stop-color='rgb(135,146,175)' offset='0.725'/><stop stop-color='rgb(104,118,154)' offset='0.79375'/><stop stop-color='rgb(74,91,134)' offset='0.8625'/><stop stop-color='rgb(44,63,114)' offset='0.93125'/><stop stop-color='rgb(29,50,104)' offset='0.96562'/><stop stop-color='rgb(14,36,94)' offset='1'/></radialGradient></defs></svg>");
  --ghost-gradient-gray: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(0 -1 0.345 0 0.5 1)'><stop stop-color='rgb(255,255,255)' offset='0.45'/><stop stop-color='rgb(200,200,200)' offset='0.5875'/><stop stop-color='rgb(146,146,146)' offset='0.725'/><stop stop-color='rgb(118,118,118)' offset='0.79375'/><stop stop-color='rgb(90,90,90)' offset='0.8625'/><stop stop-color='rgb(62,62,62)' offset='0.93125'/><stop stop-color='rgb(48,48,48)' offset='0.96562'/><stop stop-color='rgb(34,34,34)' offset='1'/></radialGradient></defs></svg>");
}

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

html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   /* clips the same, but is not a scroll box, so position: sticky works (legal contents) */
}

p, h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }

a[href],
button:not(:disabled),
select:not(:disabled),
input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]):not(:disabled),
[role="button"]:not([aria-disabled="true"]) { cursor: pointer; }

.field__input,
.field__textarea,
.field__phone input { cursor: text; }

button:disabled,
input:disabled,
select:disabled,
textarea:disabled { cursor: not-allowed; }

/* Page canvas: the design is authored on a fixed 1440px (desktop) or 402px
   (mobile) canvas and scaled to the viewport width by js/scale.js, so it fills
   every screen at its original proportions. Without JS it stays centred at 1x. */
.page {
  position: relative;
  width: var(--desktop-w);
  margin: 0 auto;
  overflow: hidden;
  zoom: var(--page-zoom, 1);
}

.abs { position: absolute; }
.center-x { left: 50%; transform: translateX(-50%); }
.nowrap { white-space: nowrap; }

/* Breakpoint helpers */
.mobile-only { display: none !important; }

/* Film-grain overlays: Figma "noise" rectangles blended in multiply.
   The texture is a tiled feTurbulence SVG calibrated to the design's grain. */
.grain { position: absolute; background: url(../assets/svg/noise.svg) 0 0 / 512px 512px repeat; mix-blend-mode: multiply; pointer-events: none; }
.grain--fade { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); }

/* Text background: home-services-bg (image 129) washed in luminosity behind the copy, as on
   the About page design. Fills its (isolated) section, repeating the image down long pages
   with every other copy mirrored so the waves join, and fades into the page colour at the end. */
.text-wash { position: absolute; left: 0; top: 0; width: 100%; bottom: 0; z-index: -1; overflow: hidden; mix-blend-mode: luminosity; pointer-events: none; }
.text-wash img { display: block; width: 100%; height: auto; max-width: none; opacity: .32; }
.text-wash img:nth-child(even) { transform: scaleY(-1); }
.text-wash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 360px; background: linear-gradient(180deg, transparent, var(--text-wash-fade, #f5f5f5)); }

/* Page banners (About Us, How We Work, Careers, Privacy Policy, Terms of Use) carry the
   footer's artwork: anchored to the bottom so its notch and rounded top corners are cropped
   away. The banners' own diagonal lines and grain are hidden so the stripes do not double up.
   (.page > .banner outranks each page's own .banner background.) */
.page > .banner { background: var(--navy) url(../assets/img/footer-union.webp) center bottom / 1440px auto no-repeat; }
.page > .banner > .grain, .page > .banner > .banner__lines { visibility: hidden; }

/* --------------------------------------------------------------------------
   Top navigation (desktop)
   -------------------------------------------------------------------------- */
.nav { position: absolute; left: 0; top: 0; width: 100%; height: 120px; color: var(--white); z-index: 5; }
.nav__link {
  position: absolute; top: 54px;
  font-size: 16px; line-height: 24px; font-weight: 400;
  text-transform: capitalize; text-align: center; white-space: nowrap;
}
.nav__link--about { left: 76px; }
.nav__link--how { left: 318px; }
.nav__link--careers { left: 1075px; }
.nav__contact {
  position: absolute; top: 54px; right: 76px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 1px; border-bottom: 1px solid var(--white);
  font-size: 16px; line-height: 24px; text-transform: capitalize; white-space: nowrap;
}
.nav__contact img { width: 16px; height: 16px; }
.nav--dark { color: var(--black); }
.nav--dark .nav__contact { border-bottom-color: var(--black); }
.nav__logo { position: absolute; left: 619px; top: 52px; width: 203px; height: 28px; }
.nav__tagline { position: absolute; left: 644px; top: 88px; width: 154px; height: 16px; text-transform: capitalize; white-space: nowrap; }
.nav__tagline-text { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 16px; }
.nav__tagline-tm { position: absolute; left: 141px; top: 0; font-size: 8px; line-height: 12px; }

/* Top navigation (mobile) */
.nav-m { position: absolute; left: 0; top: 0; width: 100%; height: 104px; color: var(--white); z-index: 5; }
.nav-m__btn {
  position: absolute; top: 28px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.36);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
}
.nav-m__btn--menu { left: 24px; }
.nav-m__btn--user { right: 24px; }
.nav-m__btn img { width: 24px; height: 24px; }
.nav-m--dark { color: var(--black); }
.nav-m--dark .nav-m__btn { background: rgba(255,255,255,.02); border-color: rgba(0,0,0,.08); }
.nav-m__logo { position: absolute; left: 114px; top: 40px; width: 174px; height: 24px; }
.nav-m__tagline { position: absolute; left: 124px; top: 80px; width: 154px; height: 16px; text-transform: capitalize; white-space: nowrap; }

/* Sticky navigation. With the script running (html.nav-fixed, set by motion.js) the bar is
   pinned to the top of the screen; at the top of the page it looks exactly as designed, and
   once the page scrolls (.is-scrolled) it tightens into a compact bar on a translucent navy
   panel shaped like the footer: inset 12px from each side (8px on phones) with the footer's
   corner radius along the bottom. The panel is a ::before layer so the links keep their
   positions. The bar moves with top/height rather than translate, which the page-load
   animation already uses. */
.nav-fixed { scroll-padding-top: calc(72px * var(--page-zoom, 1)); }   /* in-page links land below the bar */
.nav-fixed .nav, .nav-fixed .nav-m {
  position: fixed; z-index: 50;
  transition: top .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1);
}
.nav-fixed .nav { width: var(--desktop-w); }
.nav-fixed .nav-m { width: var(--mobile-w); }
.nav-fixed .nav::before, .nav-fixed .nav-m::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 12px; right: 12px; z-index: -1; pointer-events: none;
  border-radius: 0 0 32px 32px;   /* the footer panel's corners (footer-union artwork) */
  background: rgb(7 16 44 / 47%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(8,21,56,.18);
  opacity: 0; transition: opacity .3s ease;
}
.nav-fixed .nav-m::before { left: 8px; right: 8px; border-radius: 0 0 17px 17px; }   /* the mobile footer's inset and corners */
.nav.is-scrolled::before, .nav-m.is-scrolled::before { opacity: 1; }
.nav.is-scrolled, .nav-m.is-scrolled { color: var(--white); }
.nav.is-scrolled { top: -30px; height: 102px; }      /* a 72px bar: links and logo centred, tagline put away */
.nav-m.is-scrolled { top: -16px; height: 88px; }     /* a 72px bar around the buttons and logo */
/* The page variants offset links by a few pixels; in the compact bar they all line up */
.nav.is-scrolled .nav__link, .nav.is-scrolled .nav__contact { top: 54px; line-height: 24px; }
.nav.is-scrolled .nav__contact { padding: 0 1px; }
.nav.is-scrolled .nav__logo { top: 52px; }
.nav__tagline, .nav-m__tagline { transition: opacity .25s ease; }
.nav.is-scrolled .nav__tagline, .nav-m.is-scrolled .nav-m__tagline { opacity: 0; pointer-events: none; }
/* Dark and grey variants (Contact, Services) turn white on the navy bar */
.nav--dark.is-scrolled .nav__contact, .nav--grey.is-scrolled .nav__contact { border-bottom-color: var(--white); }
.nav--dark.is-scrolled img, .nav--grey.is-scrolled img, .nav-m--dark.is-scrolled img { filter: brightness(0) invert(1); }
.nav-m--dark.is-scrolled .nav-m__btn { border-color: rgba(255,255,255,.36); }

/* --------------------------------------------------------------------------
   Primary CTA pill
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 32px; border-radius: 100px;
  background: var(--btn-gradient), var(--blue);
  color: var(--white); font-size: 18px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.btn img { width: 20px; height: 20px; }
.btn--sm { padding: 14px 32px; font-size: 14px; }
.btn--sm img { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Form controls (contact form)
   -------------------------------------------------------------------------- */
.field { position: absolute; display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; line-height: 16px; color: var(--black); }
.field__input {
  display: flex; align-items: center; width: 100%; height: 56px; padding: 0 22.5px;
  border: 1.5px solid rgba(0,0,0,.08); border-radius: 56px; background: none;
  font-size: 16px; line-height: 20px; color: var(--black); white-space: nowrap;
}
.field__input::placeholder { color: rgba(0,0,0,.44); opacity: 1; }
.field__textarea {
  display: block; width: 100%; padding: 22.5px; border: 1.5px solid rgba(0,0,0,.08); border-radius: 28px;
  background: none; resize: none; font-size: 16px; line-height: 20px; color: var(--black); font-family: inherit;
}
.field__textarea::placeholder { color: rgba(0,0,0,.44); opacity: 1; }
.field__phone { display: flex; align-items: center; gap: 16px; width: 100%; height: 56px; padding: 6.5px 22.5px 6.5px 6.5px; border: 1.5px solid rgba(0,0,0,.08); border-radius: 56px; }
.field__flag { position: relative; width: 40px; height: 40px; border-radius: 43px; overflow: hidden; flex: none; }
.field__flag img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }   /* centre-crops any flag, whatever its ratio */
.field__sep { width: 4px; font-size: 24px; line-height: 1; font-weight: 300; text-align: center; text-transform: capitalize; color: #d9d9d9; }
/* Country picker: a real <select> laid invisibly over the flag, dial code and caret. */
.field__country { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.field__flag-code { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #f0f1f4; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .02em; color: rgba(0,0,0,.62); }
.field__dial { font-size: 16px; line-height: 20px; color: var(--black); white-space: nowrap; }
.field__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0,0,0,.44); }
.field__country-trigger { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: var(--black); cursor: pointer; border-radius: 43px; }
.field__country-trigger:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Searchable country list */
.country-menu { position: absolute; left: -6px; top: calc(100% + 12px); z-index: 30; width: 336px; max-width: calc(100vw - 48px); border-radius: 20px; border: 1px solid rgba(0,0,0,.06); background: var(--white); box-shadow: 0 18px 44px rgba(9,29,81,.16); overflow: hidden; }
.country-menu--up { top: auto; bottom: calc(100% + 12px); }   /* opened upwards when there is no room below */
.country-menu__search { padding: 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.country-menu__search input { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid rgba(0,0,0,.1); border-radius: 40px; background: none; font: inherit; font-size: 15px; color: var(--black); outline: none; -webkit-appearance: none; appearance: none; }
.country-menu__search input:focus { border-color: var(--navy); }
.country-menu__search input::placeholder { color: rgba(0,0,0,.44); }
.country-menu__list { max-height: 268px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.country-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 15px; line-height: 20px; color: var(--black); cursor: pointer; }
.country-option[hidden] { display: none; }
.country-option.is-active { background: rgba(9,29,81,.06); }
.country-option[aria-selected="true"] { background: rgba(9,29,81,.1); font-weight: 500; }
.country-option__flag { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; background: #f0f1f4; }
.country-option__flag img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.country-option__code { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 9px; font-weight: 600; color: rgba(0,0,0,.6); }
.country-option__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-option__dial { color: rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.country-menu__empty { margin: 0; padding: 18px; text-align: center; font-size: 14px; color: rgba(0,0,0,.5); }
[x-cloak] { display: none !important; }
.field__phone input { border: 0; background: none; padding: 0; font-size: 16px; line-height: 20px; color: var(--black); font-family: inherit; }
.field__phone input::placeholder { color: rgba(0,0,0,.44); opacity: 1; }
.consent { position: absolute; display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 20px; color: var(--black); white-space: nowrap; }
.consent img { width: 20px; height: 20px; flex: none; }
.consent a { font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-position: from-font; }

/* --------------------------------------------------------------------------
   Social media pill
   -------------------------------------------------------------------------- */
.social {
  display: flex; align-items: center; gap: 8px;
  height: 60px; padding: 8px 8px 8px 24px; border-radius: 80px;
  background: var(--white); box-shadow: 0 8px 14px rgba(0,0,0,.12);
}
.social__label { width: 64px; font-size: 14px; line-height: 1; font-weight: 500; text-transform: capitalize; color: var(--black); }
.social img { width: 44px; height: 44px; }

/* --------------------------------------------------------------------------
   Footer (desktop) — 1416 x 674 group anchored to the bottom of each page
   -------------------------------------------------------------------------- */
.footer { position: absolute; left: 0; bottom: -16px; width: 1440px; height: 674px; color: var(--white); z-index: 2; }
.page--home .footer { position: relative; bottom: auto; height: 658px; }
.footer__ring {
  position: absolute; left: 536px; top: 0; width: 368px; height: 368px; border-radius: 50%;
  background: rgba(8,21,56,.02); box-shadow: 0 0 0 16px rgba(8,21,56,.08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.footer__bg { position: absolute; left: 12px; top: 98px; width: 1416px; height: 560px; }
.footer__heading { position: absolute; top: 218px; font-size: 24px; line-height: 1; font-weight: 500; text-transform: capitalize; white-space: nowrap; }
.footer__col { position: absolute; font-size: 14px; line-height: 20px; letter-spacing: 1.12px; white-space: nowrap; }
.footer__col--company { left: 52px; }
.footer__col--contact { left: 607px; }
.footer__col--legal { left: 1098px; }
.footer__link { position: absolute; left: 0; font-weight: 300; }
.footer__text { position: absolute; left: 0; font-weight: 400; }
.footer__divider { position: absolute; top: 218px; width: 1px; height: 176px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); }
.footer__divider--1 { left: 426px; }
.footer__divider--2 { left: 1001px; }
.footer__rule { position: absolute; left: 44px; top: 442px; width: 1352px; height: 1px; }
.footer__legal { position: absolute; top: 454px; font-size: 16px; line-height: 16px; letter-spacing: 1.28px; opacity: .66; white-space: nowrap; }
.footer__legal--left { left: 52px; }
.footer__legal--right { right: 38px; text-align: right; }
.footer__wordmark { position: absolute; left: 32px; top: 486px; width: 1376px; height: 188px; }
.footer__social { position: absolute; left: 1060px; top: 56px; }

/* Footer (mobile) — 386 x 680 */
.footer-m { position: absolute; left: 50%; bottom: 0; width: 386px; height: 680px; margin-left: -193px; color: var(--white); z-index: 2; }
.page--home .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
.footer-m__ring {
  position: absolute; left: 97px; top: -64px; width: 192px; height: 192px; border-radius: 50%;
  background: rgba(8,21,56,.02); box-shadow: 0 0 0 16px rgba(8,21,56,.08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.footer-m__bg { position: absolute; left: 0; top: 0; width: 386px; height: 680px; }
.footer-m__heading { position: absolute; left: 20px; font-size: 16px; line-height: 1; font-weight: 500; text-transform: capitalize; white-space: nowrap; }
.footer-m__item { position: absolute; left: 20px; font-size: 12px; line-height: 16px; font-weight: 300; letter-spacing: .96px; white-space: nowrap; }
.footer-m__rule { position: absolute; left: 8px; top: 532px; width: 370px; height: 1px; }
.footer-m__legal { position: absolute; left: 0; width: 100%; text-align: center; font-size: 10px; line-height: 16px; letter-spacing: .8px; opacity: .56; white-space: nowrap; }
.footer-m__wordmark { position: absolute; left: 8px; top: 628px; width: 370px; height: 52px; }

/* --------------------------------------------------------------------------
   Mobile breakpoint — 402px design canvas
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .page { width: var(--mobile-w); }
  .page > .banner { background-image: url(../assets/img/footer-union-mobile.webp); background-size: 402px auto; }
  .text-wash img { width: 200%; margin-left: -50%; }   /* the waves at the size of the desktop design */
  .text-wash::after { height: 200px; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-only.btn { display: inline-flex !important; }
  .mobile-only.services__pager, .mobile-only.deck-pager { display: flex !important; }
  .mobile-only.svc-row { display: block !important; }
}