/* --------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */

:root {
  /* The complete palette — nine colors, everything else deleted. */
  --gp-green-deep: #003223;   /* dark main bg · light title */
  --gp-green-alt: #00593c;    /* dark alt section */
  --gp-lime-pale: #f0ffd3;    /* light main bg */
  --gp-mist: #dae0dc;         /* light alt section · thin frame */
  --gp-mint: #55f596;         /* accent on dark · logo-strip fill */
  --gp-orange: #fe5a1f;       /* eyebrow · button · accent on light */
  --gp-orange-hover: #e04711; /* button hover · cal.com button */

  /* Legacy aliases kept pointing at the new palette so existing var() refs
     across the template resolve without touching every consumer. */
  --gp-lime: var(--gp-mint);
  --gp-lime-deep: var(--gp-green-deep);
  --gp-ink: var(--gp-green-deep);
  --gp-ink-soft: var(--gp-green-alt);

  --gp-font-body: Inter, sans-serif;
  --gp-font-title: "Geist", Inter, sans-serif;
  --gp-font-display: "Playfair Display", serif;

  /* FlyHead's own motion values, kept so new components match the template. */
  --gp-duration: 0.3s;
  --gp-duration-fast: 0.2s;
  --gp-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* One radius survives: the button pill. Cards and inputs are square now. */
  --gp-radius-pill: 500px;
  --gp-radius-card: 0;
  --gp-radius-input: 0;
}

/* Geist — variable weight, vendored locally for every title. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}/* --------------------------------------------------------------------------
   2. Theme definitions
   -------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  /* Light color-scheme in BOTH themes: the cal.com embed reads the root's
     color-scheme to paint its own (transparent-by-default) iframe canvas, so
     a dark scheme turned the booking widget's surround into a black frame in
     dark mode. Forcing light keeps that canvas transparent → the alt-green
     section shows through, identical in both themes. The page itself stays
     dark via explicit backgrounds (html/body below), not via color-scheme. */
  color-scheme: light;

  --gp-bg: var(--gp-green-deep);
  --gp-bg-raised: var(--gp-green-alt);
  --gp-text: #ffffff;
  --gp-text-strong: #ffffff;
  --gp-text-muted: rgba(255, 255, 255, 0.64);
  --gp-heading: var(--gp-lime-pale);
  --gp-border: rgba(85, 245, 150, 0.20);
  --gp-accent: var(--gp-mint);
  --gp-on-accent: var(--gp-green-deep);
  --gp-cta: var(--gp-orange);
  --gp-on-cta: #ffffff;
  --gp-eyebrow: var(--gp-orange);
  --gp-logo-strip: var(--gp-mint);
  --gp-logo-pk: var(--gp-green-deep);
  --gp-logo-ink: #ffffff;
  --gp-bloom: 0 2px 250px 13px rgba(85, 245, 150, 0.10);

  /* FlyHead variables, re-pointed. This is what re-themes the template. */
  --primary: var(--gp-accent);
  --dark-green: var(--gp-bg);
  --light-green-bg: var(--gp-bg-raised);
  --primary-light: var(--gp-text);
  --paragraph-green: var(--gp-text);
  --primary-dark: var(--gp-green-deep);
  --light-gray: var(--gp-bg-raised);
}

[data-theme="light"] {
  color-scheme: light;

  /* On the pale background, mint has too little contrast to carry meaning, so
     the light theme uses orange as its accent and deep green for titles. Body
     text is pure black. Mint survives only as a fill (logo strip). */
  --gp-bg: #f6faee;
  --gp-bg-raised: var(--gp-mist);
  --gp-text: #000000;
  --gp-text-strong: #000000;
  --gp-text-muted: rgba(0, 0, 0, 0.64);
  --gp-heading: var(--gp-green-deep);
  --gp-border: var(--gp-mist);
  --gp-accent: var(--gp-orange);
  --gp-on-accent: #ffffff;
  --gp-cta: var(--gp-orange);
  --gp-on-cta: #ffffff;
  --gp-eyebrow: var(--gp-orange);
  --gp-logo-strip: var(--gp-mint);
  --gp-logo-pk: var(--gp-green-deep);
  --gp-logo-ink: var(--gp-green-deep);
  --gp-bloom: 0 2px 180px 13px rgba(85, 245, 150, 0.15);

  --primary: var(--gp-orange);
  --dark-green: var(--gp-bg);
  --light-green-bg: var(--gp-bg-raised);
  --primary-light: var(--gp-text);
  --paragraph-green: var(--gp-text);
  --primary-dark: var(--gp-green-deep);
  --light-gray: var(--gp-mist);
}/* --------------------------------------------------------------------------
   3. Light-mode patches

   FlyHead writes a literal #ffffff in 39 rules and `white` in 30 more. Those
   ignore the remapping above and would leave white text on a white page, so
   they get corrected here rather than by editing the vendor sheet.
   -------------------------------------------------------------------------- */

/* Explicit html background so the overscroll/canvas area follows the theme
   even though color-scheme is forced light (see the note in :root above). */
html {
  background-color: var(--gp-bg);
}
body {
  background-color: var(--gp-bg);
  color: var(--gp-text);
  transition: background-color var(--gp-duration) var(--gp-ease),
              color var(--gp-duration) var(--gp-ease);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--gp-heading);
}

[data-theme="light"] .text-white,
[data-theme="light"] .white,
[data-theme="light"] p {
  color: var(--gp-text);
}/* Lime panels keep their fill in both themes — the ink on top is what has to
   stay readable, and it does. */
[data-theme="light"] .primary-bg,
[data-theme="light"] .blue-background {
  background-color: var(--gp-lime);
  color: var(--gp-ink);
}

[data-theme="light"] .primary-bg h1,
[data-theme="light"] .primary-bg h2,
[data-theme="light"] .primary-bg h3,
[data-theme="light"] .primary-bg p,
[data-theme="light"] .blue-background h2,
[data-theme="light"] .blue-background p {
  color: var(--gp-ink);
}

[data-theme="light"] .dark {
  color: var(--gp-ink);
}/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.gp-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: color-mix(in srgb, var(--gp-bg) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--gp-duration) var(--gp-ease),
              background-color var(--gp-duration) var(--gp-ease);
}

.gp-header[data-scrolled="true"] {
  border-bottom-color: var(--gp-border);
}

.gp-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px 20px;
}

.gp-brand {
  display: inline-flex;
  align-items: center;
  color: var(--gp-logo-ink);
}

.gp-brand svg,
.gp-brand img {
  height: 30px;
  width: auto;
  display: block;
}

.gp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.gp-nav__link {
  position: relative;
  font-family: var(--gp-font-body);
  font-size: 15px;
  color: var(--gp-text);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--gp-duration-fast) var(--gp-ease);
}

.gp-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gp-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--gp-duration) var(--gp-ease);
}

.gp-nav__link:hover,
.gp-nav__link[aria-current="page"] {
  color: var(--gp-accent);
}

.gp-nav__link:hover::after,
.gp-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gp-nav__group {
  position: relative;
}

.gp-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: var(--gp-text);
  padding: 6px 0;
}

.gp-nav__chevron {
  width: 10px;
  height: 10px;
  transition: transform var(--gp-duration) var(--gp-ease);
}

.gp-nav__toggle[aria-expanded="true"] .gp-nav__chevron {
  transform: rotate(180deg);
}

.gp-nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 240px;
  padding: 12px;
  background-color: var(--gp-bg-raised);
  border: 1px solid var(--gp-border);
  border-radius: 0;
  box-shadow: 0 20px 60px #0000004d;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease),
              visibility var(--gp-duration);
}

.gp-nav__toggle[aria-expanded="true"] + .gp-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.gp-nav__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 0;
  color: var(--gp-text);
  text-decoration: none;
  font-size: 14px;
  transition: background-color var(--gp-duration-fast) var(--gp-ease),
              color var(--gp-duration-fast) var(--gp-ease);
}

.gp-nav__panel a:hover {
  background-color: color-mix(in srgb, var(--gp-accent) 16%, transparent);
  color: var(--gp-accent);
}

.gp-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}/* --------------------------------------------------------------------------
   5. Theme and language switches
   -------------------------------------------------------------------------- */

.gp-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-pill);
  padding: 3px;
  background-color: color-mix(in srgb, var(--gp-bg-raised) 70%, transparent);
}

.gp-switch__option {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gp-text-muted);
  padding: 7px 11px;
  border-radius: var(--gp-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color var(--gp-duration-fast) var(--gp-ease),
              color var(--gp-duration-fast) var(--gp-ease);
}

.gp-switch__option[aria-pressed="true"],
.gp-switch__option[aria-current="true"] {
  background-color: var(--gp-accent);
  color: var(--gp-on-accent);
}

.gp-switch__option:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 2px;
}

.gp-switch__icon {
  width: 13px;
  height: 13px;
}/* --------------------------------------------------------------------------
   6. Buttons

   FlyHead has no orange. The CTA pill is the one genuinely new primitive in
   the GTM Pulse design, so it is defined here rather than inherited.
   -------------------------------------------------------------------------- */

.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--gp-font-body);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: var(--gp-radius-pill);
  transition: transform var(--gp-duration) var(--gp-ease),
              background-color var(--gp-duration) var(--gp-ease),
              color var(--gp-duration) var(--gp-ease);
}

.gp-btn--cta {
  background-color: var(--gp-cta);
  color: var(--gp-on-cta);
}

.gp-btn--cta:hover {
  background-color: var(--gp-orange-hover);
  transform: translateY(-2px);
}

.gp-btn--ghost {
  background: none;
  color: var(--gp-cta);
  border: 1px solid var(--gp-cta);
}

.gp-btn--ghost:hover {
  background-color: var(--gp-cta);
  color: var(--gp-on-cta);
}

.gp-btn__arrow {
  display: inline-block;
  transition: transform var(--gp-duration) var(--gp-ease);
}

.gp-btn:hover .gp-btn__arrow {
  transform: translate(2px, -2px);
}/* Reveal is opt-in, not opt-out. The hidden state applies only once the
   bootstrap script has set `data-js` on <html>, so a scripting failure,
   a blocked bundle or an old browser leaves the content plainly visible
   instead of showing empty dark bands. */
[data-js="on"] .gp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--gp-ease), transform 0.6s var(--gp-ease);
}

[data-js="on"] .gp-reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/* --------------------------------------------------------------------------
   8. Mobile
   -------------------------------------------------------------------------- */

.gp-burger {
  display: none;
  background: none;
  border: 1px solid var(--gp-border);
  border-radius: 0;
  padding: 9px;
  cursor: pointer;
  color: var(--gp-text);
}

@media (max-width: 991px) {
  .gp-header__inner {
    grid-template-columns: auto auto;
  }

  .gp-burger {
    display: inline-flex;
  }

  .gp-nav {
    position: fixed;
    inset: 64px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 20px;
    background-color: var(--gp-bg);
    border-bottom: 1px solid var(--gp-border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gp-duration) var(--gp-ease),
                transform var(--gp-duration) var(--gp-ease),
                visibility var(--gp-duration);
  }

  .gp-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .gp-nav__panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    background: none;
    padding: 0 0 0 12px;
    display: none;
  }

  .gp-nav__toggle[aria-expanded="true"] + .gp-nav__panel {
    display: grid;
    transform: none;
  }

  .gp-header__actions {
    order: 3;
  }
}/* --------------------------------------------------------------------------
   9. Accessibility
   -------------------------------------------------------------------------- */

.gp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background-color: var(--gp-accent);
  color: var(--gp-on-accent);
  border-radius: 0;
}

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 2px;
}

.gp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}/* --------------------------------------------------------------------------
   10. Footer

   Full-bleed lime panel. The lime is held at full strength in both themes —
   it is the strongest brand moment on the page and the ink sitting on it
   clears contrast either way, so inverting it would cost more than it buys.
   -------------------------------------------------------------------------- */

.gp-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--gp-lime);
  color: var(--gp-ink);
  padding: 70px 20px 30px;
  margin-top: 0;
}

.gp-footer__topo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 420px;
  height: 300px;
  color: color-mix(in srgb, var(--gp-ink) 22%, transparent);
  pointer-events: none;
}

.gp-footer__topo svg {
  width: 100%;
  height: 100%;
}

.gp-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 60px;
  max-width: 1340px;
  margin: 0 auto;
}

.gp-footer__logo {
  color: var(--gp-ink);
  margin-bottom: 18px;
}

.gp-footer__logo svg {
  height: 38px;
  width: auto;
}

.gp-footer__tagline {
  max-width: 34ch;
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--gp-ink);
}

.gp-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.gp-footer__social-pill {
  padding: 9px 20px;
  border: 1.5px solid var(--gp-orange);
  border-radius: var(--gp-radius-pill);
  color: var(--gp-orange);
  text-decoration: none;
  font-size: 14px;
  transition: background-color var(--gp-duration) var(--gp-ease),
              color var(--gp-duration) var(--gp-ease);
}

.gp-footer__social-pill:hover {
  background-color: var(--gp-orange);
  color: #ffffff;
}

.gp-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.gp-footer__heading {
  font-family: var(--gp-font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-ink);
  margin: 0 0 16px;
}

.gp-footer__column .gp-footer__heading:not(:first-child) {
  margin-top: 28px;
}

.gp-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.gp-footer__list a {
  color: var(--gp-ink);
  text-decoration: none;
  font-size: 14px;
  transition: opacity var(--gp-duration-fast) var(--gp-ease);
}

.gp-footer__list a:hover {
  opacity: 0.62;
  text-decoration: underline;
}

.gp-footer__list--contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.gp-footer__list--contact svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.gp-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  max-width: 1340px;
  margin: 54px auto 0;
  font-size: 14px;
}

.gp-footer__bottom p {
  margin: 0;
  color: var(--gp-ink);
}

.gp-footer__legal {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-footer__legal a {
  color: var(--gp-ink);
  text-decoration: underline;
}/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.gp-newsletter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 360px;
  padding: 5px 5px 5px 8px;
  background-color: var(--gp-ink);
  border-radius: var(--gp-radius-pill);
}

.gp-newsletter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--gp-lime-pale);
  font-family: var(--gp-font-body);
  font-size: 14px;
  padding: 10px 12px;
}

.gp-newsletter__input::placeholder {
  color: color-mix(in srgb, var(--gp-lime-pale) 62%, transparent);
}

.gp-newsletter__input:focus {
  outline: none;
}

.gp-newsletter:focus-within {
  outline: 2px solid var(--gp-cta);
  outline-offset: 2px;
}

.gp-newsletter__submit {
  flex: none;
  border: 0;
  cursor: pointer;
  background-color: var(--gp-cta);
  color: var(--gp-on-cta);
  font-family: var(--gp-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: var(--gp-radius-pill);
  transition: background-color var(--gp-duration) var(--gp-ease);
}

.gp-newsletter__submit:hover {
  background-color: var(--gp-orange-hover);
}

.gp-newsletter__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}/* Off-screen rather than display:none — a bot reading the DOM sees a normal
   field, while assistive tech skips it via aria-hidden and tabindex. */
.gp-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gp-form__status {
  position: absolute;
  top: calc(100% + 8px);
  left: 4px;
  margin: 0;
  font-size: 13px;
  color: var(--gp-ink);
}

.gp-contact-form {
  display: grid;
  gap: 14px;
}

.gp-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.gp-contact-form input,
.gp-contact-form select,
.gp-contact-form textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--gp-ink);
  border-radius: var(--gp-radius-input);
  background-color: transparent;
  color: var(--gp-ink);
  font-family: var(--gp-font-body);
  font-size: 15px;
}

.gp-contact-form input::placeholder,
.gp-contact-form textarea::placeholder {
  color: color-mix(in srgb, var(--gp-ink) 65%, transparent);
}/* Responsive parity with ColdIQ's ported footer (section_footer-neo).
   ColdIQ collapses at the tablet breakpoint, not at mobile: footer_content
   (our .gp-footer__inner) stacks to a single column so the brand block sits
   above the menus, and footer_menu-holder (our .gp-footer__columns) drops to
   a two-column grid. Our rebuild previously only collapsed at 767, so tablet
   width kept the desktop 1fr/2fr split and the three menu columns squeezed. */
@media (max-width: 991px) {
  .gp-footer__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .gp-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}/* Mobile landscape: ColdIQ keeps footer_menu-holder at two columns here but
   closes the column gap and opens the row gap (col-gap 0, row-gap 2rem). */
@media (max-width: 767px) {
  .gp-footer__columns {
    column-gap: 0;
    row-gap: 32px;
  }

  .gp-contact-form__row {
    grid-template-columns: 1fr;
  }
}/* Mobile portrait: ColdIQ's footer_menu-holder becomes a fully stacked
   single column (flex-flow: column). */
@media (max-width: 479px) {
  .gp-footer__columns {
    grid-template-columns: 1fr;
  }
}/* --------------------------------------------------------------------------
   12. Template furniture

   webflow.js injects a "Made in Webflow" badge at runtime, so it cannot be
   removed from the markup at build time.
   -------------------------------------------------------------------------- */

.w-webflow-badge {
  display: none !important;
}/* Tim's logo ships at 318x44, drawn with 0.7-2px strokes. Below roughly
   36px the concentric rings in the mark stop resolving and it reads as a
   solid dot, so the display height is held at 40. The artwork itself is
   untouched. */
.brand svg,
.brand-tablet svg {
  height: 40px;
  width: auto;
  display: block;
}/* Header controls sit inside FlyHead's own .menu-wrap flex row. */
.gp-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.gp-cta-holder {
  display: inline-flex;
  align-items: center;
}/* --------------------------------------------------------------------------
   13. Light mode, second pass

   FlyHead paints a lot of text literally white, which the variable remap in
   section 2 cannot reach. Those elements disappear entirely on a pale ground.
   Each selector below is one the template hardcoded.
   -------------------------------------------------------------------------- */

[data-theme="light"] {
  --gp-kicker: #003223;
}

[data-theme="light"] .section-subtitle,
[data-theme="light"] .caps,
[data-theme="light"] .white-text,
[data-theme="light"] .h2-secondary.white,
[data-theme="light"] .h4-secondary.white-text,
[data-theme="light"] .testim-title,
[data-theme="light"] .mw-half,
[data-theme="light"] .nav-item-title,
[data-theme="light"] .nav-link,
[data-theme="light"] .nav-dropdown-link {
  color: var(--gp-text) !important;
}/* The italic kicker is a quiet label, not body copy — it keeps its own
   weight so the hierarchy survives the theme change. */
[data-theme="light"] .section-subtitle {
  color: var(--gp-kicker) !important;
  opacity: 1;
}/* Cards that are lime in dark mode stay lime; their ink is already dark. */
[data-theme="light"] .testimonial-slide .dark,
[data-theme="light"] .testimonial-slide .dark.sb {
  color: var(--gp-ink) !important;
}/* Table rules and card borders are near-black in the template and vanish
   against the dark ground's inverse. */
[data-theme="light"] .pricing-content-wrapper,
[data-theme="light"] .pricing-table-head {
  border-color: var(--gp-border) !important;
  color: var(--gp-text) !important;
}/* The template's outline buttons are white-on-dark. */
[data-theme="light"] .primary-button,
[data-theme="light"] .secondary-button-big {
  color: var(--gp-cta) !important;
  border-color: var(--gp-cta) !important;
}/* Big display numerals use the brand lime, which at 4.0:1 is too weak to
   carry text on a pale ground. */
[data-theme="light"] .statistic-big-numb,
[data-theme="light"] .statistic-small-numb {
  color: var(--gp-lime-deep) !important;
}

[data-theme="light"] .statistic-small-numb.stroke {
  -webkit-text-stroke-color: var(--gp-lime-deep);
}/* --------------------------------------------------------------------------
   14. Buttons take the orange accent

   FlyHead resolves .primary-button through --primary, so it is lime. In the
   GTM Pulse design every "View More", "Let's Talk" and "Buy Now" pill is
   orange, while lime stays on headings and panels. Remapping --primary
   globally would turn the whole site orange, so the button is overridden on
   its own.
   -------------------------------------------------------------------------- */

