/*
 * Exact Beyond Agency structure/content × the cloned TidalWave visual system.
 * Beyond remains the only source for pages, copy, imagery, cards and layout.
 * TidalWave supplies the real Fellix files, logo assets, colours and motion.
 */

@font-face {
  font-family: 'Fellix';
  src: url('/tidalwave-assets/Fellix-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Fellix';
  src: url('/tidalwave-assets/Fellix-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Fellix';
  src: url('/tidalwave-assets/Fellix-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Fellix';
  src: url('/tidalwave-assets/Fellix-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html[data-tidal-variant] {
  --tw-page: #ffffff;
  --tw-surface: #f5f5f7;
  --tw-surface-strong: #ebebef;
  --tw-ink: #00002c;
  --tw-copy: #3e3e4a;
  --tw-muted: #70707b;
  --tw-primary: #009cde;
  --tw-primary-hover: #007fb6;
  --tw-accent: #009cde;
  --tw-accent-bright: #00b4ff;
  --tw-line: rgba(0, 0, 44, 0.16);
  --tw-soft-line: rgba(0, 0, 44, 0.08);
  --tw-header: rgba(255, 255, 255, 0.94);
  --tw-hero-shade: rgba(255, 255, 255, 0.82);
  --tw-footer: #009cde;
  --tw-footer-ink: #00002c;
  --tw-inverse: #ffffff;
  --tw-radius: 6px;

  /* Re-map the exported Beyond tokens without touching its DOM or content. */
  --black: var(--tw-page);
  --white: var(--tw-ink);
  --purple-1: var(--tw-primary);
  --purple-2: var(--tw-accent);
  --eggplant: var(--tw-accent);
  --peach: var(--tw-ink);
  --slate-grey: var(--tw-muted);
  --lavender: var(--tw-surface);
  --grey-middle: var(--tw-line);
  --transparent: transparent;
  --white-0-1: var(--tw-soft-line);
}

html[data-tidal-variant],
html[data-tidal-variant] body,
html[data-tidal-variant] .page-wrapper,
html[data-tidal-variant] .main-wrapper {
  background: var(--tw-page) !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] body,
html[data-tidal-variant] button,
html[data-tidal-variant] input,
html[data-tidal-variant] select,
html[data-tidal-variant] textarea {
  font-family: 'Fellix', Arial, sans-serif !important;
}

html[data-tidal-variant] h1,
html[data-tidal-variant] h2,
html[data-tidal-variant] h3,
html[data-tidal-variant] h4,
html[data-tidal-variant] h5,
html[data-tidal-variant] h6,
html[data-tidal-variant] [class*='heading-style-'] {
  color: var(--tw-ink);
  font-family: 'Fellix', Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
}

html[data-tidal-variant] p,
html[data-tidal-variant] li,
html[data-tidal-variant] label,
html[data-tidal-variant] .text-size-small,
html[data-tidal-variant] .text-size-medium,
html[data-tidal-variant] .text-size-large {
  font-family: 'Fellix', Arial, sans-serif;
}

html[data-tidal-variant] ::selection {
  background: var(--tw-primary);
  color: #ffffff;
}

html[data-tidal-variant] :focus-visible {
  outline: 2px solid var(--tw-accent-bright) !important;
  outline-offset: 3px;
}

/* TidalWave navigation: flat, quiet and hidden on downward scroll. */
html[data-tidal-variant] .navbar-component {
  background: var(--tw-header) !important;
  border-bottom: 1px solid var(--tw-soft-line) !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  left: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  will-change: transform;
  z-index: 9999 !important;
}

html[data-tidal-variant] .navbar-component.tw-header-hidden {
  transform: translate3d(0, -110%, 0) !important;
}

html[data-tidal-variant] .nav_container {
  border-color: var(--tw-soft-line) !important;
}

html[data-tidal-variant] .nav_menu,
html[data-tidal-variant] .nav_dropdown-agency-menu,
html[data-tidal-variant] .nav_dropdown-solutions-menu,
html[data-tidal-variant] .nav_dropdown-tools-menu,
html[data-tidal-variant] .nav_dropdown-pricing-menu,
html[data-tidal-variant] .w-nav-overlay {
  background: var(--tw-page) !important;
  border-color: var(--tw-line) !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .nav_link,
html[data-tidal-variant] .nav_dropdown-link,
html[data-tidal-variant] .nav_dropdown-link .text-color-white,
html[data-tidal-variant] .nav_feed-link {
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .nav-sub-text,
html[data-tidal-variant] .nav_dropdown-label,
html[data-tidal-variant] .nav_feed-link .text-size-small {
  color: var(--tw-muted) !important;
}

html[data-tidal-variant] .nav_link::after,
html[data-tidal-variant] .footer_link::after {
  background: var(--tw-primary) !important;
}

html[data-tidal-variant] .nav_dropdown-link:hover,
html[data-tidal-variant] .nav_link:hover,
html[data-tidal-variant] .nav_feed-link:hover {
  color: var(--tw-primary) !important;
}

html[data-tidal-variant] .nav_highlight,
html[data-tidal-variant] .nav_background {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-tidal-variant] .nav_feed-image-wrapper {
  border-radius: var(--tw-radius) !important;
  overflow: hidden;
}

html[data-tidal-variant] .nav_logo-image,
html[data-tidal-variant] .footer_logo-image {
  align-items: center;
  display: flex;
}

html[data-tidal-variant] .tw-brand-logo {
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
}

html[data-tidal-variant] .tw-brand-logo--nav {
  width: clamp(8.75rem, 12vw, 10.5rem);
}

html[data-tidal-variant] .tw-brand-logo--footer {
  width: clamp(10rem, 16vw, 13.5rem);
}

/* Buttons and fields use TidalWave's flat product language. */
html[data-tidal-variant] .nav_button,
html[data-tidal-variant] .button,
html[data-tidal-variant] .w-button,
html[data-tidal-variant] .button-slide,
html[data-tidal-variant] .cr-button-2,
html[data-tidal-variant] input[type='submit'] {
  background-color: var(--tw-primary) !important;
  background-image: none !important;
  border: 1px solid var(--tw-primary) !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Fellix', Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

html[data-tidal-variant] .nav_button:hover,
html[data-tidal-variant] .button:hover,
html[data-tidal-variant] .w-button:hover,
html[data-tidal-variant] .button-slide:hover,
html[data-tidal-variant] input[type='submit']:hover {
  background-color: var(--tw-primary-hover) !important;
  border-color: var(--tw-primary-hover) !important;
  transform: translateY(-1px);
}

html[data-tidal-variant] input:not([type='submit']),
html[data-tidal-variant] textarea,
html[data-tidal-variant] select,
html[data-tidal-variant] .w-input,
html[data-tidal-variant] .w-select {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
}

/* Hero treatment keeps every Beyond asset and composition. */
html[data-tidal-variant] .section_sub-header,
html[data-tidal-variant] .section_ad-header,
html[data-tidal-variant] [class*='section_header'],
html[data-tidal-variant] [class*='section_hero'] {
  background: var(--tw-page) !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .sub-header_background-video-shade {
  background: var(--tw-hero-shade) !important;
}

html[data-tidal-variant] .sub-header_background-video-fade,
html[data-tidal-variant] .sub-cta_background-video-fade {
  background: linear-gradient(180deg, transparent 45%, var(--tw-page) 100%) !important;
}

html[data-tidal-variant] .sub-header_background-glow,
html[data-tidal-variant] .sub-cta_background-glow,
html[data-tidal-variant] .header_glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--tw-accent) 32%, transparent), transparent 70%) !important;
  filter: none !important;
  opacity: .72 !important;
}

html[data-tidal-variant] .sub-header_heading,
html[data-tidal-variant] .sub-header_review-heading,
html[data-tidal-variant] .sub-cta_heading {
  color: var(--tw-ink) !important;
  text-shadow: none !important;
}

html[data-tidal-variant] .text-gradient-peach,
html[data-tidal-variant] .text-gradient-purple,
html[data-tidal-variant] [class*='text-gradient'] {
  -webkit-text-fill-color: var(--tw-ink) !important;
  background: none !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .sub-header_review-description,
html[data-tidal-variant] .unli-expertise_item-text,
html[data-tidal-variant] .unli-expertise_cta-text,
html[data-tidal-variant] .sub-cta_review-description {
  color: var(--tw-copy) !important;
}

html[data-tidal-variant] .sub-header_features-wrapper,
html[data-tidal-variant] .sub-header_features_item {
  background: color-mix(in srgb, var(--tw-surface) 94%, transparent) !important;
  border-color: var(--tw-line) !important;
  box-shadow: none !important;
}

html[data-tidal-variant] .sub-header_features_item {
  border-radius: var(--tw-radius) !important;
}

html[data-tidal-variant] .sub-header_features_list-icon,
html[data-tidal-variant] .unli-expertise_item-check,
html[data-tidal-variant] .calcs_arrow,
html[data-tidal-variant] .nav_dropdown-service-icon {
  color: var(--tw-primary) !important;
}

html[data-tidal-variant] .sub-header_features_border,
html[data-tidal-variant] .sub-header_features_border-2,
html[data-tidal-variant] .footer_divider,
html[data-tidal-variant] .is-line {
  background: var(--tw-line) !important;
  border-color: var(--tw-line) !important;
}

/* Global section rhythm applies the three systems to every proxied route. */
html[data-tidal-variant] main > section,
html[data-tidal-variant] .main-wrapper > section,
html[data-tidal-variant] section[class^='section_'] {
  color: var(--tw-ink);
}

html[data-tidal-variant='editorial'] main > section:nth-of-type(even),
html[data-tidal-variant='editorial'] .main-wrapper > section:nth-of-type(even),
html[data-tidal-variant='editorial'] .section_about-solutions,
html[data-tidal-variant='editorial'] .section_expert-partners {
  background-color: var(--tw-surface) !important;
}

/* Service, calculator, process and supporting cards stay in Beyond's grids. */
html[data-tidal-variant] .about-solutions_card,
html[data-tidal-variant] .expertise-cell,
html[data-tidal-variant] [class*='pricing_card'],
html[data-tidal-variant] [class*='service_card'],
html[data-tidal-variant] [class*='process_card'],
html[data-tidal-variant] [class*='benefit_card'],
html[data-tidal-variant] [class*='testimonial_card'] {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .about-solutions_card:hover {
  border-color: var(--tw-primary) !important;
  transform: translateY(-2px);
}

html[data-tidal-variant] .about-solutions_card {
  transition: border-color 180ms ease, transform 180ms ease !important;
}

/* Beyond uses this anchor as a transparent click target over service cards. */
html[data-tidal-variant] .about-solutions_card > .calcs-feed_link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-tidal-variant] .about-solutions_card .calcs-feed_content-layout,
html[data-tidal-variant] .about-solutions_card .heading-style-h3,
html[data-tidal-variant] .about-solutions_card .calcs_arrow {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-tidal-variant] .resources-preview_image-wrapper,
html[data-tidal-variant] .projects-preview_card,
html[data-tidal-variant] [class*='portfolio'][class*='image'],
html[data-tidal-variant] [class*='case'][class*='image'] {
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Preserve Beyond's photo-led case studies; only tune their graphic shell. */
html[data-tidal-variant] .projects-preview_card {
  background: #00002c !important;
  border: 1px solid var(--tw-line) !important;
}

/* This link is Beyond's transparent click target over each project card. */
html[data-tidal-variant] .projects-preview_card > .resources-preview_card-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-tidal-variant] .projects-preview_card .resources-preview_image,
html[data-tidal-variant] .projects-preview_card .resources-preview_image-wrapper,
html[data-tidal-variant] .projects-preview_card .projects-preview_content-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-tidal-variant] .projects-preview_content-wrapper,
html[data-tidal-variant] .projects-preview_content-wrapper h3,
html[data-tidal-variant] .projects-preview_content-wrapper h4,
html[data-tidal-variant] .projects-preview_content-wrapper .heading-style-h4 {
  color: #ffffff !important;
}

html[data-tidal-variant] .projects-preview_card::after,
html[data-tidal-variant] [class*='portfolio'][class*='overlay']::after,
html[data-tidal-variant] [class*='case'][class*='overlay']::after {
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 44, .82) 100%) !important;
}

html[data-tidal-variant] .swiper-arrow {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .swiper-arrow:hover {
  background: var(--tw-primary) !important;
  color: #ffffff !important;
}

/* TidalWave's restrained line work replaces the exported glow system. */
html[data-tidal-variant] [class*='_glow']:not(.sub-header_background-glow):not(.sub-cta_background-glow) {
  filter: none !important;
  opacity: .28 !important;
}

html[data-tidal-variant] [class*='_divider'],
html[data-tidal-variant] [class*='_border'] {
  border-color: var(--tw-line) !important;
}

html[data-tidal-variant] [class*='_badge'],
html[data-tidal-variant] .text-bubble {
  background: var(--tw-surface-strong) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: 999px !important;
  color: var(--tw-ink) !important;
  box-shadow: none !important;
}

/* Closing conversion band and footer: Beyond copy, TidalWave finish. */
html[data-tidal-variant] .section_sub-cta,
html[data-tidal-variant] .sub-cta_component {
  background: var(--tw-ink) !important;
  color: var(--tw-inverse) !important;
}

html[data-tidal-variant] .section_sub-cta h2,
html[data-tidal-variant] .section_sub-cta h3,
html[data-tidal-variant] .section_sub-cta .sub-cta_heading,
html[data-tidal-variant] .sub-cta_component h2,
html[data-tidal-variant] .sub-cta_component h3 {
  color: var(--tw-inverse) !important;
  -webkit-text-fill-color: var(--tw-inverse) !important;
}

html[data-tidal-variant] .footer_component,
html[data-tidal-variant] .footer_wrapper {
  background: var(--tw-footer) !important;
  color: var(--tw-footer-ink) !important;
}

html[data-tidal-variant] .footer_component h2,
html[data-tidal-variant] .footer_component h3,
html[data-tidal-variant] .footer_component h4,
html[data-tidal-variant] .footer_component a,
html[data-tidal-variant] .footer_wrapper h2,
html[data-tidal-variant] .footer_wrapper h3,
html[data-tidal-variant] .footer_wrapper h4,
html[data-tidal-variant] .footer_wrapper a,
html[data-tidal-variant] .footer_link,
html[data-tidal-variant] .footer_link-list-heading,
html[data-tidal-variant] .footer_copyright {
  color: var(--tw-footer-ink) !important;
}

html[data-tidal-variant] .footer_social-link,
html[data-tidal-variant] .footer_badges-link {
  border-color: color-mix(in srgb, var(--tw-footer-ink) 28%, transparent) !important;
  box-shadow: none !important;
}

/* The source logos are white because Beyond originally placed them on black. */
html[data-tidal-variant] .expert-partners_logo {
  filter: brightness(0) saturate(100%) !important;
  opacity: .64 !important;
  transition: opacity 180ms ease !important;
}

html[data-tidal-variant] .expert-partners_logo:hover {
  opacity: 1 !important;
}

/* The external review widget is dark-only; invert it into the Editorial field. */
html[data-tidal-variant] .section_widget,
html[data-tidal-variant] .widget_component,
html[data-tidal-variant] .widget_script {
  background: var(--tw-page) !important;
}

html[data-tidal-variant] .lc_reviews_widget {
  border-radius: var(--tw-radius) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Exit intent and cookie UI inherit the selected system too. */
html[data-tidal-variant] .exit_card,
html[data-tidal-variant] .cookie-banner {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .exit_background {
  background: rgba(0, 0, 44, .58) !important;
  backdrop-filter: blur(6px);
}

@media (max-width: 767px) {
  html[data-tidal-variant] .tw-brand-logo--nav {
    width: 8.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tidal-variant] *,
  html[data-tidal-variant] *::before,
  html[data-tidal-variant] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Polish layer: header rail, hero rhythm, pill CTAs, elevated menus, light
   footer. Everything here is presentation only, Beyond's DOM is untouched.
   ========================================================================== */

/* Header keeps a centred rail instead of running edge to edge. */
html[data-tidal-variant] .navbar-component .padding-global.is-nav {
  padding-left: clamp(1.25rem, 4vw, 3rem) !important;
  padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

html[data-tidal-variant] .nav_container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 82.5rem !important;
  width: 100% !important;
}

/* The header is fixed, so every top-of-page section has to clear it. */
html[data-tidal-variant] .section_sub-header,
html[data-tidal-variant] .section_ad-header,
html[data-tidal-variant] [class*='section_header'],
html[data-tidal-variant] [class*='section_hero'] {
  padding-top: clamp(8rem, 11vw, 12rem) !important;
  padding-bottom: clamp(4rem, 7vw, 7rem) !important;
}

/* Primary CTAs: pill with a white action disc, per TidalWave. */
html[data-tidal-variant] .nav_button:not(.is-line),
html[data-tidal-variant] a.button:not(.is-line) {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  gap: .75rem !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  padding: .5rem .5rem .5rem 1.5rem !important;
}

html[data-tidal-variant] .nav_button:not(.is-line),
html[data-tidal-variant] .nav_button:not(.is-line) *,
html[data-tidal-variant] a.button:not(.is-line),
html[data-tidal-variant] a.button:not(.is-line) * {
  color: var(--tw-inverse) !important;
  -webkit-text-fill-color: var(--tw-inverse) !important;
}

html[data-tidal-variant] .nav_button:not(.is-line)::after,
html[data-tidal-variant] a.button:not(.is-line)::after {
  background: var(--tw-inverse) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009cde' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E") center / .9rem .9rem no-repeat !important;
  border-radius: 999px !important;
  content: '';
  flex: 0 0 auto;
  height: 2.1rem;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
  width: 2.1rem;
}

html[data-tidal-variant] .nav_button:not(.is-line):hover::after,
html[data-tidal-variant] a.button:not(.is-line):hover::after {
  transform: translate(2px, -2px);
}

/* Mega menus read as a panel that sits above the page, not part of it. */
html[data-tidal-variant] .nav_dropdown-agency-menu,
html[data-tidal-variant] .nav_dropdown-solutions-menu,
html[data-tidal-variant] .nav_dropdown-tools-menu,
html[data-tidal-variant] .nav_dropdown-pricing-menu {
  background: var(--tw-page) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 32px 80px -28px rgba(0, 0, 44, .32), 0 2px 10px rgba(0, 0, 44, .06) !important;
  overflow: visible !important;
  transform: translateY(.75rem);
}

/* The panel is offset from the trigger, so bridge the gap. Without this the
   pointer leaves the hover target on the way down and the menu closes. */
html[data-tidal-variant] .nav_dropdown-agency-menu::before,
html[data-tidal-variant] .nav_dropdown-solutions-menu::before,
html[data-tidal-variant] .nav_dropdown-tools-menu::before,
html[data-tidal-variant] .nav_dropdown-pricing-menu::before {
  content: '';
  height: 1.5rem;
  left: 0;
  position: absolute;
  right: 0;
  top: -1.5rem;
}

/* Footer keeps the cyan. Only the copy that was sinking into it gets lifted. */
html[data-tidal-variant] .footer_wrapper p,
html[data-tidal-variant] .footer_wrapper li,
html[data-tidal-variant] .footer_wrapper .text-color-white,
html[data-tidal-variant] .footer_wrapper .text-size-small,
html[data-tidal-variant] .footer_wrapper [class*='text-gradient'] {
  color: var(--tw-footer-ink) !important;
  -webkit-text-fill-color: var(--tw-footer-ink) !important;
}

html[data-tidal-variant] .footer_badges-link {
  background: rgba(255, 255, 255, .88) !important;
}

/* Country line under the hero headline, filled in by /api/geo. */
html[data-tidal-variant] .tw-geo-line {
  color: var(--tw-copy) !important;
  font-family: 'Fellix', Arial, sans-serif;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: .75rem;
  opacity: 0;
  transition: opacity 400ms ease;
}

html[data-tidal-variant] .tw-geo-line[data-tw-ready] {
  opacity: 1;
}

html[data-tidal-variant] .tw-geo-line strong {
  color: var(--tw-primary) !important;
  font-weight: 600;
}

/* Every Beyond page opens with a <header class="section_*">. Cover them all,
   not just the homepage hero, so nothing tucks under the fixed navbar. */
html[data-tidal-variant] body header[class*='section_']:not(.hide) {
  padding-top: clamp(8rem, 11vw, 12rem) !important;
}

/* Expertise cells shipped with zero padding, so the titles sat on the border. */
html[data-tidal-variant] .expertise-cell {
  background: var(--tw-page) !important;
  border: 1px solid var(--tw-soft-line) !important;
  border-radius: 1.125rem !important;
  box-shadow: 0 20px 44px -32px rgba(0, 0, 44, .4) !important;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) !important;
}

html[data-tidal-variant] .expertise-cell > :first-child {
  margin-bottom: 1rem !important;
}

/* The Beyond logo slot was sized for their old mark and clipped ours. */
html[data-tidal-variant] .nav_logo-link,
html[data-tidal-variant] .nav_logo-image,
html[data-tidal-variant] .footer_logo-image {
  flex: 0 0 auto !important;
  max-width: none !important;
  overflow: visible !important;
  width: auto !important;
}

/* Project cards: drop the navy slab under the artwork, keep the caption. */
html[data-tidal-variant] .projects-preview_card {
  background: transparent !important;
}

html[data-tidal-variant] .projects-preview_card .heading-style-h4,
html[data-tidal-variant] .projects-preview_content-wrapper,
html[data-tidal-variant] .projects-preview_content-wrapper * {
  color: var(--tw-ink) !important;
  -webkit-text-fill-color: var(--tw-ink) !important;
}

html[data-tidal-variant] .projects-preview_content-wrapper {
  padding-top: 1rem !important;
}

/* Carousel dots: quiet grey, the active one stretches into a purple pill. */
html[data-tidal-variant] span.swiper-pagination-bullet {
  background: rgba(0, 0, 44, .18) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  height: .5rem !important;
  margin: 0 .1875rem !important;
  opacity: 1 !important;
  transition: width 220ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease !important;
  width: .5rem !important;
}

html[data-tidal-variant] span.swiper-pagination-bullet:hover {
  background: rgba(0, 0, 44, .34) !important;
}

html[data-tidal-variant] span.swiper-pagination-bullet-active {
  background: var(--tw-primary) !important;
  width: 1.5rem !important;
}

/* The cyan lives on .footer_component; the copy inside it has to survive it. */
html[data-tidal-variant] .footer_component .text-color-white,
html[data-tidal-variant] .footer_component p,
html[data-tidal-variant] .footer_component li,
html[data-tidal-variant] .footer_component .footer_link,
html[data-tidal-variant] .footer_component .text-size-small,
html[data-tidal-variant] .footer_component [class*='text-gradient'] {
  color: var(--tw-footer-ink) !important;
  -webkit-text-fill-color: var(--tw-footer-ink) !important;
}

html[data-tidal-variant] .footer_divider {
  background: color-mix(in srgb, var(--tw-footer-ink) 20%, transparent) !important;
}

/* The closing CTA loses its navy slab and sits on the page's own light field. */
html[data-tidal-variant] .section_sub-cta {
  background: var(--tw-surface) !important;
  color: var(--tw-ink) !important;
}

html[data-tidal-variant] .section_sub-cta .sub-cta_heading,
html[data-tidal-variant] .section_sub-cta h2,
html[data-tidal-variant] .section_sub-cta h3,
html[data-tidal-variant] .section_sub-cta .text-color-white,
html[data-tidal-variant] .section_sub-cta .sub-header_features_item,
html[data-tidal-variant] .section_sub-cta .sub-header_features_item * {
  color: var(--tw-ink) !important;
  -webkit-text-fill-color: var(--tw-ink) !important;
}

/* Client marks are white files, so they need flipping on a light field. */
html[data-tidal-variant] .section_sub-cta .sub-marquee_item-logo {
  filter: brightness(0) saturate(100%) !important;
  opacity: .55 !important;
}

html[data-tidal-variant] .sub-cta_background-video,
html[data-tidal-variant] .sub-cta_background-glow {
  opacity: .12 !important;
}

/* The Webflow badge is injected at runtime, so hide it rather than strip it. */
html[data-tidal-variant] .w-webflow-badge,
html[data-tidal-variant] [class*='w-webflow-badge'] {
  display: none !important;
}

/* The CTA sat on a dark background video. On a light band it reads as a black
   slab behind the heading, so the whole backdrop stack goes. */
html[data-tidal-variant] .section_sub-cta .sub-cta_background-wrapper,
html[data-tidal-variant] .section_sub-cta .sub-cta_background-video,
html[data-tidal-variant] .section_sub-cta .sub-cta_background-video-fade,
html[data-tidal-variant] .section_sub-cta .sub-cta_background-glow {
  display: none !important;
}

/* Footer partner badges are white files, so a white plate erased them. */
html[data-tidal-variant] .footer_badges-link {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--tw-footer-ink) 30%, transparent) !important;
}

html[data-tidal-variant] .footer_badges-link img {
  filter: brightness(0) saturate(100%) !important;
  opacity: .72 !important;
}

/* Preloader: hold the page behind the mark until the first paint is real. */
html[data-tidal-variant].tw-loading,
html[data-tidal-variant].tw-loading body {
  overflow: hidden !important;
}

html[data-tidal-variant] .page-wrapper {
  transition: opacity 480ms ease;
}

html[data-tidal-variant].tw-loading .page-wrapper {
  opacity: 0;
}

html[data-tidal-variant] .tw-preloader {
  align-items: center;
  background: var(--tw-page);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1);
  z-index: 2147483000;
}

html[data-tidal-variant] .tw-preloader[data-tw-done] {
  opacity: 0;
  pointer-events: none;
}

html[data-tidal-variant] .tw-preloader__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

html[data-tidal-variant] .tw-preloader__mark {
  height: auto;
  width: clamp(9rem, 18vw, 13rem);
}

html[data-tidal-variant] .tw-preloader__track {
  background: var(--tw-soft-line);
  border-radius: 999px;
  display: block;
  height: 2px;
  overflow: hidden;
  width: 8.75rem;
}

html[data-tidal-variant] .tw-preloader__bar {
  animation: tw-preloader-fill 1.4s cubic-bezier(.22, 1, .36, 1) infinite;
  background: var(--tw-primary);
  border-radius: 999px;
  display: block;
  height: 100%;
  width: 40%;
}

@keyframes tw-preloader-fill {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* Partner avatars: hairline ring in the page colour, not a heavy black stroke. */
html[data-tidal-variant] .sub-header_review-avatar-image-wrapper {
  border: 2px solid var(--tw-page) !important;
  box-shadow: 0 0 0 1px var(--tw-soft-line) !important;
}

/* The TidalWave mark sits behind the hero, bleeding off the right edge. */
html[data-tidal-variant] .section_sub-header {
  overflow: hidden !important;
  position: relative !important;
}

html[data-tidal-variant] .section_sub-header::after {
  aspect-ratio: 137 / 66;
  background-color: var(--tw-primary);
  content: '';
  -webkit-mask: url('/tidalwave-assets/tidalwave-mark.svg') no-repeat center / contain;
  mask: url('/tidalwave-assets/tidalwave-mark.svg') no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
  position: absolute;
  right: -10%;
  top: 46%;
  transform: translateY(-50%);
  width: min(46vw, 40rem);
  z-index: 0;
}

html[data-tidal-variant] .section_sub-header > * {
  position: relative;
  z-index: 1;
}

/* The navy slab in the closing CTA is the component itself, not the video. */
html[data-tidal-variant] .sub-cta_component {
  background: transparent !important;
}

/* Mega menus centre on their trigger rather than hanging off its left edge. */
html[data-tidal-variant] .nav_dropdown-agency-menu,
html[data-tidal-variant] .nav_dropdown-solutions-menu,
html[data-tidal-variant] .nav_dropdown-tools-menu,
html[data-tidal-variant] .nav_dropdown-pricing-menu {
  left: 50% !important;
  max-width: calc(100vw - 3rem) !important;
  right: auto !important;
  transform: translate(-50%, .75rem) !important;
}

/* A third-party iframe swallows the wheel, which strands the page at the
   reviews block. The shield takes the wheel instead; one click hands the
   widget back its own pointer events. */
html[data-tidal-variant] .tw-embed-shield {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

/* Beyond already centres these panels on their trigger and caps their width.
   Taking that over with fixed positioning let them run the full viewport, so
   the sizing and placement stay Beyond's; only the drop below the fixed
   header is ours. */
html[data-tidal-variant] .nav_dropdown-agency-menu.w--open,
html[data-tidal-variant] .nav_dropdown-solutions-menu.w--open,
html[data-tidal-variant] .nav_dropdown-tools-menu.w--open,
html[data-tidal-variant] .nav_dropdown-pricing-menu.w--open {
  top: 5.5rem !important;
}

/* The panel now meets the header edge, so the hover bridge is dead weight
   and would sit over the nav links while a menu is open. */
html[data-tidal-variant] .nav_dropdown-agency-menu::before,
html[data-tidal-variant] .nav_dropdown-solutions-menu::before,
html[data-tidal-variant] .nav_dropdown-tools-menu::before,
html[data-tidal-variant] .nav_dropdown-pricing-menu::before {
  content: none !important;
}

/* Project carousel: just the artwork and its caption. No frame, no glow,
   no pagination rail. */
html[data-tidal-variant] .projects-preview_card,
html[data-tidal-variant] .projects-preview_card > .resources-preview_card-link,
html[data-tidal-variant] .projects-preview_content-wrapper,
html[data-tidal-variant] .swiper-slide.is-projects {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Dots stay: quiet grey rail, active one stretches into a blue pill. */
html[data-tidal-variant] .swiper-pagination.swiper-pagination-clickable {
  margin-top: 1.25rem !important;
}

html[data-tidal-variant] [class*='projects-preview'] [class*='glow'],
html[data-tidal-variant] [class*='projects-preview'] [class*='blur'] {
  display: none !important;
}

/* ==========================================================================
   Footer, on the kiwidynamics grid: about block top left, link columns under
   it, mark bottom right, hairline bottom bar. Stays on the cyan field.
   ========================================================================== */
html[data-tidal-variant] .tw-footer {
  color: var(--tw-footer-ink);
  padding-block: clamp(3.5rem, 5vw, 4.5rem);
}

html[data-tidal-variant] .tw-footer__inner {
  align-items: start;
  column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: clamp(3rem, 5vw, 4.5rem);
}

html[data-tidal-variant] .tw-footer__about {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  grid-column: 1 / span 6;
  grid-row: 1;
  max-width: 31rem;
}

html[data-tidal-variant] .tw-footer__about-h {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

html[data-tidal-variant] .tw-footer__about-p {
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.52;
  margin: 0;
  opacity: .92;
}

html[data-tidal-variant] .tw-footer__cta {
  align-items: center;
  background: var(--tw-footer-ink);
  border-radius: 999px;
  color: var(--tw-inverse) !important;
  -webkit-text-fill-color: var(--tw-inverse) !important;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 500;
  gap: .6rem;
  margin-top: .5rem;
  padding: .7rem 1.4rem;
  text-decoration: none !important;
  transition: transform 180ms ease, opacity 180ms ease;
}

html[data-tidal-variant] .tw-footer__cta::after {
  content: '↗';
  font-size: 1.05em;
  line-height: 1;
}

html[data-tidal-variant] .tw-footer__cta:hover {
  opacity: .88;
  transform: translateY(-1px);
}

html[data-tidal-variant] .tw-footer__cols {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-column: 1 / span 9;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-tidal-variant] .tw-footer__h {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 .35rem;
}

html[data-tidal-variant] .tw-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

html[data-tidal-variant] .tw-footer__col a {
  color: var(--tw-footer-ink) !important;
  -webkit-text-fill-color: var(--tw-footer-ink) !important;
  display: block;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: .84;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 200ms ease;
  width: fit-content;
}

html[data-tidal-variant] .tw-footer__col a:hover {
  opacity: 1;
}

/* Hovering one link dims only its own column, not the whole footer. */
html[data-tidal-variant] .tw-footer__col:has(a:hover) a:not(:hover) {
  opacity: .35;
}

html[data-tidal-variant] .tw-footer__mark {
  align-self: end;
  aspect-ratio: 137 / 66;
  background-color: var(--tw-footer-ink);
  grid-column: 11 / -1;
  grid-row: 2;
  justify-self: end;
  -webkit-mask: url('/tidalwave-assets/tidalwave-mark.svg') no-repeat center / contain;
  mask: url('/tidalwave-assets/tidalwave-mark.svg') no-repeat center / contain;
  width: clamp(6rem, 8vw, 7.5rem);
}

html[data-tidal-variant] .tw-footer__bottom {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--tw-footer-ink) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 4.5vw, 4.25rem);
  padding-top: 1.35rem;
}

html[data-tidal-variant] .tw-footer__copy {
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.4;
  opacity: .78;
}

html[data-tidal-variant] .tw-footer__social {
  display: flex;
  gap: .65rem;
}

html[data-tidal-variant] .tw-footer__social a {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--tw-footer-ink) 26%, transparent);
  border-radius: 999px;
  color: var(--tw-footer-ink) !important;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  transition: background-color 180ms ease;
  width: 2.25rem;
}

html[data-tidal-variant] .tw-footer__social a:hover {
  background: color-mix(in srgb, var(--tw-footer-ink) 12%, transparent);
}

html[data-tidal-variant] .tw-footer__social svg {
  height: 1.05rem;
  width: 1.05rem;
}

@media (max-width: 1100px) {
  html[data-tidal-variant] .tw-footer__about { grid-column: 1 / span 7; }
  html[data-tidal-variant] .tw-footer__cols { grid-column: 1 / span 10; gap: 2.5rem; }
}

@media (max-width: 767px) {
  html[data-tidal-variant] .tw-footer__inner {
    display: flex;
    flex-direction: column;
  }

  html[data-tidal-variant] .tw-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-tidal-variant] .tw-footer__mark { justify-self: start; }
}