/* ============================================================
   GoldReach Consulting — light theme
   Loaded AFTER the Webflow bundle.
   Mostly colour; section headings are also centred (§15).
   Tune the variables below to shift the whole palette.
   ============================================================ */

:root {
  --gr-bg:          #ffffff;   /* page background            */
  --gr-bg-soft:     #f3f4f6;   /* top of section fades       */
  --gr-card:        #fbfbfc;   /* card surface               */
  --gr-card-2:      #f4f5f7;   /* card surface, bottom of fade */

  --gr-ink:         #14161a;   /* primary text               */
  --gr-ink-muted:   #5b6169;   /* secondary / body text      */

  --gr-line:        rgba(0, 0, 0, .10);   /* hairline borders */
  --gr-line-soft:   rgba(0, 0, 0, .06);

  --gr-gold:        #ffb950;   /* brand gold — BACKGROUNDS only */
  --gr-gold-ink:    #9a6206;   /* brand gold — TEXT on white  */
  --gr-purple-ink:  #4a52c4;
  --gr-green-ink:   #2c7a3f;
  --gr-yellow-ink:  #7a6100;
}

/* ---------- 1. Page surface ---------- */

body.dark,
.dark                     { background-color: var(--gr-bg); }

/* single lever for the whole text cascade */
.page-wrapper.is-dark     { color: var(--gr-ink); }

/* ---------- 2. Section fades (were #141414 -> #000) ---------- */

.section_home-viral,
.section_home-goal {
  background-image: linear-gradient(var(--gr-bg-soft), var(--gr-bg));
}

/* ---------- 3. Decorative grid / "bracket" line art ----------
   Originals are white strokes at low opacity — invisible on white.
   These are the same artwork with the strokes inverted to black,
   at the identical 0.15 / 0.3 group opacity.                    */

.section_home-hero,
.section_home-cta {
  background-image: url(grid-lines-light.svg);
}

.secret_image-wrapper {
  background-image: url(grid-process-light.svg);
}

.section_home-reviews,
.section_layout254 {
  background-image: url(grid-paper-light.png);
}

/* ---------- 4. Hero glow — keep the fade, tuned for white ---------- */

.blur-hero {
  background-color: rgba(255, 185, 80, .22);   /* warm gold wash */
}

/* ---------- 5. Cards & panels ---------- */

.testimonial_card {
  background-image: linear-gradient(var(--gr-card), var(--gr-card-2));
  border: 1px solid var(--gr-line);
}

/* the deliberately-coloured pastel cards keep their fill */
.testimonial_card.colored,
.testimonial_card.is-small.colored,
.testimonial_card.on-grid.colored,
.testimonial_card.is-small.colored._2,
.testimonial_card.on-grid.colored._2 {
  background-image: none;
  border-color: rgba(0, 0, 0, .08);
  color: var(--gr-ink);
}