.primary-button,
.primary-button.w-button,
.text-button,
.secondary-button {
  border-color: var(--gp-cta);
  color: var(--gp-cta);
}

.primary-button:hover,
.primary-button.w-button:hover,
.secondary-button:hover {
  background-color: var(--gp-cta);
  border-color: var(--gp-cta);
  color: var(--gp-on-cta);
}

.button-arrow,
.text-button-icon {
  color: inherit;
}/* The navbar is fixed, so the first section has to clear it or the headline
   renders underneath. FlyHead's own pages handle this per-page; a reassembled
   page has to state it once. */
.banner-section,
.section.about-us,
.section.banner-simple,
.section.with-images,
.section.banner-faq {
  padding-top: 120px;
}

@media (max-width: 767px) {
  .banner-section,
  .section.about-us,
  .section.banner-simple,
  .section.with-images,
  .section.banner-faq {
    padding-top: 96px;
  }
}/* Hero: with the tag pills removed, drop the headline block lower in the banner
   so it no longer hugs the header and the composition stays balanced. */
.gp-s-hero .banner-text.home-2 {
  margin-top: clamp(2rem, 7vh, 6rem);
}/* Hero column order: headline, body copy, subscribe, tags — matching the
   design. The template has no body copy, so the inserted paragraphs land
   after the tag pills unless they are ordered explicitly. */
.banner-section .banner-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.banner-section .banner-text .home-2-title { order: 1; }
.banner-section .banner-text p             { order: 2; margin-top: 14px; max-width: 46ch; }
.banner-section .banner-text .coming-soon-form { order: 3; margin-top: 26px; width: 520px; max-width: 100%; }
.banner-section .banner-text .services-block   { order: 4; margin-top: 26px; }/* The template's hero is a column flexbox with `justify-content: flex-end`
   and `overflow: hidden`, sized for its original content. The design adds two
   paragraphs and a subscribe field that the template never had; the column
   grew past the box, and bottom-justification pushed the overflow upward
   where `overflow: hidden` clipped the headline off. Let the section grow
   with its content and stack from the top instead. */
.banner-section.home-2 {
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  overflow: visible;
}

.banner-section .home-2-banner {
  align-items: start;
}

.banner-section .banner-text {
  align-self: start;
}/* ==========================================================================
   16. Display scale

   The design was drawn on a 1710px frame, but FlyHead's type scale switches
   to its largest steps at 1440. On a normal laptop everything therefore
   rendered about 19% larger than drawn.

   Rather than editing dozens of values, one factor drives the whole scale.
   Raise --gp-scale toward 1 for larger, lower it for smaller.
   ========================================================================== */

:root {
  --gp-scale: 0.75;

  --gp-h1: calc(100px * var(--gp-scale));
  --gp-h2: calc(60px * var(--gp-scale));
  --gp-h3: calc(40px * var(--gp-scale));
  --gp-h4: calc(28px * var(--gp-scale));
  --gp-h5: calc(24px * var(--gp-scale));
  /* Body copy gets a floor. Scaling it with the headings would land at
     15.5px, which is below comfortable reading size — the display type can
     shrink, running text should not. */
  --gp-body: max(19.5px, calc(21.9px * var(--gp-scale)));
  /* Der Einleitungsabsatz im Hero ist kein Fliesstext, sondern Lead: er
     wird als erstes gelesen und darf groesser stehen. Getrennter Token,
     damit Karten- und Rastertexte kompakt bleiben koennen. */
  --gp-lead: 19px;
  --gp-section-y: calc(130px * var(--gp-scale));
}

body,
p,
.banner-text p,
.tablet-center,
.mt-30 {
  font-size: var(--gp-body);
}

h1,
.home-2-title,
.h1-landing,
.mt-24 {
  font-size: var(--gp-h1);
  line-height: 1.1;
}

h2,
.h2,
.h2-secondary,
.mw-half,
.form-title,
.testim-title {
  font-size: var(--gp-h2);
  line-height: 1.12;
}

h3,
.h3-secondary {
  font-size: var(--gp-h3);
  line-height: 1.2;
}

h4,
.h4-secondary {
  font-size: var(--gp-h4);
}

h5,
.h5-secondary {
  font-size: var(--gp-h5);
}/* With smaller type, a 1340px container produces very long measure. Pull it
   in so line length stays readable — this also restores the side margins the
   design has and the template lacked. */
.base-container,
.w-container {
  max-width: 1240px;
}/* Section rhythm scales with the type so the page does not end up with
   small headings floating in the original oversized gaps. */
.section,
.banner-section {
  padding-top: var(--gp-section-y);
  padding-bottom: var(--gp-section-y);
}

.banner-section.home-2 {
  padding-top: calc(var(--gp-section-y) + 40px);
}/* The display numerals are graphic elements, not text, and were the most
   oversized thing on the page. */
.statistic-big-numb {
  font-size: calc(240px * var(--gp-scale));
  line-height: 1;
}

.statistic-small-numb {
  font-size: calc(165px * var(--gp-scale));
  line-height: 1;
}/* Buttons and pills follow, otherwise they look pasted on at the old size. */
.primary-button,
.primary-button.w-button,
.secondary-button-big,
.gp-btn {
  font-size: calc(16px * var(--gp-scale));
  padding: calc(12px * var(--gp-scale)) calc(22px * var(--gp-scale));
}

.nav-link,
.nav-item-title,
.nav-dropdown-link {
  font-size: calc(16px * var(--gp-scale));
}/* FlyHead jumps h1 to 130px above 1920. Keep that relationship, scaled. */
@media (min-width: 1920px) {
  :root {
    --gp-h1: calc(130px * var(--gp-scale));
    --gp-h2: calc(80px * var(--gp-scale));
  }
}/* Below the desktop breakpoints the template already steps sizes down, so the
   factor only needs to keep them in proportion rather than shrink twice. */
@media (max-width: 991px) {
  :root {
    --gp-h1: calc(70px * var(--gp-scale));
    --gp-h2: calc(50px * var(--gp-scale));
    --gp-h3: calc(34px * var(--gp-scale));
    --gp-section-y: calc(90px * var(--gp-scale));
  }
}

@media (max-width: 767px) {
  :root {
    --gp-h1: calc(55px * var(--gp-scale));
    --gp-h2: calc(38px * var(--gp-scale));
    --gp-h3: calc(30px * var(--gp-scale));
    --gp-section-y: calc(70px * var(--gp-scale));
  }
}/* The counter numerals and their captions are orange in the design, not lime.
   FlyHead resolves them through --primary, so they need the accent applied
   directly. The arrow above the row stays lime, as it does in the design. */
.gp-s-counters .statistic-big-numb,
.gp-s-counters .statistic-small-numb,
.gp-s-counters .statistic-numeric-item .mt-30 {
  color: var(--gp-cta);
}

.gp-s-counters .statistic-small-numb.stroke {
  -webkit-text-stroke-color: var(--gp-cta);
  color: var(--gp-cta);
}/* The header runs unscaled. Scoping the variable instead of restating every
   value means everything inside the bar — links, dropdowns, the CTA, the
   language and theme controls — follows automatically. */
.navbar {
  --gp-scale: 1;
}/* Pinned header: transparent over the hero, frosted once the page scrolls.
   gtm-pulse.js toggles data-scrolled="true" on .navbar past 8px of scroll.
   The solid line is the fallback; color-mix adds translucency where supported. */
.navbar[data-scrolled="true"] {
  background-color: var(--gp-bg);
  background-color: color-mix(in srgb, var(--gp-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--gp-heading) 12%, transparent);
}/* Half the previous 40px display height. Note the artwork carries 0.7-2px
   strokes; at 20px the concentric rings in the mark no longer resolve and it
   reads as a solid dot. */
.brand svg,
.brand-tablet svg {
  height: 20px;
}/* The newsletter field is a filled white card, not an outlined one. Filling
   it lifts it clear of the outlined pills underneath; ink and placeholder
   follow so the text stays readable on the fill. */
.coming-soon-form .input,
.coming-soon-form .input:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--gp-ink);
}

.coming-soon-form .input::placeholder {
  color: var(--gp-ink);
  opacity: 1;
}/* Hero photograph at three quarters, pushed to the right edge of its column.
   The arch radius follows the width — kept at 200px the curve would eat most
   of the frame. */
.banner-img-absolute {
  width: 75%;
  height: 75%;
  margin-left: auto;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
}/* The hero title runs to its natural width instead of wrapping inside a
   460px grid column, and the italic half is forced onto its own line, so the
   headline is always exactly two lines. It overhangs the column to the right,
   into the empty band above the photograph — which is why this is scoped to
   the desktop grid and dropped again below it. */
@media (min-width: 1280px) {/* Pinned to the tracks the template computed on its own (460 / 489 / 201
     inside a 1210 container). Without this the max-content title below would
     steal width from the photograph's track and shrink it by a third. */
  .banner-section.home-2 .home-2-banner {
    grid-template-columns: minmax(0, 1fr) 489px 201px;
  }

  .banner-section.home-2 .home-2-title {
    width: max-content;
    max-width: 62vw;
  }

  .banner-section.home-2 .home-2-title .span-italic {
    display: block;
  }
}/* Keyword pills a quarter larger than the halved size they started at. */
.our-services-item {
  font-size: 14px;
  padding: 5px 10px 6px;
}/* Client logo strip: the lime bar halved again, so a quarter of the original
   band; the marks come down a further quarter, to 56%. Two separate factors,
   so the logos keep breathing room inside a much tighter bar. */
.section.gp-s-logos {
  padding-top: calc(var(--gp-section-y) / 4);
  padding-bottom: calc(var(--gp-section-y) / 4);
  overflow: hidden;
}

.gp-s-logos .logo-wrap img {
  width: auto;
  height: 30px;
  flex: 0 0 auto;
}/* --------------------------------------------------------------------------
   18. One button

   Every button matches the header CTA: orange fill, white ink, full pill
   radius, 16px type on 12/22 padding. FlyHead shipped three treatments —
   filled lime, outlined orange, outlined lime — which read as three
   different affordances for what is the same action. The values are literal
   rather than scaled, because a CTA is judged against the viewport, not
   against the body copy beside it.
   -------------------------------------------------------------------------- */

.primary-button,
.primary-button.w-button,
.secondary-button-big,
.gp-btn,
.button-neo,
.coming-soon-form .primary-button {
  background-color: var(--gp-cta);
  color: var(--gp-on-cta);
  border: 0;
  border-radius: var(--gp-radius-pill);
  font-size: 1.1rem;
  line-height: 1.1rem;
  letter-spacing: -0.8px;
  padding: 13px 24px;
  text-transform: none;
}/* The subscribe button sits in a flex row beside a 60px field and would
   stretch to match it. Centring holds it at the CTA's own 40px height. */
.coming-soon-form .primary-button {
  align-self: center;
}

.primary-button:hover,
.primary-button.w-button:hover,
.secondary-button-big:hover,
.gp-btn:hover,
.button-neo:hover,
.coming-soon-form .primary-button:hover {
  background-color: var(--gp-orange-hover);
  color: var(--gp-on-cta);
}/* Die Bogen-Grafik lag als #55f596 vor und kreuzt den Hero-Fliesstext, der
   dieselbe Lime traegt - Linie und Schrift waren nicht auseinanderzuhalten.
   Die SVG traegt jetzt Weiss; Weiss deckt aber staerker als die Lime, also
   faellt die Deckkraft entsprechend. Im Light Theme wird die weisse Linie
   invertiert, sonst verschwindet sie auf hellem Grund. */
.banner-arrow {
  opacity: .44;
}

[data-theme="light"] .banner-arrow {
  filter: invert(1);
  opacity: .44;
}/* Frontal legt eine Kontur um Eingabefeld UND Button gemeinsam, nicht um das
   Feld allein. Die Shell traegt daher Rahmen, Radius und Fokus-Ring; die
   beiden Kinder werden transparent gestellt und geben ihre eigene Kontur ab. */
.gp-field-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  padding: 6px;
  padding-left: 10px;
  border: 1px solid var(--gp-border);
  border-radius: 999px;
  background-color: var(--gp-bg-raised);
  transition: border-color .2s var(--gp-ease), box-shadow .2s var(--gp-ease);
}

.gp-field-shell:focus-within {
  border-color: var(--gp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gp-accent) 22%, transparent);
}

.coming-soon-form .gp-field-shell .input,
.coming-soon-form .gp-field-shell .input:focus {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

.coming-soon-form .gp-field-shell .primary-button {
  flex: 0 0 auto;
  margin: 0;
  /* Match the footer newsletter submit (this is the newsletter pill), not the
     globally enlarged .primary-button — keeps room for the full placeholder. */
  font-size: 1rem;
  padding: 15px 24px;
}/* Unter 480px stapeln Feld und Button; die Pillenform waere dort zu eng. */
@media screen and (max-width: 479px) {
  .gp-field-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border-radius: 0;
  }
}/* Das Feld stand vorher auf weissem Grund und erbt von FlyHead eine dunkle
   Schriftfarbe. In der Shell sitzt es auf dunklem Grund, also muessen Text
   und Platzhalter mitziehen - sonst dunkel auf dunkel. */
.coming-soon-form .gp-field-shell .input,
.coming-soon-form .gp-field-shell .input:focus {
  color: var(--gp-text-strong);
}

.coming-soon-form .gp-field-shell .input::placeholder {
  color: var(--gp-text-muted);
  opacity: 1;
}/* --------------------------------------------------------------------------
   19. Service-Reihen auf der Startseite
   Die Sektion trug urspruenglich eine Kopfzeile plus zwei Bildkacheln aus dem
   Template. Die Kacheln sind raus; stattdessen stapeln sich vier gleiche
   Kopfzeilen, eine je Leistung. Der Abstand traegt die Reihen, weil sonst
   Nummer und Ueberschrift der naechsten Reihe optisch zusammenlaufen.
   -------------------------------------------------------------------------- */
.gp-service-row + .gp-service-row {
  margin-top: calc(96px * var(--gp-scale, 1));
  padding-top: calc(96px * var(--gp-scale, 1));
  border-top: 1px solid var(--gp-border);
}

@media screen and (max-width: 991px) {
  .gp-service-row + .gp-service-row {
    margin-top: 56px;
    padding-top: 56px;
  }
}/* --------------------------------------------------------------------------
   20. Challenges-Raster oberhalb 1920px
   FlyHead schaltet .grid-3-column.mt-gap ab 1920px auf `display: flex` mit
   `justify-content: space-between`. Flex-Items richten sich nach ihrem Inhalt,
   also bekommt jede Karte eine andere Breite und die Spalten stehen versetzt -
   auf grossen Monitoren sah die Sektion dadurch gebrochen aus, waehrend sie bei
   1440px sauber dreigeteilt ist. Zurueck auf Grid mit gleichen Dritteln, damit
   das Raster ueber alle Breakpoints dasselbe bleibt.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {
  .grid-3-column.mt-gap {
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: start;
    display: grid;
  }
}/* --------------------------------------------------------------------------
   21. Challenges-Karten: Nummer und Ueberschrift nebeneinander
   Nummer und Titel standen untereinander, was die Karte unnoetig hoch macht.
   `.number` bringt aus dem Template bereits `margin-right: 10px` mit, war also
   fuer die Zeile gedacht. Der Kopf ist eine eigene Flex-Zeile; die Ueberschrift
   darf umbrechen, die Nummer bleibt als Kreis unveraendert.
   -------------------------------------------------------------------------- */
.gp-card-head {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--gp-scale, 1));
  width: 100%;
  margin-bottom: calc(18px * var(--gp-scale, 1));
}

.gp-card-head .number {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.gp-card-head h3 {
  margin-top: 0;
  margin-bottom: 0;
}/* Der Fliesstext soll drei Zeilen nicht ueberschreiten - aber nur am Desktop,
   wo die Spalte breit genug ist, dass drei Zeilen den ganzen Satz fassen. Auf
   Tablet und Handy ist die Spalte schmaler, dort wuerde derselbe Deckel echten
   Text abschneiden statt ihn nur zu begrenzen. */
@media screen and (min-width: 992px) {/* Three merged challenge cards now carry the full copy, so let it show in
     full instead of the old three-line cap that was sized for six short cards. */
  .gp-s-challenges .flex-vertical-wrap p {
    display: block;
    overflow: visible;
  }
}/* Die Ueberschrift bleibt auf ihrer Vorlagengroesse. Platz macht stattdessen
   die Nummer: der Kreis ist das Ordnungselement, nicht die Aussage, und stand
   mit 60px und 30px Ziffer gleichberechtigt neben dem Titel. Kleiner gesetzt
   fuehrt er die Zeile an, statt mit ihr zu konkurrieren, und gibt der laengsten
   Ueberschrift die Breite zurueck, die sie zum Einzeiler braucht.
   Nur im Karten-Kopf, damit .number an anderen Stellen unveraendert bleibt. */
.gp-card-head .number {
  width: 42px;
  min-width: 42px;
  height: 42px;
  font-size: 19px;

  /* Die Vorlage zentriert nur horizontal (justify-content) und schiebt die
     Ziffer mit padding-top: 7px auf Sicht nach unten - ein Wert, der genau zu
     60px Kreis und 30px Schrift passte. Echtes Zentrieren statt Handmass, sonst
     sitzt die Ziffer bei jeder anderen Groesse wieder daneben. */
  align-items: center;
  padding-top: 0;
  line-height: 1;
}/* Unterhalb 992px zentriert das Template den Karteninhalt (.flex-vertical-wrap
   bekommt align-items: center, der Fliesstext traegt .tablet-center). Der neue
   Kopf hat width:100% und blieb dadurch als einziges Element linksbuendig.
   Er zieht jetzt mit, sonst steht die Nummer links und der Text darunter mittig. */
@media screen and (max-width: 991px) {
  .gp-card-head {
    justify-content: center;
  }
}/* Auf schmalen Handys wird die Zeile aus 60px-Kreis plus Ueberschrift eng.
   Die Ueberschrift darf dort umbrechen, statt die Zeile aus dem Raster zu
   druecken; der Kreis behaelt seine Groesse, weil er das Ordnungselement ist. */
@media screen and (max-width: 479px) {
  .gp-card-head {
    gap: 10px;
  }

  .gp-card-head h3 {
    text-align: left;
  }
}/* --------------------------------------------------------------------------
   23. Kennzahlen-Zeile eine halbe Stufe groesser
   Die Zahlen und ihre Beschriftungen gehoeren zusammen, also waechst auch das
   Label mit - aber ausgehend von seiner urspruenglichen Groesse, nicht von der
   inzwischen angehobenen Fliesstext-Basis, sonst addieren sich beide Schritte.
   -------------------------------------------------------------------------- */
.gp-s-counters .statistic-numeric-item p,
.gp-s-counters .statistic-numeric-item .mt-30 {
  font-size: 24px;
}/* Der Burger taucht schon ab 991px auf (Webflow: data-collapse="medium"),
   also gilt die Reihenfolge ab dort - sonst steht er auf dem Tablet zwischen
   Logo und CTA statt am Rand. */
@media screen and (max-width: 991px) {
  .nav-menu-wrapper {
    align-items: center;
    gap: 10px;
  }

  .gp-cta-holder {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
  }

  .menu-button.w-nav-button {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
  }
}/* Erst auf dem Handy wird es wirklich eng, also schrumpfen Logo und CTA
   auch erst dort. Auf dem Tablet ist Platz genug fuer die volle Groesse. */
@media screen and (max-width: 767px) {
  .brand svg,
  .brand-tablet svg {
    height: 16px;
  }

  .navbar .primary-button,
  .gp-cta-holder .primary-button {
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 13px;
  }
}/* --------------------------------------------------------------------------
   25. Hero-Einleitung als Lead
   18px ist die groesste Fliesstextgroesse, bei der die Challenges-Karten noch
   in die vorgegebenen drei Zeilen passen - ab 19px kippen sie auf vier. Der
   Hero-Absatz haengt aber nicht an dieser Vorgabe und darf deutlich groesser
   stehen. So wird der Einstieg praesenter, ohne dass die Rastertexte brechen
   oder der Fliesstext den Ueberschriften Konkurrenz macht.
   -------------------------------------------------------------------------- */
.banner-text p {
  font-size: var(--gp-lead);
}/* --------------------------------------------------------------------------
   26. FAQ-Akkordeon
   Die Antwort wird ueber eine Grid-Zeile von 0fr auf 1fr aufgezogen. Das
   animiert sauber, ohne dass man die Hoehe des Textes vorher kennen muss -
   anders als bei max-height, wo man einen Fantasiewert setzen muesste, der
   bei laengeren Antworten wieder springt. Die Vorlage laesst die Liste offen
   stehen, deshalb steht hier zuerst der geschlossene Zustand.
   -------------------------------------------------------------------------- */
.accordion-list {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-top: 0;
  transition: grid-template-rows .32s var(--gp-ease),
              padding-top .32s var(--gp-ease);
}

.accordion-item[data-open="true"] .accordion-list {
  grid-template-rows: 1fr;
  padding-top: 22px;
}/* Ohne min-height: 0 weigert sich das Grid-Kind, unter seine Inhaltshoehe zu
   schrumpfen, und die Antwort bliebe trotz 0fr sichtbar. */
.accordion-list > * {
  min-height: 0;
}/* Der Abstand zwischen Frage und Antwort sitzt bewusst am Container, nicht am
   Absatz: ein Grid-Kind laesst sich auf 0 schrumpfen, sein Padding aber nicht.
   Am Absatz haette der Abstand die geschlossene Zeile auf seine Hoehe
   aufgedrueckt - genau das war der erste Versuch. */
.accordion-list-content {
  margin-top: 0;
}

.accordion-toggle {
  cursor: pointer;
}

.accordion-icon {
  transition: transform .32s var(--gp-ease);
}

.accordion-item[data-open="true"] .accordion-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-list,
  .accordion-icon {
    transition: none;
  }
}/* .left-column-wrap ist Flex mit justify-content: space-between. Mit dem Titel
   als drittem Kind haette die Verteilung eine Luecke zwischen Titel und Grafik
   gerissen und den Titel auf die Grafik geschoben. Label und Titel bilden
   deshalb einen gemeinsamen Block - die Spalte bleibt bei zwei Kindern und die
   Verteilung so, wie die Vorlage sie vorsieht. */
.gp-whyus-head {
  display: block;
}

.gp-whyus-title {
  margin-top: 18px;
  margin-bottom: 0;
}/* Im Tabletbereich sitzt die Globus-Grafik absolut positioniert rechts oben in
   derselben Spalte. Das Label allein war schmal genug, um daneben zu passen;
   der neue Titel laeuft in voller Breite darunter durch. Er bekommt dort eine
   Breitengrenze, damit er vor der Grafik umbricht statt hinter ihr zu
   verschwinden. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .gp-whyus-head {
    max-width: 56%;
  }
}/* --------------------------------------------------------------------------
   28. Partnerlogos: eine Reihe statt Raster
   Die Vorlage stellt die Kundenlogos als 3x4-Raster mit Ortsangabe je Karte.
   Gewuenscht ist eine einzelne Reihe aus sieben Kacheln, wie im Entwurf: die
   Logos wirken dort als Band, nicht als Verzeichnis. Die Ortszeile faellt
   damit weg - sie gehoert zu einer Kundenliste, nicht zu einem Logoband.
   -------------------------------------------------------------------------- */
.customers-grid {
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.customers-grid .customer-title {
  display: none;
}/* Sieben Kacheln nebeneinander werden unterhalb der Desktopbreite zu schmal.
   Statt sie zu quetschen, faellt die Reihe stufenweise auf weniger Spalten. */
@media screen and (max-width: 1279px) {
  .customers-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .customers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .customers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}/* Die Logos haben im Template keine eigene Regel und leben von ihrer
   Eigengroesse. Eine der SVGs bringt keine nutzbare mit und kollabierte im
   Flex-Container auf 0 Breite - die Kachel blieb leer. Feste Bemessung plus
   object-fit loest das fuer alle gleich und haelt die Marken auf einer Linie,
   statt jede in ihrer Originalgroesse stehen zu lassen. */
.customers-grid .client-wrapper {
  height: 150px;
  padding: 20px 14px;
}

.customers-grid .customer-image {
  width: 100%;
  height: 100%;
  max-height: 34px;
  object-fit: contain;
  object-position: center;
}/* --------------------------------------------------------------------------
   29. Ergebnis-Zeitstrahl (Sticky-Stapel)
   Uebernommen aus der ColdIQ-Vorlage. Der Effekt ist reines CSS: jede Karte
   ist `sticky` mit gestaffeltem `top`, wodurch die naechste sich beim Scrollen
   ueber die vorige schiebt. Rechts steht ein ebenfalls klebender Bildkasten,
   in dem fuenf Grafiken uebereinanderliegen und ueberblendet werden.
   Die Vorlage steuert die Ueberblendung mit Webflows IX2. Deren Interaktions-
   daten stecken im ColdIQ-Bundle und fehlen hier, deshalb uebernimmt
   gtm-pulse.js diesen Teil - siehe dort.
   Farben sind die Originalwerte der Vorlage: #f0ffd3 Karte, #dae0dc Linien.
   -------------------------------------------------------------------------- */
.gp-s-timeline {
  --tl-line: #55f596;
  --tl-card: var(--gp-lime);
  --tl-ink: #003223;
  --tl-muted: #00593c;
  /* Same corner radius as the CTA "Let's build" lime card. */
  --tl-radius: 0;
}

.gp-s-timeline .timeline-neo_heading {
  margin-bottom: calc(60px * var(--gp-scale, 1));
  text-align: center;
}

.timeline-neo_component {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.25fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  align-items: stretch;
  position: relative;
}

.timeline-neo_content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.timeline-neo_content {
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 26rem;
  padding: 2.5rem;
  background-color: var(--tl-card);
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  position: relative;
}/* Der gestaffelte Versatz ist der ganze Trick: jede Karte bleibt eine Stufe
   tiefer stehen, sodass die Kante der vorigen sichtbar bleibt. */
.timeline-neo_content.first  { position: sticky; top: 6rem; }
.timeline-neo_content.second { position: sticky; top: 7rem; }
.timeline-neo_content.third  { position: sticky; top: 8rem; }
.timeline-neo_content.fourth { position: sticky; top: 9rem; border-bottom: 1px solid var(--tl-line); }
.timeline-neo_content.last   { position: sticky; top: 9rem; border-bottom: 1px solid var(--tl-line); }

.timeline-neo_holder {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  position: relative;
}

.timeline-neo_label {
  color: var(--tl-ink);
  font-size: calc(32px * var(--gp-scale, 1));
  line-height: 1.25;
  font-weight: 500;
}

.timeline-neo_title {
  color: var(--tl-ink);
  font-size: calc(32px * var(--gp-scale, 1));
  line-height: 1.25;
  font-weight: 400;
  margin: 0 0 12px;
}

.timeline-neo_text {
  color: var(--tl-muted);
  font-size: var(--gp-body);
  margin: 0;
  max-width: 46ch;
}

.timeline-neo_desktop-image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 26rem;
  border-right: 1px solid var(--tl-line);
  position: sticky;
  top: 6rem;
}

.timeline-neo_image-box {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--tl-card);
  border-top: 1px solid var(--tl-line);
  border-right: 1px solid var(--tl-line);
  border-bottom: 1px solid var(--tl-line);
}/* Die fuenf Grafiken liegen deckungsgleich uebereinander; sichtbar ist immer
   nur die zum aktiven Schritt. */
.timeline-neo_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s var(--gp-ease);
}

.timeline-neo_image[data-active="true"] {
  opacity: 1;
}

.timeline-neo_mobile-image-wrapper {
  display: none;
}/* Unter 992px rueckt der Stapel enger zusammen. */
@media screen and (max-width: 991px) {
  .timeline-neo_content { height: 23rem; padding: 1.75rem; }
  .timeline-neo_content.first  { top: 3.5rem; }
  .timeline-neo_content.second { top: 4rem; }
  .timeline-neo_content.third  { top: 4.5rem; }
  .timeline-neo_content.fourth { top: 5rem; }
  .timeline-neo_content.last   { top: 5rem; }
  .timeline-neo_desktop-image-wrapper { height: 23rem; top: 3.5rem; }
}/* Auf dem Handy traegt der Sticky-Stapel nicht mehr: nebeneinander ist kein
   Platz, und uebereinander gestapelte Vollbildkarten verdecken den Text. Die
   Vorlage loest das genauso - Stapel aus, jede Karte bekommt ihr eigenes Bild. */
@media screen and (max-width: 991px) {
  .timeline-neo_component { display: flex; flex-flow: column; }
  .timeline-neo_desktop-image-wrapper { display: none; }
  .timeline-neo_content,
  .timeline-neo_content.first,
  .timeline-neo_content.second,
  .timeline-neo_content.third,
  .timeline-neo_content.fourth,
  .timeline-neo_content.last {
    position: relative;
    top: 0;
    height: auto;
    padding: 1.75rem;
  }
  .timeline-neo_content.last { border-bottom: 1px solid var(--tl-line); }
  .timeline-neo_holder { gap: 2rem; }
  .timeline-neo_mobile-image-wrapper { display: block; width: 100%; margin-top: 1.5rem; }
  .timeline-neo_mobile-image { width: 100%; height: auto; }
}/* --------------------------------------------------------------------------
   3 ways we help you grow — content, ads & outbound.

   Ported 1:1 in layout from the ColdIQ "_3ways" section: an eyebrow + split
   heading, a three-up joined card grid with hairline dividers, a central
   flywheel graphic, and an email CTA. Re-skinned entirely in GTM Pulse tokens
   so it reads as native to the page. Motion stays on transform/opacity via the
   shared .gp-reveal hook; nothing here animates layout-bound properties.
   -------------------------------------------------------------------------- */

.gp-3ways__intro {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.gp-3ways__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--gp-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

.gp-3ways__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  line-height: 1.08;
  color: var(--gp-heading);
}/* Playfair italic carries the promise; the plain body face grounds the topic
   list underneath it — the same two-part read as the source. */
.gp-3ways__heading-accent {
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.25rem);
  color: var(--gp-accent);
}

.gp-3ways__heading-rest {
  font-family: var(--gp-font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  color: var(--gp-text-strong);
}/* The 1px gap over a border-coloured bed is what draws the hairline dividers
   between cards, exactly as the ColdIQ grid does. */
.gp-3ways__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--gp-border);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  overflow: hidden;
}

.gp-3ways__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--gp-bg-raised);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-3ways__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gp-bloom);
}

.gp-3ways__body {
  padding: 2.5rem 2.5rem 1.5rem;
}

.gp-3ways__title {
  margin: 0 0 0.75rem;
  font-family: var(--gp-font-body);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--gp-text-strong);
}

.gp-3ways__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gp-text-muted);
}

.gp-3ways__icon {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1rem 1rem 0;
  overflow: hidden;
}

.gp-3ways__icon img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.gp-3ways__flow {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.gp-3ways__flow img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 1200 / 1023;
}

.gp-3ways__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}/* Widen the shared newsletter pill a touch for the work-email + Book a call
   pairing; the component's own tokens carry every colour. */
.gp-3ways__form {
  max-width: 420px;
  width: 100%;
}/* Responsive parity with ColdIQ's ported _3ways section.
   ColdIQ's _3-ways_list stays a three-across row through the tablet
   breakpoint (991 only tightens its inner padding) and does not switch to a
   stacked column until the mobile-landscape breakpoint (767). Our rebuild
   was stacking a full breakpoint too early at 991; hold the 3-up grid on
   tablet and only pull the card padding in so the columns stay comfortable. */
@media screen and (max-width: 991px) {
  .gp-3ways__body {
    padding: 1.75rem 1.5rem 1.25rem;
  }
}/* Mobile landscape: ColdIQ's _3-ways_list switches to flex-flow column here,
   so the joined dividers turn horizontal. Stack the cards and restore roomier
   card padding now that each spans the full width. */
@media screen and (max-width: 767px) {
  .gp-3ways__grid {
    grid-template-columns: 1fr;
  }
  .gp-3ways__body {
    padding: 2rem 2rem 1.25rem;
  }
  .gp-3ways__intro {
    margin-bottom: 2.5rem;
  }
  .gp-3ways__flow {
    margin-top: 2rem;
  }
}/* Mobile portrait: keep the flywheel/connector graphic scaling with the
   viewport and tighten the surrounding rhythm on the narrowest screens. The
   image is already width:100%/height:auto, so it never forces horizontal
   overflow; this only trims the vertical spacing. */
@media screen and (max-width: 479px) {
  .gp-3ways__flow {
    margin-top: 1.5rem;
  }
  .gp-3ways__body {
    padding: 1.5rem 1.5rem 1.25rem;
  }
}/* Rows much closer together. The between-row gap was margin-top + padding-top
   straddling the divider = 96px + 96px (each * --gp-scale, so 72 + 72 = 144px
   at the 0.75 scale). Cut to 38px + 38px (28.5 + 28.5 = 57px) — a ~60% cut —
   while keeping the divider and balancing the space above and below it. */
.gp-s-services .gp-service-row + .gp-service-row {
  margin-top: calc(20px * var(--gp-scale, 1));
  padding-top: calc(20px * var(--gp-scale, 1));
}

@media screen and (max-width: 991px) {
  .gp-s-services .gp-service-row + .gp-service-row {
    margin-top: 14px;
    padding-top: 14px;
  }
}/* Service titles a touch smaller: base computed size is var(--gp-h2)
   (60px * 0.75 = 45px at desktop). -0.25rem (4px) -> 41px, and the calc keeps
   the same 0.25rem trim at every breakpoint's --gp-h2. */
.gp-s-services .h2-secondary {
  font-size: calc(var(--gp-h2) - 0.25rem);
}/* --------------------------------------------------------------------------
   Fix: FlyHead ships a GLOBAL `ul { -webkit-text-fill-color: transparent;
   background-clip: text; background-color: var(--paragraph-green) }` rule
   (flyhead.css) — a gradient-text effect that clips every <ul>'s text to a
   near-lime fill, so on the lime footer the link text renders green-on-green
   (invisible) while the SVG icons stay visible. Restore solid text for the
   footer lists. Icons are unaffected (SVG ignores text-fill-color).
   -------------------------------------------------------------------------- */
.gp-footer__list {
  background-color: transparent;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  padding-left: 0;
}
.gp-footer__list a,
.gp-footer__list a span {
  color: var(--gp-ink);
  -webkit-text-fill-color: currentColor;
}/* --------------------------------------------------------------------------
   22. Logo strip -> infinite rightward marquee (every page, below the hero)

   The lime bar (.primary-bg) is kept. The track holds TWO byte-identical halves,
   and each half repeats the six-logo set twice, so one half is ~2400px wide —
   wider than any supported viewport. The track animates from translateX(-50%)
   to 0, i.e. it slides by exactly one half, and because the trailing half is an
   exact copy of the leading half the loop has no visible seam or gap even on
   very wide screens. The section clips the overflow, so the track spills only
   inside its own box and never widens the page.
   -------------------------------------------------------------------------- */
.gp-logos-viewport {
  width: 100%;
  overflow: hidden;
}

.gp-logos-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: gp-logos-rightward 90s linear infinite;
  will-change: transform;
}

.gp-s-logos .gp-logos-track .logo-wrap {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 56px;
  padding: 0 28px;
}

@keyframes gp-logos-rightward {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}/* Motion is decorative; a static row reads the same information. */
@media (prefers-reduced-motion: reduce) {
  .gp-logos-track {
    animation: none;
  }
}/* --------------------------------------------------------------------------
   23. Hero email field -> matches the footer newsletter pill

   Scoped to .coming-soon-form .gp-field-shell so the shared .input and
   .primary-button used elsewhere are untouched. The shell becomes the dark
   ink pill; the field is transparent with a pale placeholder; the submit is
   the orange pill, sized to the footer submit.
   -------------------------------------------------------------------------- */
.coming-soon-form .gp-field-shell {
  gap: 6px;
  max-width: 480px;
  padding: 5px 5px 5px 8px;
  border: 1px solid var(--gp-ink);
  border-radius: var(--gp-radius-pill);
  background-color: var(--gp-ink);
}

.coming-soon-form .gp-field-shell:focus-within {
  border-color: var(--gp-cta);
  box-shadow: none;
  outline: 2px solid var(--gp-cta);
  outline-offset: 2px;
}

.coming-soon-form .gp-field-shell .input,
.coming-soon-form .gp-field-shell .input:focus {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--gp-lime-pale);
  font-family: var(--gp-font-body);
  font-size: 14px;
  padding: 10px 12px;
}

.coming-soon-form .gp-field-shell .input::placeholder {
  color: color-mix(in srgb, var(--gp-lime-pale) 62%, transparent);
  opacity: 1;
}

.coming-soon-form .gp-field-shell .primary-button {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 24px;
}/* --------------------------------------------------------------------------
   24. Header nav labels +0.25rem (Task 3)

   Header runs at --gp-scale:1, so the current computed sizes are literal:
   nav links / dropdown titles at 16px (1rem) and the switch options at 12px
   (0.75rem). Each is bumped by exactly 0.25rem.
   -------------------------------------------------------------------------- */
.nav-link,
.nav-item-title {
  font-size: 1rem; /* reverted to original 16px */
}

.gp-switch__option {
  font-size: 0.75rem; /* reverted to original 12px */
}/* --------------------------------------------------------------------------
   25. Dropdown items share one left edge (Task 4)

   FlyHead centres the wrapper, pulls each link left by -20px (sliding it back
   on hover) and prefixes a decorative 16px dash. Together those make the rows
   look ragged. The dash is dropped, the negative margin zeroed on both rest and
   hover, and every row left-aligned on a single uniform padding.
   -------------------------------------------------------------------------- */
.nav-dropdown-link-wrapper {
  align-items: stretch;
}

.nav-dropdown-list .nav-dropdown-link {
  justify-content: flex-start;
  text-align: left;
  margin-left: 0;
  padding: 8px 8px 8px 4px;
}

.nav-dropdown-list .nav-dropdown-link:hover {
  margin-left: 0;
}

.nav-dropdown-link-line {
  display: none;
}/* --------------------------------------------------------------------------
   26. Nav + switches pulled right, close to the CTA (Task 5)

   The nav-menu-wrapper is space-between, so the free space sat as a wide gap
   between the switch group and the CTA. Collecting that free space to the left
   of the nav (margin-left:auto) packs the nav and CTA together; an 18px margin
   keeps a comfortable gap without letting them touch. Desktop only — below the
   collapse breakpoint the burger layout owns the spacing.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .nav-menu-wrapper .nav-menu {
    margin-left: auto;
  }

  .nav-menu-wrapper .gp-cta-holder {
    margin-left: 18px;
  }
}/* Hero newsletter input: match the footer pill's 14px so the full
   "Get our best tips in your Inbox" placeholder fits (FlyHead's base .input
   font is larger and truncated it). */
.coming-soon-form .gp-field-shell .input,
.coming-soon-form .gp-field-shell .input:focus {
  font-size: 0.875rem;
}/* ==========================================================================
   Pricing page  (.gp-pricing)

   A dark B2B pricing surface built on the existing GTM Pulse tokens: three
   equal tier cards in a responsive grid, one full-width bundle card, and a
   closing trust line above the shared logo marquee. Motion stays on
   transform / border-color only so hovers run on the compositor. Cards use
   min-width:0 and wrapping pill rows so nothing overflows at 375/768/1024.
   ========================================================================== */

.gp-pricing {
  /* Fixed navbar clearance, matching the .banner-simple rule above. */
  padding-top: 120px;
  padding-bottom: clamp(4rem, 3rem + 5vw, 8rem);
  background-color: var(--gp-bg);

  /* Calm, readable body neutral for tier copy. Lime is reserved for the
     section labels and check bullets, so the cards read with real hierarchy:
     white titles, lime accents, neutral prose. */
  --gp-tier-body: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .gp-pricing {
  --gp-tier-body: rgba(0, 50, 35, 0.72);
}/* --- Intro ------------------------------------------------------------- */
.gp-pricing__head {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 2rem + 3vw, 4.5rem);
  text-align: center;
}

