/* Fractional theme layer.
   Loaded after site.css. Brings the sky hero, grey card trays, pill buttons, tracked uppercase labels
   and rounded inset bands to every page. Palette: the Fractional logo and fractional.company only. */

/* Satoshi by Indian Type Foundry, via Fontshare (ITF Free Font License) */
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --navy-deep: #021d2b;
  --navy: #093042;
  --blue: #44b0e1;
  --blue-pale: #c1e4f5;
  --grey-cool: #e4ebf3;
  --grey-soft: #f5f7fa;

  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: var(--font);
  --serif: var(--font);
  --h-weight: 500;
  --h-track: -0.04em;
  --ink: var(--navy-deep);
  --text: #3f5563;
  --muted: #687c89;
  --tint: var(--grey-soft);
  --tint-2: var(--grey-cool);
  --grid: var(--grey-cool);
  --line: var(--grey-cool);
  --line-2: #cfdbe5;
  --sky: var(--blue);
  --pale: var(--blue-pale);
  --brand: var(--navy);
  --brand-2: var(--navy-deep);
  --brand-soft: #eaf6fc;
  --brand-line: var(--blue-pale);
  --link: #1b6f98;
  --deep: var(--navy-deep);
  --r: 12px;

  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 12px;
  --pill: 999px;
  --inset: 12px;
  --hdr-h: 84px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sky-img: url("../img/sky-hero.jpg");
  --sky-cta-img: url("../img/sky-cta.jpg");
}

body { font-family: var(--font); letter-spacing: -0.01em; color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); }
h1, h2 { font-weight: 500; letter-spacing: -0.04em; }
h3, h4 { font-weight: 500; letter-spacing: -0.02em; }
.duo { font-weight: 500; letter-spacing: -0.04em; }
.duo span { color: rgba(2, 29, 43, 0.42); }
.duo.sm { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; }
html { scroll-padding-top: 110px; }
::selection { background: var(--blue-pale); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* framed-column hairlines from site.css read as a different system; drop them */
main .wrap, .ftr .wrap, main > .wrap, .sky .wrap { border-left: 0 !important; border-right: 0 !important; }
main > section + section > .wrap:first-of-type, main > section + .wrap { border-top-color: transparent !important; }

/* ---------- tracked uppercase label (the template's "eyebrow") ---------- */
.ph14-k, .hero15-k, .need h3, .kick, .card-k, .aside-k, .mega-h, .ftr h2, .meta, .cc-body .meta,
.mega-photo .k, .orbit-hint, .crumbs {
  font-family: var(--font);
}
.ph14-k, .hero15-k, .kick, .mega-h, .ftr h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 12.5px;
}
.mega-h:empty::before { display: none; }
.kick::before, .mega-h::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; background: var(--blue); vertical-align: 2px; }

/* ---------- buttons: pill, uppercase, round arrow on .chev ---------- */
.btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--pill);
  font: 700 13.5px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  gap: 12px;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 12.5px; }