.review-small {
  background-image: linear-gradient(#e9eaee, var(--gr-bg));
}

.pricing19_plan {
  background-image: linear-gradient(135deg, var(--gr-card), var(--gr-card-2));
  border: 1px solid var(--gr-line);
}

.pricing-card-border {
  background-image: linear-gradient(135deg, #e2e3e7, #c9ccd3);
}

.layout254_item {
  background-color: var(--gr-card);
  border: 1px solid var(--gr-line);
}

.faq6_accordion {
  background-color: var(--gr-bg);
  border: 1px solid var(--gr-line);
}

.secret_card {
  border: 1px solid var(--gr-line);
}

/* ---------- 6. Text colours that die on white ---------- */

.text-color-yellow,
.footer4_social-link:hover        { color: var(--gr-gold-ink); }
.pastel-purple                    { color: var(--gr-purple-ink); }
.pastel-green                     { color: var(--gr-green-ink); }
.pastel-yellow                    { color: var(--gr-yellow-ink); }
.text-color-grey-2                { color: var(--gr-ink-muted); }

.icon-1x1-xsmall.color-purple     { color: var(--gr-purple-ink); }
.icon-1x1-xsmall.color-green      { color: var(--gr-green-ink); }
.icon-1x1-xsmall.color-yellow     { color: var(--gr-yellow-ink); }

/* text sitting ON a pastel/gold fill stays black — don't invert it */
.testimonial_card.colored *,
.testimonial_card.is-small.colored *,
.testimonial_card.on-grid.colored *,
.button, .button-2, .button-3, .w-button { color: #000; }

/* ---------- 7. Chrome: nav, borders, hamburger ---------- */

.navbar1_component { border-bottom-color: var(--gr-line); }

.menu-icon1_line-top,
.menu-icon1_line-middle,
.menu-icon1_line-bottom {
  background-color: var(--gr-ink);
  border-color: var(--gr-ink);
}

.button.is-alternate,
.form_input.is-alternate,
.tag.is-alternate,
.form_checkbox-icon.is-alternate,
.form_radio-icon.is-alternate {
  border-color: var(--gr-line);
}

/* ---------- 9. Pale labels inside the "Problems we solve" cards ---------- */

.layout254_item .text-size-large { color: var(--gr-purple-ink); }

/* ---------- 10. Brand wordmark ----------
   goldreach-logo.png already contains the company name, so the separate
   text label was removed from the markup. Sized to fill the bar.        */

.nav-logo.is-wordmark {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Taller bar for the larger mark, plus a downward nudge so the logo
   isn't crowding the top edge. margin-top > margin-bottom = sits low. */
.navbar1_container { min-height: 104px; }

.navbar1_logo-link .nav-logo.is-wordmark {
  margin-top: 14px;
  margin-bottom: 4px;
}

.footer4_logo-link .nav-logo.is-wordmark { height: 72px; }

@media (max-width: 991px) {
  .nav-logo.is-wordmark { height: 48px; }
  .navbar1_container    { min-height: 80px; }
  .navbar1_logo-link .nav-logo.is-wordmark { margin-top: 10px; margin-bottom: 3px; }
  .footer4_logo-link .nav-logo.is-wordmark { height: 56px; }
}

@media (max-width: 479px) {
  .nav-logo.is-wordmark { height: 36px; }
  .navbar1_container    { min-height: 64px; }
  .navbar1_logo-link .nav-logo.is-wordmark { margin-top: 8px; margin-bottom: 2px; }
  .footer4_logo-link .nav-logo.is-wordmark { height: 44px; }
}

/* ---------- 11. Footer link row ----------
   "Case Studies" is two words and was wrapping inside the flex row.      */

.footer4_link { white-space: nowrap; }

.footer4_link-list {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .5rem;
}

/* the footer row was 3 equal columns; the middle one couldn't hold five
   links, so give it the slack instead of splitting it evenly */
@media (min-width: 992px) {
  .footer4_top-wrapper { grid-template-columns: auto 1fr auto; }
}

/* ---------- 12. Hero stat row ----------
   Was a 3-column grid with a 20% gap; now carries four items.
   Icons keep the original 80x80 slot; `contain` fits the non-square
   artwork without cropping or distorting it.                            */

.layout29_item-list.is-four {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 2rem;
  row-gap: 2.5rem;
}

/* centre each icon + label within its column */
.layout29_item-list.is-four .layout29_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The four artworks have different aspect ratios. Fixing the HEIGHT (not a
   square box) gives them equal optical weight and a level row; width follows
   the artwork. The wrapper must stop clamping to 80px for that to work. */
.layout29_item-list.is-four .layout29_item-icon-wrapper {
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.layout29_item-list.is-four .icon-1x1-large-2 {
  width: auto;
  height: 104px;
  max-width: 100%;
  object-fit: contain;
}

/* labels sized down so none of them breaks across two lines */
.layout29_item-list.is-four .heading-style-h5-2 {
  font-size: .95rem;
  line-height: 1.35;
}

@media (max-width: 991px) {
  .layout29_item-list.is-four { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .layout29_item-list.is-four .icon-1x1-large-2 { height: 92px; }
  .layout29_item-list.is-four .heading-style-h5-2 { font-size: 1rem; }
}

@media (max-width: 479px) {
  .layout29_item-list.is-four { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; }
  .layout29_item-list.is-four .icon-1x1-large-2 { height: 76px; }
  .layout29_item-list.is-four .heading-style-h5-2 { font-size: .875rem; }
}

/* ---------- 13. Clip marquee ----------
   Replaces the old 4-up grid of video embeds. Same mechanic theclips.agency
   uses: one track rendered twice and translated -50%, so the loop is seamless
   with no JS. Drop real clips in by replacing .clip-card_media's contents
   with a <video autoplay muted loop playsinline> or an <img> poster.        */

.clip-marquee {
  /* Portrait 9:16 to match the reference. Swap --clip-ratio to 16 / 9 and
     --clip-w to ~344px if landscape clips are used instead. */
  --clip-w: 232px;
  --clip-ratio: 9 / 16;
  --clip-gap: 1.25rem;
  --clip-speed: 50s;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade the strip out at both edges instead of cutting it hard */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Gap lives on the cards, NOT as flex `gap`. With 16 identical cards each
   W+G wide, the row is exactly 2x one set, so translateX(-50%) lands on a
   perfect seam. Using flex `gap` would leave the loop half a gap short and
   the strip would visibly jump once per cycle. */
.clip-marquee_track {
  display: flex;
  width: max-content;
  animation: clip-scroll var(--clip-speed) linear infinite;
  will-change: transform;
}

@keyframes clip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.clip-marquee:hover .clip-marquee_track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .clip-marquee_track { animation: none; }
  .clip-marquee { overflow-x: auto; }
}

.clip-card {
  flex: 0 0 var(--clip-w);
  margin-right: var(--clip-gap);
}

.clip-card_media {
  position: relative;
  aspect-ratio: var(--clip-ratio, 9 / 16);
  border-radius: .75rem;
  overflow: hidden;
  background: linear-gradient(160deg, #23262d, #14161a);
  border: 1px solid var(--gr-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* empty slot marker — disappears on its own once media is added */
.clip-card_media:not(:has(video)):not(:has(img)):not(:has(iframe))::after {
  content: "";
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}

.clip-card_media > video,
.clip-card_media > img,
.clip-card_media > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  display: block;
}

.clip-card_label {
  position: absolute;
  bottom: .9rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

@media (max-width: 767px) {
  .clip-marquee { --clip-w: 168px; --clip-gap: .875rem; }
}

/* ---------- 14. Gold buttons keep gold fill + black label ---------- */

.button-2, .button-3, .button {
  background-color: var(--gr-gold);
  border-color: var(--gr-gold);
}

/* ---------- 15. Centred section headings ----------
   Every section heading block and its subheadline paragraph are centred.
   .max-width-large is the heading column (width:100%; max-width:48rem) and
   was left-aligned; .sticker-wrapper is inline-flex so it centres with the
   text, keeping the little sketch sticker pinned to the heading's right. */

.max-width-large:has(h1, h2),
.margin-bottom:has(> .sticker-wrapper) {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.max-width-large:has(h1, h2) > p,
.max-width-large:has(h1, h2) .text-size-medium {
  margin-left: auto;
  margin-right: auto;
}

/* Two-column blocks ("The Goal", "FAQs") keep their layout; the heading
   column and its copy are centred within that column. */
.header49_content-left,
.faq6_content-left {
  text-align: center;
}

.header49_content-left .sticker-wrapper,
.faq6_content-left .sticker-wrapper {
  justify-content: center;
}

/* ---------- 16. Teaser player ----------
   Native <video controls> looked nothing like the Gumlet player it replaced,
   so the clean frame is kept and a single custom button handles playback:
   silent looping preview by default, click to play once with sound.        */

.teaser { position: absolute; inset: 0; }

.teaser_btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  width: 62px; height: 62px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

.teaser:hover .teaser_btn,
.teaser_btn:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.teaser_btn:hover { background: var(--gr-gold); }

.teaser_btn svg {
  width: 26px; height: 26px;
  fill: #fff;
  margin-left: 3px;            /* optical centring of the play triangle */
}

.teaser_btn:hover svg { fill: #14161a; }

/* while a teaser is playing with sound, show a pause glyph and keep it visible */
.teaser.is-live .teaser_btn { opacity: 1; }
.teaser.is-live .teaser_btn svg { margin-left: 0; }
.teaser.is-live .teaser_btn svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }

/* ---------- 17. Trust / accreditation strip ----------
   Sits just above the footer, no heading. The source badges were white
   artwork inside outlined boxes on a dark plate; they are re-keyed to near
   black on transparent, and the outline boxes are gone — on a white page a
   row of boxed badges reads as clutter.                                   */

.section_trust {
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid var(--gr-line-soft);
}

.trust_row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(2rem, 4.5vw, 4.25rem);
  row-gap: 2.25rem;
}

.trust_item { display: flex; }

.trust_item img {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .62;                       /* restrained; these are credentials, not hero art */
  transition: opacity .25s ease;
}

.trust_item img:hover { opacity: 1; }

@media (max-width: 991px) {
  .section_trust { padding: 2.75rem 0 3.5rem; }
  .trust_item img { height: 44px; }
}

@media (max-width: 479px) {
  .trust_row { column-gap: 1.75rem; row-gap: 1.75rem; }
  .trust_item img { height: 34px; }
}

/* ---------- 18. "Everything Your Podcast Needs to Win" categories ----------
   Was an 11-plate orbit animation around the logo. Now 3 grouped cards
   (Get Found / Get Watched / Get Remembered) holding the same 12 services,
   but keeps the orbit's two signature traits: a slow scroll-pinned reveal
   (300vh scroll / 100vh sticky stage, see assets/categories.js) and a
   slowly-rotating dial in the background, like a compass turning behind
   the cards. Points are highlighted pill/chip style, revealed one at a
   time as you scroll, same pacing the old plates had.                    */

.section_categories { background: var(--gr-bg); }

.cat_scroll  { height: 300vh; position: relative; }

.cat_sticky  { position: sticky; top: var(--nav-offset);
               min-height: calc(100vh - var(--nav-offset));
               display: flex; align-items: center;
               padding: 1.25rem 0 2rem; }

.cat_sticky > .padding-global { width: 100%; }

.cat_sticky .container-large { position: relative; }

/* ----- rotating background dial ----- */
.cat_orbit-bg {
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.cat_glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,185,80,.22) 0%, rgba(255,185,80,.10) 45%, rgba(255,185,80,0) 70%);
}

.cat_dial {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: rgba(154,98,6,.16);
  stroke-width: 1;
  animation: cat-spin 90s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes cat-spin { to { transform: rotate(360deg); } }

.cat_head { position: relative; z-index: 1; text-align: center; margin-bottom: 1.5rem; }

.cat_grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 1080px;
  margin: 3rem auto 0;
  align-items: stretch;
}

.cat_card {
  background: linear-gradient(180deg, #ffffff, #f7f8fa);
  border: 1px solid var(--gr-line);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 16px 40px rgba(20,22,26,.08), 0 2px 6px rgba(20,22,26,.04);
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease,
              box-shadow .3s ease;
}

.cat_card.is-in { opacity: 1; transform: none; }

.cat_card.is-in:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(20,22,26,.12), 0 4px 10px rgba(20,22,26,.05);
}

.cat_title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gr-gold-ink);
  margin: 0 0 .6rem;
}

.cat_desc {
  font-size: .98rem;
  line-height: 1.5;
  color: var(--gr-ink-muted);
  margin: 0 0 1.4rem;
}

.cat_list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

/* points as highlighted chips, revealed one at a time by categories.js */
.cat_list li {
  display: flex; align-items: center; gap: .55rem;
  background: linear-gradient(180deg, rgba(255,185,80,.16), rgba(255,185,80,.06));
  border: 1px solid rgba(255,185,80,.35);
  border-radius: 10px;
  padding: .6rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gr-ink);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1),
              background .3s ease, border-color .3s ease;
}

.cat_list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gr-gold-ink);
  flex: none;
}

.cat_list li.is-in { opacity: 1; transform: none; }

/* ----- below the stage width, drop the pin and just reveal on entry ----- */
@media (max-width: 1023px) {
  .cat_scroll  { height: auto; }
  .cat_sticky  { position: static; min-height: 0; padding: 3.5rem 0 4rem; }
  .cat_list li { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .cat_grid { grid-template-columns: 1fr; max-width: 460px; }
  .cat_orbit-bg { width: 640px; height: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat_dial { animation: none; }
  .cat_list li { transition: none; opacity: 1; transform: none; }
  .cat_scroll { height: auto; }
  .cat_sticky { position: static; min-height: 0; padding: 4rem 0; }
}

/* ---------- 19. Sticker overhang on small screens ----------
   .header-sticker is absolutely placed at right:-1.5rem; on narrow viewports
   that pushed 5px past the viewport and gave the page a horizontal scrollbar.
   Pulled inside rather than clipping an ancestor — overflow on .page-wrapper
   would break the sticky orbit stage.                                       */

@media (max-width: 767px) {
  .header-sticker            { right: 0; }
  .header-sticker.header-sticker1 { right: 0; }
}

/* ---------- 21. Custom FAQ accordion state ----------
   Webflow's compiled interactions only cover the original 3 questions
   (see assets/faq.js). This just rotates the +/- icon on open/close. */

.faq6_icon-wrapper { transition: transform .3s ease; }
.faq6_accordion.is-open .faq6_icon-wrapper { transform: rotate(45deg); }

/* ---------- 22. Floating glass nav ----------
   The nav was in-flow (position:relative from Webflow's .w-nav) and scrolled
   away with the page. This turns it into a fixed, centred, translucent pill
   — floating clear of the viewport edges rather than a full-width bar — with
   a frosted-glass background. Logo, all four links and Contact stay inside.

   Because the pill is removed from document flow, a fallback:
   1. `--nav-offset` is the pill's total footprint (height + top gap + a
      breathing-room gap) and is added as top padding on the page.
   2. Every section anchor target gets scroll-margin-top of the same amount,
      so native `id` jumps (no-JS fallback, back/forward with a #hash) don't
      land underneath the pill. smooth-scroll.js reads the same live number
      for its own eased anchor jumps — see that file.                       */

:root { --nav-offset: 128px; }

.page-wrapper.is-dark { padding-top: var(--nav-offset); }

section[id^="section_"] { scroll-margin-top: var(--nav-offset); }

.navbar1_component.w-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  width: calc(100% - 2.5rem);
  max-width: 1180px;
  min-height: 0;

  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 12px 34px rgba(20, 22, 26, .10), 0 2px 10px rgba(20, 22, 26, .06);

  padding-left: 1.5rem;
  padding-right: .75rem;
}

.navbar1_container { min-height: 72px; }

.navbar1_logo-link .nav-logo.is-wordmark { height: 40px; margin-top: 0; margin-bottom: 0; }

/* Mobile dropdown — only exists at the tablet/phone breakpoint. Above that,
   the links are inline inside the pill and .navbar1_menu is a plain flex row,
   NOT a positioned overlay (leaving it fixed on desktop rendered a second
   glass pill under the real one). Scoped to Webflow's `data-collapse=medium`
   collapse threshold, which matches when the hamburger button appears.

   The re-parenting into .w-nav-overlay when opened is why both are pinned
   `position: fixed` with an absolute pixel offset — otherwise `top: 100%`
   would resolve against whatever ancestor Webflow moves it under (in one
   test, that landed the menu ~8500px down the page). */

@media (max-width: 991px) {
  .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    pointer-events: none;
  }
  .w-nav-overlay [data-nav-menu-open] { pointer-events: auto; }

  .navbar1_menu {
    position: fixed !important;
    top: calc(var(--nav-offset) - 34px) !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - var(--nav-offset) - 10px) !important;
    overflow-y: auto;

    background-color: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-bottom: none !important;
    border-radius: 28px;
    box-shadow: 0 12px 34px rgba(20, 22, 26, .12);
  }
}

@media (max-width: 991px) {
  :root { --nav-offset: 100px; }
  .navbar1_container { min-height: 60px; }
  .navbar1_logo-link .nav-logo.is-wordmark { height: 32px; }
}

@media (max-width: 479px) {
  :root { --nav-offset: 88px; }
  .navbar1_component.w-nav { width: calc(100% - 1.25rem); top: 12px; }
  .navbar1_container { min-height: 52px; }
  .navbar1_logo-link .nav-logo.is-wordmark { height: 26px; }
}

/* ---------- 23. Unified footer ----------
   Was three stacked rows separated by a 1px grey divider — the divider
   created enough visual gap that the top block and the bottom copyright
   strip read as two boxes. Consolidated into a single flex row: logo,
   links, socials, copyright, sign-off. No divider, no boxes.               */

.footer4_unified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.footer4_unified .footer4_logo-link { flex: 0 0 auto; }

.footer4_unified .footer4_link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}

.footer4_unified .footer4_social-list {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.footer4_unified .footer-credit-note,
.footer4_unified .mps-credit {
  font-size: .875rem;
  color: var(--gr-ink-muted);
  margin: 0;
}

.footer4_component { padding-bottom: 2rem; }
.footer4_component .padding-vertical.padding-xxlarge {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

@media (max-width: 767px) {
  .footer4_unified {
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
  }
  .footer4_unified .footer4_link-list { justify-content: center; }
  .footer4_unified .footer4_social-list { justify-content: center; }
}

/* ---------- 24. Vision section ----------
   Two-column: giant title left, chat-card-style copy right.
   The word "VISION" is layered — a hidden accessible text node plus an
   SVG scribble that draws itself as you scroll into view, giving the
   "highlighted by an imperfect gold circle" effect from the brief.        */

.section_vision { background: var(--gr-bg); overflow: hidden; }

.vision_grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.05fr);
  gap: 4rem;
  align-items: center;
}