.gp-pricing__eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--gp-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

.gp-pricing__title {
  margin: 0 0 1.25rem;
  font-family: var(--gp-font-display);
  font-style: italic;                 /* match the rest of the site (Playfair italic) */
  font-weight: 400;
  letter-spacing: -0.045em;
  color: var(--gp-text-strong);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.05;
}

.gp-pricing__lead {
  margin: 0 auto;
  max-width: 620px;
  color: var(--gp-text-muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}/* --- Tier grid --------------------------------------------------------- */
.gp-pricing__grid {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr;          /* mobile: single column */
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

@media (min-width: 640px) {
  .gp-pricing__grid {
    grid-template-columns: repeat(2, 1fr); /* tablet: two columns */
    align-items: start;
  }
}

@media (min-width: 1180px) {
  .gp-pricing__grid {
    grid-template-columns: repeat(4, 1fr); /* desktop: four columns (one per service) */
    grid-template-rows: repeat(10, auto);  /* shared row lines for the cards' subgrid */
    column-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
    row-gap: 0;
  }/* The subgrid rules for .gp-tier live at the very end of this block so they
     win over the base .gp-tier { display: flex } rule that follows below. */
}/* --- Tier card --------------------------------------------------------- */
.gp-tier {
  min-width: 0;                         /* lets the card shrink, no overflow */
  display: flex;
  flex-direction: column;
  gap: 0;                               /* vertical rhythm is margin-driven so it
                                           survives the switch to subgrid at ≥1180px */
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background-color: var(--gp-bg-raised);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  /* Only compositor-friendly properties animate. */
  transition: transform var(--gp-duration) var(--gp-ease),
              border-color var(--gp-duration) var(--gp-ease);
}

.gp-tier:hover {
  transform: translateY(-4px);
  border-color: var(--gp-accent);
}

.gp-tier__name {
  margin: 0;
  font-family: var(--gp-font-display);
  font-style: italic;                 /* match the rest of the site (Playfair italic) */
  font-weight: 400;
  letter-spacing: -0.045em;
  color: var(--gp-text-strong);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  line-height: 1.1;
}

.gp-tier__desc {
  margin: 0.6rem 0 0;
  color: var(--gp-tier-body);
  font-size: 0.95rem;
  line-height: 1.55;
}/* Section subheads: What you get / Who you work with / Ideal for.
   Lime is intentional here — it is the one accent colour on the card. */
.gp-tier__label {
  margin: 0 0 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gp-border);
  font-family: var(--gp-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-accent);
}/* Section separation between the flattened rows (What you get / Who you work
   with / Ideal for). Direct-child scope keeps this off the price label and off
   the bundle's grouped labels. */
.gp-tier > .gp-tier__label {
  margin-top: 1.5rem;
}/* Check-marked feature lists. */
.gp-tier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gp-tier__list li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--gp-tier-body);
  font-size: 0.925rem;
  line-height: 1.45;
}

.gp-tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--gp-accent) 22%, transparent);
  /* Check glyph drawn with a background so no extra markup is needed. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0db58' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}/* Roles rendered as wrapping pills. flex-direction is set explicitly because
   the FlyHead base stylesheet defaults every <ul> to a flex column, which would
   stretch the pills to full width instead of letting them hug their text. */
.gp-tier__roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gp-tier__roles li {
  display: inline-flex;                 /* hug the label, sit inline, wrap as a group */
  width: auto;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-pill);
  color: var(--gp-tier-body);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}/* Price block. Pushed to the base of the card so CTAs line up across tiers. */
.gp-tier__price {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gp-border);
}/* The price block already carries the divider; the nested label must not add a
   second border or offset, so "YOUR INVESTMENT" starts flush at the block top
   and aligns across all four columns. */
.gp-tier__price .gp-tier__label {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.gp-tier__amount {
  font-family: var(--gp-font-display);
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--gp-text-strong);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  line-height: 1;
}

.gp-tier__per {
  color: var(--gp-text-muted);
  font-size: 0.95rem;
}

.gp-tier__note {
  margin: 0.4rem 0 0;
  color: var(--gp-text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

.gp-tier__cta.gp-btn {
  justify-content: center;
  width: 100%;
}/* Gap above the CTA in the tier cards only (kept off the bundle CTA). */
.gp-tier > .gp-tier__cta {
  margin-top: 1.5rem;
}/* --- Bundle card (full width) -----------------------------------------
   Same centered container as .gp-pricing__grid (max-width + 15px gutters) so
   the card's left/right edges line up exactly with the row of tier cards. */
.gp-bundle {
  width: 100%;
  max-width: 1360px;
  margin: clamp(1.25rem, 1rem + 1.5vw, 2rem) auto 0;
  padding: 0 15px;
}

.gp-bundle__card {
  min-width: 0;
  padding: clamp(1.75rem, 1.3rem + 1.5vw, 3rem);
  margin: 0;
  border: 1px solid var(--gp-accent);
  border-radius: var(--gp-radius-card);
  /* Subtle lime lift so the bundle reads as the flagship. */
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in srgb, var(--gp-accent) 12%, transparent) 0%,
      transparent 55%),
    var(--gp-bg-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

@media (min-width: 900px) {
  .gp-bundle__card {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.gp-bundle__intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gp-bundle__name {
  margin: 0;
  font-family: var(--gp-font-display);
  color: var(--gp-text-strong);
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  line-height: 1.05;
}

.gp-bundle__desc {
  margin: 0;
  color: var(--gp-tier-body);
  font-size: 1rem;
  line-height: 1.6;
}

.gp-bundle__price .gp-tier__amount {
  font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3rem);
}

.gp-bundle__cta.gp-btn {
  align-self: flex-start;
}/* Two-up detail columns inside the bundle at wider widths. */
.gp-bundle__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

@media (min-width: 600px) {
  .gp-bundle__details {
    grid-template-columns: 1fr 1fr;
  }
}

.gp-bundle__details .gp-tier__label:first-child {
  border-top: 0;
  padding-top: 0;
}/* --- Closing trust line ------------------------------------------------ */
.gp-pricing-trust {
  padding: clamp(3rem, 2.5rem + 2vw, 5rem) 15px clamp(1.5rem, 1rem + 1vw, 2.5rem);
  text-align: center;
  background-color: var(--gp-bg);
}

.gp-pricing-trust__line {
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--gp-font-display);
  color: var(--gp-text-strong);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.2;
}/* Logo marquee optical normalization: the placeholder logo SVGs ship with
   different native heights (five are 48px tall, ACOUNTY is a tightly-cropped
   ~21px wordmark). Forcing them all to one box height blows ACOUNTY up ~1.4x,
   so it reads far larger. Trim it back to the others' optical cap height. */
.gp-s-logos .logo-wrap img[src*="ACOUNTY"] {
  height: 20px;
}/* Ensure every Playfair (display) heading on the pricing page renders italic,
   matching the rest of the site (h2-secondary / h3-secondary are Playfair italic). */
.gp-pricing__title,
.gp-tier__name,
.gp-tier__amount,
.gp-bundle__name,
.gp-bundle__amount,
.gp-bundle__lead,
.gp-pricing__outro {
  font-style: italic;
}/* Tier subgrid (desktop). Placed at the end of the pricing block, after the
   base `.gp-tier { display: flex }` rule, so these declarations win on source
   order. Each card spans all ten parent rows and adopts them as its own
   subgrid, so every section label, divider and CTA lands on the same
   horizontal line across all four columns regardless of how many bullet lines
   a card carries. Vertical rhythm stays margin-driven (labels, price, CTA). */
@media (min-width: 1180px) {
  .gp-tier {
    grid-row: 1 / span 10;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}/* Closing trust line ("We build the revenue engine…"): match the rest of the
   site (Playfair italic), not upright. */
.gp-pricing-trust__line {
  font-style: italic;
}/* Timeline "After Day 90": round the right (flowchart) card the same as the
   left text card so both share the CTA-card radius. */
.gp-s-timeline .timeline-neo_image-box {
  border-radius: var(--tl-radius, 20px);
}/* Header: center the nav links in the full header, and a minimal +0.1rem. */
.nav-link,
.nav-item-title {
  font-size: 1.1rem;
}
@media screen and (min-width: 992px) {/* Keep the header pinned on desktop too. The nav-menu centering below is
     absolute-positioned against .navbar, which works whether it is fixed or
     relative, so this does not affect the centered links. */
  .navbar { position: fixed; }
  .nav-menu-wrapper .nav-menu {
    margin-left: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}/* FAQ: much more breathing room above "The most common questions" so it is
   clearly separated from the lime timeline box above it. */
.gp-s-faq {
  padding-top: clamp(7rem, 5rem + 6vw, 13rem) !important;
}/* The hero content column is a flex list ordered with `order`; the old subscribe
   form sat at the bottom. Its replacement defaults to order:0 and jumped above
   the heading, so restore it below the heading and copy as the hero CTA. */
.gp-s-hero form.gp-newsletter {
  order: 3;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}/* Header: the scrolled navbar keeps a near-black backing in both themes, which
   hides the dark nav links in light mode. Give it a light backing and make the
   links + dropdown carets dark. */
[data-theme="light"] .navbar {
  background: rgba(240, 255, 211, 0.9) !important;
}
[data-theme="light"] .nav-link,
[data-theme="light"] .nav-item-title,
[data-theme="light"] .nav-dropdown-icon,
[data-theme="light"] .w-icon-dropdown-toggle {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}/* Newsletter / book-a-call block: make it a dark island on the light page. */
[data-theme="light"] .gp-newsletter {
  background: #003223 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="light"] .gp-newsletter__input {
  color: #f0ffd3 !important;
  -webkit-text-fill-color: #f0ffd3 !important;
  background: transparent !important;
}
[data-theme="light"] .gp-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}/* Challenge index numbers were white → invisible on the light card. */
[data-theme="light"] .gp-s-challenges .number {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}/* Every primary button (View More / Book a call / Book a GTM audit …) had its
   label flip to the orange fill color, so the text disappeared. Force a white
   label + arrow on the orange pill (header CTA and cal.com button unaffected). */
[data-theme="light"] .primary-button,
[data-theme="light"] .primary-button * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}/* Flywheel accordion titles/numbers were white / faint lime. */
[data-theme="light"] .gp-fly__name {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
[data-theme="light"] .gp-fly__item.is-open .gp-fly__name {
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}
[data-theme="light"] .gp-fly__num {
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}/* GTM Audit card: dark island in light mode (Tim's request). */
[data-theme="light"] .gp-audit {
  background: #003223 !important;
}
[data-theme="light"] .gp-audit__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
[data-theme="light"] .gp-audit__lead {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="light"] .gp-audit__list li,
[data-theme="light"] .gp-audit__list li span {
  color: #f0ffd3 !important;
  -webkit-text-fill-color: #f0ffd3 !important;
}
[data-theme="light"] .gp-audit__corner { border-color: rgba(255, 255, 255, 0.28) !important; }/* Comparison matrix text was white → invisible on the light page. */
[data-theme="light"] .gp-cmp__cell--rowlabel,
[data-theme="light"] .gp-cmp__cell--head,
[data-theme="light"] .gp-cmp__cell--us {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
[data-theme="light"] .gp-cmp__cell--rowlabel.gp-cmp__cell--head {
  color: rgba(0, 0, 0, 0.45) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important;
}
[data-theme="light"] .gp-cmp__q {
  color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .gp-cmp__cell { border-bottom-color: rgba(0, 0, 0, 0.1) !important; }
[data-theme="light"] .gp-cmp__thumb--down { color: rgba(0, 0, 0, 0.32) !important; }/* CTA heading should sit on one line. */
.gp-s-cta .form-title { white-space: nowrap; }
@media (max-width: 640px) { .gp-s-cta .form-title { white-space: normal; } }/* Case-study spotlight card stays dark in both themes; its copy used the light
   token and vanished on the dark card. Restore light text (the tabs sit on a
   light bar and stay dark). */
[data-theme="light"] .gp-cases__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
[data-theme="light"] .gp-cases__brand,
[data-theme="light"] .gp-cases__result,
[data-theme="light"] .gp-cases__author-name {
  color: #f0ffd3 !important;
  -webkit-text-fill-color: #f0ffd3 !important;
}
[data-theme="light"] .gp-cases__list,
[data-theme="light"] .gp-cases__quote,
[data-theme="light"] .gp-cases__intro {
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}
[data-theme="light"] .gp-cases__label,
[data-theme="light"] .gp-cases__detail,
[data-theme="light"] .gp-cases__author-role {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}/* Counters infinity: green edges in light mode (was orange). */
[data-theme="light"] .gp-s-counters .statistic-small-numb.stroke {
  -webkit-text-stroke-color: var(--gp-lime-deep) !important;
  color: var(--gp-lime-deep) !important;
}/* Button beam ring: the pale-cream beam only reads on the dark page. In light
   mode swap it for a saturated copper beam (like the cal.com button) plus a
   soft copper halo so the ring is visible on the light background. */
[data-theme="light"] .gp-btn::after,
[data-theme="light"] .primary-button::after,
[data-theme="light"] .secondary-button-big::after,
[data-theme="light"] .secondary-button-small::after {
  background: conic-gradient(
    from var(--gp-beam),
    rgba(150, 78, 38, 0) 0deg,
    rgba(150, 78, 38, 0) 24deg,
    rgba(196, 104, 52, 0.75) 40deg,
    rgba(120, 62, 30, 0.98) 55deg,
    rgba(196, 104, 52, 0.75) 70deg,
    rgba(150, 78, 38, 0) 88deg,
    rgba(150, 78, 38, 0) 204deg,
    rgba(196, 104, 52, 0.75) 220deg,
    rgba(120, 62, 30, 0.98) 235deg,
    rgba(196, 104, 52, 0.75) 250deg,
    rgba(150, 78, 38, 0) 268deg,
    rgba(150, 78, 38, 0) 360deg
  ) !important;
}
[data-theme="light"] .gp-btn,
[data-theme="light"] .primary-button,
[data-theme="light"] .secondary-button-big,
[data-theme="light"] .secondary-button-small {
  box-shadow: 0 8px 26px rgba(176, 88, 40, 0.28), 0 0 0 1px rgba(176, 88, 40, 0.18) !important;
}/* Flywheel accordion chevrons were white → invisible on the light page. */
[data-theme="light"] .gp-fly__chev {
  border-right-color: rgba(0, 50, 35, 0.55) !important;
  border-bottom-color: rgba(0, 50, 35, 0.55) !important;
}
[data-theme="light"] .gp-fly__item.is-open .gp-fly__chev {
  border-right-color: #003223 !important;
  border-bottom-color: #003223 !important;
}/* All bracket eyebrows stay orange in light mode (they used the green accent). */
[data-theme="light"] .section-subtitle {
  color: var(--gp-cta) !important;
  -webkit-text-fill-color: var(--gp-cta) !important;
}/* Success-story section heading ("Listen to our Forward-Thinking Clients") sat
   on the light page but stayed white — force it dark. */
[data-theme="light"] .gp-cases__intro h2 {
  color: var(--gp-text-strong) !important;
  -webkit-text-fill-color: var(--gp-text-strong) !important;
}/* Case-study active tab should read lime in light mode. */
[data-theme="light"] .gp-cases__tab[aria-selected="true"] {
  background: var(--gp-lime) !important;
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}
[data-theme="light"] .gp-cases__tab[aria-selected="true"] .gp-cases__tab-dot {
  background: #003223 !important;
}/* Hero body copy should run the full width of the heading, not the narrow
   text column. (Theme-agnostic.) */
.gp-s-hero .banner-text p { max-width: none !important; }/* Partner logos: replace the filled green tiles with four corner brackets.
   Colour follows theme — dark green in light, lime in dark. Eight thin bars
   (two per corner) drawn as background gradients form the L-brackets. */
.gp-s-partners .client-wrapper {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gp-border);
  border-radius: 0 !important;
}
[data-theme="dark"] .gp-s-partners .client-wrapper { background-color: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .gp-s-partners .client-wrapper { background-color: rgba(0, 0, 0, 0.03); }/* FAQ dropdown chevrons were white → invisible on the light page. */
[data-theme="light"] .gp-s-faq .accordion-icon {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: #000000 !important;
}/* ==========================================================================
   Tool detail template (.gp-tool)

   Reusable layout for /tools/<name> directory pages. Two columns on desktop
   (main + ~340px sidebar), single column on tablet/mobile. Plan cards live in
   a self-contained horizontal scroller so nothing forces page-level overflow.
   All motion stays on transform/opacity. Check glyphs are inline data-URI SVGs.
   ========================================================================== */

.gp-tool__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}/* Breadcrumb ------------------------------------------------------------- */
.gp-tool__crumbs {
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.gp-tool__crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
}

.gp-tool__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gp-tool__crumbs li + li::before {
  content: "/";
  color: var(--gp-border);
}

.gp-tool__crumbs a {
  color: var(--gp-text-muted);
  text-decoration: none;
  transition: color var(--gp-duration-fast) var(--gp-ease);
}

.gp-tool__crumbs a:hover {
  color: var(--gp-accent);
}

.gp-tool__crumbs [aria-current="page"] {
  color: var(--gp-text-strong);
}/* Two-column layout ------------------------------------------------------ */
.gp-tool__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: start;
}

.gp-tool__main {
  min-width: 0;
}

@media (min-width: 960px) {
  .gp-tool__layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .gp-tool__sidebar {
    position: sticky;
    top: 96px;
  }
}/* Hero header ------------------------------------------------------------ */
.gp-tool__hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
  padding-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  border-bottom: 1px solid var(--gp-border);
}

.gp-tool__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 0;
  background: linear-gradient(150deg, var(--gp-orange), var(--gp-orange-hover));
  color: #fff;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--gp-orange) 60%, transparent);
}

.gp-tool__heroText {
  min-width: 0;
  flex: 1 1 260px;
}

.gp-tool__title {
  margin: 0;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--gp-text-strong);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
}

.gp-tool__tagline {
  margin: 0.5rem 0 0;
  max-width: 52ch;
  color: var(--gp-text-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.5;
}

.gp-tool__visit {
  margin-top: 1.25rem;
}/* Category / chips ------------------------------------------------------- */
.gp-tool__tags {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
}

.gp-tool__tag {
  display: inline-flex;
  width: auto;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-pill);
  background-color: color-mix(in srgb, var(--gp-accent) 8%, transparent);
  color: var(--gp-text);
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}/* Content blocks --------------------------------------------------------- */
.gp-tool__block + .gp-tool__block {
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
}

.gp-tool__h2 {
  margin: 0 0 1.1rem;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--gp-text-strong);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);
}

.gp-tool__p {
  margin: 0 0 0.9rem;
  max-width: 68ch;
  color: var(--gp-tier-body);
  font-size: 1rem;
  line-height: 1.6;
}

.gp-tool__p:last-child {
  margin-bottom: 0;
}

.gp-tool__fineprint {
  margin: 1rem 0 0;
  color: var(--gp-text-muted);
  font-size: 0.78rem;
  font-style: italic;
}/* Key features checklist (two columns) ----------------------------------- */
.gp-tool__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.75rem;
}

@media (min-width: 560px) {
  .gp-tool__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gp-tool__features li,
.gp-tool__checks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--gp-tier-body);
  font-size: 0.95rem;
  line-height: 1.45;
}

.gp-tool__features li::before,
.gp-tool__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--gp-accent) 22%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0db58' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.72rem;
}/* Plan cards (horizontal scroller) --------------------------------------- */
.gp-tool__plans {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.75rem;
  /* Contain the scroll so narrow viewports never push the page sideways. */
  margin-inline: 0;
  scrollbar-width: thin;
}

.gp-tool__plan {
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  background-color: var(--gp-bg-raised);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  transition: transform var(--gp-duration) var(--gp-ease),
              border-color var(--gp-duration) var(--gp-ease);
}

.gp-tool__plan:hover {
  transform: translateY(-4px);
  border-color: var(--gp-accent);
}

