/* =========================================================
   GLOBAL TYPOGRAPHY POLICY
   Public-facing text should never render below 16px.
   Legal/disclaimer copy is the sole intentional exception.
   ========================================================= */
/* =========================================================
   CRACK THE GRADE — GLOBAL SITE NAVIGATION
   Canonical design: homepage navigation.
   This file owns ALL header/nav presentation.
   ========================================================= */

.ctg-skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:2000;
  transform:translateY(-160%);
  padding:10px 14px;
  background:#f4f4f1;
  color:#15171a;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  transition:transform .2s ease;
}

.ctg-skip-link:focus{
  transform:none;
}

/*
 * Do not inherit a page's --max token here.
 * The global header always uses the homepage's canonical 1380px shell.
 */
.ctg-header{
  position:sticky;
  top:0;
  z-index:1000;
  width:min(calc(100% - 48px),1380px);
  height:88px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom:1px solid transparent;
  isolation:isolate;
}

/*
 * Keep the navigation content on the 1380px shell while allowing the
 * sticky background to span the full viewport. This prevents white page
 * sections from appearing at the left/right edges while scrolling.
 */
.ctg-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:transparent;
  border-bottom:1px solid transparent;
  pointer-events:none;
  transition:
    background .3s ease,
    border-color .3s ease,
    backdrop-filter .3s ease;
}

.ctg-header.is-scrolled::before,
.ctg-header.is-open::before{
  background:rgba(32,34,38,.84);
  border-color:rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ctg-brand{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  width:max-content;
}

.ctg-brand img{
  display:block;
  width:170px;
  height:auto;
  /* Same treatment as the homepage logo. */
  filter:invert(1) grayscale(1) brightness(1.08);
}

/*
 * ONE nav element.
 * On desktop it overlays the header grid:
 * - primary links are truly centered in the header shell
 * - Client Access is independently aligned to the right
 */
.ctg-nav{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  pointer-events:none;
}

.ctg-nav-primary{
  grid-column:2;
  display:flex;
  gap:30px;
  align-items:center;
  pointer-events:auto;
}

.ctg-nav-primary a,
.ctg-nav-client{
  color:#a7adb6;
  text-decoration:none;
  font-size:16px;
  line-height:1;
  font-weight:600;
  white-space:nowrap;
  transition:color .2s ease;
}

.ctg-nav-primary a:hover,
.ctg-nav-primary a:focus-visible,
.ctg-nav-primary a[aria-current="page"],
.ctg-nav-client:hover,
.ctg-nav-client:focus-visible{
  color:#f4f4f1;
}

.ctg-nav-primary a[aria-current="page"]{
  position:relative;
}

.ctg-nav-primary a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:#b8c6ff;
}

.ctg-nav-client{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.ctg-menu-toggle{
  position:relative;
  z-index:3;
  display:none;
  justify-self:end;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.015);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}

.ctg-menu-toggle span{
  width:17px;
  height:1px;
  background:#f4f4f1;
  transition:transform .2s ease;
}

.ctg-menu-toggle[aria-expanded="true"] span:first-child{
  transform:translateY(3.5px) rotate(45deg);
}

.ctg-menu-toggle[aria-expanded="true"] span:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

body.ctg-nav-open{
  overflow:hidden;
}