/* ----- left: title with animated scribble ----- */
.vision_title-wrap { position: relative; }

.vision_title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--gr-ink);
}

.vision_title-inner {
  position: relative;
  display: inline-block;
  padding: 0.35em 0.65em 0.4em;      /* room around the words for the circle */
}

.vision_word--accent {
  color: var(--gr-gold-ink);
  display: inline-block;
}

.vision_word-ink { position: relative; z-index: 2; }

/* Big loose circle drawn around the ENTIRE title (both words). Positioned
   absolutely inside .vision_title-inner so its size follows the text block
   rather than any single word. */
.vision_scribble {
  position: absolute;
  inset: -8% -6% -8% -6%;
  width: 112%;
  height: 116%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  transform-origin: 50% 50%;
  /* the rotation itself is set live from scroll (vision.js) */
  transform: rotate(var(--vision-rot, -8deg));
  will-change: transform;
}

.vision_scribble-path {
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 2px 10px rgba(255, 185, 80, .32));
}

.vision_title.is-in .vision_scribble-path { stroke-dashoffset: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----- right: chat-message card ----- */
.vision_card-wrap { display: flex; justify-content: flex-start; }

.vision_card {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: linear-gradient(180deg, #ffffff, #f7f8fa);
  border: 1px solid var(--gr-line);
  border-radius: 22px;
  padding: 1.4rem 1.6rem 1.6rem;
  box-shadow: 0 24px 60px rgba(20, 22, 26, .10), 0 2px 6px rgba(20, 22, 26, .04);
}

/* the little chat-tail on the left edge, pointing at the title */
.vision_card::before {
  content: "";
  position: absolute;
  left: -10px; top: 46px;
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #ffffff 50%, transparent 50%);
  border-left: 1px solid var(--gr-line);
  border-bottom: 1px solid var(--gr-line);
  transform: rotate(45deg);
  border-radius: 3px;
}

.vision_card-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--gr-line-soft);
  margin-bottom: 1rem;
}