.gp-tool__plan-name {
  margin: 0;
  font-family: var(--gp-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

.gp-tool__plan-price {
  margin: 0.55rem 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gp-tool__plan-amount {
  font-family: var(--gp-font-display);
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--gp-text-strong);
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.15rem);
  line-height: 1;
}

.gp-tool__plan-per {
  color: var(--gp-text-muted);
  font-size: 0.78rem;
}

.gp-tool__plan-list {
  list-style: none;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gp-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gp-tool__plan-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--gp-tier-body);
  font-size: 0.85rem;
  line-height: 1.4;
}

.gp-tool__plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--gp-accent) 20%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0db58' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.6rem;
}/* Alternatives ----------------------------------------------------------- */
.gp-tool__alts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem);
}

@media (min-width: 560px) {
  .gp-tool__alts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gp-tool__alt {
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  background-color: var(--gp-bg-raised);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  transition: transform var(--gp-duration) var(--gp-ease),
              border-color var(--gp-duration) var(--gp-ease);
}

.gp-tool__alt:hover {
  transform: translateY(-4px);
  border-color: var(--gp-accent);
}

.gp-tool__alt-name {
  margin: 0 0 0.4rem;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--gp-text-strong);
  font-size: 1.25rem;
  line-height: 1.1;
}

.gp-tool__alt-desc {
  margin: 0 0 0.9rem;
  color: var(--gp-tier-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

.gp-tool__alt .gp-tool__tags {
  margin-top: 0;
}/* Sidebar cards ---------------------------------------------------------- */
.gp-tool__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.gp-tool__card {
  padding: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
  background-color: var(--gp-bg-raised);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
}

.gp-tool__card-title {
  margin: 0 0 0.9rem;
  font-family: var(--gp-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

.gp-tool__card-title--sep {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gp-border);
}

.gp-tool__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gp-tool__side-btn {
  justify-content: center;
  width: 100%;
}/* Dark GTM Pulse promo card — always dark so it reads as the flagship CTA
   in both themes and layers above the raised surfaces around it. */
.gp-tool__promo {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-radius: var(--gp-radius-card);
  border: 1px solid color-mix(in srgb, var(--gp-lime) 30%, transparent);
  color: var(--gp-lime-pale);
  background:
    radial-gradient(130% 130% at 100% 0%,
      color-mix(in srgb, var(--gp-lime) 18%, transparent) 0%,
      transparent 55%),
    var(--gp-ink);
}

.gp-tool__promo-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--gp-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-lime);
}

.gp-tool__promo-title {
  margin: 0 0 0.7rem;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

.gp-tool__promo-body {
  margin: 0 0 1.25rem;
  color: color-mix(in srgb, var(--gp-lime-pale) 82%, transparent);
  font-size: 0.92rem;
  line-height: 1.55;
}

.gp-tool__promo-cta {
  justify-content: center;
  width: 100%;
}/* Pricing mini-summary --------------------------------------------------- */
.gp-tool__meta {
  margin: 0;
}

.gp-tool__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--gp-border);
}

.gp-tool__meta-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.gp-tool__meta dt {
  color: var(--gp-text-muted);
  font-size: 0.82rem;
}

.gp-tool__meta dd {
  margin: 0;
  text-align: right;
  color: var(--gp-text-strong);
  font-size: 0.82rem;
  font-weight: 500;
}/* ======================================================================== */
.gp-tools-dir__section {
  padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.gp-tools-dir__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2rem);
}/* Hero ------------------------------------------------------------------- */
.gp-tools-dir__hero {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

.gp-tools-dir__eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--gp-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

.gp-tools-dir__title {
  margin: 0;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--gp-text-strong);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
}

.gp-tools-dir__intro {
  margin: 1.1rem 0 0;
  max-width: 58ch;
  color: var(--gp-text-muted);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.55;
}/* Filter chips ----------------------------------------------------------- */
.gp-tools-dir__filters {
  display: flex;
  flex-flow: row wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

.gp-tools-dir__chip {
  appearance: none;
  cursor: pointer;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-pill);
  background: transparent;
  color: var(--gp-text);
  font-family: var(--gp-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--duration-fast, 150ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gp-tools-dir__chip:hover,
.gp-tools-dir__chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gp-accent);
  background-color: color-mix(in srgb, var(--gp-accent) 12%, transparent);
  outline: none;
}

.gp-tools-dir__chip--active {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: var(--gp-on-accent);
  font-weight: 600;
}

.gp-tools-dir__chip--active:hover,
.gp-tools-dir__chip--active:focus-visible {
  background: var(--gp-accent);
  color: var(--gp-on-accent);
}/* Grid ------------------------------------------------------------------- */
.gp-tools-dir__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
}

.gp-tools-dir__grid > li {
  min-width: 0;
  display: flex;
}/* Card ------------------------------------------------------------------- */
.gp-tools-card {
  position: relative;
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 1.4rem;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  background: var(--gp-bg-raised);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              border-color 220ms ease, box-shadow 220ms ease;
}

.gp-tools-card:hover,
.gp-tools-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gp-accent) 55%, var(--gp-border));
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--gp-ink) 75%, transparent);
  outline: none;
}

.gp-tools-card__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 0;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gp-ink);
}

.gp-tools-card__logo--lime {
  background: linear-gradient(150deg, var(--gp-lime), var(--gp-lime-deep));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--gp-lime) 70%, transparent);
}

.gp-tools-card__logo--orange {
  background: linear-gradient(150deg, var(--gp-orange), var(--gp-orange-hover));
  color: #fff;
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--gp-orange) 65%, transparent);
}

.gp-tools-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gp-tools-card__name {
  font-family: var(--gp-font-body);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gp-text-strong);
}

.gp-tools-card__desc {
  color: var(--gp-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.gp-tools-card__tags {
  display: flex;
  flex-flow: row wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.gp-tools-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.66rem;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-pill);
  background-color: color-mix(in srgb, var(--gp-accent) 8%, transparent);
  color: var(--gp-text);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.gp-tools-card__arrow {
  position: absolute;
  top: 1.15rem;
  right: 1.2rem;
  color: var(--gp-text-muted);
  font-size: 1rem;
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              color 220ms ease;
}

.gp-tools-card:hover .gp-tools-card__arrow,
.gp-tools-card:focus-visible .gp-tools-card__arrow {
  transform: translate(3px, -3px);
  color: var(--gp-accent);
}/* Closing CTA ------------------------------------------------------------ */
.gp-tools-dir__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-card);
  background: color-mix(in srgb, var(--gp-accent) 6%, var(--gp-bg-raised));
}

.gp-tools-dir__cta-text {
  min-width: 0;
  flex: 1 1 320px;
}

.gp-tools-dir__cta-title {
  margin: 0;
  font-family: var(--gp-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--gp-text-strong);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}

.gp-tools-dir__cta-desc {
  margin: 0.6rem 0 0;
  max-width: 52ch;
  color: var(--gp-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}/* Responsive ------------------------------------------------------------- */
@media (max-width: 991px) {
  .gp-tools-dir__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .gp-tools-dir__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}/* Tools directory + tool cards: FlyHead's global `ul { -webkit-text-fill-color:
   transparent; background-clip:text }` gradient-text rule is inherited here and
   makes card names/descriptions/tags invisible. Restore solid text throughout. */
.gp-tools-dir,
.gp-tools-dir *,
.gp-tools-card,
.gp-tools-card * {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}/* Tool detail page: same FlyHead global-`ul` transparent-text-fill trap makes
   the tag/feature/alternative list items invisible. Restore solid text. */
.gp-tool,
.gp-tool *,
.gp-tool li {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}/* ==========================================================================
   Persistent floating CTA

   Behaviour and layout ported 1:1 from Frontal.so's sticky-cta: fixed to the
   bottom-right on desktop, a full-width bar under 480px (respecting the iOS
   safe-area inset), revealed by gtm-pulse.js after ~90vh of scroll and hidden
   near the footer. The button itself is GTM Pulse's own orange CTA.
   ========================================================================== */
.gp-sticky-cta {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: max(clamp(16px, 4vw, 28px), env(safe-area-inset-bottom));
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.gp-sticky-cta.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}/* Lift it off the page so it reads as floating, matching the Frontal shadow. */
.gp-sticky-cta .gp-btn--cta {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  .gp-sticky-cta {
    left: 16px;
    right: 16px;
    max-width: calc(100vw - 32px);
  }
  .gp-sticky-cta .gp-btn--cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-sticky-cta {
    transition: none;
  }
}/* ==========================================================================
   Case studies — tabbed testimonial card

   Layout and interaction modelled on the YOYABA case-study widget: a segmented
   tab bar over a stacked card, split into a quote panel (left) and a
   challenges/results detail panel (right) with a circular CTA. Rebuilt in the
   GTM Pulse palette — lime accents, orange CTA. Content is placeholder demo
   copy on the template's fictional brands; swap in real case studies.
   ========================================================================== */
.gp-cases {
  padding-top: clamp(3rem, 2rem + 5vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 5vw, 7rem);
  background-color: var(--gp-bg);
}

.gp-cases__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.gp-cases__intro {
  text-align: center;
  margin-bottom: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.gp-cases__intro h2 {
  margin-top: 0.5rem;
}/* --- segmented tab bar --- */
.gp-cases__tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(1.5rem, 1rem + 3vw, 3rem);
  padding: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gp-heading) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gp-heading) 12%, transparent);
  overflow-x: auto;
}

.gp-cases__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: color-mix(in srgb, var(--gp-text) 55%, transparent);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.gp-cases__tab:hover {
  color: var(--gp-text);
}

.gp-cases__tab[aria-selected="true"] {
  color: var(--gp-heading);
  background: color-mix(in srgb, var(--gp-ink) 60%, transparent);
  border-color: color-mix(in srgb, var(--gp-lime) 55%, transparent);
}

.gp-cases__tab-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}/* --- stage + stacked-card depth --- */
.gp-cases__stage {
  position: relative;
  min-height: 460px;
  transition: height 0.45s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.gp-cases__stage::before,
.gp-cases__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--gp-ink) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gp-heading) 8%, transparent);
}

.gp-cases__stage::before {
  transform: translateY(-14px) scale(0.965);
  opacity: 0.6;
}

.gp-cases__stage::after {
  transform: translateY(-27px) scale(0.93);
  opacity: 0.35;
}/* --- front card --- */
.gp-cases__card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(-16px) scale(0.955);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.45s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: 0;
  background: color-mix(in srgb, var(--gp-ink) 92%, black);
  border: 1px solid color-mix(in srgb, var(--gp-heading) 12%, transparent);
}

.gp-cases__card.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gp-cases__stage,
  .gp-cases__card {
    transition: none;
  }
}/* left quote panel */
.gp-cases__quotewrap {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: 0;
  background: color-mix(in srgb, var(--gp-heading) 5%, transparent);
}

.gp-cases__brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gp-heading);
  letter-spacing: -0.01em;
}

.gp-cases__quote {
  margin-top: auto;
  padding-top: 2rem;
  /* Match the site's body/testimonial type — the global blockquote rule
     otherwise pulls this into Playfair Display, which reads foreign here. */
  font-family: var(--gp-font-body);
  font-weight: 400;
  color: var(--gp-text);
  font-size: 1.05rem;
  line-height: 1.6;
}

.gp-cases__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.gp-cases__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gp-ink);
  background: var(--gp-lime);
}

.gp-cases__author-name {
  font-weight: 700;
  color: var(--gp-heading);
}

.gp-cases__author-role {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--gp-text) 60%, transparent);
}/* right detail panel */
.gp-cases__detail {
  display: flex;
  flex-direction: column;
}

.gp-cases__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--gp-heading);
  font-weight: 700;
}

.gp-cases__accent {
  color: var(--gp-lime);
}

.gp-cases__label {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gp-text) 55%, transparent);
}

.gp-cases__list {
  margin-top: 0.75rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
}

.gp-cases__list li {
  color: var(--gp-text);
  line-height: 1.5;
}

.gp-cases__divider {
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--gp-heading) 12%, transparent);
}

.gp-cases__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.gp-cases__result strong {
  display: block;
  font-size: 1.2rem;
  color: var(--gp-lime);
  font-weight: 700;
}

.gp-cases__result span {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--gp-text) 65%, transparent);
}

.gp-cases__go {
  align-self: flex-end;
  margin-top: 1.75rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--gp-ink);
  background: var(--gp-cta);
  transition: transform 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.gp-cases__go:hover {
  transform: translateY(-2px) rotate(8deg);
}

@media (max-width: 860px) {
  .gp-cases__card {
    grid-template-columns: 1fr;
  }
  .gp-cases__results {
    grid-template-columns: 1fr;
  }
  .gp-cases__stage::before {
    transform: translateY(-10px) scale(0.97);
  }
  .gp-cases__stage::after {
    transform: translateY(-20px) scale(0.94);
  }
}/* ==========================================================================
   Partner / tool logos in the scrolling strip

   Monochrome lockups (mark + wordmark) on the lime band, replacing the demo
   brand images. Marks are normalised to the band's ink colour so the row reads
   as one system regardless of each brand's own palette.
   ========================================================================== */
.gp-s-logos .gp-logos-track {
  align-items: center;
}

.gp-partner {
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(1.75rem, 4vw, 3.5rem);
  flex: none;
}/* Real partner badges already carry their wordmark; show them at one uniform
   height so the row reads as a consistent logo wall. */
.gp-partner__logo {
  height: 40px;
  width: auto;
  display: block;
}/* The multi-line "Partner" badges (HubSpot, Pipedrive, Claude, Salesforce) read
   optically smaller than the single-word marks at a shared height, so size those
   four up in both the scrolling strip and the logo cards to balance the row. */
.gp-s-logos .logo-wrap img[src*="hubspot"],
.gp-s-logos .logo-wrap img[src*="pipedrive"],
.gp-s-logos .logo-wrap img[src*="claude"],
.gp-s-logos .logo-wrap img[src*="salesforce"] {
  height: 46px;
  max-height: 46px;
}/* Pricing page: the logo strip sits between the page head and the tier grid.
   Give it real vertical breathing room so it never crowds the tier titles below. */
.gp-pricing .gp-s-logos {
  margin-top: clamp(2.5rem, 2rem + 3vw, 5rem) !important;
  margin-bottom: clamp(3.5rem, 2.5rem + 5vw, 7rem) !important;
}
.gp-pricing .gp-pricing__grid {
  margin-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}/* Client logo wall: flatten every mark to solid black at one shared height, then
   soften with opacity, so mixed-colour logos (STIHL orange, i40 dots) read as a
   single consistent, uniform row rather than a jumble of brand colours. */
.gp-s-logos .logo-wrap img,
.gp-s-logos .gp-partner__logo {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  filter: brightness(0) saturate(0);
  opacity: 0.68;
}

.gp-s-partners .customer-image[src*="hubspot"],
.gp-s-partners .customer-image[src*="pipedrive"],
.gp-s-partners .customer-image[src*="claude"],
.gp-s-partners .customer-image[src*="salesforce"] {
  height: 60px;
  max-height: 60px;
}/* ==========================================================================
   Button beam ring

   A light that orbits the button border, in the spirit of the Frontal.so CTA
   treatment. Built as a rotating conic-gradient masked to the border ring, so
   a bright arc travels around every button. No JS, degrades on reduced motion.
   ========================================================================== */
@property --gp-beam {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gp-btn,
.primary-button,
.secondary-button-big,
.secondary-button-small {
  position: relative;
  isolation: isolate;
}

.gp-btn::after,
.primary-button::after,
.secondary-button-big::after,
.secondary-button-small::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  /* Two warm beams, 180deg apart, orbiting together (Frontal uses two glints). */
  background: conic-gradient(
    from var(--gp-beam),
    rgba(255, 224, 196, 0) 0deg,
    rgba(255, 224, 196, 0) 24deg,
    rgba(255, 206, 165, 0.5) 40deg,
    rgba(255, 244, 232, 0.98) 55deg,
    rgba(255, 206, 165, 0.5) 70deg,
    rgba(255, 224, 196, 0) 88deg,
    rgba(255, 224, 196, 0) 204deg,
    rgba(255, 206, 165, 0.5) 220deg,
    rgba(255, 244, 232, 0.98) 235deg,
    rgba(255, 206, 165, 0.5) 250deg,
    rgba(255, 224, 196, 0) 268deg,
    rgba(255, 224, 196, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gp-beam-spin 3.2s linear infinite;
}

@keyframes gp-beam-spin {
  to {
    --gp-beam: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-btn::after,
  .primary-button::after,
  .secondary-button-big::after,
  .secondary-button-small::after {
    animation: none;
    opacity: 0;
  }
}/* Header CTA sized down 12% so it sits lighter in the nav. */
.gp-cta-holder .gp-btn--cta {
  transform: scale(0.88);
  transform-origin: center;
}/* ==========================================================================
   Section eyebrows — bracketed mono label

   Modelled on the ColdIQ eyebrow: Martian Mono, uppercase, orange, wrapped in
   [ ]. Every section subtitle becomes a "[ WHAT THIS IS ]" kicker.
   ========================================================================== */
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian/martian-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian/martian-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.section-subtitle {
  font-family: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fe5a1f;
}

.section-subtitle::before {
  content: "[ ";
}
.section-subtitle::after {
  content: " ]";
}/* Partner logo cards (customers-grid): the demo images baked the brand name
   into the artwork; our marks are icon-only, so surface the name as dark text
   under the mark to keep the mark + wordmark lockup on the lime cards. */
.gp-s-partners .customer-image {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}/* The real logo carries the brand name, so the separate caption is redundant. */
.gp-s-partners .customer-title {
  display: none;
}

@keyframes gp-flow-node-in {
  to {
    opacity: 1;
    transform: none;
  }
}/* The service-row numbers ("01.") are .section-subtitle too — keep them as plain
   numbers, not bracketed eyebrows. */
.section-subtitle.mobile-hide::before,
.section-subtitle.mobile-hide::after {
  content: none;
}
.section-subtitle.mobile-hide {
  font-family: var(--gp-font-body);
  text-transform: none;
  letter-spacing: normal;
  color: rgba(240, 255, 211, 0.45);
  font-size: 1rem;
}

.gp-services-head {
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}/* Single-field subscribe / book rows in the ColdIQ style: cream field, thin
   border, sharp corners, attached solid-orange button. (Only these single
   email+button rows, not the multi-field contact forms.) */
.gp-newsletter,
.gp-field-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #dae0dc;
  background: #f0ffd3;
  border-radius: 0;
  max-width: 560px;
  overflow: hidden;
}

.gp-newsletter__input,
.gp-field-shell .input,
.gp-field-shell .w-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.95rem 1.1rem;
  color: #003223;
  font-family: var(--gp-font-body);
  box-shadow: none;
}

.gp-newsletter__input::placeholder,
.gp-field-shell .input::placeholder,
.gp-field-shell .w-input::placeholder {
  color: var(--gp-text-muted);
  opacity: 1;
}

.gp-newsletter__submit,
.gp-field-shell .primary-button,
.gp-field-shell .w-button {
  flex: none;
  border: 0;
  border-radius: 0;
  background: #fe5a1f;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0 1.5rem;
  cursor: pointer;
}

.gp-newsletter__submit::after,
.gp-field-shell .primary-button::after,
.gp-field-shell .w-button::after {
  display: none;
}/* cal.com inline embed: full width so the month_view lays out horizontally
   (event details left, calendar right) instead of stacking vertically. */
.gp-s-cta .form-wrapper,
.gp-s-cta .form-block-contacts,
.gp-s-cta .w-form {
  max-width: none !important;
  width: 100% !important;
}
#my-cal-inline-gtmpulse {
  width: 100% !important;
  min-width: 0;
  margin-top: 1.5rem;
}/* Remove the glassmorphism blur circle and the diamond that overlapped the
   headings. */
.glass,
.romb,
.romb-wrap {
  display: none !important;
}/* Registered globally so the cal.com floating-button beam (injected into its
   shadow root) can interpolate its rotating conic angle. */
@property --gpb {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}/* cal.com inline embed: strip the surrounding form frame completely. */
.gp-s-cta .form-block-contacts,
.gp-s-cta .form-wrapper,
.gp-s-cta .w-form {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}/* One tight frame hugging the cal.com embed: no white backing card, no forced
   min-height — a single border that wraps the embed. The cal widget sits flush
   at the top while its footer leaves space at the bottom, so add matching top
   padding to balance the space above the widget. */
#my-cal-inline-gtmpulse {
  border: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}/* Inter medium (500) vendored locally for the custom Why-Us / flywheel type. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}/* The template applies a lime gradient-text effect (background-clip:text +
   transparent text-fill) to list items; neutralise it so the comparison copy
   renders in its real color instead of showing the lime background through. *//* ==========================================================================
   Why-Us capability matrix (.gp-cmp)

   Dark comparison table: a highlighted "GTM Pulse" column (orange border, ✓ in
   every row) set against the usual alternatives, each marked with an em dash and
   a short caveat. Built as side-by-side flex columns so the highlighted column
   is one continuous bordered track. Copy is GTM Pulse's own.
   ========================================================================== */
.gp-cmp {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.gp-cmp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gp-cmp__table {
  display: flex;
  min-width: 940px;
  align-items: stretch;
}
.gp-cmp__track {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gp-cmp__track--labels {
  flex: 1.5 1 0;
}
.gp-cmp__track--us {
  border: 1.5px solid #fe5a1f;
  border-radius: 0;
  background: rgba(254, 90, 31, 0.06);
}
.gp-cmp__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  min-height: 96px;
  padding: 0.85rem 0.9rem;
  font-family: "Inter", sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gp-cmp__track--us .gp-cmp__cell { border-bottom-color: rgba(254, 90, 31, 0.16); }
.gp-cmp__track--us .gp-cmp__cell:last-child,
.gp-cmp__track .gp-cmp__cell:last-child { border-bottom: 0; }
.gp-cmp__cell--head {
  min-height: 118px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  gap: 0.5rem;
  flex-direction: row;
}
.gp-cmp__cell--rowlabel {
  align-items: flex-start;
  text-align: left;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  font-weight: 500;
  color: #f0ffd3;
}
.gp-cmp__cell--rowlabel.gp-cmp__cell--head { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.gp-cmp__cell--us { color: #fff; }
.gp-cmp__mark {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, #003223 0 32%, transparent 34%),
    #fe5a1f;
  flex: 0 0 auto;
}
.gp-cmp__thumb { flex: 0 0 auto; }
.gp-cmp__thumb--up { width: 25px; height: 25px; color: #fe5a1f; }
.gp-cmp__thumb--down { width: 21px; height: 21px; color: rgba(255, 255, 255, 0.3); margin-bottom: 0.1rem; }
.gp-cmp__q {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
}/* Neutralise the template's lime gradient-text effect leaking into the table. */
.gp-cmp__cell,
.gp-cmp__cell * {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}/* --------------------------------------------------------------------------
   Comparison matrix v2 — single CSS grid so every row stays locked in
   alignment across all viewports (the old flex-columns build let rows drift
   apart on mobile when labels wrapped). On narrow screens the grid keeps its
   min column widths and the .gp-cmp__scroll wrapper scrolls horizontally, so
   nothing squishes or distorts. The highlighted GTM Pulse column is a single
   band element spanning every row behind the cells.
   -------------------------------------------------------------------------- */
.gp-cmp2 {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(112px, 1fr));
  position: relative;
  min-width: 720px;
  align-items: stretch;
}
/* Highlighted GTM Pulse column: an orange-bordered band drawn directly on its
   own cells (left/right on every cell, top on the header, bottom on the last
   row) so it reads as one continuous box without a separate grid item. */
.gp-cmp2__us-head,
.gp-cmp2__us {
  background: rgba(254, 90, 31, 0.06);
  border-left: 1.5px solid #fe5a1f;
  border-right: 1.5px solid #fe5a1f;
}
.gp-cmp2__us-head {
  border-top: 1.5px solid #fe5a1f;
}
.gp-cmp2 > .gp-cmp2__us:last-of-type {
  border-bottom: 1.5px solid #fe5a1f !important;
}
.gp-cmp2__cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  min-height: 92px;
  padding: 0.85rem 0.9rem;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
  font-weight: 500;
  color: #f0ffd3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gp-cmp2__head {
  min-height: 112px;
  flex-direction: row;
  gap: 0.5rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
}
.gp-cmp2__corner {
  align-items: flex-start;
  text-align: left;
  min-height: 112px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.gp-cmp2__rowlabel {
  align-items: flex-start;
  text-align: left;
  color: #f0ffd3;
}
.gp-cmp2__us,
.gp-cmp2__us-head {
  color: #fff;
}/* Screen-reader-only text: crawlable + accessible, visually hidden. Used for the
   GTM Pulse column's per-row "yes" claims and off-screen section headings. */
.gp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}/* Testimonial role labels moved from <h6> to <p> for a correct heading outline;
   keep them tight so the card layout is unchanged. */
.testimonials-item p.dark.sb,
.testimonial-slide p.dark.sb {
  margin: 0;
}
/* Last row (final six cells) drops its divider. */
.gp-cmp2 > .gp-cmp2__cell:nth-last-child(-n + 6) {
  border-bottom: 0;
}
[data-theme="light"] .gp-cmp2__cell {
  color: #0b2a1e !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .gp-cmp2__corner,
[data-theme="light"] .gp-cmp2__head {
  color: rgba(0, 0, 0, 0.55) !important;
}
[data-theme="light"] .gp-cmp2__q,
[data-theme="light"] .gp-cmp2 .gp-cmp__q {
  color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .gp-cmp2 .gp-cmp__thumb--down {
  color: rgba(0, 0, 0, 0.3) !important;
}/* ==========================================================================
   GTM Audit card (.gp-audit)

   A white offer card on the dark page: bold black headline, a lead paragraph,
   a short green-check list and a black CTA that opens the cal booking. Thin
   L-brackets mark the four corners.
   ========================================================================== */
.gp-audit {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  color: #003223;
}
.gp-audit__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: #003223;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.gp-audit__lead {
  font-family: "Inter", sans-serif;
  color: var(--gp-text-muted);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  margin: 0 0 1.9rem;
  max-width: none;
}
.gp-audit__list {
  list-style: none;
  margin: 0 0 2.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gp-audit__list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  color: #003223;
  line-height: 1.4;
}
.gp-audit__ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #55f596;
  color: #003223;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.gp-audit__ic svg { width: 14px; height: 14px; }/* The audit CTA now uses the standard .primary-button look (orange + beam +
   arrow); .gp-audit__btn only positions it. */
.gp-audit__btn { align-self: flex-start; display: inline-flex !important; width: auto !important; }/* Breathing room between the section title and the audit card. */
.gp-s-unlock .gp-audit { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.gp-audit__corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.gp-audit__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.gp-audit__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.gp-audit__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.gp-audit__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }/* Tighter section spacing per feedback: challenges heading→cards a touch closer,
   and a much smaller gap between the solution line and "How GTM Pulse Helps". */
.gp-s-challenges .grid-3-column.mt-gap { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.gp-s-solution { padding-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.gp-s-services { padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); }/* Primary-button arrow: the template's .button-arrow span ships empty (a
   FontAwesome glyph that never loads), so the "View More" buttons showed no
   arrow. Render the same ↗ the header CTA uses, in Inter, so every primary
   button shows its arrow everywhere. */
.button-arrow {
  width: 0.95em !important;
  height: 0.95em !important;
  overflow: visible !important;
  display: inline-block !important;
  flex: 0 0 auto;
  transform: none !important; /* template rotates .button-arrow -45deg; cancel it */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2018%2018%206M10%206h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2018%2018%206M10%206h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.button-arrow::after { content: none !important; }/* ==========================================================================
   GTM Flywheel services (.gp-s-flywheel)

   A four-segment flywheel donut (Outbound / Content / CRM Reactivation / ABM
   Ads) circling a white "GTM Flywheel" hub, beside a serif accordion of the
   four services. A redesign kept alongside the earlier services map.
   ========================================================================== */
.gp-fly__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.gp-fly__svg { width: 100%; height: auto; max-width: 385px; display: block; margin: 0 auto; }
.gp-fly__acc { display: flex; flex-direction: column; }
.gp-fly__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.gp-fly__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.gp-fly__head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.7rem 0.25rem;
  text-align: left;
}
.gp-fly__label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.gp-fly__num {
  flex: 0 0 auto;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
  color: rgba(85, 245, 150, 0.75);
  -webkit-text-fill-color: rgba(85, 245, 150, 0.75);
}
.gp-fly__name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  color: #fff;
  -webkit-text-fill-color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.gp-fly__chev {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.55);
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  transition: transform .3s ease, border-color .25s ease;
  margin-top: -6px;
}
.gp-fly__item.is-open .gp-fly__chev { transform: rotate(-135deg); border-color: #55f596; margin-top: 5px; }
.gp-fly__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.gp-fly__item.is-open .gp-fly__body { grid-template-rows: 1fr; }
.gp-fly__inner { overflow: hidden; }
.gp-fly__item.is-open .gp-fly__inner { padding: 0.4rem 0 1.9rem; }
.gp-fly__desc {
  font-family: "Inter", sans-serif;
  color: #55f596;
  -webkit-text-fill-color: #55f596;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  margin: 0 0 1.6rem;
  max-width: 58ch;
}
.gp-fly__btn {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  align-self: flex-start;
}
@media (max-width: 900px) {
  .gp-fly__grid { grid-template-columns: 1fr; }
}/* Neutralise the template's lime gradient-text on the white card. */
.gp-audit__title,
.gp-audit__lead,
.gp-audit__list,
.gp-audit__list li,
.gp-audit__list li * ,
.gp-audit__btn {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}/* The template also paints a lime background on lists/items; clear it on the
   text elements (but keep the button's black fill and the icon's border). */
.gp-audit__title,
.gp-audit__lead,
.gp-audit__list,
.gp-audit__list li,
.gp-audit__list li span:last-child {
  background: transparent;
}/* The cal.com booking embed must always be visible. Its wrapper carries the
   .gp-reveal class, but the scroll-reveal is flaky for this large embed (it
   sometimes stays at opacity 0). The embed should never fade, so pin it fully
   visible regardless of reveal state. */
.gp-s-cta .form-wrapper.gp-reveal,
.gp-s-cta #my-cal-inline-gtmpulse {
  opacity: 1 !important;
  transform: none !important;
}


/* ==========================================================================
   Design-system overrides — new palette, Geist titles, square frames.
   Applied site-wide (this sheet loads last on every page).
   ========================================================================== */

/* Geist is the title face on every heading. */
h1, h2, h3, h4, h5, h6,
.home-2-title, .home-title,
.gp-pricing__title, .gp-pricing__eyebrow ~ .gp-pricing__title,
.gp-tier__name, .gp-tier__amount, .gp-bundle__name, .gp-bundle__amount,
.gp-pricing-trust__line, .gp-tool__title, .gp-tool__h2, .gp-tool__plan-amount,
.gp-tool__alt-name, .gp-tool__promo-title, .gp-tools-dir__title, .gp-tools-dir__cta-title,
.gp-fly__title, .gp-cmp__title, .gp-audit__title, .gp-cases__title,
.gp-3ways__heading, .gp-3ways__heading-rest, .gp-3ways__title, .gp-tools-card__name, .gp-footer__heading {
  font-family: var(--gp-font-title) !important;
  color: var(--gp-heading);
  -webkit-text-fill-color: var(--gp-heading);
}

/* Playfair Display italic stays the accent, for the emphasized word only. */
.span-italic, .gp-3ways__heading-accent, .gp-cases__accent, .gp-audit__accent {
  font-family: var(--gp-font-display) !important;
}

/* Square frames: no radii except the button pill, the cal.com widget and dots.
   :where() keeps specificity at 0 so component rules and the pill/circle win. */
:root { --tl-radius: 0; }
:where(.gp-fly, .gp-fly__wheel, .gp-cmp, .gp-cmp__col, .gp-audit, .gp-cases__card,
  .gp-3ways__visual, .gp-tier, .gp-bundle, .gp-tool__card, .gp-tool__plan,
  .gp-tools-dir__card, .surface-card, .feature-card, .timeline-neo_content, .timeline-neo_image-box,
  .faq-item, .accordion-item, .w-input, .w-select, textarea,
  .service-item-el, .service-card, .feature-item, .pricing-card, .team-card,
  .blog-card, .integration-card, .value-card, .step-card) {
  border-radius: 0;
}

/* Logo strip sits on the mint band in both themes. */
.gp-s-partners .primary-bg,
.gp-s-partners.primary-bg,
[data-theme="dark"] .gp-s-partners .primary-bg,
[data-theme="light"] .gp-s-partners .primary-bg {
  background-color: var(--gp-logo-strip) !important;
}


/* The template used the (overloaded) --paragraph-green as a background on the
   service cards; that var now carries body text, so give the cards a proper
   theme-aware raised surface instead of white. */
.service-item-el, .service-item-elem, .service-item-element {
  background-color: var(--gp-bg-raised) !important;
}


/* ==========================================================================
   Buttons — frontal.so treatment, applied 1:1: warm translucent glass, a
   hairline warm border, 10px radius, Geist 600, no beam, no box-shadow.
   (The cal.com floating button keeps its own shadow-DOM beam — untouched.)
   ========================================================================== */
.primary-button, .primary-button.w-button, .gp-btn, .gp-btn--cta, .gp-btn--ghost,
.secondary-button-big, .secondary-button-small, .gp-newsletter__submit,
.gp-tier__cta.gp-btn, .gp-bundle__cta.gp-btn {
  background: rgba(255, 90, 31, 0.14) !important;
  border: 1px solid rgba(255, 150, 110, 0.32) !important;
  color: rgb(255, 241, 233) !important;
  -webkit-text-fill-color: rgb(255, 241, 233) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--gp-font-title) !important;
  font-weight: 600 !important;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .25s, border-color .25s !important;
}
.primary-button:hover, .primary-button.w-button:hover, .gp-btn:hover, .gp-btn--cta:hover,
.gp-btn--ghost:hover, .secondary-button-big:hover, .secondary-button-small:hover,
.gp-newsletter__submit:hover, .gp-tier__cta.gp-btn:hover, .gp-bundle__cta.gp-btn:hover {
  background: rgba(255, 90, 31, 0.24) !important;
  border-color: rgba(255, 150, 110, 0.55) !important;
  transform: translateY(-1px);
}
/* button text/arrow inherits the button color, no gradient-text leak */
.primary-button *, .gp-btn *, .secondary-button-big *, .secondary-button-small * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
/* Kill the rotating beam ring and every copper box-shadow on the buttons. */
.gp-btn::after, .gp-btn::before,
.primary-button::after, .primary-button::before,
.secondary-button-big::after, .secondary-button-small::after,
[data-theme="light"] .gp-btn::after, [data-theme="light"] .primary-button::after,
[data-theme="light"] .secondary-button-big::after, [data-theme="light"] .secondary-button-small::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}
/* Light mode: dark warm text so the label reads on the pale glass. */
[data-theme="light"] .primary-button, [data-theme="light"] .primary-button.w-button,
[data-theme="light"] .gp-btn, [data-theme="light"] .gp-btn--cta, [data-theme="light"] .gp-btn--ghost,
[data-theme="light"] .secondary-button-big, [data-theme="light"] .secondary-button-small,
[data-theme="light"] .gp-newsletter__submit,
[data-theme="light"] .gp-tier__cta.gp-btn, [data-theme="light"] .gp-bundle__cta.gp-btn {
  background: rgba(255, 90, 31, 0.14) !important;
  border-color: rgba(255, 150, 110, 0.4) !important;
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
  box-shadow: none !important;
}


/* --- Feedback fixes --- */
/* Orange testimonial cards must never be orange (orange = buttons only) -> mint. */
.testimonials-item {
  background-color: #55f596 !important;
  background-image: none !important;
}
.testimonials-item, .testimonials-item * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.testimonials-item .stars-wrapper *, .testimonials-item [class*="star"] {
  color: #fe5a1f !important;   /* keep the star rating orange */
  -webkit-text-fill-color: #fe5a1f !important;
}

/* Flywheel accordion body copy -> body text colour (black light / white dark),
   not mint. */
.gp-fly__desc {
  color: var(--gp-text) !important;
  -webkit-text-fill-color: var(--gp-text) !important;
}

/* "vs the usual fixes" corner label -> neutral grey. */
.gp-cmp__cell--rowlabel.gp-cmp__cell--head {
  color: #9aa0a6 !important;
  -webkit-text-fill-color: #9aa0a6 !important;
}
[data-theme="light"] .gp-cmp__cell--rowlabel.gp-cmp__cell--head {
  color: #8a8f94 !important;
  -webkit-text-fill-color: #8a8f94 !important;
}


/* --- Timeline + audit blocks: match the design tokens (no loud mint slab, no
   off-token white title). --- */
:root { --tl-card: var(--gp-bg); }
.timeline-neo_content { background: var(--gp-bg) !important; }
.timeline-neo_title { color: var(--gp-heading) !important; -webkit-text-fill-color: var(--gp-heading) !important; }
.timeline-neo_content p, .timeline-neo_text, .timeline-neo_desc {
  color: var(--gp-text) !important; -webkit-text-fill-color: var(--gp-text) !important;
}
.gp-audit__title { color: var(--gp-heading) !important; -webkit-text-fill-color: var(--gp-heading) !important; }

/* Timeline right-hand visual panel: match the page instead of a bright mint slab. */
.timeline-neo_image-box { background: var(--gp-bg) !important; }


/* --- Case-study cards: subtle office/team photo in the left quote column only,
   with a deep-green overlay so it stays background texture and the copy on top
   stays readable. One image per story. --- */
.gp-cases__quotewrap {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.gp-cases__quotewrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 50, 35, 0.80), rgba(0, 50, 35, 0.90));
  z-index: 0;
  pointer-events: none;
}
.gp-cases__quotewrap > * { position: relative; z-index: 1; }
.gp-cases__card:nth-of-type(1) .gp-cases__quotewrap { background-image: url("/assets/img/6572e314d2227bc090195ca1_businesspeople-meeting-office-working%201-p-1080.webp"); }
.gp-cases__card:nth-of-type(2) .gp-cases__quotewrap { background-image: url("/assets/img/6572d9fa62b1465810b461ca_Team%20Member%203.webp"); }
.gp-cases__card:nth-of-type(3) .gp-cases__quotewrap { background-image: url("/assets/img/6572da7769649e5fc132153a_Team%20Member%202.webp"); }


