@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700");
@import url("https://api.fontshare.com/css?f[]=roboto@400,500,600,700&display=swap");
:root {--page-alt:#f3fffa;
     --page-alt-2: #3d989110;
     --page-alt-3: color(display-p3 0.672 0.85 0.745 / 0.31);
      --page-alt-4: color(display-p3 0.205 0.975 0.523 / 0.1); --35e5a892: 50% 50%;
      --page-alt-5: color(display-p3 0.205 0.975 0.521 / 0.07);
--52f2b47e: 0.615;
--53ca81f0: cover;
--54cd3d5c: flex-end;
--25058bf8: flex-start;
--blocks-builder-block-spacing-default: 4rem;
--blocks-builder-section-spacing-default: 4rem;
--box-border-color-default: #DBD8D3;
--box-border-left-width: 0;
--box-border-right-width: 0;
--box-border-top-width: 0;
--box-border-width-default: .1rem;
--box-gap-default: 2rem;
--box-main-align: flex-end;
--box-main-col-gap: 2rem;
--box-main-direction: row;
--box-main-gap-default: 2rem;
--box-main-justify: flex-start;
--box-main-row-gap: 2rem;
--box-padding: 4rem 0 4rem 0;
--box-padding-x: 0;
--box-padding-x-default: 4rem;
--box-padding-y-default: 4rem;
--box-radius-default: 0;
--box-txt-color-default: #333347;
--card-height-default: auto;
--card-max-width-default: 100%;
--card-service-title-copy-width: 15ch;
--card-service-title-width: 50%;
--card-width: 100%;
--card-width-default: 30rem;
--color-blue-100: #E6EFFA;
--color-blue-200: #CEDFF6;
--color-blue-300: #B5D0F1;
--color-blue-400: #9DC0ED;
--color-blue-500: #84B0E8;
--color-dark: #333347;
--color-dark-30: rgba(51, 51, 71, .3019607843);
--color-error: #f7a6a6;
--color-gray-100: #FBF9F5;
--color-gray-200: #F7F3EB;
--color-gray-300: #DBD8D3;
--color-gray-400: #A3A1A4;
--color-gray-500: #6B6A75;
--color-light: #ffffff;
--color-text-faded: #526F9C;
--color-warning: #fcc582;
--container-display-default: block;
--container-gap-base: 4rem;
--container-gap-default: 4rem;
--container-margin-left-default: auto;
--container-margin-right-default: auto;
--container-max-width-default: calc(100% - (4rem * 2));
--container-width-default: max(164.8rem, 95.3703703704vw);
--ff-heading: Aeonik, sans-serif;
--ff-paragraph: Aeonik, sans-serif;
--footer-height: 755.984375px;
--footer-margin-top: 0;
--fs-2xl: 3rem;
--fs-lg: 2.2rem;
--fs-md: 1.8rem;
--fs-reg: 1.6rem;
--fs-sm: 1.4rem;
--fs-xl: 2.6rem;
--grid-column-width: calc( (100% - (2rem * (12 - 1))) / 12 );
--grid-columns: 12;
--grid-gap: 2rem;
--grid-gap-2X: calc(2rem * 2);
--grid-gap-4X: calc(2rem * 4);
--grid-gap-half: calc(2rem / 2);
--grid-gap-third: calc(2rem / 3);
--grid-offset: calc(calc( (100% - (2rem * (12 - 1))) / 12 ) + 2rem);
--header-height: 130px;
--header-inner-height: 50px;
--header-with-logo-height: 194.984375px;
--image-display-default: block;
--image-height-default: auto;
--image-object-fit-default: cover;
--image-object-position-default: 50% 50%;
--image-parallax-ratio-default: .8;
--image-ratio-default: 0.615;
--image-width: 15.5%;
--image-width-default: fit-content;
--lh-2xs: 1.05;
--lh-3xs: .9;
--lh-lg: 1.4;
--lh-md: 1.3;
--lh-sm: 1.2;
--lh-xs: 1.1;
--media-ratio-landscape: 1.35;
--media-ratio-portrait: .875;
--media-ratio-square: 1;
--overlay-background-color: rgba(51, 51, 71, 0);
--radius: 4rem;
--radius-lg: 2rem;
--radius-md: 1rem;
--rte-gap: calc(1.4 * 1em);
--rte-gap-2X: calc(calc(1.4 * 1em) * 2);
--rte-gap-4X: calc(calc(1.4 * 1em) * 4);
--rte-gap-half: calc(calc(1.4 * 1em) / 2);
--rte-gap-third: calc(calc(1.4 * 1em) / 3);
--section-service-list-gap: 8rem;
--shadow: 0 .4rem 1.2rem 0 rgba(0, 0, 0, .08);
--shadow-dark: 0 0 1.2rem 0 rgba(0, 0, 0, .16);
--spacer: 4rem;
--spacer-lg: 4rem;
--spacer-md: 2rem;
--spacer-sm: 1rem;
--spacer-xl: 8rem;
--spacer-xs: .5rem;
--z-default: 1;
--z-dropdown: 100;
--z-header: 200;
--z-limbo: -100;
--z-loader: 500;
--z-modal: 300;
  /* --- Your existing page background --- */
  /* body uses: --page-alt-5 */

  /* --- NEW: site-wide semantic palette (mint/teal glass) --- */
  --bg: var(--page-alt-5);                /* page backdrop */
  --ink: #0f1f1c;                         /* primary text on light surfaces */
  --ink-soft: rgba(15,31,28,.72);         /* secondary text */
  --ink-faint: rgba(15,31,28,.55);

  --surface: rgba(255,255,255,.82);       /* main cards/pills */
  --surface-2: rgba(255,255,255,.70);     /* secondary surfaces */
  --surface-3: rgba(255,255,255,.58);     /* lightest glass */

  --glass: rgba(61,152,145,.14);          /* tinted “wipe” / hover wash */
  --glass-2: rgba(61,152,145,.10);

  --border: rgba(15,31,28,.10);
  --border-2: rgba(15,31,28,.14);

  --shadow-1: 0 18px 50px rgba(9,16,14,.10);
  --shadow-2: 0 10px 28px rgba(9,16,14,.08);

  --accent: #2aa79d;                      /* teal */
  --accent-2: #1e7f78;                    /* deeper teal */
  --accent-soft: rgba(42,167,157,.18);    /* teal glow */
  --accent-soft-2: rgba(42,167,157,.10);

  --gold: #d9b35b;                        /* stars */
}
      /* ---- Reset-ish ---- */
      html, body { height: 100%; overflow-x: hidden; }
      body { margin: 0; }

      p, ol, ul { margin: 0px; }
      button { padding: 0px; }
      ol, ul { padding-inline-start: 1.5em; }
      input { background-image: none; background-color: transparent; }

      /* ---- GSAP ScrollSmoother required layout ---- */
      #smooth-wrapper {
        position: fixed;
        inset: 0;
        overflow: hidden;
      }
      #smooth-content {
        will-change: transform;
        min-height: 300vh;
      }

      /* Optional: if you have any fixed UI you want above everything */
      /* .site-header { position: fixed; top:0; left:0; right:0; z-index:9999; } */

      /* ---- Your FireJet CSS ---- */
      .common-7,
      .image-background,
      .image-background-1 {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
      }

      .common-6,
      .image-button,
      .image-button-2 {
        border-style: solid;
        border-color: white;
      }

      .common-2,
      .image-t-link-text-tlink-text-tchevron-down-link-text-link-text,
      .image-t-chevron-down-link-text-link-text {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
      }

      .common-3,
      .image-rectangle,
      .image-ttt-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .common-4,
      .image-t-logo-tlink-text-tlink-text-tchevron-down-link-text-link-text,
      .image-t-link-text-tchevron-down-link-text-link-text,
      .image-button,
      .image-button-2 {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .common-5,
      .image-hero-image,
      .image-t-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-suspendisse-varius-enim-in-eros-elementum-tristique-duis-cursus-mi-quis-viverra-ornare-eros-dolor-interdum-nulla-ut-commodo-diam-libero-vitae-erat,
      .image-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-suspendisse-varius-enim-in-eros-elementum-tristique-duis-cursus-mi-quis-viverra-ornare-eros-dolor-interdum-nulla-ut-commodo-diam-libero-vitae-erat,
      .image-t-button-button {
        display: flex;
        align-items: center;
      }

      .common-1,
      .image-wrapper,
      .image-image {
        display: flex;
        width: 100%;
      }

      .image-wrapper {
        height: 100vh;
        align-items: flex-start;
        line-height: normal;
        /*-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 80px), transparent 100%);
  		mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 80px), transparent 100%);*/
      }

      .image-image {
        background-image: radial-gradient(rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, 0.3));
        height: 100vh;
        overflow:hidden;
      }

      .image-hero-image {
        flex-direction: column;
        flex-grow: 1;
        height: 100vh;
        padding-bottom: 62px;
        position: relative;
      }

      .image-background {
        /* Optimised hero photo (12MB PNG -> ~500KB WebP/~900KB JPEG fallback) */
        background-image: url(./background.jpg);
        background-image: image-set(
          url(./background.webp) type("image/webp") 1x,
          url(./background.jpg) type("image/jpeg") 1x
        );
        background-position: center;
        background-size: cover;
      }

      .image-background-1 {
        background-image: radial-gradient(
          rgba(0, 0, 0, 0) 43%,
          rgba(0, 0, 0, 0.35) 94%
        );
      }
      
      .image-background {
  top: -50%;
  bottom: -50%;
  left: 0;
  right: 0;
  background-position: center;
  background-size: cover;
}

      .image-rectangle {
        background-image: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.4),
          rgba(0, 0, 0, 0.05)
        );
        align-self: stretch;
        flex-grow: 1;
        padding-bottom: 32px;
        padding-left: 64px;
        padding-right: 64px;
        /*padding-right: 545px;*/
        padding-top: 32px;
        z-index: 1;
        font-family: Roboto, ui-sans-serif, system-ui, sans-serif;
        font-size: 18px;
        color: white;
        line-height: 1.5;
        gap: 32px;
        width:100%;
        height:100vh;
        position:absolute;
      }

      .image-t-logo-tlink-text-tlink-text-tchevron-down-link-text-link-text {
        /* was column-gap:285px + flex-wrap:wrap — forced the logo and
           hamburger onto separate rows once .main-nav rejoins normal flow
           below 1116px. */
        row-gap: 12px;
        column-gap: 16px;
        flex-wrap: nowrap;
      }

      .image-logo {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 88px;
      }

      .image-t-link-text-tlink-text-tchevron-down-link-text-link-text {
        font-weight: 500;
      }

      .image-t-link-text-tchevron-down-link-text-link-text {
        gap: 4px;
      }

      .image-chevron-down {
        width: 24px;
        height: 24px;
      }

      .image-ttt-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here {
        justify-content: flex-end;
      }

      .image-tt-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here {
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        display: flex;
        font-size: clamp(3rem, 6vmin, 5rem);
        line-height: 1.2;
        gap: 20px;
      }

      .image-t-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here {
        text-align: left;
      }

      .image-para { text-align: center; }
      .image-text { font-weight: 700; }
      .image-text-1 { font-weight: 600; font-style: italic; }
      .image-text-2 { font-weight: 700; }
      .image-medium-length-hero-headline-goes-here-1 { font-weight: 700; }
      .image-medium-length-hero-headline-goes-here-2 { font-weight: 600; font-style: italic; }

      .image-t-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-suspendisse-varius-enim-in-eros-elementum-tristique-duis-cursus-mi-quis-viverra-ornare-eros-dolor-interdum-nulla-ut-commodo-diam-libero-vitae-erat {
        align-self: stretch;
        max-width: 830px;
        padding-right: 84px;
      }

      .image-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-suspendisse-varius-enim-in-eros-elementum-tristique-duis-cursus-mi-quis-viverra-ornare-eros-dolor-interdum-nulla-ut-commodo-diam-libero-vitae-erat {
        flex-grow: 1;
      }

      .image-t-button-button {
        flex-wrap: wrap;
        text-align: center;
        font-weight: 500;
        gap: 15px;
      }

      .image-button {
        border-top-width: 0.3px;
        border-bottom-width: 0.3px;
        border-left-width: 0.3px;
        border-right-width: 0.3px;
        border-bottom-left-radius: 1000px;
        border-bottom-right-radius: 1000px;
        background-image: linear-gradient(
            90deg,
            rgba(0, 140, 255, 0.2),
            rgba(0, 140, 255, 0.2)
          ),
          linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
          linear-gradient(90deg, rgba(247, 247, 247, 0.3), rgba(247, 247, 247, 0.3)),
          linear-gradient(90deg, rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
        padding-bottom: 12px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 12px;
        border-top-left-radius: 1000px;
        border-top-right-radius: 1000px;
        filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
        backdrop-filter: blur(3px);
      }

      .image-button-1 { text-align: center; }

      .image-button-2 {
        border-top-width: 0.3px;
        border-bottom-width: 0.3px;
        border-left-width: 0.3px;
        border-right-width: 0.3px;
        border-bottom-left-radius: 1000px;
        border-bottom-right-radius: 1000px;
        background-image: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.04)
          ),
          linear-gradient(90deg, rgba(247, 247, 247, 0.3), rgba(247, 247, 247, 0.3)),
          linear-gradient(90deg, rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
        padding-bottom: 12px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 12px;
        border-top-left-radius: 1000px;
        border-top-right-radius: 1000px;
        filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
        backdrop-filter: blur(3px);
      }

      .image-button-3 { text-align: center; }

      @media (min-width: 1430px) {
        .image-t-logo-tlink-text-tlink-text-tchevron-down-link-text-link-text { flex-wrap: nowrap; }
        .image-tt-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here-medium-length-hero-headline-goes-here { flex-wrap: nowrap; }
        .image-t-button-button { flex-wrap: nowrap; }
      }

      /* Extra: ensure the parallax layer can move without causing layout flicker */
      .slower {
        will-change: transform;
        transform: translateZ(0);
      }

      /* Demo extra content so you can actually scroll and see smoothing/parallax */
      .demo-spacer {
        height: 1400px;
      }
      .site-header .brand{
  position: relative;
  z-index: 2;
  margin-right: auto;
}

.site-header .main-nav{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 32px;
}
    @media (max-width: 1116px){
  .site-header .main-nav{
    position: static;
    transform: none;
    margin-left: auto;
  }
}  
      .site-header a {
  color: inherit;
  text-decoration: none;
}
.site-header {position: relative;width:100%;}

.header-blur-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px; /* taller than the header itself — gives room for the fade */
  
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.02);
  
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
  
  pointer-events: none; /* critical — lets clicks pass through to nav/content beneath */
  z-index: 1;
}

.header-nav {
  z-index: 2; /* sits above the blur layer */
}

.main-nav .nav-link {
  color: inherit;
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 32px; /* matches your existing gap */
}

.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cqc-banner__inner {display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
.site-header nav a, .site-header nav ul, .site-header nav button {color:white!important;font-size:18px!important;font-weight:500!important;font-family:Roboto, ui-sans-serif, system-ui, sans-serif !important;}
.site-header{z-index:999;pointer-events:auto}
.site-header .brand {padding-left:64px;}
/* Screen-reader only */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Desktop layout (your current header centering can remain) */
.nav-toggle{ display:none; }

/* Burger icon */
.nav-toggle{
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  cursor: pointer;
  position: relative;
  z-index:99999;
  pointer-events: auto;
  margin-right:64px
}
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.nav-toggle .burger::before{ transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle .burger::after { transform: translate(-50%, calc(-50% + 6px)); }

/* Mobile panel */
.nav-mobile{
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  z-index: 99999;
}
.main-nav.is-open .nav-mobile{
  display: grid;
  gap: 10px;
}

.nav-mobile .nav-link{
  padding: 10px 12px;
  border-radius: 12px;
}
.nav-mobile .nav-link:hover{
  background: rgba(255,255,255,.10);
}

/* Switch point */
@media (max-width: 1116px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }

  /* Make nav container a positioning anchor for the dropdown */
  .main-nav{ position: relative; }
}
  .cqc-banner{
    padding: 28px 14px;
    display: grid;
    place-items: center;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    /*background: #e9eeff;*/
    margin-top: 64px;
    margin-bottom: 32px;
    background: transparent;
  }

  .cqc-banner__pill{
    position: relative;
    width:100%;
    max-width: min(760px, 92vw);
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    box-shadow:
      0 26px 70px rgba(17,24,39,.14),
      0 2px 12px rgba(17,24,39,.06);
    padding: 18px 22px;
    overflow: hidden;
  }

  /* dotted texture like your reference */
  .cqc-banner__dots{
    position:absolute;
    inset: 12px;
    border-radius: 999px;
    background-image: radial-gradient(rgba(17,24,39,.12) 1.1px, transparent 1.1px);
    background-size: 18px 18px;
    opacity: .22;
    pointer-events:none;
  }

  .cqc-banner__pill{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-self: stretch;
  }

  /* LEFT */
  .cqc-banner__left{
    display:flex;
    align-items:center;
    gap: 14px;
    min-width: 0;
  }

  .cqc-banner__logo{
    display:flex;
    align-items:center;
    gap: 10px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    white-space: nowrap;
  }

  .cqc-banner__logo-mark{
    width: 18px; height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(99,102,241,.9), rgba(16,185,129,.85));
    box-shadow: 0 10px 20px rgba(17,24,39,.12);
    display:inline-block;
  }

  .cqc-banner__logo-text{
    font-weight: 900;
    letter-spacing: .06em;
    color: #111827;
    font-size: 12px;
  }

  .cqc-banner__mini{
    display:grid;
    gap: 2px;
    line-height: 1.05;
  }

  .cqc-banner__mini-label{
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(17,24,39,.55);
  }

  .cqc-banner__mini-value{
    font-size: 16px;
    font-weight: 900;
    color: #111827;
  }

  /* MIDDLE */
  .cqc-banner__mid{
    display:flex;
    align-items:center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    margin:0 auto;
  }

  .cqc-banner__stars{
    display:flex;
    align-items:center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .cqc-star{
    width: 26px;
    height: 26px;
    fill: #f4b740; /* warm gold */
    filter: drop-shadow(0 8px 14px rgba(244,183,64,.25));
  }

  .cqc-banner__mid-text{
    font-size: 18px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cqc-banner__mid-text strong{ font-weight: 900; }

  /* RIGHT */
  .cqc-banner__right{
    display:flex;
    align-items:center;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right;
  }
  
  .bgcont {margin-top:auto;margin-bottom:7.5rem;}

  .cqc-banner__link{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    text-decoration:none;
    color: #111827;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(17,24,39,.10);
  }
  .cqc-banner__link:hover{ transform: translateY(-1px); }

  .cqc-banner__stamp{
    font-size: 12px;
    color: rgba(17,24,39,.62);
    white-space: nowrap;
  }
  .cqc-banner__stamp strong{ color:#111827; font-weight: 900; }

  /* Rating themes (set on .cqc-banner__pill via data-rating) */
  .cqc-banner__pill[data-rating="outstanding"] .cqc-banner__mini-value{ color:#4f46e5; }
  .cqc-banner__pill[data-rating="outstanding"] .cqc-banner__logo-mark{
    background: linear-gradient(135deg, #6366f1, #22c55e);
  }

  .cqc-banner__pill[data-rating="good"] .cqc-banner__mini-value{ color:#059669; }

  .cqc-banner__pill[data-rating="requires-improvement"] .cqc-banner__mini-value{ color:#d97706; }
  .cqc-banner__pill[data-rating="requires-improvement"] .cqc-star{ fill:#f59e0b; }

  .cqc-banner__pill[data-rating="inadequate"] .cqc-banner__mini-value{ color:#dc2626; }
  .cqc-banner__pill[data-rating="inadequate"] .cqc-star{ fill:#ef4444; }

  /* Responsive */
  @media (max-width: 900px){
    .cqc-banner__pill{
      grid-template-columns: 1fr;
      padding: 16px 16px;
    }
    .cqc-banner__mid{ justify-content: flex-start; flex-wrap: wrap; }
    .cqc-banner__mid-text{ white-space: normal;}
  }

  @media (max-width: 520px){
    .cqc-star{ width: 4vw; height: 4vw; }
    .cqc-banner__mid-text{ font-size:0.8vw; }
    .cqc-banner__stamp{ font-size:0.6vw; }
  }
  .cqc-banner{
    padding: 28px 14px;
    display: grid;
    place-items: center;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    /*background: #e9eeff;*/
    margin-top: 64px;
    margin-bottom: 32px;
    background: transparent;
  }

  .cqc-banner__pill{
    position: relative;
    width:100%;
    max-width: min(760px, 92vw);
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    box-shadow:
      0 26px 70px rgba(17,24,39,.14),
      0 2px 12px rgba(17,24,39,.06);
    padding: 18px 22px;
    overflow: hidden;
  }

  /* dotted texture like your reference */
  .cqc-banner__dots{
    position:absolute;
    inset: 12px;
    border-radius: 999px;
    background-image: radial-gradient(rgba(17,24,39,.12) 1.1px, transparent 1.1px);
    background-size: 18px 18px;
    opacity: .22;
    pointer-events:none;
  }

  .cqc-banner__pill{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* LEFT */
  .cqc-banner__left{
    display:flex;
    align-items:center;
    gap: 14px;
    min-width: 0;
  }

  .cqc-banner__logo{
    display:flex;
    align-items:center;
    gap: 10px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    white-space: nowrap;
  }

  .cqc-banner__logo-mark{
    width: 18px; height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(99,102,241,.9), rgba(16,185,129,.85));
    box-shadow: 0 10px 20px rgba(17,24,39,.12);
    display:inline-block;
  }

  .cqc-banner__logo-text{
    font-weight: 900;
    letter-spacing: .06em;
    color: #111827;
    font-size: 12px;
  }

  .cqc-banner__mini{
    display:grid;
    gap: 2px;
    line-height: 1.05;
  }

  .cqc-banner__mini-label{
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(17,24,39,.55);
  }

  .cqc-banner__mini-value{
    font-size: 16px;
    font-weight: 900;
    color: #111827;
  }

  /* MIDDLE */
  .cqc-banner__mid{
    display:flex;
    align-items:center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    margin:0 auto;
  }

  .cqc-banner__stars{
    display:flex;
    align-items:center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .cqc-star{
    width: 26px;
    height: 26px;
    fill: #f4b740; /* warm gold */
    filter: drop-shadow(0 8px 14px rgba(244,183,64,.25));
  }

  .cqc-banner__mid-text{
    font-size: 18px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cqc-banner__mid-text strong{ font-weight: 900; }

  /* RIGHT */
  .cqc-banner__right{
    display:flex;
    align-items:center;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right;
  }
  
  .bgcont {margin-top:auto;margin-bottom:7.5rem;}

  .cqc-banner__link{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    text-decoration:none;
    color: #111827;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(17,24,39,.10);
  }
  .cqc-banner__link:hover{ transform: translateY(-1px); }

  .cqc-banner__stamp{
    font-size: 12px;
    color: rgba(17,24,39,.62);
    white-space: nowrap;
  }
  .cqc-banner__stamp strong{ color:#111827; font-weight: 900; }

  /* Rating themes (set on .cqc-banner__pill via data-rating) */
  .cqc-banner__pill[data-rating="outstanding"] .cqc-banner__mini-value{ color:#4f46e5; }
  .cqc-banner__pill[data-rating="outstanding"] .cqc-banner__logo-mark{
    background: linear-gradient(135deg, #6366f1, #22c55e);
  }

  .cqc-banner__pill[data-rating="good"] .cqc-banner__mini-value{ color:#059669; }

  .cqc-banner__pill[data-rating="requires-improvement"] .cqc-banner__mini-value{ color:#d97706; }
  .cqc-banner__pill[data-rating="requires-improvement"] .cqc-star{ fill:#f59e0b; }

  .cqc-banner__pill[data-rating="inadequate"] .cqc-banner__mini-value{ color:#dc2626; }
  .cqc-banner__pill[data-rating="inadequate"] .cqc-star{ fill:#ef4444; }

  /* Responsive */
  @media (max-width: 900px){
    .cqc-banner__pill{
      grid-template-columns: 1fr;
      padding: 16px 16px;
    }
    .cqc-banner__mid{ justify-content: flex-start; flex-wrap: wrap; }
    .cqc-banner__mid-text{ white-space: normal;}
  }

  @media (max-width: 520px){
    .cqc-star{ width: 4vw; height: 4vw; }
    .cqc-banner__mid-text{ font-size:0.8vw; }
    .cqc-banner__stamp{ font-size:0.6vw; }
  }
  /* Demo page background (optional) */
  .social-proof {
    padding: 24px 16px;
    /*background: #e9eeff;  light periwinkle like screenshot */
    background: transparent;
    display: grid;
    place-items: center;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji";
    padding:28px 14px;
  }

  .social-proof__pill {
    position: relative;
    width: 100%;
    max-width: min(760px, 92vw);
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
      0 18px 40px rgba(17, 24, 39, 0.14),
      0 2px 10px rgba(17, 24, 39, 0.06);
    padding: 18px 22px;
    overflow: hidden;
    align-self:stretch;
    align-content:center;
  }

  /* Dotted grid pattern */
  .social-proof__dots {
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    background-image: radial-gradient(rgba(17, 24, 39, 0.12) 1.2px, transparent 1.2px);
    background-size: 18px 18px;
    opacity: 0.28;
    pointer-events: none;
  }

  .social-proof__content {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
  }

  /* Avatars cluster */
  .social-proof__avatars {
    display: flex;
    align-items: center;
  }

  .social-proof__avatar,
  .social-proof__more {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.12);
    display: grid;
    place-items: center;
  }

  .social-proof__avatar {
    object-fit: cover;
    background: #f3f4f6;
  }

  /* Overlap like screenshot */
  .social-proof__avatar + .social-proof__avatar,
  .social-proof__avatar + .social-proof__more,
  .social-proof__more + .social-proof__avatar {
    margin-left: -14px;
  }

  .social-proof__more {
    background: #111827; /* near-black */
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 14px;
  }

  /* Rating area */
  .social-proof__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    width:100%;
  }

  .social-proof__stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin:0 auto;
  }

  .social-proof__star {
    width: 26px;
    height: 26px;
    fill: #f4b740; /* warm gold */
    filter: drop-shadow(0 6px 10px rgba(244, 183, 64, 0.25));
  }

  .social-proof__text {
    margin: 0;
    font-size: 22px;
    line-height: 1;
    color: #111827;
    white-space: nowrap;
  }

  .social-proof__text strong {
    font-weight: 800;
  }

  /* Responsive tweaks */
  @media (max-width: 520px) {
    .social-proof__pill {
      padding: 14px 16px;
    }
    .social-proof__text {
      font-size: 18px;
    }
    .social-proof__star {
      width: 22px;
      height: 22px;
    }
    .social-proof__avatar,
    .social-proof__more {
      width: 8.846vw;
      height: 8.846vw;
    }
  }
  /* ---------------------------------------------------------
     GSG Sections (Trust + Services)
     - Paste once (global). Safe to keep near these sections.
     - Uses system fonts; no dependencies; responsive.
  --------------------------------------------------------- */
  :root{
    --gsg-ink:#1f2a3a;
    --gsg-ink-2:#2c3b52;
    --gsg-muted:#6b7788;
    --gsg-cream:#f3efe6;
    --gsg-cream-2:#efe9dd;
    --gsg-card:#ffffff;
    --gsg-line:rgba(31,42,58,.10);
    --gsg-shadow: 0 18px 50px rgba(17, 24, 39, .10);
    --gsg-shadow-soft: 0 10px 28px rgba(17, 24, 39, .08);
    --gsg-radius:22px;
    --gsg-radius-lg:28px;
  }

  .gsg{
    color:var(--gsg-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  .gsg-container{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 22px;
  }
  .muted{ color: var(--gsg-muted); }

  /* ========== SECTION 2: TRUST STRIP ========== */
  .gsg-trust{
    background: linear-gradient(180deg, var(--gsg-cream) 0%, var(--gsg-cream-2) 100%);
    padding: 34px 0;
  }
  .trust-card{
    background: rgba(255,255,255,.78);
    border: 1px solid var(--gsg-line);
    box-shadow: var(--gsg-shadow-soft);
    backdrop-filter: blur(8px);
    border-radius: var(--gsg-radius-lg);
    padding: 20px 20px;
    display: grid;
    gap: 18px;
  }
  .trust-left{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
  }
  .trust-rating{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 260px;
  }
  .stars{
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    color: #d4a937;
    text-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
  .rating-score{
    font-size: 18px;
    line-height: 1.1;
    color: var(--gsg-ink);
  }
  .trust-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(31,42,58,.18);
    background: rgba(255,255,255,.7);
    color: var(--gsg-ink);
    text-decoration:none;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow: 0 6px 18px rgba(17,24,39,.06);
    white-space: nowrap;
  }
  .trust-pill:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.95);
    box-shadow: 0 10px 26px rgba(17,24,39,.10);
  }

  .trust-divider{
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(31,42,58,.14), transparent);
  }

  .trust-badges{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .badge{
    border: 1px solid var(--gsg-line);
    background: rgba(255,255,255,.9);
    border-radius: 18px;
    padding: 14px 14px;
    display:flex;
    gap: 10px;
    align-items:flex-start;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .badge:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(17,24,39,.08);
  }
  .badge-icon{
    width: 36px;
    height: 36px;
    display:grid;
    place-items:center;
    border-radius: 14px;
    border: 1px solid rgba(31,42,58,.12);
    background: linear-gradient(180deg, rgba(243,239,230,.8), rgba(255,255,255,.9));
    color: var(--gsg-ink-2);
    flex: 0 0 auto;
  }
  .badge-icon svg{
    width: 20px;
    height: 20px;
  }
  .badge-title{
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .badge-text .muted{
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.2;
  }

  /* ========== SECTION 3: SERVICES ========== */
  .gsg-services{
    /*background: var(--gsg-cream);*/
    background: transparent;
    padding: 54px 0 66px;
  }

  .services-header{
    display:grid;
    gap: 10px;
    margin-bottom: 22px;
  }
  .kicker{
    width: fit-content;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(31,42,58,.75);
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(31,42,58,.12);
    padding: 8px 12px;
    border-radius: 999px;
  }
  .services-title{
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0;
  }
  .services-subtitle{
    margin: 0;
    max-width: 62ch;
    color: var(--gsg-muted);
    font-size: 16px;
    line-height: 1.55;
  }
  .services-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .btn-primary,
  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 16px;
    border-radius: 999px;
    text-decoration:none;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
  }
  .btn-primary{
    background: linear-gradient(180deg, rgba(31,42,58,.96), rgba(31,42,58,.88));
    color: #fff;
    box-shadow: 0 14px 30px rgba(31,42,58,.22);
    border: 1px solid rgba(31,42,58,.30);
  }
  .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(31,42,58,.28);
  }
  .btn-ghost{
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(31,42,58,.16);
    color: var(--gsg-ink);
    box-shadow: 0 10px 24px rgba(17,24,39,.08);
  }
  .btn-ghost:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.95);
    box-shadow: 0 14px 30px rgba(17,24,39,.10);
  }

  .services-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
  }

  .svc-card{
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    border-radius: var(--gsg-radius);
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(31,42,58,.12);
    box-shadow: var(--gsg-shadow-soft);
    text-decoration:none;
    color: inherit;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .svc-card::before{
    content:"";
    position:absolute;
    inset: -60% -60% auto auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 30% 30%, rgba(31,42,58,.10), transparent 55%);
    transform: rotate(10deg);
    pointer-events:none;
  }
  .svc-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--gsg-shadow);
    border-color: rgba(31,42,58,.18);
  }

  .svc-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
  }
  .svc-icon{
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    background: linear-gradient(180deg, rgba(243,239,230,.85), rgba(255,255,255,.95));
    border: 1px solid rgba(31,42,58,.12);
    color: var(--gsg-ink-2);
    box-shadow: 0 10px 20px rgba(17,24,39,.06);
  }
  .svc-icon svg{ width: 22px; height: 22px; }

  .svc-pill{
    font-size: 12px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(31,42,58,.14);
    background: rgba(255,255,255,.75);
    color: rgba(31,42,58,.85);
  }

  .svc-card h3{
    margin: 2px 0 0;
    font-size: 18px;
    letter-spacing: -0.02em;
  }
  .svc-card p{
    margin: 0;
    color: var(--gsg-muted);
    line-height: 1.55;
    font-size: 14.5px;
    max-width: 50ch;
  }
  .svc-cta{
    margin-top: 6px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31,42,58,.10);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .svc-cta .arrow{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(31,42,58,.12);
    background: rgba(255,255,255,.75);
    transition: transform .18s ease, background .18s ease;
  }
  .svc-card:hover .svc-cta .arrow{
    transform: translateX(2px);
    background: rgba(255,255,255,.95);
  }

  .services-foot{
    margin-top: 16px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mini-card{
    border-radius: 22px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(31,42,58,.10);
    padding: 16px 16px;
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
  }
  .mini-title{
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .mini-text{
    color: var(--gsg-muted);
    line-height: 1.55;
    font-size: 14.5px;
  }

  /* ========== Responsive ========== */
  @media (max-width: 980px){
    .trust-badges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px){
    .gsg-trust{ padding: 26px 0; }
    .trust-left{
      flex-direction: column;
      align-items: flex-start;
    }
    .trust-rating{ min-width: 0; }
    .trust-badges{ grid-template-columns: 1fr; }
    .services-grid{ grid-template-columns: 1fr; }
    .services-foot{ grid-template-columns: 1fr; }
  }

  /* Optional: smooth anchor scroll */
  html:focus-within{ scroll-behavior: smooth; }
    .jc-row{
      /* page + row palette (match your screenshot) */
      /*--page: #F3F0E7;        beige */
      --page: transparent;
     /* #3d989110
      color(display-p3 0.672 0.85 0.745 / 0.31)
      color(display-p3 0.205 0.975 0.523 / 0.1)*/
      /*--wipe: #FFFFFF;       /* the lighter panel that slides over */
      --wipe: var(--page-alt-2);
      --ink:  #2F3142;       /* dark grey/navy for text */
      --line: #DAD6CC;       /* divider */
      --btn-rest-bg: #FFFFFF;
      --btn-rest-ink:#2F3142;
      --btn-hover-bg:#2F3142;
      --btn-hover-ink:#FFFFFF;
      --smile-frames: 32;     /* how many frames */
  	  --smile-dur: 520ms;

      --ease: cubic-bezier(.2,.8,.2,1);
      --dur: 700ms;

      padding: 0; /* the row handles its own padding */
    }

    .jc-row *{ box-sizing:border-box; }

    /* the clickable row */
    .jc-row a{
      position: relative;
      display:flex;
      align-items:center;
      width:100%;
      min-height: 330px;                 /* matches screenshot vibe */
      padding: 44px 88px 44px 58px;      /* left/right gutters */
      gap: 70px;
      text-decoration:none;
      color: var(--ink);
      background: transparent;
      border-bottom: 1px solid var(--line);
      overflow:hidden;
      isolation:isolate; /* keeps wipe behind content */
    }

    .jc-row a::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--wipe);
  transform: translate3d(0, 102%, 0);     /* starts below */
  transition: transform 700ms var(--ease);
  z-index:0;
  will-change: transform;
  animation: none; /* IMPORTANT: ensure no previous animation is applied */
}


    /* (optional) a subtle leading “edge” to make the wipe feel physical */
    .jc-row a::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width: 46px;
      left:0;
      background: linear-gradient(180deg,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.00)
  );
      transform: translate3d(0, 140%, 0);
      transition: transform var(--dur) var(--ease);
      z-index:0;
      pointer-events:none;
      opacity:.35;
    }

    .jc-row .jc-img{
    position: relative;
      width: 252px;
      height: 252px;
      flex: 0 0 auto;
      overflow:visible;
      z-index:1;
      border-radius: 32px;
      overflow: hidden;
      -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 40%,
    #000 55%,
    rgba(0,0,0,0.45) 72%,
    transparent 94%
  );
          mask-image: radial-gradient(ellipse 90% 65% at 50% 40%,
    #000 55%,
    rgba(0,0,0,0.45) 72%,
    rgba(0,0,0,0.2) 82%,
    rgba(0,0,0,0.08) 88%,
    transparent 94%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
    .jc-row .jc-img img{
    position: absolute;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position: 50% 35%;
      display:block;
    }
    
    .jc-row .smile-sprite{
  position: absolute;
  inset: 0;

  /* Your sprite sheet file (horizontal strip) */
  background-image: url("./smile.webp");
  background-repeat: no-repeat;

  /* IMPORTANT: width is frames * 100% because it's a strip */
  background-size: calc(var(--smile-frames) * 100%) 100%;

  /* start at frame 0 */
  background-position: 0% 0%;
}

    .jc-row .jc-title{
      font: 500 clamp(64px, 7.2vw, 128px)/0.98 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      letter-spacing: -0.02em;
      margin:0;
      z-index:1;
    }

    .jc-row .jc-spacer{ flex:1; z-index:1; }

    .jc-row .jc-btn{
      border:0;
      border-radius: 999px;
      padding: 18px 34px;
      font: 500 18px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--btn-rest-bg);
      color: var(--btn-rest-ink);
      box-shadow: 0 0 0 1px rgba(47,49,66,.10) inset;
      transition:
        background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
      z-index:1;
      white-space:nowrap;
    }

    /* hover/focus triggers the wipe + button invert, like your screenshots */
    .jc-row a:is(:hover,:focus-visible),
    .jc-row a.is-hover{
      outline:none;
    }
    .jc-row a:is(:hover,:focus-visible,.is-hover)::before{
  transform: translate3d(0, 0%, 0);
  animation: none; /* IMPORTANT: don't override transition with animation */
}
    .jc-row a:is(:hover,:focus-visible,.is-hover)::after{
      transform: translate3d(0, calc(-100% - 12px), 0);
    }
    .jc-row a:is(:hover,:focus-visible,.is-hover) .jc-btn{
      background: var(--btn-hover-bg);
      color: var(--btn-hover-ink);
      box-shadow: none;
      transform: translate3d(0,0,0);
    }
	
	.jc-row a.bounce-top::before{
  animation: jcBounceTop 260ms cubic-bezier(.2,.8,.2,1);
}
.jc-row a.bounce-bottom::before{
  animation: jcBounceBottom 260ms cubic-bezier(.2,.8,.2,1);
}

.jc-row .jc-img .img-closed{ opacity: 1; }
.jc-row .jc-img .img-open{ opacity: 0; }

/* smooth swap */
.jc-row .jc-img .img-closed,
.jc-row .jc-img .img-open{
  transition: opacity 260ms var(--ease);
  will-change: opacity;
}

/* on hover (desktop) OR your touch "armed" hover (.is-hover) */
.jc-row a.jc-link:is(:hover, :focus-visible, .is-hover) .jc-img .img-closed{
  opacity: 0;
}
.jc-row a.jc-link:is(:hover, :focus-visible, .is-hover) .jc-img .img-open{
  opacity: 1;
}

.jc-row a.jc-link:is(:hover,:focus-visible,.is-hover) .smile-sprite{
  animation: smilePlay var(--smile-dur) steps(calc(var(--smile-frames) - 1)) forwards;
}

/* Not hovered: play backward to neutral */
.jc-row a.jc-link:not(:hover):not(:focus-visible):not(.is-hover) .smile-sprite{
  animation: smileUnplay var(--smile-dur) steps(calc(var(--smile-frames) - 1)) forwards;
}

@keyframes smilePlay{
  from { background-position: 0% 0%; }
  to   { background-position: 100% 0%; }
}

@keyframes smileUnplay{
  from { background-position: 100% 0%; }
  to   { background-position: 0% 0%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .jc-row .smile-sprite{ animation: none !important; }
}

    /* keep it looking similar on smaller widths */
    @media (max-width: 820px){
      .jc-row a{
        padding: 28px 22px;
        gap: 22px;
        min-height: 220px;
      }
      .jc-row .jc-img{ width:120px; height:120px; }
      .jc-row .jc-btn{ padding: 14px 22px; font-size:16px; }
    }
    
@keyframes jcBounceTop{
  0%   { transform: translate3d(0, 0%, 0); }
  45%  { transform: translate3d(0, -2.2%, 0); }
  100% { transform: translate3d(0, 0%, 0); }
}
@keyframes jcBounceBottom{
  0%   { transform: translate3d(0, 102%, 0); }
  45%  { transform: translate3d(0, 104.2%, 0); }
  100% { transform: translate3d(0, 102%, 0); }
}

/* --- Domino entrance (rows) --- */
.jc-row .jc-link{
  opacity: 0;
  transform: translate3d(-80px, 0, 0);
  transition:
    transform 650ms var(--ease),
    opacity 650ms var(--ease);
  transition-delay: var(--d, 0ms); /* per-row delay set by JS */
  will-change: transform, opacity;
}

.jc-row .jc-link.is-in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.jc-row .jc-text{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers subtitle under title */
  gap: 14px;
  z-index: 1;
}

.jc-row .jc-sub{
  margin: 0;
  text-align: center;
  font: 500 24px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0.8;
}

/* nice accessibility: no motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .jc-row .jc-link{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.jc-row a.jc-link{
  background: var(--page);
  opacity: 0;
  transform: translate3d(-90px, 0, 0);
  transition:
    transform 650ms var(--ease),
    opacity 650ms var(--ease);
  will-change: transform, opacity;
}

.jc-row a.jc-link.is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

.jc-row a.jc-link.is-right .jc-btn    { order: 1; }
.jc-row a.jc-link.is-right .jc-spacer { order: 2; flex: 1; }  /* <-- empty space goes here */
.jc-row a.jc-link.is-right .jc-text  { order: 3; }
.jc-row a.jc-link.is-right .jc-img    { order: 4; }
/* Footer markup + styles now live solely in public/partials/inject.js
   (gsgSiteChromeStyles), which is the single source of truth shared by
   every page. The copy that used to be duplicated here has been removed
   to avoid the two definitions drifting out of sync. */

/* 3) Paste these styles once (they use your existing palette vars) */
.team-overlay{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}
.team-overlay.is-open{ display:block; }

.team-overlay__backdrop{
  position:absolute; inset:0;
  background: rgba(7,14,12,.55);
  backdrop-filter: blur(10px);
}

.team-overlay__panel{
  position: relative;
  margin: min(10vh, 80px) auto 0;
  width: min(860px, calc(100vw - 32px));
  border-radius: 24px;

  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);

  color: var(--ink);
  outline: none;

  transform: translateY(10px);
  opacity: 0;
  animation: teamOverlayIn 220ms ease forwards;
}

@keyframes teamOverlayIn{
  to{ transform: translateY(0); opacity: 1; }
}

.team-overlay__close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-2);
}

.team-overlay__head{
  display:flex;
  gap: 18px;
  padding: 22px 22px 12px;
  border-bottom: 1px solid rgba(15,31,28,.10);
}

.team-overlay__avatar{
  width: 96px; height: 96px;
  border-radius: 22px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(42,167,157,.14), rgba(255,255,255,.70));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  flex: 0 0 auto;
}

.team-overlay__sprite{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: cover;
}

.team-overlay__meta{ min-width: 0; }
.team-overlay__title{
  margin: 0;
  font: 800 26px/1.1 Roboto, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.team-overlay__role{
  margin: 8px 0 0;
  color: var(--ink-soft);
  font: 500 16px/1.2 Roboto, ui-sans-serif, system-ui, sans-serif;
}

.team-overlay__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.team-overlay__chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(42,167,157,.10);
  border: 1px solid rgba(42,167,157,.18);
  color: rgba(30,127,120,.92);
  font: 800 12px/1 Roboto, ui-sans-serif, system-ui, sans-serif;
}

.team-overlay__body{
  padding: 18px 22px 4px;
}
.team-overlay__bio{
  margin: 0 0 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 15.5px;
}

.team-overlay__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.team-overlay__card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  padding: 14px 14px;
}

.team-overlay__cardTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.team-overlay__list{
  margin: 0;
  padding-left: 1.15em;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 14.5px;
}

.team-overlay__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px 20px;
}

.team-overlay__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid transparent;
  cursor:pointer;
}

.team-overlay__btn--primary{
  background: linear-gradient(180deg, rgba(30,127,120,.96), rgba(30,127,120,.86));
  color: #fff;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(30,127,120,.22);
}

.team-overlay__btn--ghost{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}

@media (max-width: 720px){
  .team-overlay__head{ flex-direction: column; }
  .team-overlay__cols{ grid-template-columns: 1fr; }
}
/* ✅ Changes:
   1) Vertically center panel
   2) No “scroll to top” when opening (prevents anchor jump + preserves scroll position)
   3) Fix “can’t open again” (animation/focus + display/overflow reset issues)
*/

/* Overlay */
.team-overlay{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}
.team-overlay.is-open{ display:block; }

.team-overlay__backdrop{
  position:absolute; inset:0;
  background: rgba(7,14,12,.55); /* semi-opaque */
}

/* ✅ Vertically centered panel + scroll-safe */
.team-overlay__panel{
  position: fixed;              /* fixed so it centers reliably */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* vertical center */
  width: min(860px, calc(100vw - 32px));
  max-height: min(82vh, 760px);      /* keep within viewport */
  overflow: auto;                     /* allow scrolling inside panel */

  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  outline: none;
}

/* ✅ If you want a little pop-in without breaking re-open */
.team-overlay.is-open .team-overlay__panel{
  animation: teamOverlayIn 220ms ease both;
}
@keyframes teamOverlayIn{
  from{ opacity:0; transform: translate(-50%, calc(-50% + 10px)); }
  to{ opacity:1; transform: translate(-50%, -50%); }
}

@media (max-width: 720px){
  .team-overlay__panel{
    width: calc(100vw - 24px);
    max-height: 86vh;
  }
}

.team-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7,14,12,.55);
  z-index: 0;              /* ✅ behind */
}

.team-overlay__panel{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;              /* ✅ above backdrop */
  opacity: 1;              /* ✅ don’t allow hidden states */
  width: min(860px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: auto;

  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

/* When overlay is open: prevent scroll input + bounce */
html.is-overlay-open,
body.is-overlay-open{
  overflow: hidden;
  height: 100%;
}

/* Extra safety: kill wheel/touch scrolling on the smoother wrapper too */
body.is-overlay-open #smooth-wrapper{
  overscroll-behavior: none;
  touch-action: none;   /* blocks touch scrolling */
}
  /* Letters become individually animatable without breaking spacing */
  .wave-word{
    display: inline-block;
    white-space: nowrap;  /* prevents s / mile splitting */
  }
  .wave-letter{
    display: inline-block;
    will-change: transform;
    padding-right: 0.08em;
    margin-right: -0.08em;
    overflow: visible;
  }
  .wave-gap{
    display:inline-block;
    width:.35em; /* tweak spacing if needed */
  }

  @media (prefers-reduced-motion: reduce){
    .wave-letter{ transform:none !important; }
  }
  .wave-space{
    display:inline-block;
    width: .35em; /* tweak if your spacing feels off */
  }

  /* accessibility */
  @media (prefers-reduced-motion: reduce){
    .wave-letter{ transform:none !important; }
  }
  .wave-letter{ display:inline-block; will-change: transform; }
  .wave-space{ display:inline-block; width:.35em; } /* tweak if needed */

  @media (prefers-reduced-motion: reduce){
    .wave-letter{ transform:none !important; }
  }
  
  /* ---------- Global text defaults (outside the hero image area) ---------- */
body{ background: var(--bg); color: var(--ink); }

/* ---------- Header on hero (keep white, but make it “glass” consistent) ---------- */
.site-header nav a,
.site-header nav ul,
.site-header nav button{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.nav-toggle{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}

/* Mobile dropdown: tint it towards your teal instead of pure black */
.nav-mobile{
  background: rgba(10,20,18,.55);
  border: 1px solid rgba(255,255,255,.16);
}

/* ---------- Hero overlay: slightly cooler/teal wash (still readable) ---------- */
.image-rectangle{
  background-image: linear-gradient(
    180deg,
    rgba(8,18,16,.45),
    rgba(8,18,16,.08)
  );
}

/* ---------- Hero buttons: replace the blue cast with teal glass ---------- */
.image-button,
.image-button-2{
  border-color: rgba(255,255,255,.26);
  background-image:
    linear-gradient(90deg, rgba(42,167,157,.20), rgba(42,167,157,.20)),
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  backdrop-filter: blur(8px);
}

.image-button:hover,
.image-button-2:hover{
  background-image:
    linear-gradient(90deg, rgba(42,167,157,.28), rgba(42,167,157,.28)),
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.12));
}

/* ---------- CQC + Social proof pills: stop using pure white/ink, use your surfaces ---------- */
.cqc-banner__pill,
.social-proof__pill{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.cqc-banner__dots,
.social-proof__dots{
  background-image: radial-gradient(rgba(15,31,28,.14) 1.1px, transparent 1.1px);
  opacity: .20;
}

.cqc-banner__mid-text,
.social-proof__text{
  color: var(--ink);
}

.cqc-banner__stamp{
  color: var(--ink-faint);
}
.cqc-banner__stamp strong{
  color: var(--ink);
}

/* Stars: keep gold but slightly calmer */
.cqc-star,
.social-proof__star{
  fill: var(--gold);
  filter: drop-shadow(0 10px 18px rgba(217,179,91,.18));
}

/* The little "+11" bubble: match ink rather than harsh black */
.social-proof__more{
  background: rgba(15,31,28,.92);
}

/* ---------- Services section: use the same surfaces so it blends with page bg ---------- */
.gsg-services{
  background: transparent;
}

.kicker{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.btn-primary{
  background: linear-gradient(180deg, rgba(30,127,120,.96), rgba(30,127,120,.86));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(30,127,120,.22);
}

.btn-ghost{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}

.svc-card,
.mini-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}

.svc-card p,
.mini-text,
.services-subtitle{
  color: var(--ink-soft);
}

.svc-icon{
  background: linear-gradient(180deg, rgba(42,167,157,.14), rgba(255,255,255,.90));
  border: 1px solid var(--border);
  color: var(--ink);
}

.svc-pill{
  background: rgba(42,167,157,.10);
  border: 1px solid rgba(42,167,157,.18);
  color: rgba(30,127,120,.92);
}

/* ---------- JC rows: make the wipe + button match the site palette ---------- */
.jc-row{
  --page: transparent;
  --wipe: var(--glass);              /* was --page-alt-2, keep but standardized */
  --ink:  var(--ink);
  --line: rgba(15,31,28,.10);

  --btn-rest-bg: var(--surface);
  --btn-rest-ink: var(--ink);
  --btn-hover-bg: rgba(30,127,120,.96);
  --btn-hover-ink: #ffffff;
}

.jc-row a{
  border-bottom: 1px solid var(--line);
}

.jc-row .jc-btn{
  box-shadow: 0 0 0 1px rgba(15,31,28,.10) inset, 0 16px 30px rgba(9,16,14,.06);
}

.jc-row .jc-sub{
  color: var(--ink-soft);
}

/* Optional: soften the row edge shadow so it doesn’t feel “dirty” on mint */
.jc-row a::after{
  opacity: .22;
}