.vision_card-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e6e7ea;
}
.vision_card-dot:nth-child(1) { background: #ff5f57; }
.vision_card-dot:nth-child(2) { background: #febc2e; }
.vision_card-dot:nth-child(3) { background: #28c840; }

.vision_card-title {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gr-ink-muted);
  letter-spacing: .02em;
}

.vision_card-body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gr-ink);
  margin: 0 0 .95rem;
}
.vision_card-body p:last-child { margin-bottom: 0; }

.vision_card-body strong {
  font-weight: 700;
  color: var(--gr-ink);
}

.vision_card-note {
  font-size: .92rem !important;
  color: var(--gr-ink-muted) !important;
  padding-top: .8rem;
  border-top: 1px solid var(--gr-line-soft);
  margin-top: .4rem !important;
}

@media (max-width: 991px) {
  .vision_grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .vision_title { align-items: center; }
  .vision_card-wrap { justify-content: center; }
  .vision_card { text-align: left; }
  .vision_card::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vision_scribble-path { transition: none; stroke-dashoffset: 0; }
}

/* ---------- 25. iMessage-style testimonials ----------
   Each testimonial reads like a chat message: circular avatar with the
   speaker's initials on the left, a rounded blue-grey bubble on the right
   with a small tail, name + role beneath. Two columns on desktop, one on
   mobile. Cards live inside .imsg-grid.                                    */

.imsg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.5rem;
  max-width: 1080px;
  margin: 0 auto;
}

/* five cards in a 2-col grid leaves the last one dangling alone in
   column 1 — centre it under the two above instead */
.imsg-thread:last-child {
  grid-column: 1 / -1;
  max-width: calc(50% - 1.25rem);
  margin: 0 auto;
}

.imsg-thread {
  display: flex;
  gap: .9rem;
  align-items: flex-end;      /* bubble sits above avatar's baseline */
}

.imsg-avatar {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  letter-spacing: .02em;
  margin-bottom: 26px;         /* aligns with the name line, not the bubble */
  flex-shrink: 0;
}

/* three gentle Apple-y avatar tints, cycled across the six cards */
.imsg-avatar--imsg-a { background: linear-gradient(135deg, #7aa5ff, #4a7bff); }
.imsg-avatar--imsg-b { background: linear-gradient(135deg, #ffb078, #ff8a3d); }
.imsg-avatar--imsg-c { background: linear-gradient(135deg, #8fd9a8, #4fb37a); }

.imsg-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;               /* lets long lines wrap inside the grid col */
  flex: 1 1 auto;
}

.imsg-bubble {
  position: relative;
  background: #e9e9eb;         /* iMessage grey (received bubble) */
  color: #14161a;
  padding: .85rem 1.1rem;
  border-radius: 20px;
  font-size: .98rem;
  line-height: 1.5;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(20,22,26,.04);
}

/* the little "tail" at the bottom-left of the bubble, pointing at the avatar */
.imsg-bubble::before {
  content: "";
  position: absolute;
  left: -6px; bottom: 0;
  width: 20px; height: 22px;
  background: #e9e9eb;
  border-bottom-right-radius: 16px;
  z-index: -1;
}
.imsg-bubble::after {
  content: "";
  position: absolute;
  left: -14px; bottom: 0;
  width: 14px; height: 22px;
  background: var(--gr-bg);
  border-bottom-right-radius: 14px;
}

.imsg-meta {
  margin-top: .55rem;
  padding-left: .3rem;
  font-size: .78rem;
  color: var(--gr-ink-muted);
}
.imsg-name { font-weight: 600; color: var(--gr-ink); }
.imsg-role { color: var(--gr-ink-muted); }

@media (max-width: 767px) {
  .imsg-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .imsg-avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: .9rem; margin-bottom: 22px; }
  .imsg-bubble { font-size: .95rem; }
  .imsg-thread:last-child { max-width: 100%; margin: 0; }
}

/* Old testimonial-card selectors from the Webflow bundle no longer
   render inside this section, but neutralise any lingering !important
   overrides just in case. */
.section_testimonial18 .testimonial_card { display: none; }

/* ---------- 26. Pinboard grid ("Problems we solve") ----------
   Five problem-statement cards, "papers pinned to a wall." Each card
   carries a small SVG push-pin at the top-centre and a slight per-card
   rotation so it feels hand-arranged. Two chat-style bubbles sit
   underneath as the heading + subline.

   Grid uses 6 columns so 3 cards fill row one (2 cols each) and the
   remaining 2 cards can be explicitly centred on row two — a plain
   repeat(3,1fr) would leave 5 items as 3-then-2-left-aligned, which reads
   lopsided. */

.section_pinboard { background: var(--gr-bg); }

.pinboard_grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 2rem;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 1.5rem;      /* space for the pins that sit ABOVE each card */
}

.pin_card {
  position: relative;
  grid-column: span 2;
  background: linear-gradient(180deg, #ffffff, #f7f8fa);
  border: 1px solid var(--gr-line);
  border-radius: 14px;
  padding: 2.5rem 1.4rem 1.6rem;
  box-shadow: 0 20px 40px rgba(20,22,26,.09), 0 2px 6px rgba(20,22,26,.04);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pin_card:nth-child(4) { grid-column: 2 / span 2; }
.pin_card:nth-child(5) { grid-column: 4 / span 2; }

.pin_card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 24px 52px rgba(20,22,26,.12), 0 4px 10px rgba(20,22,26,.05);
}

/* The push-pin, hanging off the top of each card so it looks like it's
   pinning the paper to the wall behind it. */
.pin_pin {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 32px;
  display: block;
  filter: drop-shadow(0 3px 4px rgba(20,22,26,.25));
  z-index: 2;
}

.pin_svg { width: 100%; height: 100%; display: block; }

.pin_icon {
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}

.pin_icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.pin_label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--gr-ink);
  line-height: 1.3;
}

/* Chat-bubble conversation underneath the grid — heading + subline. */
.pinboard_convo {
  max-width: 620px;
  margin: 4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}

/* One combined bubble, translucent glass. */
.pin_bubble {
  position: relative;
  background: rgba(233, 233, 235, .55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--gr-ink);
  padding: 1.2rem 1.5rem;
  border-radius: 22px;
  max-width: 88%;
  box-shadow: 0 6px 20px rgba(20,22,26,.06);
}

.pin_bubble--combined { display: flex; flex-direction: column; gap: .6rem; }

.pin_bubble-head {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
}
.pin_bubble-head strong { color: var(--gr-gold-ink); font-weight: 700; }

.pin_bubble-sub {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--gr-ink);
}

.pin_bubble::before {
  content: "";
  position: absolute;
  left: -6px; bottom: 0;
  width: 22px; height: 22px;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
  border-left: 1px solid rgba(255, 255, 255, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  border-bottom-right-radius: 16px;
  z-index: -1;
}
.pin_bubble::after {
  content: "";
  position: absolute;
  left: -16px; bottom: 0;
  width: 16px; height: 22px;
  background: var(--gr-bg);
  border-bottom-right-radius: 14px;
}

/* Old .review-small / layout254 chrome from the previous design is gone
   from the DOM now — hide any stragglers in case they get re-added. */
.section_pinboard .review-small,
.section_pinboard .layout254_component,
.section_pinboard .layout254_image-wrapper { display: none; }

@media (max-width: 991px) {
  .pinboard_grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .pin_card { grid-column: span 1; min-height: 190px; padding: 2.25rem 1.1rem 1.4rem; }
  .pin_card:nth-child(4), .pin_card:nth-child(5) { grid-column: span 1; }
  .pin_card:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - .75rem); margin: 0 auto; }
  .pin_bubble--head { font-size: 1.3rem; }
}

@media (max-width: 479px) {
  .pinboard_grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .pin_icon { width: 64px; height: 64px; }
  .pin_label { font-size: .95rem; }
  .pin_card:nth-child(5) { max-width: calc(50% - .625rem); }
}