/* --- Feedback batch 2 --- */
/* Hero + footer email fields: dark readable text on the pale input. */
.gp-newsletter__input, .gp-newsletter input, .coming-soon-form input, .gp-field-shell input {
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}
.gp-newsletter__input::placeholder, .gp-newsletter input::placeholder,
.coming-soon-form input::placeholder, .gp-field-shell input::placeholder {
  color: rgba(0, 50, 35, 0.55) !important;
  -webkit-text-fill-color: rgba(0, 50, 35, 0.55) !important;
  opacity: 1 !important;
}
/* Flywheel service names -> Playfair Display italic (the accent face). */
.gp-fly__name {
  font-family: var(--gp-font-display) !important;
  font-style: italic;
}
/* Flywheel accordion body: mint on dark (kept), black on light. */
.gp-fly__desc { color: #55f596 !important; -webkit-text-fill-color: #55f596 !important; }
[data-theme="light"] .gp-fly__desc { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
/* "Our solution" / flywheel section sits on the alt-section surface. */
.gp-s-flywheel { background: var(--gp-bg-raised) !important; }


/* ==========================================================================
   Feedback batch 3
   ========================================================================== */

/* Buttons — frontal.so 1:1: translucent warm glass + hairline light-peach
   border (that edge is what gives frontal its glow), warm-white label, 10px,
   no shadow, no beam. */
.primary-button, .primary-button.w-button, .gp-btn, .gp-btn--cta, .gp-btn--ghost,
.secondary-button-big, .secondary-button-small, .gp-tier__cta.gp-btn, .gp-bundle__cta.gp-btn {
  background: rgba(255, 90, 31, 0.14) !important;
  border: 1px solid rgba(255, 150, 110, 0.32) !important;
  color: rgb(255, 241, 233) !important;
  -webkit-text-fill-color: rgb(255, 241, 233) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.primary-button:hover, .primary-button.w-button:hover, .gp-btn:hover, .gp-btn--cta:hover,
.gp-btn--ghost:hover, .secondary-button-big:hover, .secondary-button-small:hover,
.gp-tier__cta.gp-btn:hover, .gp-bundle__cta.gp-btn:hover {
  background: rgba(255, 90, 31, 0.24) !important;
  border-color: rgba(255, 150, 110, 0.55) !important;
  transform: translateY(-1px);
}
/* Light page: dark label so the glass button still reads on cream. */
[data-theme="light"] .primary-button, [data-theme="light"] .primary-button.w-button,
[data-theme="light"] .gp-btn, [data-theme="light"] .gp-btn--cta, [data-theme="light"] .gp-btn--ghost,
[data-theme="light"] .secondary-button-big, [data-theme="light"] .secondary-button-small,
[data-theme="light"] .gp-tier__cta.gp-btn, [data-theme="light"] .gp-bundle__cta.gp-btn {
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}
/* The hero + footer submit sit on an inverted pale/dark field, so keep them a
   solid orange for guaranteed contrast. */
.gp-newsletter__submit {
  background: #fe5a1f !important;
  border: 1px solid #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 10px !important;
}
.gp-newsletter__submit:hover { background: #e04711 !important; border-color: #e04711 !important; }

/* Timeline cards -> solid grey (#DAE0DC) fill in BOTH themes, no green frame,
   dark text (the box is light, so light-mode rules apply inside it). */
:root { --tl-line: transparent; }
.timeline-neo_content, .timeline-neo_image-box {
  background: #dae0dc !important;
  border-color: transparent !important;
}
.timeline-neo_title { color: #003223 !important; -webkit-text-fill-color: #003223 !important; }
.timeline-neo_content p, .timeline-neo_text, .timeline-neo_desc {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}

/* Solution + flywheel share the alt-section surface from the eyebrow down
   (grey #DAE0DC on light, #00593C on dark). */
.gp-s-solution, .gp-s-flywheel { background: var(--gp-bg-raised) !important; }

/* Nav: transparent over the hero, gains a bg only after scroll (gp-flow.js
   toggles .gp-nav-scrolled). Logo adapts to deep green on the light page. */
.navbar.w-nav { background: transparent !important; transition: background .25s ease; }
.navbar.w-nav.gp-nav-scrolled { background: rgba(0, 50, 35, 0.92) !important; }
[data-theme="light"] .navbar.w-nav.gp-nav-scrolled { background: rgba(246, 250, 238, 0.92) !important; }
[data-theme="light"] .brand svg path,
[data-theme="light"] .brand-tablet svg path { fill: #003223 !important; }

/* Cal booking widget: more room above, centred. */
.gp-s-cta { padding-top: clamp(2.5rem, 5vw, 5rem); }
#my-cal-inline-gtmpulse { margin-top: 2.5rem !important; }

/* Newsletter/footer submit stays solid orange in BOTH themes (inverted field). */
.gp-newsletter__submit, [data-theme="light"] .gp-newsletter__submit {
  background: #fe5a1f !important;
  border: 1px solid #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================================
   Frontal.so beam-ring, replicated 1:1 without an HTML wrapper.
   Frontal wraps each button in a .fr-beam element:
     box-shadow: 0 0 16px var(--beam-glow), inset 0 1px 0 #ffffff1a;
     background: rgba(16,16,22,.5); border:1px solid rgba(255,255,255,.1);
     border-radius:13px; padding:3px;
   Rebuilt here as layered box-shadows on the button itself: a warm glow,
   a framed ring (the 3px padding + border), and a top highlight. Static.
   ========================================================================== */
:root, [data-theme="dark"] { --gp-beam-frame: rgba(16, 16, 22, 0.5); }
[data-theme="light"] { --gp-beam-frame: rgba(255, 255, 255, 0.5); }

.primary-button, .primary-button.w-button, .gp-btn, .gp-btn--cta, .gp-btn--ghost,
.secondary-button-big, .secondary-button-small, .gp-tier__cta.gp-btn, .gp-bundle__cta.gp-btn,
.gp-newsletter__submit {
  box-shadow:
    0 0 0 3px var(--gp-beam-frame),
    0 0 0 4px rgba(255, 255, 255, 0.10),
    0 0 18px 0 rgba(255, 90, 31, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.primary-button:hover, .primary-button.w-button:hover, .gp-btn:hover, .gp-btn--cta:hover,
.gp-btn--ghost:hover, .secondary-button-big:hover, .secondary-button-small:hover,
.gp-tier__cta.gp-btn:hover, .gp-bundle__cta.gp-btn:hover, .gp-newsletter__submit:hover {
  box-shadow:
    0 0 0 3px var(--gp-beam-frame),
    0 0 0 4px rgba(255, 255, 255, 0.10),
    0 0 34px 0 rgba(255, 90, 31, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}


/* The GTM Audit card is a solid WHITE box in both themes, so everything inside
   it must use dark (light-mode) colors, and its CTA stays solid orange. */
.gp-audit__title {
  color: #003223 !important;
  -webkit-text-fill-color: #003223 !important;
}
.gp-audit__lead, .gp-audit__list li, .gp-audit__list li > span:last-child,
.gp-audit__label, .gp-audit p {
  color: #14210f !important;
  -webkit-text-fill-color: #14210f !important;
}
.gp-audit .primary-button, .gp-audit__btn, .gp-audit .gp-btn {
  background: #fe5a1f !important;
  border-color: #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.gp-audit .primary-button *, .gp-audit__btn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================================
   Frontal.so border beam — the .beam-host: a masked 1.5px border ring with a
   warm light travelling around the button edge. Rebuilt as a ::before on the
   button (frontal drives it by mouse; here it orbits slowly so it's always
   visible). Thin and soft — not the old thick rotating box.
   ========================================================================== */
@property --gp-bbeam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes gp-bbeam-spin { to { --gp-bbeam: 360deg; } }

.primary-button, .primary-button.w-button, .gp-btn, .gp-btn--cta, .gp-btn--ghost,
.secondary-button-big, .secondary-button-small, .gp-tier__cta.gp-btn,
.gp-bundle__cta.gp-btn, .gp-newsletter__submit {
  position: relative;
  isolation: isolate;
}
.primary-button::before, .primary-button.w-button::before, .gp-btn::before, .gp-btn--cta::before,
.gp-btn--ghost::before, .secondary-button-big::before, .secondary-button-small::before,
.gp-tier__cta.gp-btn::before, .gp-bundle__cta.gp-btn::before, .gp-newsletter__submit::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.5px !important;
  background: conic-gradient(from var(--gp-bbeam),
    rgba(255, 210, 170, 0) 0deg,
    rgba(255, 210, 170, 0) 66deg,
    rgba(255, 224, 196, 0.98) 90deg,
    rgba(255, 150, 90, 0.55) 104deg,
    rgba(255, 210, 170, 0) 124deg,
    rgba(255, 210, 170, 0) 246deg,
    rgba(255, 224, 196, 0.98) 270deg,
    rgba(255, 150, 90, 0.55) 284deg,
    rgba(255, 210, 170, 0) 304deg,
    rgba(255, 210, 170, 0) 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: gp-bbeam-spin 3.6s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}


/* Every button gets a SOLID orange background (the cal.com floating button is
   styled in its own shadow DOM and is untouched). The beam (frame glow +
   travelling border lights) stays on top. */
.primary-button, .primary-button.w-button, .gp-btn, .gp-btn--cta, .gp-btn--ghost,
.secondary-button-big, .secondary-button-small, .gp-tier__cta.gp-btn,
.gp-bundle__cta.gp-btn, .gp-newsletter__submit,
[data-theme="light"] .primary-button, [data-theme="light"] .gp-btn, [data-theme="light"] .gp-btn--cta,
[data-theme="light"] .secondary-button-big, [data-theme="light"] .secondary-button-small,
[data-theme="light"] .gp-tier__cta.gp-btn, [data-theme="light"] .gp-bundle__cta.gp-btn {
  background: #fe5a1f !important;
  border: 1px solid #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.primary-button:hover, .gp-btn:hover, .gp-btn--cta:hover, .secondary-button-big:hover,
.secondary-button-small:hover, .gp-tier__cta.gp-btn:hover, .gp-bundle__cta.gp-btn:hover,
.gp-newsletter__submit:hover {
  background: #e04711 !important;
  border-color: #e04711 !important;
}

/* Let the template's sticky "View More" (position:sticky; top:100px) work as
   originally designed, and keep the button beam from being clipped. */
.gp-s-chal, .gp-s-test, section.testimonials, .gp-s-unlock, .gp-s-flywheel {
  overflow: visible !important;
}


/* ==========================================================================
   FINAL button block — single source of truth (appended last so it wins).
   Placement: keep the template's sticky "View More" (position:sticky; top:100px).
   Look: solid orange fill + the beam (frame glow via box-shadow + travelling
   border lights via ::before). The cal.com floating button is in its own shadow
   DOM and is untouched.
   ========================================================================== */
.primary-button.mt-40, .primary-button.sticky {
  position: sticky !important;   /* restore original placement, template sets top */
}
.primary-button, .primary-button.w-button, .primary-button.mt-40, .primary-button.sticky,
.gp-btn, .gp-btn--cta, .gp-btn--ghost, .secondary-button-big, .secondary-button-small,
.gp-tier__cta.gp-btn, .gp-bundle__cta.gp-btn, .gp-newsletter__submit {
  background: #fe5a1f !important;
  border: 1px solid #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 0 3px var(--gp-beam-frame),
    0 0 0 4px rgba(255, 255, 255, 0.10),
    0 0 18px 0 rgba(255, 90, 31, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.primary-button.mt-40:hover, .primary-button:hover, .gp-btn:hover, .gp-btn--cta:hover,
.secondary-button-big:hover, .secondary-button-small:hover, .gp-newsletter__submit:hover {
  background: #e04711 !important;
  border-color: #e04711 !important;
  box-shadow:
    0 0 0 3px var(--gp-beam-frame),
    0 0 0 4px rgba(255, 255, 255, 0.10),
    0 0 34px 0 rgba(255, 90, 31, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}


/* Cal.com booking section ("Let's build your revenue engine") on the alt-section
   surface (#00593C dark / #DAE0DC light), matching the solution/flywheel band. */
.gp-s-cta { background: var(--gp-bg-raised) !important; }


/* Light mode buttons must also be SOLID orange + white label (an earlier
   [data-theme="light"] rule kept them translucent with dark text). Higher
   specificity + last, so this wins. */
[data-theme="light"] .primary-button, [data-theme="light"] .primary-button.w-button,
[data-theme="light"] .primary-button.mt-40, [data-theme="light"] .primary-button.sticky,
[data-theme="light"] .gp-btn, [data-theme="light"] .gp-btn--cta, [data-theme="light"] .gp-btn--ghost,
[data-theme="light"] .secondary-button-big, [data-theme="light"] .secondary-button-small,
[data-theme="light"] .gp-tier__cta.gp-btn, [data-theme="light"] .gp-bundle__cta.gp-btn,
[data-theme="light"] .gp-newsletter__submit,
[data-theme="light"] .gp-audit .primary-button, [data-theme="light"] .gp-audit__btn {
  background: #fe5a1f !important;
  border-color: #fe5a1f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* GTM Audit section ("More Revenue starts with GTM Audit Today!") on the
   alt-section surface too (the white audit card stays white). */
.gp-s-unlock { background: var(--gp-bg-raised) !important; }


/* ==========================================================================
   Turn N (2026-08-11): logo strip -> clients, Playfair problem titles,
   Geist-only case cards, case-tab logos, dark-island audit legibility,
   centered "More Revenue" eyebrow, and eyebrow->title spacing parity.
   Appended last so it wins ties on source order.
   ========================================================================== */

/* 1. The three problem-card titles read as Playfair italic (like the
      "4 ways we help you grow" promise line), not the Geist sans. Scoped to
      the Challenges block so other pages' .h3-secondary keep Geist. */
.gp-s-challenges .h3-secondary {
  font-family: var(--gp-font-display) !important;
  font-style: italic !important;
  font-weight: 500;
}

/* 2. Case-study spotlight cards use only Geist + Inter — the emphasised words
      drop Playfair for Geist while keeping their accent colour. */
.gp-cases__accent {
  font-family: var(--gp-font-title) !important;
  font-style: normal !important;
}

/* 3. Case-study tab bar carries the real client logos, not text. The dot is
      redundant once the mark identifies the tab. Light logos in dark mode,
      deep-green logos in light mode, so both read on their pill. */
.gp-cases__tab-dot { display: none !important; }
.gp-cases__tab-logo {
  height: 20px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  display: block;
}
.gp-cases__tab .gp-tl-light { display: none; }
.gp-cases__tab .gp-tl-dark  { display: block; }
[data-theme="light"] .gp-cases__tab .gp-tl-light { display: block; }
[data-theme="light"] .gp-cases__tab .gp-tl-dark  { display: none; }
/* Slightly more padding so the marks sit comfortably in the pill. */
.gp-cases__tab { padding: 0.5rem 1rem; }

/* 4. GTM Audit card: a dark-green island in BOTH themes, with fully legible
      light copy (the old "solid white box" rules left the checklist dark-on-
      dark in light mode). Scoped under .gp-s-unlock to outrank the earlier
      theme + white-box blocks on source order. */
.gp-s-unlock .gp-audit {
  background: #003223 !important;
  color: #f0ffd3 !important;
}
.gp-s-unlock .gp-audit__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.gp-s-unlock .gp-audit__lead {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
.gp-s-unlock .gp-audit__list li,
.gp-s-unlock .gp-audit__list li span {
  color: #f0ffd3 !important;
  -webkit-text-fill-color: #f0ffd3 !important;
}
.gp-s-unlock .gp-audit__ic {
  border-color: #55f596 !important;
  color: #55f596 !important;
}
.gp-s-unlock .gp-audit__corner {
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* 5. "More Revenue starts with GTM Audit Today!" is centred, with its own
      bracket eyebrow above it — matching the other section intros. */
.gp-unlock__intro {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}
.gp-unlock__title { margin: 0; }
/* (Uniform eyebrow->title spacing is defined once at the end of this file.) */

/* ==========================================================================
   Turn N+1 (2026-08-11): mobile nav — the "Book Strategy Call" CTA leaves the
   header (logo + burger only, no frontal-style boxes) and moves to the bottom
   of the open menu, like frontal.so's slide-out.
   ========================================================================== */

/* In-menu CTA is desktop-hidden; the header keeps its own CTA there. */
.gp-menu-cta { display: none; }

@media screen and (max-width: 991px) {
  /* Header shows only the logo and the burger — the CTA is now in the menu. */
  .gp-cta-holder { display: none !important; }

  /* Open menu is a clean full-screen panel. The overlay is display:none until
     Webflow opens it, so forcing transform:none/full width only affects the
     open state — it just removes the dependency on the JS slide transform
     (which is what left the panel stuck off-screen). */
  .navbar.w-nav .w-nav-overlay { width: 100% !important; }
  .navbar.w-nav .w-nav-overlay .nav-menu.w-nav-menu {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  }
  /* Webflow inlines the overlay height to the full document height for its
     full-screen menu; force it back to the content height so the panel is
     compact and the page shows below (frontal-style). */
  .navbar.w-nav .w-nav-overlay { height: auto !important; }
  /* Compact drop-panel menu (frontal-style): only as tall as its content, so the
     page stays visible below. Webflow sizes the overlay to the menu height on
     open, so removing the 100vh min-height above is enough — don't fight its JS. */
  /* Nav dropdown toggles (Leistungen / Free GTM Tools) match the other links.
     The visible label lives in a nested .nav-item-title, so colour that too. */
  .w-nav-overlay .nav-dropdown-toggle,
  .w-nav-overlay .nav-dropdown-toggle .nav-item-title {
    color: var(--primary) !important;
  }
  /* The menu column runs top-to-bottom with comfortable padding. */
  .w-nav-overlay .menu-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px;
    padding: 8px 22px 28px;
  }

  /* Full-width orange CTA inside the open menu (below the nav links, above the
     toggles — its DOM position). Inherits the .gp-btn--cta orange fill + beam.
     No layout override on .menu-wrap — Webflow owns the slide-in overlay. */
  .gp-menu-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 22px 0 6px;
    padding: 16px 22px !important;
    font-size: 16px !important;
    transform: none !important;      /* undo the header CTA's scale(0.88) */
  }
  .gp-menu-cta .gp-btn__arrow { margin-left: 0; }
}

/* ==========================================================================
   Turn N+2 (2026-08-11): three sections render IDENTICALLY in light and dark
   (Tim's request) — always the dark alt-green look. Solution/flywheel,
   "More Revenue" + audit, and the cal.com booking block. Appended last.
   ========================================================================== */

/* Alt-green surface in BOTH themes. */
.gp-s-solution, .gp-s-flywheel, .gp-s-unlock, .gp-s-cta,
[data-theme="light"] .gp-s-solution, [data-theme="light"] .gp-s-flywheel,
[data-theme="light"] .gp-s-unlock, [data-theme="light"] .gp-s-cta {
  background: #00593c !important;
}

/* Section headings stay cream in both themes. */
.gp-s-solution h2, [data-theme="light"] .gp-s-solution h2,
.gp-unlock__title, [data-theme="light"] .gp-unlock__title,
.gp-s-cta .form-title, [data-theme="light"] .gp-s-cta .form-title {
  color: #f0ffd3 !important;
  -webkit-text-fill-color: #f0ffd3 !important;
}

/* Flywheel accordion keeps its dark palette in light mode too. */
.gp-s-flywheel .gp-fly__name,
[data-theme="light"] .gp-s-flywheel .gp-fly__item .gp-fly__name {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
.gp-s-flywheel .gp-fly__num,
[data-theme="light"] .gp-s-flywheel .gp-fly__num {
  color: rgba(85, 245, 150, 0.85) !important;
  -webkit-text-fill-color: rgba(85, 245, 150, 0.85) !important;
}
.gp-s-flywheel .gp-fly__desc,
[data-theme="light"] .gp-s-flywheel .gp-fly__desc {
  color: #55f596 !important; -webkit-text-fill-color: #55f596 !important;
}
[data-theme="light"] .gp-s-flywheel .gp-fly__item .gp-fly__chev {
  border-right-color: rgba(255, 255, 255, 0.55) !important;
  border-bottom-color: rgba(255, 255, 255, 0.55) !important;
}
[data-theme="light"] .gp-s-flywheel .gp-fly__item.is-open .gp-fly__chev {
  border-right-color: #55f596 !important;
  border-bottom-color: #55f596 !important;
}
[data-theme="light"] .gp-s-flywheel .gp-fly__item {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="light"] .gp-s-flywheel .gp-fly__item:first-child {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Flywheel accordion: the collapsed body uses grid-template-rows:0fr, but a
   grid item keeps min-height:auto by default, so on mobile Safari the row never
   shrinks below the text and every description stays visible. min-height:0 lets
   it truly collapse, so only the open item shows its copy — on every browser. */
.gp-fly__inner { min-height: 0; }

/* ==========================================================================
   Turn N+3 (2026-08-11): cal.com booking embed larger + reaching the edges.
   The section container is unconstrained so the widget spans it; capped wide on
   desktop (so cal's card FILLS it rather than floating in an empty band), and
   truly edge-to-edge on mobile — where it was cut off before. Square corners.
   ========================================================================== */
/* All widths: square corners, no overflow, centred. The section container and
   title stay at the NORMAL page width — the title is centred like everything
   else (no more flush-left). */
.gp-s-cta #my-cal-inline-gtmpulse {
  width: 100% !important;
  margin: clamp(1.5rem, 3vw, 3rem) auto 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.gp-s-cta .form-title {
  text-align: center !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* DESKTOP ONLY: scale the whole booking widget up so the card itself is bigger
   (widening the container alone doesn't help — cal's card has its own max
   width). It stays centred in the normal container. Mobile untouched. */
@media (min-width: 992px) {
  .gp-s-cta #my-cal-inline-gtmpulse {
    transform: scale(1.15) !important;
    transform-origin: top center !important;
    margin-bottom: clamp(3rem, 6vw, 7rem) !important;
  }
}

/* ==========================================================================
   Turn N+4 (2026-08-11): eyebrows were too widely tracked — tighten every
   eyebrow label a notch (0.14–0.16em → 0.08em) across all sections/pages.
   ========================================================================== */
.section-subtitle,
[class*="__eyebrow"],
.gp-3ways__eyebrow,
.gp-pricing__eyebrow {
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
   Turn N+5 (2026-08-11): fix the counters section going "out of line"
   (horizontal overflow at mid widths) + make the cal.com frame bigger.
   ========================================================================== */

/* Page-wide guard: nothing may cause horizontal scroll / content cut-off.
   `clip` (not hidden) keeps position:sticky working. */
/* NOTE: overflow-x on html/body clips position:fixed elements in Safari — it
   was hiding the cal.com floating button. Scope the horizontal-overflow guard
   to the sections that could overflow instead of the root. */
.gp-s-counters, .gp-s-cta, .gp-s-unlock, .gp-s-flywheel { overflow-x: clip; }

/* Counters: let the 4 columns shrink (minmax 0) instead of forcing min-content
   width, and make the giant numerals responsive so they never push the row
   wider than the viewport. Two columns once it gets tight. */
.gp-s-counters .grid-4c {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 100%;
}
.gp-s-counters .statistic-small-numb {
  font-size: clamp(56px, 8vw, 165px) !important;
  overflow-wrap: anywhere;
}
.gp-s-counters .caps,
.gp-s-counters .heading-wrap { max-width: 100% !important; }
@media (max-width: 991px) {
  .gp-s-counters .grid-4c { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Cal.com iframe pinned to its container at every width, so it can never
   overflow the page (which was cutting the section above it off on the right).
   The desktop-only width cap lives in the min-width:992px block above. */
.gp-s-cta #my-cal-inline-gtmpulse,
.gp-s-cta #my-cal-inline-gtmpulse iframe {
  width: 100% !important;
}
.gp-s-cta #my-cal-inline-gtmpulse iframe { max-width: 100% !important; }

/* Hero flourish arrow: z-index:-1 dropped it behind the section background, so
   it vanished. Lift it above the background but keep it behind the text. */
.gp-s-hero { position: relative; }
.gp-s-hero .banner-arrow { z-index: 0 !important; }
.gp-s-hero > .w-layout-blockcontainer,
.gp-s-hero > .base-container { position: relative; z-index: 1; }

/* Force the "content, ads, outbound & CRM" line (heading-rest) to Geist
   explicitly via the literal family, not a token — higher specificity + last,
   so nothing can pull it to Inter. */
.gp-3ways__heading .gp-3ways__heading-rest,
.gp-3ways__heading-rest {
  font-family: "Geist", "Inter", sans-serif !important;
  font-style: normal !important;
}

/* ==========================================================================
   Turn N+8 (2026-08-12): challenge descriptions aligned, 4-ways heading to a
   Geist H1, partners section gets a Geist H1 title, newsletter CTA buttons
   square (only those), hero arrow at 44%.
   ========================================================================== */

/* Challenge cards: 3 equal columns, each a tight column with a small, IDENTICAL
   gap between its own title and its description — no subgrid dead space. */
@media (min-width: 768px) {
  .gp-s-challenges .grid-3-column {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: start !important;
  }
}
.gp-s-challenges .flex-vertical-wrap {
  display: flex !important;
  flex-direction: column !important;
}

/* 2. "4 ways we help you grow / content, ads, outbound & CRM" is now a Geist
      H1-scale title — both lines Geist (line 1 drops Playfair), heading colour. */
.gp-3ways__heading-accent {
  font-family: var(--gp-font-title) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem) !important;
  color: var(--gp-heading) !important;
  -webkit-text-fill-color: var(--gp-heading) !important;
}
.gp-3ways__heading-rest {
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3rem) !important;
}

/* 3. Partners section title — big Geist H1 above the tool logos. */
.gp-partners__title {
  font-family: var(--gp-font-title) !important;
  color: var(--gp-heading) !important;
  -webkit-text-fill-color: var(--gp-heading) !important;
  font-weight: 600;
  font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* 4. Only the newsletter CTA buttons (the "BOOK A CALL" inside the email
      shells) go fully square — every other button keeps its 10px radius. */
.gp-newsletter__submit { border-radius: 0 !important; }

/* ==========================================================================
   Turn N+9 (2026-08-12): ONE uniform eyebrow -> title gap across EVERY section
   intro. The eyebrow (.section-subtitle) carries the whole gap as its
   margin-bottom; every title (and any wrapper between eyebrow and title) gets
   zero top margin, so the gap is identical everywhere. Also: 4 sections that
   were missing an eyebrow now have one (added in the HTML).
   ========================================================================== */
:root { --gp-eyebrow-gap: 0.9rem; }

.section-subtitle { margin-bottom: var(--gp-eyebrow-gap) !important; }

.section-subtitle + h1,
.section-subtitle + h2,
.section-subtitle + h3,
.section-subtitle + h4,
.section-subtitle + .gp-3ways__heading,
.section-subtitle + .flex-space-b,
.flex-space-b > h1,
.flex-space-b > h2,
.flex-space-b > h3,
.gp-3ways__intro .gp-3ways__heading,
.gp-cases__intro h2,
.gp-unlock__intro .gp-unlock__title,
.heading-wrap h2, .heading-wrap h3, .heading-wrap .caps,
.gp-s-solution h2,
.timeline-neo_heading h2,
.gp-s-cta .form-title {
  margin-top: 0 !important;
}

/* Eyebrows on centred titles are centred too (cal-CTA, timeline). */
.gp-s-cta .section-subtitle,
.timeline-neo_heading .section-subtitle { text-align: center; }

/* The eyebrow sections whose title shares a flex row with a "View More" button
   bottom-aligned the title (align-items:flex-end) against the taller button,
   inflating the eyebrow->title gap. Top-align so the title sits right under the
   eyebrow at the uniform gap. */
.gp-s-challenges .flex-space-b,
.gp-s-testimonials .flex-space-b,
.gp-s-underneath .flex-space-b {
  align-items: center !important;
}
/* The "View More" button sat lower than the headline because it was sticky with
   a 40px top offset — make it static, drop the offset, so it centres on the
   headline line. */
.gp-s-challenges .flex-space-b .primary-button.mt-40,
.gp-s-testimonials .flex-space-b .primary-button.mt-40,
.gp-s-underneath .flex-space-b .primary-button.mt-40 {
  position: static !important;
  margin-top: 0 !important;
}
.gp-s-challenges .flex-space-b > h2,
.gp-s-testimonials .flex-space-b > h2,
.gp-s-underneath .flex-space-b > h2 { margin: 0 !important; }

/* ==========================================================================
   Turn N+10 (2026-08-12): ONE identical Geist title style everywhere. The
   majority of section titles already share it (weight 400, upright, -0.05em,
   var(--gp-h2)=45px). These four broke it — force them to match 1:1:
   4-ways (was 600 + oversized), timeline (was italic), audit (was 600 + loose
   tracking + h3 size), partners (was 600 + custom size).
   ========================================================================== */
.gp-3ways__heading-accent,
.gp-3ways__heading-rest,
.timeline-neo_heading h2,
.gp-audit__title,
.gp-partners__title {
  font-family: var(--gp-font-title) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.05em !important;
  font-size: var(--gp-h2) !important;
  line-height: 1.12 !important;
}

/* ==========================================================================
   Turn N+11 (2026-08-12): tighten the challenge cards — the title->description
   gap was a 50px grid row-gap plus head/p margins (~73px of dead space).
   ========================================================================== */
.gp-s-challenges .gp-card-head { margin-bottom: 12px !important; }
.gp-s-challenges .flex-vertical-wrap > p { margin-top: 0 !important; }

/* Counters title is uppercase 30px, so its glyph metrics left a 14px visual gap
   vs 11px elsewhere — nudge its eyebrow gap so the VISUAL gap matches. */
.gp-s-counters .section-subtitle { margin-bottom: 11.4px !important; }

/* ==========================================================================
   Turn N+12 (2026-08-12): FAQ + partners eyebrows centred (their titles are
   centred), and more air between the footer logo and its tagline.
   ========================================================================== */
.gp-s-faq .section-subtitle,
.gp-s-partners .section-subtitle { text-align: center; }
.gp-s-faq .content-wrap-left { text-align: center; }

.gp-footer__tagline { margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem) !important; }

/* ==========================================================================
   Post-audit responsive + FAQ fixes (German text runs ~20% longer)
   ========================================================================== */

/* Mobile: the header CTA is .gp-btn--cta (not .primary-button), so the old
   shrink rule never matched and the longer "Strategiegespräch buchen" wrapped
   to two lines at 360-375px. Target the real class and drop the scale. */
@media screen and (max-width: 767px) {
  .navbar .gp-btn--cta,
  .gp-cta-holder .gp-btn--cta {
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 13px;
    transform: none;
  }
}

/* Pricing role pills: allow long German compounds to break on narrow phones
   instead of overflowing the card (nowrap kept from 640px up). */
@media screen and (max-width: 639px) {
  .gp-tier__roles li {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Tablet + small laptop: keep the "4 ways" grid at a clean 2x2 across the whole
   768-1179px range. At 992-1179 four columns squeezed the longer German copy
   into cramped, uneven cards; two columns read far better until real desktop. */
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .gp-3ways__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Timeline cards had a fixed height; longer German step text overflowed the
   card at 768-991px. Let the card grow with its content. */
.timeline-neo_content {
  height: auto !important;
  min-height: 26rem;
}
@media screen and (max-width: 991px) {
  .timeline-neo_content {
    min-height: 23rem;
  }
}

/* Pricing cost-FAQ: clean, self-contained <details> accordion (no Webflow JS). */
.gp-s-pfaq {
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0;
}
.gp-pfaq__title {
  font-family: var(--gp-font-title);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.05em;
  font-size: var(--gp-h2);
  line-height: 1.12;
  text-align: center;
  margin: 0 0 clamp(1.75rem, 1rem + 2vw, 3rem);
}
.gp-pfaq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gp-pfaq__item {
  border-top: 1px solid color-mix(in oklch, currentColor 16%, transparent);
}
.gp-pfaq__item:last-child {
  border-bottom: 1px solid color-mix(in oklch, currentColor 16%, transparent);
}
.gp-pfaq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0.25rem;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 500;
}
.gp-pfaq__q::-webkit-details-marker { display: none; }
.gp-pfaq__ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
}
.gp-pfaq__ico::before,
.gp-pfaq__ico::after {
  content: "";
  position: absolute;
  background: #fe5a1f;
  border-radius: 2px;
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.gp-pfaq__ico::before { inset: 8px 0; height: 2px; }
.gp-pfaq__ico::after { inset: 0 8px; width: 2px; }
.gp-pfaq__item[open] .gp-pfaq__ico::after { transform: scaleY(0); }
.gp-pfaq__a {
  padding: 0 0.25rem 1.5rem;
  max-width: 66ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.08rem);
  line-height: 1.6;
  opacity: 0.82;
}

/* Tablet/small-laptop band (992-1180px): the desktop nav shows here (burger
   only kicks in <=991px), and the longer German labels made the centred nav
   collide with the logo and the header CTA. Un-centre the nav, tighten it, and
   drop the redundant header CTA (the floating Cal button still provides it). */
@media screen and (min-width: 992px) and (max-width: 1339px) {
  .nav-menu-wrapper .nav-menu {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin-left: auto;
  }
  .navbar .nav-link {
    font-size: 0.95rem;
    padding-left: 9px;
    padding-right: 9px;
  }
  .gp-cta-holder {
    display: none !important;
  }
}

/* Visible breadcrumb on pricing (backs the BreadcrumbList schema). */
.gp-breadcrumb {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  opacity: 0.7;
}
.gp-breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast, 150ms) ease;
}
.gp-breadcrumb a:hover { border-bottom-color: currentColor; }
.gp-breadcrumb span[aria-hidden] { margin: 0 0.4rem; opacity: 0.6; }
.gp-breadcrumb [aria-current="page"] { opacity: 0.85; }

/* FAQ questions must stay Playfair italic everywhere. The global heading
   unification (h1-h6 -> Geist !important) was overriding the accordion titles;
   restore the intended serif look with a more specific selector. */
.gp-s-faq .accordion-title,
.accordion-wrapper .accordion-title {
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  letter-spacing: normal !important;
}

/* Language switcher: current language pill + hover/focus dropdown to the other
   language (German is the main/default). Works without JS via :hover and
   :focus-within, so tapping the pill also opens it. */
.gp-langswitch { position: relative; display: inline-flex; }
.gp-langswitch__btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.gp-langswitch__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s var(--gp-ease, ease); opacity: 0.85;
}
.gp-langswitch:hover .gp-langswitch__caret,
.gp-langswitch:focus-within .gp-langswitch__caret { transform: rotate(180deg); }
.gp-langswitch__menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  min-width: max(100%, 76px); display: none; flex-direction: column; gap: 2px; padding: 5px;
  background: #123a2a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); z-index: 60;
}
.gp-langswitch:hover .gp-langswitch__menu,
.gp-langswitch:focus-within .gp-langswitch__menu,
.gp-langswitch.is-open .gp-langswitch__menu {
  display: flex;
}
.gp-langswitch__opt {
  display: block; padding: 7px 16px; border-radius: 999px;
  text-decoration: none; color: #f0ffd3; font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.04em; text-align: center; transition: background 0.15s, color 0.15s;
}
.gp-langswitch__opt:hover { background: rgba(254, 90, 31, 0.16); color: #fe5a1f; }
[data-theme="light"] .gp-langswitch__menu { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .gp-langswitch__opt { color: #003223; }

/* ==========================================================================
   Responsive polish (post desktop/tablet/mobile audit)
   ========================================================================== */

/* Header CTA never wraps to two lines (long German "Strategiegespräch buchen").
   The compact nav band above now runs 992-1339px so the full nav + CTA only
   returns where there is real room. */
.navbar .gp-btn--cta,
.gp-cta-holder .gp-btn--cta {
  white-space: nowrap;
}

/* Services/pricing hero had no side gutter, so the long "Neukundengewinnung"
   headline sat edge-to-edge on small phones. Give it the same 20px gutter and
   let the compound break if it must. */
.gp-pricing__head {
  padding-left: 20px;
  padding-right: 20px;
}
.gp-pricing__title {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Burger-overlay dropdown links: allow the long German compounds to wrap
   instead of being forced onto one line. */
@media screen and (max-width: 991px) {
  .nav-dropdown-link,
  .w-nav-overlay .nav-dropdown-link {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   MOBILE-ONLY fixes (≤767px). Desktop and tablet are intentionally untouched.
   ========================================================================== */

/* #298 Burger-menu dropdowns (Leistungen / Free GTM Tools) were always expanded.
   Collapse them by default and only show when the toggle is tapped (.w--open). */
@media screen and (max-width: 767px) {
  .nav-dropdown-list { display: none !important; }
  .nav-dropdown-list.w--open,
  .nav-dropdown-list.gp-open { display: flex !important; }
  .nav-dropdown.gp-open .nav-dropdown-icon,
  .nav-dropdown-toggle.gp-open .nav-dropdown-icon { transform: rotate(180deg); }
}

/* #300 Challenge cards stack in a single column on phones. #304 the third card
   (.last) kept a max-width: 50% from the template, so it rendered half-width —
   clear it so every stacked card fills the column. */
@media screen and (max-width: 767px) {
  .gp-s-challenges .grid-3-column {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: clamp(2rem, 8vw, 3rem) !important;
  }
  .gp-s-challenges .flex-vertical-wrap,
  .gp-s-challenges .flex-vertical-wrap.last {
    max-width: none !important;
  }
}

/* #299 More air between the client-logo strip and the challenges eyebrow. */
@media screen and (max-width: 767px) {
  .gp-s-challenges { margin-top: clamp(2.5rem, 9vw, 4rem) !important; }
}

/* #301 More air between the previous section and the "Warum GTM Pulse" eyebrow. */
@media screen and (max-width: 767px) {
  .gp-s-underneath { margin-top: clamp(2.5rem, 9vw, 4rem) !important; }
}

/* #302/#303 Comparison table on mobile: the scrolling grid is replaced by
   stacked frontal-style cards (one per feature row, a "GTM Pulse ✓" badge and a
   2x2 grid of the alternatives). Grid table stays intact on desktop/tablet. */
.gp-cmp-cards { display: none; flex-direction: column; gap: 16px; }
@media screen and (max-width: 767px) {
  .gp-cmp .gp-cmp__scroll { display: none; }
  .gp-cmp-cards { display: flex; }
}
.gp-cmp-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.02);
}
.gp-cmp-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gp-cmp-card__label {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 1.05rem; line-height: 1.25; color: #fff;
}
.gp-cmp-card__us {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  color: #fe5a1f; font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.gp-cmp-card__check { width: 16px; height: 16px; flex: 0 0 auto; }
.gp-cmp-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-cmp-card__cell {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 12px 13px;
}
.gp-cmp-card__co {
  display: block; font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); margin-bottom: 7px; line-height: 1.3;
}
.gp-cmp-card__cap {
  display: block; font-family: "Inter", sans-serif;
  font-size: 0.9rem; line-height: 1.35; color: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .gp-cmp-card { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.015); }
[data-theme="light"] .gp-cmp-card__head { border-bottom-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .gp-cmp-card__label { color: #0b2a1e; }
[data-theme="light"] .gp-cmp-card__cell { border-color: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .gp-cmp-card__co { color: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .gp-cmp-card__cap { color: rgba(0, 0, 0, 0.72); }

/* #308 Hero responsiveness: below the desktop photo-grid (<1280px) the template
   kept a 3-column grid that reserved two tracks for a photo this hero doesn't
   have, squeezing the copy into a static ~440px centred block. Collapse to a
   single fluid column, left-aligned, so the hero scales with the viewport. */
@media screen and (max-width: 1279px) {
  .banner-section.home-2 .home-2-banner {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: start !important;
  }
  .banner-section .banner-text,
  .gp-s-hero .banner-text.home-2 {
    align-items: flex-start !important;
    text-align: left !important;
    max-width: none !important;
  }
  .banner-section .banner-text .home-2-title,
  .banner-section .banner-text p,
  .banner-section .banner-text .tablet-center {
    text-align: left !important;
  }
}

/* Legal pages (Impressum / Datenschutz / AGB): a clean, readable prose column. */
.gp-legal { padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 9vw, 7rem); }
.gp-legal__body {
  max-width: 760px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.gp-legal__body h2 {
  font-family: var(--gp-font-title);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.03em;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2;
  margin: 2.2rem 0 0.7rem;
}
.gp-legal__body h2:first-of-type { margin-top: 0; }
.gp-legal__body p {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 0.95rem;
  opacity: 0.88;
}
.gp-legal__body a { color: #fe5a1f; text-decoration: underline; text-underline-offset: 2px; }
.gp-legal__updated { font-size: 0.85rem; opacity: 0.55 !important; margin-bottom: 1.6rem !important; }
.gp-legal__note {
  margin-top: 2.2rem !important;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(254, 90, 31, 0.3);
  border-radius: 10px;
  font-size: 0.92rem;
  opacity: 0.82 !important;
}

/* Footer legal links (Impressum / Datenschutz / AGB). */
.gp-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.6rem; }
.gp-footer__legal a {
  color: inherit; opacity: 0.7; text-decoration: none;
  font-size: 0.85rem; transition: opacity 0.15s;
}
.gp-footer__legal a:hover { opacity: 1; text-decoration: underline; }
@media (min-width: 700px) {
  .gp-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .gp-footer__legal { margin-top: 0; }
}