/* ============================================================================
   Traffic Revenue — brand overrides.
   Loaded AFTER the Webflow master stylesheet. The master file is never edited:
   it is 364 KB of minified Webflow output and every change here beats it by
   cascade order instead.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. fonts
   The master stylesheet hotlinks both faces from a remote Webflow bucket.
   These redeclarations point at local mirrors and are declared later, so they
   win. The CDN stays as a second src only as a safety net.                  */

@font-face {
  font-family: 'Tt Commons Pro Variable';
  src: url('../fonts/TT_Commons_Pro_Variable.woff2') format('woff2');
  font-weight: 100 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pppangaia Variable';
  src: url('../fonts/PPPangaia-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- 2. logo
   The source site's bird mark and wordmark are gone. The mark is bold text, nothing else.  */

.tr-logo,
.nav-symbol_link.tr-logo {
  text-decoration: none;
  gap: 0;
}

.tr-logo-text {
  font-family: 'Tt Commons Pro Variable', Figtree, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.035em;
  color: currentColor;
  white-space: nowrap;
  display: block;
}

@media (max-width: 991px) {
  .tr-logo-text { font-size: 1.3rem; }
}
@media (max-width: 479px) {
  .tr-logo-text { font-size: 1.15rem; letter-spacing: -.04em; }
}

/* The footer wordmark filled the full container width. "TRAFFIC REVENUE" is 15
   characters where "bïrch" was 5, so 13vw overflowed the page by ~230px. 6.4vw
   fills the same band without pushing a horizontal scrollbar onto all 23 pages. */
.footer_logo { overflow: hidden; }

.tr-footer-logotype {
  font-family: 'Tt Commons Pro Variable', Figtree, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 6.4vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: #fff;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  text-transform: uppercase;
}

/* --------------------------------------------------- 3. old mark leftovers */

.bird-shape,
.tr-show-on-mob,
.nav_svg.hidden,
.feather-wrap .feather-video,
.video_feather,
.floating_logo-s,
.small-bird-image-hub,
.small-bird-image-performance {
  display: none !important;
}

/* -------------------------------------------------------- 4. product visuals
   New agency SVGs sit in the same slots the old product screenshots did.           */

.tr-visual {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------- 5. monogram tiles
   Replace every real person's photograph. Set --tr-avatar-bg per instance.   */

.tr-avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tr-avatar-bg, #4450f2);
  color: #fff;
  font-family: 'Tt Commons Pro Variable', Figtree, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------- 5b. industry chips
   Case-study pages replaced each real client logo with a text chip naming the
   industry. Several pages emitted `.tr-chip` with no rule behind it anywhere,
   so those chips rendered as bare unstyled text. */

.tr-chip {
  display: inline-block;
  font-family: 'Tt Commons Pro Variable', Figtree, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #161616;
  background: rgba(22, 22, 22, .08);
  border-radius: 999px;
  padding: .42em .95em .32em;
  margin-bottom: .15rem;
}

/* The per-page agents each invented their own chip class. Give them all the
   same rule so a reader moving between case studies sees one component, not
   six. Pages that also carry inline styles keep those — this is the floor. */
.tr-industry-chip,
.tr-card-chip,
.tr-client-chip,
.tr-logo-chip {
  display: inline-block;
  font-family: 'Tt Commons Pro Variable', Figtree, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #161616;
  background: rgba(22, 22, 22, .08);
  border-radius: 999px;
  padding: .42em .95em .32em;
  margin-bottom: .15rem;
}

.tr-chip.lg {
  font-size: .8125rem;
  background: #161616;
  color: #ffe243;
  padding: .5em 1.1em .4em;
  margin-bottom: .25rem;
}

/* On a dark card the default chip disappears. */
.u-bg-darkblue .tr-chip,
.u-bg-darkgray .tr-chip,
.u-text-white .tr-chip {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* ------------------------------------------- 5c. the integrations heading
   `.int-absolute` overlays the heading on the logo lockup. That lockup was laid
   out around the source site's one-word "Integrations"; "The stack we work in" is four
   times longer and ran straight through two of the logos. */

.h3.int-absolute {
  position: static;
  max-width: 100%;
  padding: 0 1.25rem;
  margin-bottom: .5rem;
  text-align: center;
}

.int-img-wrapper .int-img-container { padding-bottom: 1rem; }

/* ------------------------------------------------------------ 6. package cards
   Pricing sells three service packages and shows no prices, so the slot that
   held "$99 /mo" now holds a scope line instead.                             */

.tr-package-scope {
  font-family: 'Tt Commons Pro Variable', Figtree, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  opacity: .85;
}

/* The three package cards sit in a flex row that only stacks below 480px. The
   row itself is capped, so between 480px and 539px the outer two cards were
   pushed past both edges of the viewport with nothing to scroll them back into
   view. Stack a breakpoint earlier instead. Above 767px the row still fits;
   below 480px the shared stylesheet already stacks them, so this rule stays out
   of that range and leaves the phone layout exactly as it was.               */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .pricing-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .pricing-card {
    width: 100%;
    max-width: 340px;
  }
}

/* The "Read case study" button is absolutely positioned over the bottom-right
   corner of its card, so it has always sat on top of the artwork. That was
   harmless while the artwork was an abstract panel. The two Measurement case
   cards now carry diagrams whose bottom edge is real content - destination
   chips, a source note - so those two reserve a band for the button. Padding
   rather than margin: the picture shrinks inside a box that stays bottom-
   anchored, which is how the shared sheet already handles this image below
   992px.                                                                     */

.hub-cs-img.tr-cs-diagram { padding-bottom: 96px; }

@media screen and (max-width: 991px) {
  .hub-cs-img.tr-cs-diagram { padding-bottom: 88px; }
}

@media screen and (max-width: 767px) {
  .hub-cs-img.tr-cs-diagram { padding-bottom: 72px; }
}

/* ------------------------------------------------------- 6b. the hub tab shape
   The octagon behind the second pricing tab is a background image, 173x80 laid
   in with `background-size: contain`. It was drawn around the source site's
   three-character "Hub". The label is now "Measurement", which is 176px wide at
   30px - so the text ran past the painted shape at every viewport, and below
   480px past the tab box too, because that box is pinned to 157.975px.

   `background-size: 100% 100%` alone does not fix it: the three source SVGs
   carry a viewBox and the default `preserveAspectRatio`, so the shape is
   letterboxed back to 173:80 inside whatever painting area it is given. The
   octagon is therefore re-declared here as an inline SVG with
   `preserveAspectRatio="none"` - same path, same three fills (idle #EDECF2,
   hover #DEDCE6, selected black) - which does stretch. Below 480px the box is
   also released so it follows the label instead of the old fixed width.      */

.hub-tab {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 173 80' preserveAspectRatio='none'%3E%3Cpath d='M149 0L173.02 23.6684L173.02 56.5522L149.114 80L24.1267 80L0 56.5523L0 23.6683L24.0131 0H149Z' fill='%23EDECF2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.hub-tab:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 173 80' preserveAspectRatio='none'%3E%3Cpath d='M149 0L173.02 23.6684L173.02 56.5522L149.114 80L24.1267 80L0 56.5523L0 23.6683L24.0131 0H149Z' fill='%23DEDCE6'/%3E%3C/svg%3E");
}

.hub-tab.w--current {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 173 80' preserveAspectRatio='none'%3E%3Cpath d='M149 0L173.02 23.6684L173.02 56.5522L149.114 80L24.1267 80L0 56.5523L0 23.6683L24.0131 0H149Z' fill='%23000000'/%3E%3C/svg%3E");
}

@media screen and (max-width: 479px) {
  .hub-tab {
    width: auto;
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* Calendly's close icon is referenced from a root-absolute path that only ever
   resolved on calendly.com. Without this the popup close button is invisible. */
.calendly-popup-close {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ------------------------------------------ 7. Insights: nothing fake to click
   The articles are not written yet. Every post card, every card's topic tag and
   every chip in the filter row pointed at "#", and the filter row had no filter
   behind it. The hrefs are gone from the markup; these rules strip the hover
   affordances that were still promising a destination. The anchors themselves
   stay because the Webflow card layout hangs off `.blogpost_link`.            */

.tr-blog-notice {
  font-family: 'Tt Commons Pro Variable', Figtree, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  color: #55534e;
  text-align: center;
  max-width: 36em;
  margin: 1.5rem auto .9rem;
  padding: 0 1rem;
}

.tr-blog-notice_link {
  color: #161616;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #ffe243;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

.tr-blog-notice_link:hover {
  color: #161616;
  text-decoration-color: #161616;
}

/* Cards: no pointer, no lift, no colour frame. */
.blogpost-item { cursor: default; }

.blogpost_link.tr-inert,
.blogpost_link.rotate.tr-inert { cursor: default; }

.blogpost_link.rotate.tr-inert:hover { transform: rotate(5deg); }

.pinned-collection .pinned-post-item:hover { transform: none; }

/* The category names are labels now, not controls. `pointer-events` stops the
   runtime-injected `:hover` rules — all seven of them carry !important — from
   ever firing, which is cheaper than out-specifying each one. */
.cats-flex .tr-inert,
.blogpost-hover-buttons-flex .tr-inert {
  pointer-events: none;
  cursor: default;
}

/* The shared inline script prepends an "All Posts" chip to that row on every
   page. With no filtering behind it, it is the one chip that still reads as a
   control, so it is hidden here rather than in a script 23 pages share. */
.cats-flex .button-9.big.border.margin[data-all-posts="true"] { display: none; }