.btn-primary { background: var(--navy); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--navy-deep); }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--grey-cool); }
.btn-secondary:hover { border-color: var(--navy); background: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--blue-pale); }
.btn-quiet { color: var(--navy); }
.btn-quiet:hover { border-color: var(--grey-cool); background: var(--grey-soft); }
.btn-ghost-dark { color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.btn-ghost-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn-glass {
  background: rgba(2, 29, 43, .26); color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(2, 29, 43, .4); }
.btn.chev { padding-right: 5px; }
.btn.chev::after {
  content: "";
  width: 38px; height: 38px; margin: 0 0 0 2px;
  border: 0; border-radius: 50%;
  transform: none;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .45s var(--ease-out);
}
.btn-sm.chev::after { width: 30px; height: 30px; background-size: 12px; }
.btn.chev:hover::after { transform: rotate(45deg); }
.btn-secondary.chev::after, .btn-light.chev::after, .btn-quiet.chev::after {
  background-color: var(--navy);
}
.btn-ghost-dark.chev::after, .btn-glass.chev::after {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23093042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn-block { justify-content: center; }
.link-arrow { color: var(--link); font-weight: 500; }

/* ---------- header: floats over the sky, becomes a glass bar on scroll ---------- */
.hdr {
  position: fixed; left: 0; right: 0; top: 0;
  padding: calc(var(--inset) + env(safe-area-inset-top, 0px)) var(--inset) 0;
  background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #fff;
  transition: padding .3s var(--ease-out);
}
.hdr .hdr-row {
  height: 76px;
  padding-left: 12px; padding-right: clamp(12px, 2vw, 16px);
  max-width: 1328px;
  border-radius: 20px;
  transition: background-color .3s, box-shadow .3s, color .3s;
}
.hdr .logo {
  display: inline-flex; align-items: center;
  height: 52px; padding: 0 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(2, 29, 43, .45);
  transition: box-shadow .3s, background-color .3s;
}
.hdr .logo img { width: 176px; filter: none; }
.hdr.scrolled .logo { box-shadow: none; background: transparent; padding-left: 4px; }
.hdr .nav > ul {
  height: 46px; align-self: center; padding: 0 6px;
  border-radius: var(--pill);
  background: rgba(2, 29, 43, .22);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background-color .3s, border-color .3s;
}
.hdr.scrolled .nav > ul, .hdr:has(li.open) .nav > ul { background: var(--grey-soft); border-color: transparent; }
.hdr .nav { height: auto; display: flex; align-items: center; }
.hdr .nav > ul > li > a, .hdr .nav > ul > li > button {
  color: inherit;
  font: 700 12.5px/1 var(--font);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0 12px;
}
.hdr .nav > ul > li > a:hover, .hdr .nav > ul > li > button:hover, .hdr .nav .on { color: inherit; opacity: 1; }
.hdr .nav > ul > li > a::after, .hdr .nav > ul > li > button::after {
  display: block; left: 12px; right: 12px; bottom: 9px; height: 1.5px; background: currentColor;
}
.hdr .nav > ul > li > button::before { width: 6px; height: 6px; margin-left: 7px; }
.hdr .icon-btn { color: inherit; border-radius: 50%; }
.hdr .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.hdr .btn-quiet { color: #fff; }
.hdr .btn-quiet:hover { background: rgba(255, 255, 255, .12); border-color: transparent; }
.hdr .btn-primary { background: #fff; color: var(--navy); }
.hdr .btn-primary:hover { background: var(--blue-pale); }
.hdr .btn-primary.chev::after { background-color: var(--navy); }

.hdr.scrolled { padding-top: calc(10px + env(safe-area-inset-top, 0px)); color: var(--navy-deep); }
.hdr.scrolled .hdr-row {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 12px 40px -18px rgba(2, 29, 43, .28), 0 0 0 1px rgba(2, 29, 43, .05);
}
.hdr.scrolled .icon-btn:hover { background: var(--grey-soft); }
.hdr.scrolled .btn-quiet { color: var(--navy); }
.hdr.scrolled .btn-quiet:hover { background: var(--grey-soft); }
.hdr.scrolled .btn-primary { background: var(--navy); color: #fff; }
.hdr.scrolled .btn-primary.chev::after { background-color: var(--blue); }
/* menus open: keep the bar solid so the panel reads as part of it */
.hdr:has(li.open) { color: var(--navy-deep); }
.hdr:has(li.open) .hdr-row { background: #fff; box-shadow: 0 12px 40px -18px rgba(2, 29, 43, .28); }
.hdr:has(li.open) .logo { box-shadow: none; }
.hdr:has(li.open) .btn-quiet { color: var(--navy); }
.hdr:has(li.open) .btn-primary { background: var(--navy); color: #fff; }
.hdr:has(li.open) .btn-primary.chev::after { background-color: var(--blue); }

.mega {
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-width: 1328px; margin: 0 auto;
  border: 0; border-radius: var(--r-xl);
  background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -24px rgba(2, 29, 43, .35), 0 0 0 1px rgba(2, 29, 43, .05);
  overflow: hidden;
}
.mega .wrap { padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }
.mega-title { font-weight: 500; letter-spacing: -0.03em; }
.mega-h { color: var(--muted); border-bottom-color: var(--grey-cool); }
.mega ul a:hover { color: var(--link); }
.mega-photo img, .mega-feature .img { border-radius: 14px; }
.mega-feature { border-color: var(--grey-cool); border-radius: 16px; background: var(--grey-soft); }
.mega-fit { border-radius: 16px; background: var(--navy); }

.menu-btn { color: inherit; }
.drawer {
  inset: calc(var(--inset) + 84px) var(--inset) auto;
  max-height: calc(100vh - 120px);
  border: 0; border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 30px 70px -24px rgba(2, 29, 43, .35);
  padding: 8px 0 20px;
}
.drawer nav a { font-weight: 500; font-size: 22px; letter-spacing: -0.03em; border-bottom-color: var(--grey-cool); }
.search { background: rgba(2, 29, 43, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.search-panel { margin: var(--inset); border-radius: var(--r-xl); }
.search-bar { border-bottom-color: var(--navy); }
.search-results li.sel a, .search-results a:hover { background: var(--grey-soft); border-radius: 12px; }

@media (max-width: 1100px) {
  .hdr .hdr-row { height: 64px; }
  .hdr .logo { height: 46px; padding: 0 14px; }
  .hdr .logo img { width: 150px; }
}

/* ---------- sky surfaces ---------- */
.sky {
  position: relative;
  isolation: isolate;
  margin: var(--inset);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
  background: #2a86d6 var(--sky-img) center / cover no-repeat;
}
.sky-bg {
  position: absolute; inset: -4%; z-index: -1;
  background: inherit;
  animation: sky-drift 60s ease-in-out infinite alternate;
}
@keyframes sky-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.5%, .8%, 0); }
}

/* ---------- home hero ---------- */
.hero15 { padding-top: calc(var(--hdr-h) + clamp(40px, 6vw, 88px)); }
.hero15-copy {
  display: grid; justify-items: center; text-align: center; gap: 22px;
  max-width: 1000px;
}
.hero15-k {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--pill);
  background: rgba(2, 29, 43, .22); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
.hero15-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-pale); box-shadow: 0 0 0 4px rgba(193, 228, 245, .25); }
.hero15 h1 {
  color: #fff;
  font-size: clamp(42px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -0.045em;
  text-shadow: 0 2px 30px rgba(6, 60, 120, .18);
  max-width: 13em;
}
.hero15 h1 span { color: var(--blue-pale); display: block; }
.hero15-lede { max-width: 600px; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hero15 .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero15 .btn-primary { background: var(--navy); }
.hero15-note { font-size: 14px; color: rgba(255, 255, 255, .8); }

/* rotating card ring */
.orbit {
  --card-w: 176px; --card-h: 196px;
  position: relative;
  height: calc(var(--card-h) + 90px);
  margin-top: clamp(28px, 4vw, 52px);
  perspective: 1100px;
  perspective-origin: 50% 30%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.orbit.is-dragging { cursor: grabbing; }
.orbit:focus-visible .orbit-hint { background: #fff; color: var(--navy); }
.orbit-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.orb-card {
  position: absolute; top: 18px; left: 50%;
  width: var(--card-w); height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: #fff; color: var(--ink);
  font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; text-align: left;
  box-shadow: 0 24px 44px -18px rgba(8, 54, 110, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform-origin: 50% 50% calc(var(--R, 900px) * -1);
  will-change: transform, opacity;
  overflow: hidden;
}
.orb-card.is-front { box-shadow: 0 34px 60px -20px rgba(8, 54, 110, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.orb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.orb-k { font-size: 10.5px; opacity: .7; }
.orb-n { font-size: 11px; font-weight: 700; letter-spacing: .12em; opacity: .5; }
.orb-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--grey-soft); color: var(--muted); }
.orb-cat { margin-top: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.orb-t { font-size: 15px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.22; }
.orb-mini { font-size: 10.5px; opacity: .65; }
.orb-big { font-size: 30px; font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.orb-meter { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .35); margin-top: 8px; overflow: hidden; }
.orb-meter i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.orb-foot { margin-top: 6px; }
.orb-card .pillx { font-size: 10.5px; }
.orb-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: auto; }
.orb-bars i { flex: 1; border-radius: 4px; background: var(--grey-cool); }
.orb-bars i.hot { background: var(--blue); }
.orb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.orb-chips span { padding: 4px 8px; border-radius: var(--pill); background: #fff; font-size: 10.5px; font-weight: 500; }
.orb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(68, 176, 225, .25); }
.orb-dark { background: var(--navy-deep); color: #fff; }
.orb-dark .orb-tag { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.orb-dark .orb-cat { color: var(--blue-pale); }
.orb-pale { background: var(--blue-pale); }
.orb-pale .orb-tag { background: rgba(255, 255, 255, .6); }
.orb-glass {
  background: linear-gradient(160deg, rgba(9, 48, 66, .62), rgba(2, 29, 43, .42));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.orb-glass .orb-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.orb-sky { background: var(--sky-cta-img) 70% 60% / 340% no-repeat; padding: 16px 10px; gap: 10px; justify-content: center; align-items: flex-start; }
.orb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px; border-radius: var(--pill);
  background: #fff; color: var(--ink); font-size: 11px; font-weight: 500;
  box-shadow: 0 6px 14px rgba(8, 54, 110, .2);
}
.orb-chip b { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); }
.orbit-hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: var(--pill);
  background: rgba(2, 29, 43, .22); color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; pointer-events: none;
  transition: background-color .2s, color .2s;
}

/* six capabilities: a white tray of tiles at the foot of the hero */
.hero15-caps { padding-top: 6px; padding-bottom: clamp(20px, 3vw, 36px); }
.caps-tray {
  display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 3.2fr); gap: 10px;
  padding: 10px;
  border-radius: var(--r-xl);
  background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -28px rgba(2, 29, 43, .55), 0 0 0 1px rgba(255, 255, 255, .6);
}
.caps-head { display: grid; align-content: center; gap: 8px; padding: 14px 16px; }
.caps-k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.caps-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--blue); vertical-align: 2px; }
.caps-sub { font-size: 14px; line-height: 1.45; color: var(--muted); }
.caps-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cap-tile {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
  min-height: 148px; height: 100%;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: var(--grey-soft); color: var(--ink);
  text-decoration: none !important;
  transition: background-color .3s, color .3s, transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cap-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  transition: background-color .3s, color .3s;
}
.cap-t { align-self: end; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.cap-d { font-size: 12.5px; line-height: 1.35; color: var(--muted); transition: color .3s; }
.cap-go {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23093042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 1px var(--grey-cool);
  transition: transform .45s var(--ease-out), background-color .3s;
}
.cap-tile:hover, .cap-tile:focus-visible {
  background: var(--navy); color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(2, 29, 43, .55);
}
.cap-tile:hover .cap-n, .cap-tile:focus-visible .cap-n { background: var(--blue); }
.cap-tile:hover .cap-d, .cap-tile:focus-visible .cap-d { color: rgba(255, 255, 255, .75); }
.cap-tile:hover .cap-go, .cap-tile:focus-visible .cap-go { transform: rotate(45deg); background-color: var(--blue-pale); box-shadow: none; }
@media (max-width: 1100px) {
  .caps-tray { grid-template-columns: 1fr; }
  .caps-head { padding: 10px 10px 4px; }
  .caps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-tile { min-height: 128px; }
}

/* client logos marquee */
.hero15-logos { display: flex; align-items: center; gap: 24px; padding: 22px 0 6px; }
.hero15-logos > p {
  flex: none; padding-left: max(24px, calc((100vw - 1296px) / 2 + 16px));
  font-size: 14px; color: var(--muted); white-space: nowrap;
}
.hero15-logos strong { color: var(--ink); font-weight: 500; }
.mq {
  display: flex; overflow: hidden; flex: 1; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 88px);
  padding-right: clamp(40px, 6vw, 88px); flex: none;
  animation: mq 30s linear infinite;
}
.mq:hover .mq-track { animation-play-state: paused; }
.mq-track img { height: 28px; width: auto; filter: grayscale(1) contrast(.6) brightness(1.1); opacity: .75; transition: filter .3s, opacity .3s; }
.mq-track li:hover img { filter: none; opacity: 1; }
@keyframes mq { to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  .hero15-logos { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero15-logos > p { padding-left: 0; text-align: center; }
}

/* ---------- page head on every inner page: a sky card ---------- */
.ph14 {
  margin: var(--inset);
  border: 0; border-radius: var(--r-xl);
  overflow: hidden; isolation: isolate;
  background: #2a86d6 var(--sky-img) center 30% / cover no-repeat;
  color: #fff;
}
.ph14::before { display: none; }
.ph14 > .wrap { border: 0 !important; }
.ph14-in { padding-top: calc(var(--hdr-h) + clamp(36px, 5vw, 72px)); padding-bottom: clamp(48px, 6vw, 88px); }
.ph14 .crumbs, .ph14 .crumbs a { color: rgba(255, 255, 255, .78); }
.ph14 .crumbs a:hover { color: #fff; }
.ph14 .crumbs > * + *::before { color: rgba(255, 255, 255, .4); }
.ph14-k {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: var(--pill);
  background: rgba(2, 29, 43, .22); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
.ph14-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-pale); }
.ph14 h1 {
  color: #fff; font-weight: 500; letter-spacing: -0.045em;
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.05;
  text-shadow: 0 2px 30px rgba(6, 60, 120, .16);
}
.ph14 h1 .end { color: var(--blue-pale); }
.ph14-lede { color: #fff; text-shadow: 0 1px 18px rgba(6, 50, 100, .35); }
.hero15-lede, .hero15-note { text-shadow: 0 1px 18px rgba(6, 50, 100, .3); }
.ph14-lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ph14 .btn-secondary { background: rgba(2, 29, 43, .26); color: #fff; border-color: rgba(255, 255, 255, .24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ph14 .btn-secondary:hover { background: rgba(2, 29, 43, .4); border-color: rgba(255, 255, 255, .4); }
.ph14 .btn-secondary.chev::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23093042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph14 .btn-quiet { color: #fff; }
.ph14 .link-arrow { color: #fff; }
.ph14-card {
  color: var(--text);
  border: 0; border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -24px rgba(8, 54, 110, .45);
}
.ph14-card .link-arrow { color: var(--link); }
.ph14-vis .ui { border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(8, 54, 110, .5); }
.ph14 .pillx { color: inherit; }

/* ---------- sections ---------- */
.sec > .wrap { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.head10 { margin-bottom: clamp(36px, 4vw, 56px); }

/* tinted and navy bands become rounded inset panels, like the template's trays */
.tint12, .sec-tint {
  margin: 0 var(--inset);
  border-radius: var(--r-xl);
  background: var(--grey-soft);
}
.navy13, .band13 {
  margin: 0 var(--inset);
  border-radius: var(--r-xl);
  background: var(--navy-deep);
  overflow: hidden;
}
.navy13 .duo span { color: rgba(193, 228, 245, .6); }
.navy13 .show { border-radius: var(--r-xl); overflow: hidden; }
.navy13 .show-tabs { background: rgba(255, 255, 255, .06); }
.navy13 .show-tabs button[aria-selected="true"] { background: #fff; }
/* rounded bands never touch each other */
.tint12, .sec-tint, .navy13, .band13, .voices11 { margin-top: var(--inset); margin-bottom: var(--inset); }

/* ---------- card trays ---------- */
.need-grid {
  gap: 12px; padding: 12px;
  border-radius: var(--r-xl);
  background: var(--grey-soft);
}
.need {
  border: 0; border-radius: var(--r-md);
  background: #fff;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.need:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(2, 29, 43, .18); }
.need:first-child { background: var(--navy); }
.need h3 { text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700; color: var(--link); }
.need:first-child h3 { color: var(--blue-pale); }
.need .cue { font-weight: 500; letter-spacing: -0.035em; }
.need .go { font-weight: 500; }

.tint12 .need-grid, .sec-tint .need-grid { background: #fff; }

/* generic card grids get the tray treatment where cards are plain white boxes */
.grid > .card, .grid > .col-item, .cols-2 > .col-item, .cols-3 > .col-item { border-radius: var(--r-md); }

/* case-study cards: full-bleed photograph, result over a gradient */
.case-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px;
  padding: 0; border: 0; border-radius: var(--r-xl);
  overflow: hidden; isolation: isolate;
  background: var(--navy-deep); color: #fff;
}
.case-card:hover { box-shadow: 0 24px 50px -20px rgba(2, 29, 43, .45); }
.case-card .cc-img { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.case-card .cc-img img { width: 100%; height: 100%; object-fit: cover; }
.case-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(2, 29, 43, .05) 20%, rgba(2, 29, 43, .55) 50%, rgba(2, 29, 43, .92) 100%);
}
.case-card .cc-body { padding: 22px; gap: 10px; }
.case-card .cc-body .meta { color: rgba(255, 255, 255, .78); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 700; }
.case-card .cc-res { border-bottom-color: rgba(255, 255, 255, .18); }
.case-card .cc-res .n { color: #fff; font-weight: 500; letter-spacing: -0.045em; }
.case-card .cc-res .m { color: rgba(255, 255, 255, .82); }
.case-card .t { color: #fff; font-weight: 500; letter-spacing: -0.02em; }
.case-card .link-arrow { color: var(--blue-pale); }

/* insight cards: rounded photograph, text below */
.insight-card .img { border-radius: var(--r-xl); }
.insight-card h3 { font-weight: 500; letter-spacing: -0.03em; }
.insight-card .meta { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.insight-card:hover h3 { color: var(--link); }

/* product-style mock windows read like the template's floating UI cards */
.ui { border-radius: 16px; border-color: var(--grey-cool); }
.pillx { border-radius: var(--pill); font-weight: 500; }

/* comparison table sits in a tray */
.cmp-wrap { padding: 12px; border-radius: var(--r-xl); background: var(--grey-soft); }
.cmp { background: #fff; border-radius: var(--r-md); overflow: hidden; }
.cmp .us { background: var(--blue-pale) !important; color: var(--navy-deep); }

/* testimonial band over a photograph: rounded inset */
.voices11 { margin: 0 var(--inset); border-radius: var(--r-xl); background: var(--navy-deep); }
.voices11-photo::after { background: linear-gradient(180deg, rgba(2, 29, 43, .72), rgba(2, 29, 43, .86)); }
.tq.light blockquote p { font-weight: 500; letter-spacing: -0.03em; }

/* facts and lists */
.facts > div { border-bottom-color: var(--grey-cool); }
.ticks li::before, .checks li::before { color: var(--blue); }
.quote { border-left-color: var(--blue) !important; }
.quote blockquote p { font-weight: 500; letter-spacing: -0.025em; }

/* plans and pricing cards */
.plans13 { gap: 12px; padding: 12px; border-radius: var(--r-xl); background: var(--grey-soft); }
.plans13 > * { min-width: 0; }
@media (max-width: 900px) { .plans13 { grid-template-columns: minmax(0, 1fr) !important; } }
.plan13 { border: 0 !important; border-radius: var(--r-md); background: #fff; }
.plan13.pop { background: var(--navy) !important; color: #fff; }
.plan13.pop h3, .plan13.pop .price, .plan13.pop .hours, .plan13.pop strong { color: #fff; }
.plan13.pop .tag { background: var(--blue-pale); color: var(--navy); border-radius: var(--pill); }
.plan13 .price { font-weight: 500; letter-spacing: -0.04em; }

/* forms */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-radius: 12px !important;
}
.form .btn, .contact-side .btn { justify-self: start; }

/* ---------- footer: sky call-to-action card, then a navy card ---------- */
.ftr { background: transparent; border: 0; padding-bottom: var(--inset); color: rgba(255, 255, 255, .72); }
.ftr-cta {
  position: relative; isolation: isolate;
  margin: clamp(56px, 7vw, 96px) var(--inset) var(--inset);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #2a86d6 var(--sky-cta-img) center bottom / cover no-repeat;
  color: rgba(255, 255, 255, .92);
}
.ftr-cta .wrap {
  display: grid; justify-items: start; gap: 22px;
  padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px);
}
.ftr-cta p { max-width: 560px; font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.55; }
.ftr-cta strong {
  display: block; margin-bottom: 14px;
  color: #fff; font-weight: 500;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -0.045em;
  max-width: 11em;
}
.ftr-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr-cta .btn-light { background: var(--navy); color: #fff; }
.ftr-cta .btn-light:hover { background: var(--navy-deep); }
.ftr-cta .btn-light.chev::after { background-color: var(--blue); }
.ftr-cta .btn-ghost-dark, .ftr-cta .btn-secondary {
  background: rgba(2, 29, 43, .26); color: #fff; border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ftr > .wrap {
  margin: 0 var(--inset);
  max-width: none;
  border-radius: var(--r-xl);
  background: var(--navy-deep);
  padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px);
}
.ftr a:not(.btn) { color: rgba(255, 255, 255, .74); }
.ftr a:not(.btn):hover { color: var(--blue); }
.ftr h2 { color: rgba(255, 255, 255, .5); }
.ftr-brand img { filter: brightness(0) invert(1); }
.ftr-brand p { color: rgba(255, 255, 255, .78); }
.ftr-phone a { color: #fff !important; }
.ftr-base { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.ftr-addr { color: rgba(255, 255, 255, .72); }
.ftr-legal { color: rgba(255, 255, 255, .5); }
.ftr-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.ftr-card .t { color: #fff; }
.ftr-card .d { color: rgba(255, 255, 255, .6); }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .hdr .hdr-tools .btn { display: none; }
}
@media (max-width: 760px) {
  :root { --inset: 8px; --hdr-h: 72px; }
  .orbit { --card-w: 148px; --card-h: 178px; perspective: 900px; }
  .orb-card { padding: 12px; gap: 5px; }
  .orb-glass .orb-tag { display: none; }
  .orb-glass .orb-mini[style] { margin-top: 6px !important; }
  .orb-chips { gap: 3px; }
  .orb-chips span { padding: 3px 7px; font-size: 10px; }
  .orb-t { font-size: 13px; }
  .orb-big { font-size: 24px; }
  .orb-bars { height: 64px; }
  .hero15 h1 span { display: inline; }
  .case-card { min-height: 420px; }
  .ftr-cta .wrap { justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-bg, .mq-track { animation: none !important; }
}

/* ---------- people: smaller, all round portraits ---------- */
.experts13, .team11 {
  gap: 12px; padding: 12px;
  border-radius: var(--r-xl); background: var(--grey-soft);
}
.experts13 > a, .team11 > a {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 26px 18px 24px; text-align: center;
  border-radius: var(--r-md); background: #fff;
  text-decoration: none !important;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.experts13 > a:hover, .team11 > a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(2, 29, 43, .22); }
.experts13 .ph, .team11 .ph {
  width: 116px; height: 116px; aspect-ratio: 1; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden;
  background: var(--grey-cool);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--grey-cool);
}
.experts13 .ph img, .team11 .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s var(--ease-out); }
.experts13 img[src*="alex-clay"] { transform: scale(1.14); }
.experts13 > a:hover .ph img, .team11 > a:hover .ph img { transform: scale(1.06); }
.experts13 > a:hover img[src*="alex-clay"] { transform: scale(1.2); }
.experts13 .dom { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.experts13 .name, .team11 .name { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.experts13 .role, .team11 .role { font-size: 14px; color: var(--muted); }
.lead12-ph {
  width: min(300px, 100%); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; align-self: start; justify-self: center;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--grey-cool), 0 30px 60px -28px rgba(2, 29, 43, .45);
}
.lead12-ph img { width: 100%; height: 100%; object-fit: cover; }

/* tabs: no square focus box when the showcase rotates on its own; keep a soft ring for keyboard users */
.show-tabs button:focus { outline: none; }
.show-tabs button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); border-radius: 12px 12px 0 0; }
.tq-tabs button:focus { outline: none; }
.tq-tabs button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-pale); border-radius: 12px; }
.team11 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.team11 .ph::after { display: none; }
.team11 img[src$=".svg"] { filter: none; }
@media (max-width: 1100px) { .team11 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team11, .experts13 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .experts13 .ph, .team11 .ph { width: 92px; height: 92px; } .experts13 > a, .team11 > a { padding: 18px 10px; } }

/* nav labels stay on one line */
.hdr .nav > ul > li > a, .hdr .nav > ul > li > button { white-space: nowrap; padding: 0 11px; letter-spacing: .1em; }
@media (max-width: 1240px) { .hdr .nav > ul > li > a, .hdr .nav > ul > li > button { padding: 0 8px; font-size: 12px; letter-spacing: .08em; } }
/* logos whose wordmark is small relative to the mark get a little more height */
.mq-track img[src*="klc-squared"] { height: 40px; }
.mq-track img[src*="relw-ai"] { height: 32px; }

/* ---------- design pass fixes ---------- */
/* client quotes on navy bands */
.navy13 .quotes { gap: 12px; }
.navy13 .quote-card {
  display: grid; align-content: start; gap: 18px;
  padding: 26px; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.navy13 .quote-card img { height: 26px; width: auto; justify-self: start; filter: brightness(0) invert(1); opacity: .9; }
.navy13 .quote-card blockquote p { color: #fff; font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: -0.015em; }
.navy13 .quote-card figcaption { color: rgba(193, 228, 245, .75); font-size: 14px; display: grid; gap: 2px; margin-top: auto; }
.navy13 .quote-card figcaption strong { color: #fff; font-weight: 500; }

/* pull quotes: breathing room from the rule */
.quote { padding: 6px 0 6px 22px !important; border-left: 3px solid var(--blue) !important; }
.quote blockquote p { color: var(--ink); }
.quote figcaption { margin-top: 12px; }

/* odd last card spans the row instead of sitting alone */
.grid-2 > .case-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 340px; }
.grid-3 > .case-card:only-child, .grid-3 > .case-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; min-height: 340px; }
.grid-3 > .insight-card:only-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; align-items: center; }
.grid-3 > .insight-card:only-child .img { grid-row: span 4; margin: 0; }
@media (max-width: 760px) {
  .grid-3 > .insight-card:only-child { grid-template-columns: 1fr; }
  .grid-3 > .insight-card:only-child .img { grid-row: auto; }
}

/* office map: designed fallback under the embed */
.office13 { border: 0; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--grey-cool); }
.map13 {
  background:
    radial-gradient(circle at 50% 46%, rgba(68, 176, 225, .22) 0 34px, transparent 35px),
    linear-gradient(var(--grey-cool) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--grey-cool) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--grey-soft);
}
.map13::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--navy); box-shadow: 0 6px 16px rgba(2, 29, 43, .35);
}
.map13::after {
  content: "Urban Square, Sector 62, Gurugram"; position: absolute; left: 50%; top: calc(46% + 28px); transform: translateX(-50%);
  padding: 6px 12px; border-radius: var(--pill); background: #fff; color: var(--navy-deep);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(2, 29, 43, .3);
}
.map13 iframe { z-index: 1; }

/* ---------- office photo galleries ---------- */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 18vw, 270px); gap: 12px; }
.gal-item { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--grey-cool); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gal-item:hover img { transform: scale(1.04); }
.gal-item figcaption {
  position: absolute; left: 14px; bottom: 14px;
  padding: 7px 13px; border-radius: var(--pill);
  background: rgba(2, 29, 43, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12.5px; font-weight: 500;
}
/* 6: [A A B C] / [D E F F]   5: [A A B C] / [A A D E]   4: [A A B B] / [A A C D]   3: [A A B B] / [A A C C] */
.gal-6 > :nth-child(1), .gal-6 > :nth-child(6) { grid-column: span 2; }
.gal-5 > :nth-child(1), .gal-4 > :nth-child(1), .gal-3 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-4 > :nth-child(2), .gal-3 > :nth-child(2), .gal-3 > :nth-child(3) { grid-column: span 2; }
@media (max-width: 760px) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .gal > * { grid-column: auto !important; grid-row: auto !important; }
  .gal > :first-child { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .gal-6 > :last-child, .gal-4 > :last-child { grid-column: 1 / -1 !important; }
}

/* ---------- bigger logo chip ---------- */
.hdr .logo { height: 60px; padding: 0 22px; border-radius: 18px; }
.hdr .logo img { width: 214px; }
@media (max-width: 1240px) { .hdr .logo img { width: 190px; } }
@media (max-width: 1100px) { .hdr .logo { height: 52px; padding: 0 16px; } .hdr .logo img { width: 176px; } }
@media (max-width: 420px) { .hdr .logo img { width: 156px; } }

/* ---------- capability showcase tabs: clickable tiles ---------- */
.show .show-tabs,
.navy13 .show .show-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  padding: 10px; overflow: visible;
  background: var(--grey-soft); border: 0;
}
.show .show-tabs button,
.navy13 .show .show-tabs button {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
  min-width: 0; min-height: 64px; padding: 12px 40px 14px 12px;
  border: 1px solid var(--grey-cool); border-radius: 16px;
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 6px -2px rgba(2, 29, 43, .08);
  text-align: left; cursor: pointer; overflow: hidden;
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.show .show-tabs button::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: var(--grey-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23093042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  transition: transform .4s var(--ease-out), background-color .25s;
}
.show .show-tabs .n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  transition: background-color .25s;
}
.show .show-tabs .t { font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: inherit; }
.show .show-tabs button:hover,
.navy13 .show .show-tabs button:hover {
  background: #fff; color: var(--ink); border-color: var(--navy);
  transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(2, 29, 43, .4);
}
.show .show-tabs button:hover::after { transform: rotate(45deg); background-color: var(--blue-pale); }
.show .show-tabs button[aria-selected="true"],
.navy13 .show .show-tabs button[aria-selected="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 16px 30px -14px rgba(2, 29, 43, .6);
}
.show .show-tabs button[aria-selected="true"] .n { background: var(--blue); }
.show .show-tabs button[aria-selected="true"]::after { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: rotate(45deg); }
/* the auto-rotate progress bar sits inside the active tile */
.show .show-tabs .bar { left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: transparent; }
.show .show-tabs button[aria-selected="true"] .bar { background: rgba(255, 255, 255, .18); }
.show .show-tabs .bar i { border-radius: inherit; background: var(--blue-pale); }
.show .show-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; border-radius: 16px; }
@media (max-width: 1100px) { .show .show-tabs, .navy13 .show .show-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .show .show-tabs, .navy13 .show .show-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show .show-tabs button { padding-right: 12px; }
  .show .show-tabs button::after { display: none; }
}

/* small screens: desktop menu hidden, menu button and drawer take over (matches site.css breakpoint) */
@media (max-width: 1020px) {
  .hdr .nav { display: none !important; }
  .hdr .hdr-tools .btn { display: none; }
  .hdr .menu-btn { display: inline-grid; width: 46px; height: 46px; border-radius: 50%; background: rgba(2, 29, 43, .26); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
  .hdr.scrolled .menu-btn, .hdr:has(li.open) .menu-btn { background: var(--grey-soft); border-color: transparent; color: var(--navy); }
  .hdr .hdr-row { height: 68px; }
}

/* =====================================================================
   Round 5: hovers without underlines, full-width mega menus, the
   comparison as cards, the building-blocks section, the static map
   ===================================================================== */
:root {
  --ico-arrow-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23021d2b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5l7-7M4.8 3.5h5.7v5.7' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- hovers: colour and soft fills, never underlines ---------- */
a:hover, a:focus-visible { text-decoration: none; }
.mega-feature:hover .t, .mega-photo:hover .t, .case-card:hover h3, .insight-card:hover h3, .lead-insight:hover h2 { text-decoration: none; }
.case-card .t, .insight-card h3, .lead-insight h2, .mega-feature .t, .mega-photo .t { transition: color .2s; }
.insight-card:hover h3, .lead-insight:hover h2, .mega-feature:hover .t, .mega-photo:hover .t { color: var(--link); }
.doc-body p a:not(.btn):not(.link-arrow), main .big a:not(.btn):not(.link-arrow), main li > a:not([class]):not(:has(*)) { transition: color .2s, background-color .2s; border-radius: 4px; }
.doc-body p a:not(.btn):not(.link-arrow):hover, main .big a:not(.btn):not(.link-arrow):hover { color: var(--navy-deep); background: var(--brand-soft); }
.link-arrow { transition: color .2s; }
.link-arrow:hover, a:hover .link-arrow { color: var(--navy); }
.ftr a:not(.btn) { transition: color .2s; }

/* header items: a soft pill instead of an underline */
.hdr .nav > ul > li > a::after, .hdr .nav > ul > li > button::after { display: none; }
.hdr .nav > ul > li > a, .hdr .nav > ul > li > button {
  height: 34px; align-self: center; border-radius: var(--pill);
  transition: background-color .2s, color .2s;
}
.hdr .nav > ul > li > a:hover, .hdr .nav > ul > li > button:hover { background: rgba(255, 255, 255, .18); }
.hdr .nav .on { background: rgba(255, 255, 255, .22); }
.hdr.scrolled .nav > ul > li > a:hover, .hdr.scrolled .nav > ul > li > button:hover,
.hdr:has(li.open) .nav > ul > li > a:hover, .hdr:has(li.open) .nav > ul > li > button:hover,
.hdr.scrolled .nav .on, .hdr:has(li.open) .nav .on { background: #fff; box-shadow: 0 2px 8px -4px rgba(2, 29, 43, .25); }
.hdr:has(li.open) .nav > ul > li.open > button, .hdr:has(li.open) .nav > ul > li.open > button:hover { background: var(--navy); color: #fff; box-shadow: none; }

/* ---------- mega menus: span the whole bar, calmer type ---------- */
.hdr .hdr-row { position: relative; }
.hdr .nav, .hdr .nav > ul, .hdr .nav > ul > li { position: static; }
.hdr:has(li.open) .nav > ul { backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega {
  top: calc(100% + 10px); left: 0; right: 0; max-width: none; margin: 0;
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
}
.mega .wrap.mega-grid {
  max-width: none; padding: 12px; gap: 12px;
  grid-template-columns: minmax(220px, .85fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}
.mega-grid:has(> :nth-child(3):last-child) { grid-template-columns: minmax(220px, .85fr) minmax(0, 2fr) minmax(0, 1fr) !important; }
.mega-grid:has(> :nth-child(3):last-child) .wide ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mega-intro { align-self: stretch; padding: 26px 24px; border-radius: 18px; background: var(--grey-soft); }
.mega-title { font-size: 24px; line-height: 1.15; margin-bottom: 10px; }
.mega-intro p:not(.mega-title) { font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; color: var(--muted); }
.mega-grid > div:not(.mega-intro) { padding: 22px 0 14px; }
.mega-h { font-size: 11.5px; padding: 0 12px 8px; margin-bottom: 2px; border-bottom: 0; }
.mega ul a { padding: 9px 12px; border-radius: 12px; font-size: 15px; line-height: 1.3; transition: background-color .18s, color .18s; }
.mega ul a small { font-size: 13px; line-height: 1.45; margin-top: 3px; }
.mega ul a:hover { background: var(--brand-soft); color: var(--navy-deep); }
.mega ul a:hover small { color: var(--text); }
.mega-feature { align-self: stretch; margin: 0; padding: 24px; }
.mega-feature .n { font-size: 40px; }
.mega-photo { align-self: stretch; padding: 12px 12px 18px; border-radius: 18px; transition: background-color .2s; }
.mega-photo:hover { background: var(--grey-soft); }
.mega-photo .t { font-size: 17px; }
.mega-intro .mega-photo { margin-top: 18px; padding: 18px 0 0; border-radius: 0; }
.mega-intro .mega-photo:hover { background: none; }
.mega-fit { margin: 12px 0 0; padding: 16px 18px; transition: background-color .2s; }
.mega-fit:hover { background: var(--navy-deep); }
@media (max-width: 1180px) {
  .mega .wrap.mega-grid { grid-template-columns: minmax(200px, .8fr) repeat(3, minmax(0, 1fr)); }
  .mega-intro { padding: 22px 20px; }
  .mega ul a { font-size: 14.5px; padding: 8px 10px; }
  .mega-h { padding-left: 10px; }
}

/* ---------- comparison as three cards ---------- */
.cmp15 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto repeat(4, auto) auto; gap: 0 12px;
  padding: 12px; border-radius: var(--r-xl); background: var(--grey-soft);
}
.cmp15-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 28px 28px 24px; border-radius: 18px; background: #fff; }
.cmp15-col dl { display: contents; margin: 0; }
.cmp15-col dl > div { padding: 18px 0; border-top: 1px solid var(--grey-cool); }
.cmp15-col dt { margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmp15-col dd { display: flex; gap: 12px; margin: 0; font-size: 16px; line-height: 1.45; color: var(--text); }
.cmp15-col dd::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--grey-cool) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10h7' stroke='%23687c89' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.cmp15-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 20px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.cmp15-badge { flex: none; padding: 6px 11px; border-radius: var(--pill); background: var(--blue); color: var(--navy-deep); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cmp15-cta { border-top: 1px solid var(--grey-cool); }
.cmp15-us { background: var(--navy-deep); box-shadow: 0 30px 60px -34px rgba(2, 29, 43, .7); }
.cmp15-us .cmp15-k { color: #fff; }
.cmp15-us dl > div, .cmp15-us .cmp15-cta { border-top-color: rgba(255, 255, 255, .12); }
.cmp15-us dt { color: var(--blue-pale); opacity: .85; }
.cmp15-us dd { color: #fff; }
.cmp15-us dd::before {
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23021d2b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.cmp15-us .cmp15-cta { display: grid; justify-items: start; gap: 14px; padding-top: 22px; }
.cmp15-us .cmp15-cta p { font-size: 15px; color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) {
  .cmp15 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .cmp15-col { grid-row: auto; display: block; padding: 22px 20px 20px; }
  .cmp15-col dl { display: block; }
  .cmp15-col dl > div { padding: 14px 0; }
  .cmp15-col:not(.cmp15-us) .cmp15-cta { display: none; }
  .cmp15-k { font-size: 19px; padding-bottom: 14px; }
  .cmp15-col dd { font-size: 15.5px; }
}

/* ---------- office map: a static, on-brand map ---------- */
.map13-static { display: block; overflow: hidden; color: var(--navy-deep); }
.map13-static::before, .map13-static::after { content: none; display: none; }
.map13-static img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform-origin: 50% 46%; transition: transform 1.2s var(--ease-out); }
.map13-static:hover img { transform: scale(1.05); }
.map13-pin { position: absolute; left: 50%; top: 46%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(2, 29, 43, .4); }
.map13-pin::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: rgba(68, 176, 225, .3); animation: pin15 2.4s ease-out infinite; }
@keyframes pin15 { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.map13-label { position: absolute; left: 50%; top: calc(46% + 22px); transform: translateX(-50%); padding: 7px 14px; border-radius: var(--pill); background: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(2, 29, 43, .4); }
.map13-attr { position: absolute; right: 10px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .82); color: var(--muted); font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .map13-pin::before { animation: none; } }

/* ---------- How we work: building blocks (compact) ---------- */
.lego15-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 56px; align-items: end; margin-bottom: 28px; }
.lego15-head .duo { max-width: none; }
.lego15-head .big { color: var(--text); margin: 0; font-size: 17px; }
.lego15-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lego15-mode { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 18px; background: #fff; }
.lego15-mode .lego15-ico { display: block; width: 52px; height: 52px; margin: -4px 0 4px -6px; }
.lego15-mode .lego15-ico svg { display: block; width: 100%; height: 100%; }
.lego15-mode .kick { margin: 0; }
.lego15-mode h3 { font-size: 21px; }
.lego15-mode > p:not(.kick) { color: var(--text); font-size: 14.5px; line-height: 1.5; margin: 0 0 6px; }
.lego15-chips, .lego15-pills, .lego15-steps { margin: 6px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--grey-cool); }
.lego15-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lego15-chip { display: block; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #fff; text-decoration: none; transition: transform .25s var(--ease-out), filter .2s; }
.lego15-chip:hover { transform: translateY(-2px); filter: brightness(1.08); }
.lego15-chip.b1 { background: var(--navy-deep); } .lego15-chip.b2 { background: var(--navy); } .lego15-chip.b3 { background: var(--link); }
.lego15-chip.b4 { background: var(--blue); color: var(--navy-deep); } .lego15-chip.b5 { background: #8fcdea; color: var(--navy-deep); } .lego15-chip.b6 { background: var(--blue-pale); color: var(--navy-deep); }
.lego15-steps { display: grid; gap: 8px; }
.lego15-steps li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); }
.lego15-steps .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; }
.lego15-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lego15-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: var(--pill); background: var(--grey-soft); color: var(--ink); font-size: 13px; text-decoration: none; transition: background-color .2s, color .2s; }
.lego15-pill .code { padding: 2px 6px; border-radius: var(--pill); background: #fff; color: var(--link); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; transition: background-color .2s, color .2s; }
.lego15-pill:hover { background: var(--navy); color: #fff; }
.lego15-pill:hover .code { background: var(--blue); color: var(--navy-deep); }
@media (max-width: 1020px) { .lego15-modes { grid-template-columns: minmax(0, 1fr); } .lego15-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .lego15-mode { padding: 20px; } .lego15-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- capabilities overview: icon cards in a tray ---------- */
.capcards15 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: var(--r-xl); background: var(--grey-soft); }
.capcards15 .capcard13 { display: flex; flex-direction: column; gap: 0; padding: 26px 26px 24px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: none; overflow: visible; transition: transform .35s var(--ease-out), box-shadow .35s; }
.capcards15 .capcard13:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -28px rgba(2, 29, 43, .45); }
.cap15-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.cap15-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--navy-deep); color: var(--blue-pale); transition: background-color .3s, color .3s; }
.cap15-ico svg { width: 26px; height: 26px; }
.capcards15 .capcard13:hover .cap15-ico { background: var(--blue); color: var(--navy-deep); }
.cap15-top .n { position: static; padding: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.capcards15 .body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 0; }
.capcards15 .h { font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.capcards15 .d { color: var(--text); font-size: 15px; line-height: 1.5; }
.capcards15 .ticks { margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--grey-cool); }
.capcards15 .go { margin-top: auto; padding-top: 18px; color: var(--link); font-weight: 500; }
@media (max-width: 1020px) { .capcards15 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .capcards15 { grid-template-columns: minmax(0, 1fr); } .capcards15 .capcard13 { padding: 22px 20px; } .cap15-top { margin-bottom: 18px; } }

/* ---------- home: Why us ---------- */
.why15 .how10 { align-items: stretch; }
.why15-art { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); min-height: 420px; background: var(--grey-cool); }
.why15-art img { position: absolute; inset: 0; }
.why15-art img { width: 100%; height: 100%; object-fit: cover; }
.why15-art figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 13px; border-radius: var(--pill); background: rgba(2, 29, 43, .72); color: #fff; font-size: 12.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 960px) { .why15 .how10 { grid-template-columns: minmax(0, 1fr); } .why15-art { min-height: 0; aspect-ratio: 4 / 3; margin-top: 8px; } }

/* ---------- comparison: row count per page ---------- */
.cmp15 { grid-template-rows: auto repeat(var(--rows, 4), auto) auto; }

/* ---------- phone and tablet menu: groups open to their sub-pages ---------- */
.drawer nav .dr-group { border-bottom: 1px solid var(--grey-cool); }
.drawer nav summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; list-style: none; cursor: pointer; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.drawer nav summary::-webkit-details-marker { display: none; }
.drawer nav summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--grey-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5' fill='none' stroke='%23021d2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .25s var(--ease-out), background-color .2s; }
.drawer nav details[open] > summary::after { transform: rotate(180deg); background-color: var(--blue-pale); }
.drawer nav .dr-sub { display: grid; gap: 2px; padding: 0 0 14px; }
.drawer nav .dr-sub a { display: block; padding: 9px 12px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.drawer nav .dr-sub a:hover, .drawer nav .dr-sub a:active { background: var(--brand-soft); color: var(--navy-deep); }
.drawer nav .dr-sub .dr-all { margin-bottom: 4px; background: var(--grey-soft); color: var(--navy-deep); font-weight: 500; }
.drawer nav .dr-h { margin: 10px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- phone polish (iPhone-size screens) ---------- */
@media (max-width: 760px) {
  /* sample screens: no right-edge bleed on a phone, so every column shows */
  .show-art { padding: 20px; }
  .show-art .ui { width: 100%; }
  .week13-card .art { height: auto; max-height: 300px; padding: 18px 18px 0; }
  .week13-card .art .ui { width: 100%; font-size: 10.5px; }
  .week13-card .ui-kpi th:nth-child(2), .week13-card .ui-kpi td:nth-child(2) { display: none; }
  /* related solutions: title over description */
  .doc-body .rows .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .doc-body .rows .row .t { font-size: 18px; }
  /* industry tiles with descriptions: one per row so the copy breathes */
  .ind-tiles12.big { grid-template-columns: minmax(0, 1fr) !important; }
  .ind-tiles12.big a { aspect-ratio: 16 / 11; min-height: 0; height: auto; }
  /* long pill buttons in plan cards */
  .plans13 .btn { width: 100%; justify-content: space-between; padding-left: 20px; font-size: 12px; letter-spacing: .08em; }
}
@media (max-width: 420px) {
  .btn { letter-spacing: .09em; }
  .btn.chev { padding-right: 6px; }
}

/* =====================================================================
   Tools: the four-tool grid, request form, tool pages and the call step
   ===================================================================== */
.tools15 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 12px; list-style: none; border-radius: var(--r-xl); background: var(--grey-soft); }
.tool15 { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .35s var(--ease-out), box-shadow .35s; }
.tool15:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(2, 29, 43, .5); }
.tool15-art { display: grid; place-items: center; min-height: 330px; padding: 34px 40px; background: linear-gradient(160deg, #eaf6fc 0%, #f7fbfd 55%, #dcedf7 100%); }
.tool15-art .ui { width: 100%; max-width: 440px; font-size: 12.5px; box-shadow: 0 24px 48px -24px rgba(9, 48, 66, .35), 0 2px 8px rgba(9, 48, 66, .06); transition: transform .5s var(--ease-out); }
.tool15:hover .tool15-art .ui { transform: translateY(-4px) scale(1.01); }
.tool15-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 26px 28px 28px; }
.tool15-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool15-meta .kick { margin: 0; }
.tool15-access { flex: none; padding: 5px 11px; border-radius: var(--pill); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tool15-access.free { background: var(--blue-pale); color: var(--navy-deep); }
.tool15-access.clients { background: var(--navy); color: #fff; }
.tool15-h { font-size: 30px; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.tool15-d { color: var(--text); font-size: 15.5px; line-height: 1.55; }
.tool15-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tool15-tags li { padding: 5px 11px; border-radius: var(--pill); background: var(--grey-soft); color: var(--text); font-size: 13px; }
.tool15-cta { align-self: flex-start; margin-top: auto; }
.tool15-body .tool15-cta { margin-top: 14px; }
.tool15:hover .tool15-cta { background: var(--navy); color: #fff; border-color: var(--navy); }
.tool15:hover .tool15-cta.chev::after { background-color: var(--blue); }
/* the mini screens */
.ui-tl15 .ui-body { padding: 16px; }
.tl15-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl15-tiles i { aspect-ratio: 16 / 9; border-radius: 6px; background: var(--grey-soft); border: 1px solid var(--grey-cool); }
.tl15-tiles i.on { background: var(--navy); border-color: var(--navy); }
.tl15-tiles i.now { background: var(--blue-pale); border-color: var(--blue); animation: tl15pulse 1.6s ease-in-out infinite; }
@keyframes tl15pulse { 50% { background: var(--blue); } }
@media (prefers-reduced-motion: reduce) { .tl15-tiles i.now { animation: none; } }
.tl15-sw { display: flex; height: 132px; overflow: hidden; border-radius: 10px; }
.tl15-sw span { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; transition: flex .3s var(--ease-out); }
.tool15:hover .tl15-sw span:nth-child(2) { flex: 1.5; }
.tl15-sw b { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.tl15-sw em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.tl15-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tl15-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--grey-cool); border-radius: 9px; }
.tl15-rows li span { overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.tl15-rows b { flex: none; padding: 3px 8px; border-radius: var(--pill); font-size: 10.5px; font-weight: 500; }
.tl15-rows b.ok { background: #e3f5ea; color: #1a7f45; } .tl15-rows b.info { background: var(--brand-soft); color: var(--link); } .tl15-rows b.warn { background: #fdf1e2; color: #9a5a00; }
.tl15-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.tl15-score strong { font-size: 40px; font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.tl15-score span { color: var(--muted); }
.tl15-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl15-bars li { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--text); }
.tl15-bars i { height: 8px; border-radius: 4px; background: var(--grey-cool); overflow: hidden; }
.tl15-bars i b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--navy), var(--blue)); }
.tl15-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grey-cool); color: var(--muted); font-size: 10.5px; letter-spacing: .04em; }
/* request a tool */
.req15 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-xl); background: var(--navy-deep); color: #fff; }
.req15-copy .kick { color: var(--blue-pale); }
.req15-copy h2 { margin: 10px 0 12px; color: #fff; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; line-height: 1.1; }
.req15-copy p:not(.kick) { color: rgba(255, 255, 255, .72); font-size: 16px; }
.req15-form { display: grid; gap: 14px; }
.req15-form label { color: rgba(255, 255, 255, .8); }
.req15-form input, .req15-form textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.req15-form input:focus, .req15-form textarea:focus { border-color: var(--blue); background: rgba(255, 255, 255, .1); }
.req15-form ::placeholder { color: rgba(255, 255, 255, .45); }
.req15-form .btn { justify-self: start; }
.req15-form .form-ok { color: var(--blue-pale); }
/* tool pages */
.tl15-page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 24px 56px; align-items: start; }
.tl15-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); background: var(--grey-soft); }
.tl15-form .kick { margin: 0; }
.tl15-form label small { margin-left: 6px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.tl15-form input, .tl15-form textarea, .tl15-form select { background: #fff; }
.tl15-form .btn { justify-self: start; margin-top: 4px; }
.chips15 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.chips15 legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.chips15 label { position: relative; cursor: pointer; }
.chips15 input { position: absolute; opacity: 0; pointer-events: none; }
.chips15 span { display: inline-block; padding: 9px 16px; border: 1px solid var(--grey-cool); border-radius: var(--pill); background: #fff; color: var(--text); font-size: 14px; transition: background-color .2s, color .2s, border-color .2s; }
.chips15 label:hover span { border-color: var(--blue); }
.chips15 input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips15 input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.tl15-side { display: grid; gap: 22px; padding-top: 8px; }
.tl15-steps { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.tl15-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--grey-cool); }
.tl15-steps .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.tl15-steps h3 { font-size: 17px; }
.tl15-steps p { margin: 4px 0 0; color: var(--text); font-size: 14.5px; }
.tl15-note { padding: 18px 20px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--brand-soft); }
.tl15-note h3 { font-size: 15px; }
.tl15-note p { margin: 4px 0 0; color: var(--text); font-size: 14px; }
.covers15 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.covers15 li { padding: 22px; border-radius: 16px; background: #fff; }
.covers15 h3 { font-size: 17px; }
.covers15 p { margin: 6px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.pages15 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: var(--r-xl); background: var(--grey-soft); }
.pages15 figure { margin: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 18px 36px -24px rgba(2, 29, 43, .45); background: #fff; }
.pages15 img { display: block; width: 100%; height: auto; }
/* the call step */
.gate15 { width: min(520px, calc(100vw - 32px)); padding: 32px; border: 0; border-radius: var(--r-xl); background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(2, 29, 43, .6); }
.gate15::backdrop { background: rgba(2, 29, 43, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gate15 h2 { margin: 10px 0 10px; font-size: 28px; letter-spacing: -.035em; line-height: 1.15; }
.gate15 p:not(.kick) { color: var(--text); font-size: 15.5px; }
.gate15-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gate15-x { position: absolute; top: 14px; right: 14px; margin: 0; }
.gate15-x button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--grey-soft); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.gate15-x button:hover { background: var(--grey-cool); }
@media (max-width: 1020px) {
  .covers15 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl15-page, .req15 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tools15 { grid-template-columns: minmax(0, 1fr); }
  .tool15-art { min-height: 0; padding: 22px 18px; }
  .tool15-body { padding: 22px 20px 24px; }
  .tool15-h { font-size: 26px; }
  .pages15 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .covers15 { grid-template-columns: minmax(0, 1fr); }
  .tl15-bars li { grid-template-columns: 100px minmax(0, 1fr); }
  .gate15 { padding: 26px 22px; }
}
@media (max-width: 560px) { .tl15-sw span { padding: 8px 6px; } .tl15-sw b { font-size: 7.5px; letter-spacing: .04em; } .tl15-sw em { font-size: 9.5px; } }