@media(max-width:1080px){
  .ctg-header{
    width:min(calc(100% - 32px),1380px);
    height:72px;
    grid-template-columns:1fr auto;
  }

  .ctg-brand img{
    width:150px;
  }

  .ctg-menu-toggle{
    display:flex;
  }

  /*
   * Same nav element becomes the mobile menu.
   * No duplicate mobile navigation exists in the markup.
   */
  .ctg-nav{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    min-height:calc(100dvh - 72px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:34px max(24px,calc((100vw - 1380px)/2));
    background:rgba(32,34,38,.98);
    border-top:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:
      visibility .2s ease,
      opacity .2s ease,
      transform .25s cubic-bezier(.2,.75,.25,1);
  }

  .ctg-header.is-open .ctg-nav{
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  .ctg-nav-primary{
    display:block;
    pointer-events:auto;
  }

  .ctg-nav-primary a,
  .ctg-nav-client{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:68px;
    padding:0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#f4f4f1;
    font-family:"Instrument Sans",sans-serif;
    font-size:clamp(28px,6vw,44px);
    line-height:1;
    letter-spacing:-.04em;
    font-weight:500;
    white-space:normal;
  }

  .ctg-nav-primary a[aria-current="page"]::after{
    display:none;
  }

  .ctg-nav-client{
    margin-top:18px;
    color:#b8c6ff;
    pointer-events:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .ctg-header *,
  .ctg-header *::before,
  .ctg-header *::after{
    transition-duration:.001ms!important;
  }
}

/* =========================================================
   CTG GLOBAL PRIMARY CTA — V5
   Single shared treatment based on the homepage hero CTA.
   Use .ctg-primary-cta for every primary CTA site-wide.
   ========================================================= */
.ctg-primary-cta{
  position:relative;
  isolation:isolate;
  overflow:visible;
  min-height:56px;
  width:max-content;
  max-width:100%;
  padding:0 11px 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:4px;
  background:linear-gradient(180deg,#fff 0%,#eef1ff 100%);
  color:#171a20;
  box-shadow:
    0 16px 42px rgba(0,0,0,.28),
    0 0 0 1px rgba(184,198,255,.2) inset,
    0 0 28px rgba(184,198,255,.16);
  font-family:"Manrope",sans-serif;
  font-size:16px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.ctg-primary-cta::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-9px;
  border-radius:inherit;
  background:radial-gradient(ellipse at center,rgba(184,198,255,.22),rgba(184,198,255,0) 68%);
  opacity:.55;
  filter:blur(12px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}

.ctg-primary-cta:hover,
.ctg-primary-cta:focus-visible{
  transform:translateY(-2px);
  border-color:#fff;
  background:linear-gradient(180deg,#fff 0%,#f5f6ff 100%);
  color:#171a20;
  box-shadow:
    0 22px 54px rgba(0,0,0,.34),
    0 0 0 1px rgba(184,198,255,.34) inset,
    0 0 38px rgba(184,198,255,.28);
  outline:none;
}

.ctg-primary-cta:hover::before,
.ctg-primary-cta:focus-visible::before{
  opacity:.95;
  transform:scale(1.03);
}

.ctg-primary-cta-label,
.ctg-primary-cta-arrow{
  position:relative;
  z-index:3;
}

.ctg-primary-cta-arrow{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:#202226;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  font-family:"Manrope",sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  transition:transform .22s ease,background-color .22s ease;
}

.ctg-primary-cta:hover .ctg-primary-cta-arrow,
.ctg-primary-cta:focus-visible .ctg-primary-cta-arrow{
  transform:translateX(3px);
  background:#17191d;
}

/* Placement modifier only. Visual styling remains globally identical. */
.ctg-primary-cta--spaced{
  margin-top:28px;
}

/* Optional money-burst modifier retained only where appropriate (homepage audit CTA). */
.ctg-primary-cta-money{
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
}

.ctg-primary-cta-bill{
  --bill-x:0px;
  --bill-y:-34px;
  --bill-r:0deg;
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:18px;
  display:grid;
  place-items:center;
  margin:-9px 0 0 -17px;
  border:1px solid rgba(20,54,35,.28);
  border-radius:3px;
  background:linear-gradient(135deg,#d9f0d9,#a8d2aa);
  color:#315f3d;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  font:800 10px/1 "Manrope",sans-serif;
  opacity:0;
  transform:translate3d(0,0,0) rotate(0deg) scale(.74);
  transform-origin:center;
}

.ctg-primary-cta-bill::before,
.ctg-primary-cta-bill::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(32,83,50,.14);
  border-radius:2px;
}
.ctg-primary-cta-bill::after{
  inset:6px 10px;
  border-radius:999px;
}
.ctg-primary-cta-bill.bill-1{--bill-x:-72px;--bill-y:-54px;--bill-r:-18deg;}
.ctg-primary-cta-bill.bill-2{--bill-x:-34px;--bill-y:-72px;--bill-r:12deg;}
.ctg-primary-cta-bill.bill-3{--bill-x:8px;--bill-y:-78px;--bill-r:-6deg;}
.ctg-primary-cta-bill.bill-4{--bill-x:48px;--bill-y:-64px;--bill-r:19deg;}
.ctg-primary-cta-bill.bill-5{--bill-x:76px;--bill-y:-40px;--bill-r:29deg;}

.ctg-primary-cta--money:hover .ctg-primary-cta-bill,
.ctg-primary-cta--money:focus-visible .ctg-primary-cta-bill{
  animation:ctgPrimaryMoneyBurst .62s cubic-bezier(.18,.72,.28,1) both;
}
.ctg-primary-cta--money:hover .bill-2,
.ctg-primary-cta--money:focus-visible .bill-2{animation-delay:.035s;}
.ctg-primary-cta--money:hover .bill-3,
.ctg-primary-cta--money:focus-visible .bill-3{animation-delay:.07s;}
.ctg-primary-cta--money:hover .bill-4,
.ctg-primary-cta--money:focus-visible .bill-4{animation-delay:.105s;}
.ctg-primary-cta--money:hover .bill-5,
.ctg-primary-cta--money:focus-visible .bill-5{animation-delay:.14s;}

@keyframes ctgPrimaryMoneyBurst{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.72);}
  30%{opacity:.98;}
  72%{opacity:.9;transform:translate3d(var(--bill-x),var(--bill-y),0) rotate(var(--bill-r)) scale(1);}
  100%{opacity:0;transform:translate3d(calc(var(--bill-x) * 1.08),calc(var(--bill-y) - 8px),0) rotate(calc(var(--bill-r) * 1.15)) scale(.92);}
}

@media(max-width:540px){
  .ctg-primary-cta{
    width:100%;
    justify-content:space-between;
    min-height:56px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ctg-primary-cta,
  .ctg-primary-cta::before,
  .ctg-primary-cta-arrow,
  .ctg-primary-cta-bill{
    transition:none!important;
    animation:none!important;
  }
  .ctg-primary-cta--money:hover .ctg-primary-cta-bill,
  .ctg-primary-cta--money:focus-visible .ctg-primary-cta-bill{
    opacity:0;
  }
}

/* =========================================================
   GLOBAL PRIMARY CTA — V6
   Premium machined-glass / ceramic 3D treatment
   ========================================================= */

.ctg-primary-cta{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform:translateY(0);
  border-color:rgba(255,255,255,.94);
  background:
    radial-gradient(120% 82% at 50% -8%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.46) 32%,rgba(255,255,255,0) 68%),
    linear-gradient(180deg,#ffffff 0%,#f8f9ff 54%,#e9edff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(112,126,180,.16),
    0 3px 0 #cbd3ef,
    0 5px 0 rgba(114,126,171,.34),
    0 13px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(184,198,255,.14);
  transition:
    transform .18s cubic-bezier(.22,.61,.36,1),
    box-shadow .18s cubic-bezier(.22,.61,.36,1),
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;
  will-change:transform;
}

/* Fine specular face highlight; content remains above it. */
.ctg-primary-cta::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:1px 1px auto;
  height:44%;
  border-radius:3px 3px 44% 44% / 3px 3px 18% 18%;
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0));
  opacity:.58;
  pointer-events:none;
}

.ctg-primary-cta::before{
  z-index:-3;
  inset:-10px;
  opacity:.34;
  filter:blur(14px);
  background:radial-gradient(
    ellipse at 50% 62%,
    rgba(184,198,255,.22),
    rgba(184,198,255,.07) 40%,
    rgba(184,198,255,0) 72%
  );
}

.ctg-primary-cta:hover,
.ctg-primary-cta:focus-visible{
  transform:translateY(-2px);
  border-color:#fff;
  background:
    radial-gradient(125% 88% at 50% -10%,rgba(255,255,255,1) 0%,rgba(255,255,255,.56) 34%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 52%,#eef1ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(112,126,180,.14),
    0 4px 0 #cbd3ef,
    0 6px 0 rgba(114,126,171,.30),
    0 18px 30px rgba(0,0,0,.26),
    0 0 0 1px rgba(184,198,255,.20);
  filter:brightness(1.012);
}

.ctg-primary-cta:hover::before,
.ctg-primary-cta:focus-visible::before{
  opacity:.48;
  transform:scale(1.025);
}

/* Physical compression on click / tap. */
.ctg-primary-cta:active{
  transform:translateY(2px);
  filter:brightness(.995);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 2px 5px rgba(96,106,146,.10),
    inset 0 -1px 0 rgba(112,126,180,.11),
    0 1px 0 #cbd3ef,
    0 2px 0 rgba(114,126,171,.24),
    0 6px 12px rgba(0,0,0,.18),
    0 0 0 1px rgba(184,198,255,.16);
}

.ctg-primary-cta:active::before{
  opacity:.24;
  transform:scale(.985);
}

.ctg-primary-cta-label,
.ctg-primary-cta-arrow{
  position:relative;
  z-index:3;
}

/* Arrow becomes its own precision-milled control. */
.ctg-primary-cta-arrow{
  border:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 38% 26%,rgba(255,255,255,.09),transparent 34%),
    linear-gradient(180deg,#292c32 0%,#17191d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.24),
    0 2px 0 rgba(0,0,0,.28),
    0 5px 10px rgba(0,0,0,.16);
  transition:
    transform .18s cubic-bezier(.22,.61,.36,1),
    box-shadow .18s ease,
    background .18s ease;
}

.ctg-primary-cta:hover .ctg-primary-cta-arrow,
.ctg-primary-cta:focus-visible .ctg-primary-cta-arrow{
  transform:translateX(3px) translateY(-1px);
  background:
    radial-gradient(circle at 38% 26%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(180deg,#30343b 0%,#17191d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -2px 3px rgba(0,0,0,.22),
    0 3px 0 rgba(0,0,0,.25),
    0 7px 13px rgba(0,0,0,.18);
}

.ctg-primary-cta:active .ctg-primary-cta-arrow{
  transform:translateX(2px) translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 0 rgba(0,0,0,.22),
    0 3px 6px rgba(0,0,0,.13);
}

/* Keyboard focus remains visible without introducing a bright new accent. */
.ctg-primary-cta:focus-visible{
  outline:2px solid rgba(184,198,255,.72);
  outline-offset:4px;
}

/* Preserve the money modifier above the 3D face. */
.ctg-primary-cta-money{
  z-index:-1;
}

@media(max-width:540px){
  .ctg-primary-cta{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(112,126,180,.15),
      0 3px 0 #cbd3ef,
      0 5px 0 rgba(114,126,171,.30),
      0 11px 20px rgba(0,0,0,.20),
      0 0 0 1px rgba(184,198,255,.13);
  }
}

@media(prefers-reduced-motion:reduce){
  .ctg-primary-cta,
  .ctg-primary-cta::before,
  .ctg-primary-cta::after,
  .ctg-primary-cta-arrow{
    transition:none!important;
  }

  .ctg-primary-cta:hover,
  .ctg-primary-cta:focus-visible,
  .ctg-primary-cta:active{
    transform:none!important;
  }

  .ctg-primary-cta:hover .ctg-primary-cta-arrow,
  .ctg-primary-cta:focus-visible .ctg-primary-cta-arrow,
  .ctg-primary-cta:active .ctg-primary-cta-arrow{
    transform:none!important;
  }
}