/* iGo 2027 sponsorship page — v22
   Upload this file to HubSpot: Library > Files, alongside the images.
   Then reference it from Head HTML with a single <link> tag. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

  /* Everything is scoped to the page wrapper, so none of it can affect the rest of the
     site. Both the class and the data attribute are matched, in case HubSpot's editor
     drops one of them on save. */

  .igo-page, [data-igo-page] { font-family: 'Montserrat', system-ui, sans-serif; }
  .igo-page *, [data-igo-page] * { box-sizing: border-box; }
  .igo-page a, [data-igo-page] a { color: #05758A; text-decoration: none; }
  .igo-page a:hover, [data-igo-page] a:hover { color: #21A1B2; }

  /* The wrapper carries overflow-x: hidden inline, which turns it into a scroll
     container and silently disables the scroll-driven animations below. Nothing on the
     page overflows horizontally, so clearing it is safe. */
  .igo-page, [data-igo-page] { overflow: visible !important; }

  /* the theme sets img { max-width: 100%; height: auto } — undo it inside the page only */
  .igo-page img, [data-igo-page] img { max-width: none; height: auto; }
  .igo-page .igo-gal img, [data-igo-page] [data-gal] img { width: 100%; height: 100%; object-fit: cover; }
  .igo-page video, [data-igo-page] video { width: 100%; max-width: 100%; height: auto; display: block; }

  /* ---------- responsive row counts ---------- */

  /* photo gallery: 6-up desktop, 3-up tablet and phone */
  .igo-page .igo-gal, [data-igo-page] [data-gal] { flex: 1 1 calc(16.6667% - 9px); height: clamp(158px, 19.5vw, 285px); }
  @media (max-width: 1100px) {
    .igo-page .igo-gal, [data-igo-page] [data-gal] { flex: 1 1 calc(33.3333% - 7px); }
  }
  @media (max-width: 640px) {
    .igo-page .igo-gal, [data-igo-page] [data-gal] { flex: 1 1 calc(33.3333% - 7px); height: clamp(78px, 24vw, 110px); }
  }

  /* client logo band: 8-up, 4-up, 2-up */
  .igo-page .igo-logo, [data-igo-page] [data-logo] { flex: 1 1 calc(12.5% - 30px); max-width: 190px; }
  @media (max-width: 1100px) {
    .igo-page .igo-logo, [data-igo-page] [data-logo] { flex: 1 1 calc(25% - 24px); }
  }
  @media (max-width: 640px) {
    .igo-page .igo-logo, [data-igo-page] [data-logo] { flex: 1 1 calc(50% - 16px); }
  }

  /* ---------- hover and press states ---------- */

  .igo-page .igo-cta-primary:hover, [data-igo-page] [data-cta="primary"]:hover { background: #0B7E92; color: #FFFFFF; }
  .igo-page .igo-cta-ghost:hover, [data-igo-page] [data-cta="ghost"]:hover { background: rgba(5,117,138,0.05); color: #05758A; }
  .igo-page .igo-cta:active, [data-igo-page] [data-cta]:active { transform: scale(0.98); }

  .igo-page .igo-lift, [data-igo-page] [data-lift] { transition: transform 300ms cubic-bezier(0.22,1,0.36,1), box-shadow 300ms cubic-bezier(0.22,1,0.36,1); }
  .igo-page .igo-lift:hover, [data-igo-page] [data-lift]:hover { transform: translateY(-4px); box-shadow: 0 20px 25px rgba(5,117,138,0.10), 0 8px 10px rgba(45,41,38,0.04); }
  .igo-page .igo-outline:hover, [data-igo-page] [data-outline]:hover { border-color: #21A1B2; box-shadow: 0 4px 16px rgba(5,117,138,0.08), 0 1px 3px rgba(45,41,38,0.04); }
  .igo-page .igo-outline:hover .igo-arrow, [data-igo-page] [data-outline]:hover [data-arrow] { gap: 10px; }

  /* sheen on the CTA buttons: centred rather than tracking the pointer, since that
     needed script */
  .igo-page .igo-glow, [data-igo-page] [data-glow] { opacity: 0 !important; transition: opacity 300ms cubic-bezier(0.22,1,0.36,1); }
  .igo-page .igo-cta:hover .igo-glow, [data-igo-page] [data-cta]:hover [data-glow] { opacity: 1 !important; }

  /* ---------- photo gallery expand ---------- */

  .igo-page .igo-gal, [data-igo-page] [data-gal] { transition: flex-grow 900ms cubic-bezier(0.22,1,0.36,1); }
  .igo-page .igo-veil, [data-igo-page] [data-gal-veil] { transition: opacity 900ms cubic-bezier(0.22,1,0.36,1); }
  /* hovered cell grows; siblings after it shrink via the sibling combinator */
  .igo-page .igo-gal:hover, [data-igo-page] [data-gal]:hover { flex-grow: 2.2; }
  .igo-page .igo-gal:hover ~ .igo-gal, [data-igo-page] [data-gal]:hover ~ [data-gal] { flex-grow: 0.6; }
  .igo-page .igo-gal:hover .igo-veil, [data-igo-page] [data-gal]:hover [data-gal-veil] { opacity: 0; }

  /* ---------- scroll-driven fade up and bar growth ----------
     CSS scroll-driven animations. Where the browser does not support them (Safari and
     Firefox today) the page renders fully visible with full-length bars, which is the
     correct fallback. */

  @keyframes igoRise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes igoGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @supports (animation-timeline: view()) {
    .igo-rv, [data-igo-page] [data-rv] {
      animation: igoRise 1s linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    .igo-page .igo-bar, [data-igo-page] [data-bar] {
      transform-origin: left center;
      animation: igoGrow 1s linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 28%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .igo-rv, [data-igo-page] [data-rv],
    .igo-page .igo-bar, [data-igo-page] [data-bar] {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }