/* ==========================================================================
   CompIQ — site stylesheet
   Rebuilt from the Figma Sites export as clean, hand-authored HTML/CSS.
   Everything below is plain CSS: no build step, no framework, no runtime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   The original site uses the commercial typeface "Usual" (Nootype).
   It is listed first in --font-sans, so if you license and self-host it
   (see the @font-face block below) the site picks it up automatically.
   Until then it falls back to Figtree, a close free stand-in.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-950: #00063D;
  --navy-900: #01124E;
  --navy-850: #00132C;
  --navy-800: #001F46;
  --navy-700: #003375;
  --navy-600: #1E4485;
  --amber:    #FEC232;
  --amber-200:#FFD98A;
  --teal:     #00A196;
  --teal-400: #01BCAF;
  --teal-300: #00C9BB;
  --cream:    #DFD2B9;

  /* Neutrals */
  --ink:      #000000;
  --grey-700: #646464;
  --grey-500: #969696;
  --grey-200: #E9E9E9;
  --grey-100: #F4F4F4;
  --white:    #FFFFFF;

  /* Type */
  --font-sans: "Usual", "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

@font-face { font-family:"Usual"; src:url("fonts/Usual-Light.woff") format("woff");   font-weight:300; font-style:normal; font-display:block; }
@font-face { font-family:"Usual"; src:url("fonts/Usual-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:block; }
@font-face { font-family:"Usual"; src:url("fonts/Usual-Medium.woff") format("woff");  font-weight:500; font-style:normal; font-display:block; }
@font-face { font-family:"Usual"; src:url("fonts/Usual-Bold.woff") format("woff");    font-weight:700; font-style:normal; font-display:block; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
/* The live site keeps a 1240px content box with 24px gutters outside it,
   so the box itself measures 1240px (not 1240 minus padding). */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: 120px; }
.section--tight { padding-block: 88px; }
.section--flush-bottom { padding-bottom: 0; }

.section--navy  { background: var(--navy-900); color: var(--white); }
.section--light { background: var(--white); }

.stack > * + * { margin-top: var(--stack, 24px); }

.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.mx-auto { margin-inline: auto; }

.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;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--navy-900);
}
.eyebrow--teal  { color: var(--teal); }
.eyebrow--amber { color: var(--amber); }

.h1 {
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: normal;
}

.h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: normal;
}
.h2--amber { color: var(--amber); }
.h2--teal  { color: var(--teal); }

.h3 {
  font-size: clamp(22px, 2vw, 24px);
  line-height: 1.2;
  font-weight: 500;
}

.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; }
.body { font-size: 16px; line-height: 1.45; }

.muted      { color: var(--grey-700); }
.muted-soft { color: var(--grey-500); }
.on-dark    { color: rgba(255,255,255,.9); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 52px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex: none; }

.btn--navy  { background: var(--navy-900); color: var(--white); }
.btn--navy:hover  { background: var(--navy-700); }

.btn--teal  { background: var(--teal); color: var(--white); }
.btn--teal:hover  { background: var(--teal-400); }

.btn--amber { background: var(--amber); color: var(--white); }
.btn--amber:hover { background: var(--amber-200); }

.btn--sm { text-transform: uppercase; }
.btn--lg { font-size: 16px; }

/* --------------------------------------------------------------------------
   6. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 23px;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: inline-flex; align-items: center; }
.logo svg { width: 138px; height: 24px; }

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-radius: 52px;
  background: rgba(255,255,255,.10);
}
.nav a {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  transition: color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--amber); }

/* Products -> Comparity sub-nav. Reveals on hover/focus of the "Products"
   item; a small glass panel with the logo, a divider, and a link out to the
   Comparity product (a separate app at comparity.compiq.ai). */
.nav__item {
  position: relative;
  /* Without this, the div inherits the body's 20px/26px type instead of the
     14px/1.3 the sibling nav links use, so the anonymous line box it forms
     around the "Products" link is taller than theirs — the link then sits a
     few px lower than "Partners" etc. even though both are centered in the
     same flex row. Matching the font metrics here removes that extra strut. */
  font-size: 14px;
  line-height: 1.3;
}
.nav__sub {
  position: absolute; top: 100%;
  /* Sits near the PILL's own left edge, not under "Products" specifically —
     matches the source: 3px in from the pill, and .nav__item (this trigger)
     starts 24px in from the pill (.nav's left padding), so shift left by
     24 - 3 = 21px to land in the right spot. */
  left: -21px;
  /* A visible gap matters more than exact spec-matching here: this panel and
     the pill above it share the same translucent/blurred glass look, so a
     small gap visually separates them rather than the panel reading as
     fused to the pill's underside. */
  margin-top: 20px;
  padding: 14px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  width: max-content;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* Invisible bridge so moving the pointer from the link down into the panel
   (across the now-larger gap) doesn't drop the hover state. */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
/* Match the amber hover state on "Products" itself while its sub-nav is open
   (keyboard focus doesn't trigger :hover, so state this explicitly). */
.nav__item:focus-within > a { color: var(--amber); }

.nav__sub-logo { display: block; width: 58px; height: 10px; }
.nav__sub-divider { display: block; width: 100%; height: 1px; background: rgba(255,255,255,.25); }
/* Extra `.nav` prefix: ".nav a" (1 class + 1 element) otherwise outranks a
   single-class selector here, so a plain ".nav__sub-link { font-size: 12px }"
   would silently lose to ".nav a"'s 14px, and its amber :hover would leak
   onto the "Compar" portion too. */
.nav .nav__sub-link { font-size: 12px; font-weight: 500; color: var(--white); transition: opacity .2s var(--ease); }
.nav .nav__sub-link:hover, .nav .nav__sub-link:focus-visible { opacity: .8; color: var(--white); }
.nav__sub-accent { color: var(--amber); }

.nav-toggle { display: none; }

/* The hamburger only replaces the pill nav once it can no longer fit — the
   nav pill + logo + button need ~722px to lay out on one line (measured from
   their natural desktop widths), so 760px keeps the full desktop-style header
   through tablet and switches only for phones. */
@media (max-width: 760px) {
  .site-header__inner { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.12); color: #fff;
  }
  .nav {
    position: absolute; top: calc(100% + 14px); right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px; border-radius: var(--radius-md);
    background: rgba(1,18,78,.96);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 12px 14px; }
  .site-header .btn { display: none; }

  /* No hover on touch — show the Comparity link as a static row under
     Products instead of a popup panel. */
  .nav__item { display: contents; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    margin: 0 0 4px 14px; padding: 10px 14px;
    width: auto; background: rgba(255,255,255,.06);
    transition: none;
  }
  .nav__sub::before { display: none; }
  .nav__sub-logo { display: none; }
  .nav__sub-divider { display: none; }
  .nav .nav__sub-link { padding: 0; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* The product shot is absolutely positioned 341px down and is as tall as
     its own aspect ratio (1667x911 => 0.5465) makes it. Grow the hero to fit
     it so the image is never sliced by the section edge: below ~1437px the
     800px design height is already taller than it needs to be, above that the
     image lands flush with the bottom of the hero — the same relationship the
     stacked layout has under 1100px. */
  min-height: max(800px, 345px + min(65vw, 934px) * 0.5465);
  padding-top: 169px;
  padding-bottom: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
/* The original lays the video down with no tint on top of it. */
.hero__inner { position: relative; z-index: 1; }

.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 6px 10px 6px 6px;
  border-radius: 26px;
  background: var(--navy-850);
  font-size: 14px; font-weight: 400; line-height: 1.3;
  color: var(--amber);
}
.badge svg { width: 19px; height: 19px; }

.hero .h1 { margin-top: 24px; }
.hero__sub { margin-top: 16px; max-width: 590px; }
.hero .btn { margin-top: 24px; }

.hero__product {
  position: absolute;
  right: 50px;
  top: 341px;
  width: min(65vw, 934px);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .hero { min-height: 0; padding-top: 150px; padding-bottom: 0; }
  .hero__product {
    position: static; width: 100%; margin-top: 56px;
    right: auto; top: auto;
  }
}

/* --------------------------------------------------------------------------
   8. Decision constructs (tabs over a photo)
   -------------------------------------------------------------------------- */
.constructs {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background: linear-gradient(180deg, #011938 0%, #012261 97.7%);
  color: var(--white);
}
/* Soft navy bloom that bleeds off the left edge. */
.constructs__glow {
  position: absolute; left: -74px; top: 1px;
  width: 662px; height: 749px;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* The photograph sits proud of the section on both ends and is clipped by it. */
.constructs__media {
  position: absolute; left: 643px; top: -15px;
  width: 796px; height: 901px;
  z-index: 0;
}
.constructs__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.constructs .container { position: relative; z-index: 1; }
.constructs__head .h2 { margin-top: 16px; }
.constructs__head .lede { margin-top: 16px; }

.tabs { margin-top: 137px; }
.tabs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; height: 38px; }
.tabs__btn {
  font-size: 24px;
  line-height: 1.2;
  color: var(--amber);
  opacity: .3;
  transition: opacity .3s var(--ease), font-size .3s var(--ease);
  padding: 0;
}
.tabs__btn:hover { opacity: .6; }
.tabs__btn[aria-selected="true"] { opacity: 1; font-size: 32px; }
/* The panel area is reserved at the height of the tallest tab so the
   section keeps one height as tabs change. */
.tabs__panel { margin-top: 24px; max-width: 638px; min-height: 86px; font-size: 24px; line-height: 1.2; }
.tabs__panel[hidden] { display: none; }

/* Past the 1440px reference width the glow and the photo used to keep their
   fixed left offsets, so they stayed stranded near the middle of the screen
   while the content box drifted right. Anchor both to the centred content box
   instead: the glow keeps its 174px overhang past the box's left edge, and the
   photo keeps bleeding off the right edge of the viewport (up to a cap, so it
   does not balloon on very wide displays). At exactly 1440px both resolve to
   the original values. */
@media (min-width: 1440px) {
  .constructs__glow { left: calc(50% - 794px); }
  .constructs__media {
    left: auto;
    right: 0;
    width: min(50% + 77px, 1100px);
  }
}

@media (max-width: 1100px) {
  .constructs__glow { display: none; }
  .constructs__media { left: auto; right: -120px; }
}
@media (max-width: 900px) {
  .constructs { padding-block: 72px; }
  .constructs__media { inset: 0; width: 100%; height: 100%; opacity: .3; }
  .tabs { margin-top: 56px; }
  /* The desktop list is pinned to a single 38px row (tabs sit side by side).
     On narrow screens the tabs wrap, so let the list grow — otherwise the
     wrapped tabs spill out of the fixed height and overlap the panel below. */
  .tabs__list { height: auto; gap: 12px 18px; }
  .tabs__btn[aria-selected="true"] { font-size: 26px; }
  .tabs__panel { font-size: 20px; min-height: 0; }
}

/* --------------------------------------------------------------------------
   9. Enterprise breakpoints (orbit diagram)
   -------------------------------------------------------------------------- */
.breakpoints {
  /* Deep navy at the top dissolving into the white section below. */
  background:
    linear-gradient(180deg,
      #002362 0.76%, #0C316E 9.16%, #183F79 17.57%, #305A91 34.39%,
      #577AA7 44.47%, #7D99BD 54.55%, #A4B8D2 64.62%, #CAD7E8 74.70%,
      rgba(255,255,255,0) 94.23%),
    var(--white);
  color: var(--white);
  padding-block: 100px 189px;
}
.breakpoints__title { margin-top: 25px; max-width: 870px; margin-inline: auto; }
.breakpoints__sub { margin-top: 16px; }

/* Ring diagram with six labelled satellites, positioned as in the original. */
.orbit {
  position: relative;
  margin-top: 83px;
  height: 406px;
}
.orbit__art { position: absolute; left: 135px; top: 17px; width: 984px; height: 421px; }

.orbit__node {
  position: absolute;
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--white);
}
.orbit__node img { margin-inline: auto; }

.orbit__node--mvi        { left: 305px;   top: 0;     width: 214px; }
.orbit__node--mvi img        { margin-top: 9px; }
.orbit__node--bench      { left: 729px;   top: 1px;   width: 214px; }
.orbit__node--bench img      { margin-top: 7px; }
.orbit__node--jvs        { left: 87px;    top: 120px; width: 214px; }
.orbit__node--jvs img        { margin-top: 12px; }
.orbit__node--attrition  { left: 965px;   top: 134px; width: 188px; }
.orbit__node--attrition img  { margin-top: 6px; }
.orbit__node--historical { left: 275.5px; top: 300px; width: 241px; }
.orbit__node--historical img { margin-top: 14px; }
.orbit__node--indices    { left: 742px;   top: 300px; width: 206px; }
.orbit__node--indices img    { margin-top: 13px; }

/* Below the 1240px content box the ring diagram scales down as one piece.
   It keeps this scaled ring form through tablet and only breaks into a stacked
   list on phones (≤600px), matching the tablet/mobile designs. */
@media (max-width: 1287px) and (min-width: 601px) {
  .orbit {
    width: 1240px;
    /* Dividing by 1240px (not the bare number 1240) keeps this a unitless
       ratio, which scale() requires — calc((100vw - 48px) / 1240) is a
       length and silently invalidates the whole transform. */
    transform: scale(calc((100vw - 48px) / 1240px));
    transform-origin: top left;
    margin-bottom: calc(-406px * (1 - (100vw - 48px) / 1240px));
  }
}
@media (max-width: 600px) {
  .breakpoints { padding-block: 72px; }
  /* Phone: the six labelled nodes become a 2-column grid with divider lines,
     and the ring artwork drops below them (matches the mobile design). */
  .orbit { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; }
  .orbit__node {
    position: static; width: auto !important; left: auto; top: auto;
    color: var(--navy-900);
    display: flex; flex-direction: column; align-items: center;
    padding: 26px 10px;
  }
  /* Icon sits above its label. */
  .orbit__node img { order: -1; margin: 0 0 12px !important; }
  /* Re-flow into reading order: left column top→bottom, then right column. */
  .orbit__node--mvi        { order: 1; }
  .orbit__node--jvs        { order: 2; }
  .orbit__node--historical { order: 3; }
  .orbit__node--indices    { order: 4; }
  .orbit__node--attrition  { order: 5; }
  .orbit__node--bench      { order: 6; }
  /* Grid divider lines: a right border on the left column, bottom borders on
     the first two rows. */
  .orbit__node--mvi, .orbit__node--historical, .orbit__node--attrition { border-right: 1px solid rgba(0,19,44,.14); }
  .orbit__node--mvi, .orbit__node--jvs, .orbit__node--historical, .orbit__node--indices { border-bottom: 1px solid rgba(0,19,44,.14); }
  .orbit__art {
    order: 7; grid-column: 1 / -1;
    position: static; width: min(70%, 300px); height: auto; margin: 36px auto 0;
  }
}

/* --------------------------------------------------------------------------
   10. Data driven — executive workspaces & optimization engine
   -------------------------------------------------------------------------- */
.datadriven { background: var(--white); padding-block: 100px 164px; }

.section__head { max-width: none; }
.section__head .h2 { margin-top: 24px; }
.section__head .lede { margin-top: 16px; }

/* Two columns: 620px of role workspaces, 519px of optimization engine. */
.split {
  margin-top: 128px;
  display: grid;
  grid-template-columns: 620px 519px;
  column-gap: 32px;
  justify-content: start;
}

.feature { display: flex; align-items: flex-start; }
.feature + .feature { margin-top: 44px; padding-top: 64px; border-top: 1px solid #EDEAE4; }
.feature__text  { flex: none; width: 381px; }
.feature__title { color: var(--navy-700); font-size: 24px; line-height: 1.2; font-weight: 500; }
.feature__body  { margin-top: 24px; color: var(--grey-700); font-size: 20px; line-height: 1.3; }

.feature__art--chro { flex: none; margin-left: 30px; width: 179px; height: 226px; }

/* CFO workspace: pay-vehicle chips stack to the left of the copy. */
.chips { position: relative; flex: none; width: 207px; height: 175px; }
.chips__card { position: absolute; left: 57px; top: 12px; width: 117px; height: 114px; }
.chip {
  position: absolute; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 41px;
  padding: 0 8px;
  border: .5px solid #EDEAE4;
  border-radius: 8.84px;
  background: var(--white);
  font-size: 14.733px; line-height: 1.4; font-weight: 500;
  color: var(--cream);
}
.chip img { width: 24px; height: 24px; }
.chip:nth-of-type(1) { top: 0; }
.chip:nth-of-type(2) { top: 50px; }
.chip:nth-of-type(3) { top: 100px; }

/* CEO & board view illustration cluster. */
.ceo-art { position: relative; flex: none; margin-left: 36px; width: 203px; height: 125px; }
.ceo-art img { position: absolute; }
.ceo-art__a    { left: 13px;  top: 0;    width: 60px;  height: 40px; }
.ceo-art__c    { left: 95px;  top: 0;    width: 60px;  height: 40px; }
.ceo-art__main { left: 32px;  top: 25px; width: 104px; height: 100px; }
.ceo-art__b    { left: 0;     top: 51px; width: 60px;  height: 40px; }
.ceo-art__d    { left: 129px; top: 65px; width: 16px;  height: 13px; }

/* 5x5 tile grid with the highlighted diagonal. */
.optgrid {
  position: relative;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(5, 86px);
  grid-auto-rows: 86px;
  column-gap: 22.25px;
  row-gap: 24px;
}
.optgrid span, .optgrid__tile { border-radius: 12px; }
.optgrid span { background: var(--grey-100); }
/* Icon tiles: grey by default, amber when active. The active box tracks the
   rotating caption below (and jumps on click), so the amber highlight loops
   around the three tiles. */
.optgrid__tile {
  position: relative;
  width: 86px; height: 86px; padding: 0; border: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: #D8D8D8; color: #fff;
  transition: transform .2s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.optgrid__tile > svg { width: 100%; height: 100%; display: block; }
.optgrid__tile:hover { transform: scale(1.06); }
.optgrid__tile.is-active {
  background: var(--amber);
  box-shadow: 0 8px 24px rgba(254,194,50,.45);
}
.optgrid__tile:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.optgrid__glow  { position: absolute; left: 240px; top: 250px; width: 237px; height: 236px; pointer-events: none; }
/* Sparks live inside each tile and only appear on the active (amber) one, so
   they travel with the highlight as it loops around the grid. */
.optgrid__spark {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
}
.optgrid__spark--tl { left: -24px; top: -24px; }
.optgrid__spark--br { left: 84px;  top: 86px; }
.optgrid__tile.is-active .optgrid__spark { opacity: 1; }

/* Rotating caption under the grid. */
.optslides { position: relative; margin-top: 32px; min-height: 93px; }
.optslide[hidden] { display: none; }
.optslide .feature__title { font-size: 24px; }
.optslide .feature__body  { margin-top: 12px; width: auto; }

.optbars { margin-top: 74px; display: flex; gap: 24px; }
.optbars span {
  flex: 1;
  height: 8px;
  border-radius: 24px;
  background: var(--grey-100);
  overflow: hidden;
}
.optbars i { display: block; height: 100%; width: 0; background: var(--amber); }
.optbars .is-on i { width: 100%; transition: width 6s linear; }

@media (max-width: 1287px) {
  .split { grid-template-columns: 1fr; gap: 64px; }
  /* Once the two 620px/519px columns collapse into one, both the role-
     workspace copy and the optimization column are still holding their
     desktop pixel widths (381px text, a 519px-capped column) even though
     the single column is now much wider — so text wraps early and the grid
     sits in a narrow strip with a lot of unused space beside it. Let both
     sides flex to the actual column width instead. */
  .split__col--opt { max-width: none; }
  .feature__text { width: auto; flex: 1 1 auto; min-width: 0; }

  /* Tablet: the 5×5 desktop grid is a tall block of mostly-empty tiles, so
     reflow it to a compact 5 columns × 3 rows. The 3 real tiles ride a
     descending diagonal (r1c2 → r2c3 → r3c4); 12 filler spans fill the rest
     and the other 10 are hidden. The glow/sparks are pixel-calibrated to the
     desktop 86px tile, so they're dropped here. */
  .optgrid { grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; column-gap: 24px; row-gap: 24px; }
  .optgrid span, .optgrid__tile { aspect-ratio: 1; width: auto; height: auto; }
  .optgrid__glow, .optgrid__spark { display: none; }
  .optgrid span:nth-of-type(n+13) { display: none; }
  .optgrid__tile:nth-of-type(1) { grid-area: 1 / 2; }
  .optgrid__tile:nth-of-type(2) { grid-area: 2 / 3; }
  .optgrid__tile:nth-of-type(3) { grid-area: 3 / 4; }
  .optgrid span:nth-of-type(1)  { grid-area: 1 / 1; }
  .optgrid span:nth-of-type(2)  { grid-area: 1 / 3; }
  .optgrid span:nth-of-type(3)  { grid-area: 1 / 4; }
  .optgrid span:nth-of-type(4)  { grid-area: 1 / 5; }
  .optgrid span:nth-of-type(5)  { grid-area: 2 / 1; }
  .optgrid span:nth-of-type(6)  { grid-area: 2 / 2; }
  .optgrid span:nth-of-type(7)  { grid-area: 2 / 4; }
  .optgrid span:nth-of-type(8)  { grid-area: 2 / 5; }
  .optgrid span:nth-of-type(9)  { grid-area: 3 / 1; }
  .optgrid span:nth-of-type(10) { grid-area: 3 / 2; }
  .optgrid span:nth-of-type(11) { grid-area: 3 / 3; }
  .optgrid span:nth-of-type(12) { grid-area: 3 / 5; }

  /* Keep the section heading "Executive Workspaces & Optimization Engine" on
     one line on tablet — drop the hard <br> that splits it in two. */
  .datadriven .section__head .h2 br { display: none; }
}
@media (max-width: 760px) {
  .datadriven { padding-block: 72px; }
  /* minmax(0,1fr) lets the single column shrink below its content's
     intrinsic width, so nothing inside forces the grid past the viewport. */
  .split { margin-top: 56px; grid-template-columns: minmax(0, 1fr); }
  /* Stack each role workspace centred, illustration on top then title + copy
     (matches the mobile design). The desktop layout is a fixed-width flex row
     (381px text + art) that overflows a phone, so switch to a centred column. */
  .feature { flex-direction: column; align-items: center; text-align: center; }
  .feature__text { width: auto; }
  .feature__body { width: auto; }
  /* Illustrations sit above the copy, centred. order:-1 lifts the ones that
     follow the text in source (CHRO clipboard, CEO cluster); the CFO chips are
     already the first child. .ceo-art keeps position:relative (not static
     like the others) — its five pieces are position:absolute against it, so
     making it static too would remove their containing block and send them
     shooting up to the page's initial containing block near the very top. */
  .feature__art, .chips { position: static; margin: 0 auto 24px; }
  .ceo-art { margin: 0 auto 24px; }
  .feature__art--chro, .ceo-art { order: -1; }
  .feature--cfo .feature__title, .feature--cfo .feature__body { margin-left: 0; }
  .chips { height: auto; display: grid; gap: 9px; justify-items: center; width: fit-content; }
  .chips__card { display: none; }
  .chip { position: static; }
  /* Let the optimization column fill the phone instead of holding its
     519px desktop max-width (which would overflow). */
  .split__col--opt { max-width: none; }
  /* The 5×5 desktop grid (mostly empty filler tiles) reads as tiny, cramped
     squares on a phone. Reflow to 3 columns × 5 rows instead: explicitly
     place the 3 real tiles on the same shifting diagonal (row2→row3→row4,
     one column further right each time) and use 12 of the 22 filler spans
     to fill in the rest, hiding the other 10 — rather than just adding more
     columns and letting the existing 25 cells reflow into 9 cramped rows. */
  .optgrid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 16px; row-gap: 16px;
  }
  .optgrid span, .optgrid__tile { aspect-ratio: 1; width: auto; height: auto; }
  .optgrid span:nth-of-type(n+13) { display: none; }
  .optgrid span:nth-of-type(1)  { grid-area: 1 / 1; }
  .optgrid span:nth-of-type(2)  { grid-area: 1 / 2; }
  .optgrid span:nth-of-type(3)  { grid-area: 1 / 3; }
  .optgrid span:nth-of-type(4)  { grid-area: 2 / 2; }
  .optgrid span:nth-of-type(5)  { grid-area: 2 / 3; }
  .optgrid span:nth-of-type(6)  { grid-area: 3 / 1; }
  .optgrid span:nth-of-type(7)  { grid-area: 3 / 3; }
  .optgrid span:nth-of-type(8)  { grid-area: 4 / 1; }
  .optgrid span:nth-of-type(9)  { grid-area: 4 / 2; }
  .optgrid span:nth-of-type(10) { grid-area: 5 / 1; }
  .optgrid span:nth-of-type(11) { grid-area: 5 / 2; }
  .optgrid span:nth-of-type(12) { grid-area: 5 / 3; }
  .optgrid__tile:nth-of-type(1) { grid-area: 2 / 1; }
  .optgrid__tile:nth-of-type(2) { grid-area: 3 / 2; }
  .optgrid__tile:nth-of-type(3) { grid-area: 4 / 3; }
  .optgrid__glow { display: none; }
  /* Re-enable the sparks (hidden above 760px, where the fixed-pixel offsets
     below were tuned for the 86px desktop tile) using percentages instead —
     for an absolutely-positioned child, percentage offsets are relative to
     its own containing block (the tile), so these track this larger, fluid
     mobile tile size automatically. */
  .optgrid__spark { display: block; }
  .optgrid__spark--tl { left: -28%; top: -28%; }
  .optgrid__spark--br { left: 98%; top: 100%; }
}

/* --------------------------------------------------------------------------
   11. Realtime advisory
   -------------------------------------------------------------------------- */
.advisory {
  position: relative;
  background: var(--white);
  padding-top: 100px;
  padding-bottom: 150px;
  /* The last bullet row deliberately overhangs into the next white section. */
  margin-bottom: -38px;
  /* Clip the 1920px decorative network image to the section so it can't push
     the page wider than the viewport (which slid the layout on tablet). */
  overflow: hidden;
}
.advisory__bg {
  position: absolute; left: -240px; top: -374px;
  width: 1920px; height: 921px;
  max-width: none;
  opacity: .08;
  pointer-events: none;
}
.advisory .container { position: relative; z-index: 1; }
.advisory .split { margin-top: 89px; }

/* The 1920px pattern is calibrated to the -240px left offset, so it stops
   covering the viewport once the viewport itself passes 1680px
   (1920 - 240) — past that, widen it to keep pace with the viewport instead
   of leaving bare white on the right. calc(100vw + 240px) reduces to exactly
   1920px at the 1680px boundary, so there's no jump where this picks up. */
@media (min-width: 1681px) {
  .advisory__bg {
    width: calc(100vw + 240px);
    height: auto;
    aspect-ratio: 1920 / 921;
  }
}

.split--even { grid-template-columns: 620px 620px; column-gap: 0; }
.split--even > * { padding-left: 24px; }

.agent-title { font-size: 24px; line-height: 1.2; font-weight: 500; }
.agent-title--amber { color: var(--amber); }
.agent-title--teal  { color: var(--teal); }
.agent-body { margin-top: 23px; max-width: 522px; font-size: 20px; line-height: 1.3; color: var(--grey-700); }

.bullets { margin-top: 44px; display: grid; gap: 24px; }
.bullets li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--grey-700); }
.bullets img { flex: none; width: 54px; height: 54px; }

@media (max-width: 1287px) {
  .split--even { grid-template-columns: 1fr; gap: 56px; }
  .advisory .split { margin-top: 72px; }
  /* The desktop left:-240px offset is calibrated to the two 620px columns;
     once they collapse to one column, re-centre the pattern under the
     (now centred) heading instead so it stays a balanced backdrop rather
     than showing a lopsided slice. */
  .advisory__bg { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .advisory { padding-top: 72px; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   12. Upgrading pay practices (quadrants + stats)
   -------------------------------------------------------------------------- */
.upgrading { position: relative; background: var(--white); padding-block: 100px 124px; }
.upgrading .section__head { position: relative; z-index: 1; }
.upgrading .section__head .h2 { margin-top: 25px; }

.quadrants {
  position: relative;
  margin-top: 56px;
  display: grid;
  grid-template-columns: 620px 620px;
  grid-auto-rows: 181px;
}
/* Radial grid artwork sits behind the quadrants and runs past them. */
.quadrants__art {
  position: absolute; left: -3px; top: -76px;
  width: 1240px; height: 512px;
  pointer-events: none;
}
.quadrants__emblem {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 250px; height: 250px;
  pointer-events: none;
}
.quadrant {
  position: relative;
  padding-top: 48px;
  text-align: center;
}
.quadrant--br { border-left: 1px solid #D8D8D8; border-top: 1px solid #D8D8D8; }
.quadrant h3 { font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--navy-700); }
.quadrant p  { margin: 4px auto 0; font-size: 20px; line-height: 1.3; color: var(--grey-700); }
.quadrant--tl p { max-width: 372px; }
.quadrant--tr p { max-width: 379px; }
.quadrant--bl p { max-width: 522px; }
.quadrant--br p { max-width: 445px; }

.stats {
  margin: 87px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats div { text-align: center; }
.stats dt { font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--navy-700); }
.stats dd { margin: 12px 0 0; font-size: 20px; line-height: 1.3; color: var(--grey-500); }

@media (max-width: 1287px) {
  .quadrants { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  /* The 250px centre emblem is calibrated to sit in the gap between two
     620px columns. Once the columns shrink it collides with the quadrant
     copy, so hide it below the full-desktop layout. */
  .quadrants__emblem { display: none; }
  /* The radial grid artwork's own faint lines are calibrated to the desktop
     620px columns too, so once columns are fluid its lines stop lining up
     with the actual quadrant edges. Hide it and draw a plain, always-aligned
     cross with real borders instead: a right border on the left column, a
     bottom border on the top row. */
  .quadrants__art { display: none; }
  .quadrant--br { border: 0; }
  .quadrant--tl, .quadrant--bl { border-right: 1px solid #D8D8D8; }
  .quadrant--tl, .quadrant--tr { border-bottom: 1px solid #D8D8D8; }
  /* Generous, even padding on every side so the copy has real breathing
     room off the divider lines instead of sitting flush against them
     (the fixed 181px desktop row height and top-only padding are calibrated
     for the two-column layout's original spacing, not this stacked one). */
  .quadrant { padding: 40px 32px; }
}
/* Four stats sit in one row on desktop; on tablet and below they wrap to a
   2×2 block (matching the tablet/mobile designs). */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stats > div { padding: 32px 24px; }
  /* Full 2×2 cross: a vertical divider between the two columns and a
     horizontal one between the two rows. */
  .stats > div:nth-child(odd) { border-left: 0; }
  .stats > div:nth-child(even) { border-left: 1px solid var(--grey-200); }
  .stats > div:nth-child(n+3)  { border-top: 1px solid var(--grey-200); }
}
@media (max-width: 760px) {
  .upgrading { padding-block: 72px; }
  .quadrants { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; }
  .quadrants__art { display: none; }
  /* Clear the tablet cross-divider borders (right/bottom) before applying
     the single stacked-column separator below. */
  .quadrant { padding: 32px 0; border: 0; }
  /* The desktop max-widths (up to 522px) overflow a single phone column
     when centred, so let the copy use the full width. */
  .quadrant p { max-width: 100%; }
  /* Re-flow to column-major reading order (left column, then right). */
  .quadrant--tl { order: 1; }
  .quadrant--bl { order: 2; }
  .quadrant--tr { order: 3; }
  .quadrant--br { order: 4; }
  /* A separator line between each stacked point (not after the last). */
  .quadrant:not(:last-child) { border-bottom: 1px solid #D8D8D8; }

  .stats { margin-top: 48px; }
}

/* --------------------------------------------------------------------------
   13. Partners
   -------------------------------------------------------------------------- */
.partners {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: var(--white);
  padding-block: 156px;
}
.partners__bg { position: absolute; inset: 0; }
.partners__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.partners .container { position: relative; z-index: 1; }

.partners__head { max-width: 1128px; margin-inline: auto; }
.partners__head .h2   { margin-top: 25px; }
.partners__head .lede { margin-top: 11px; }

.partner-cols {
  margin: 80px auto 0;
  max-width: 1128px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
.partner-cols h3 { font-size: 24px; line-height: 1.2; font-weight: 500; }
.partner-cols p  { margin: 24px auto 0; font-size: 20px; line-height: 1.3; }
.partner-cols > :first-child p { max-width: 479px; }
.partner-cols > :last-child  p { max-width: 516px; }

.partners__cta { margin-top: 56px; }

/* The two partner columns stay side by side through tablet; they stack only on
   phones. Section padding eases down a step earlier. */
@media (max-width: 1024px) {
  .partners { padding-block: 100px; }
}
@media (max-width: 600px) {
  .partners { padding-block: 80px; }
  .partner-cols { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
}

/* --------------------------------------------------------------------------
   14. Team
   -------------------------------------------------------------------------- */
.team { background: var(--white); padding-block: 80px 96px; }
.team__sub { margin-top: 11px; }

/* Three cards share the content row and shrink together. Each card is a fluid
   1/3-width square; its inner .team-card__scale holds the original 397px
   design and is scaled down to fill the card (see the transform below), so the
   whole card — portrait crop, name bar, icon — shrinks proportionally and stays
   pixel-accurate at every width. */
.team-grid {
  margin-top: 37px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24.5px;
}
.team-card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--grey-100);
}
/* 100cqw / 397px is a unitless ratio (length / length) = card width ÷ 397, so
   the 397px design scales to exactly fill however wide the card renders. */
.team-card__scale {
  position: absolute;
  top: 0; left: 0;
  width: 397px; height: 397px;
  transform-origin: top left;
  transform: scale(calc(100cqw / 397px));
}
/* Cut-out portraits are placed, not cropped. max-width:none overrides the
   global img reset, which would otherwise clamp these to the 397px card. */
.team-card img { position: absolute; max-width: none; }
.team-card--swaminathan img { left: -169px; top: -136px; width: 724px; height: 1085px; }
.team-card--geetika img     { left: 1px;    top: -108px; width: 397px; height: 529px; }
.team-card--himanshu img    { left: -20px;  top: -10px;  width: 455px; height: 428px; }

.team-card__meta {
  position: absolute; left: 16px; top: 315px;
  display: flex; align-items: center; justify-content: space-between;
  width: 365px; height: 67px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--white);
}
.team-card__name { display: block; font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--navy-900); }
.team-card__role { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; color: var(--grey-700); }
.team-card__li img { position: static; width: 44px; height: 44px; }

/* --------------------------------------------------------------------------
   15. Quote band
   -------------------------------------------------------------------------- */
.quote { position: relative; overflow: hidden; height: 786px; background: var(--navy-950); }
.quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote .container { position: relative; z-index: 1; }
.quote__frame {
  position: relative;
  margin-top: 140px;
  height: 506px;
  display: grid;
  align-items: center;
  padding-inline: 40px;
  border-radius: 72px;
  background: rgba(0,6,54,.86);
  outline: 1px solid var(--teal);
  text-align: center;
}
/* Inner amber hairline, inset 8px from the teal ring. */
.quote__frame::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid var(--amber);
  border-radius: 72px;
  pointer-events: none;
}
.quote__frame p {
  font-size: 72px;
  line-height: 1;
  font-weight: 500;
  color: var(--teal-400);
}
.quote__frame strong { color: var(--amber); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. Insight cards
   -------------------------------------------------------------------------- */
.insights { background: var(--white); padding-block: 100px 81px; }
.insights__title { margin-top: 25px; }
.insights__sub   { margin-top: 11px; }

.card-grid {
  margin-top: 41px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24.5px;
}
/* Same fluid-scale approach as the team cards: the card is a fluid
   397×400-ratio box, and .card__scale holds the original 397px design scaled
   to fill it, so the article cards shrink to a row of three on tablet. */
.card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 397 / 400;
  border-radius: 24px;
  box-shadow: 0 10px 56px rgba(156,199,255,.36);
  overflow: hidden;
}
.card__scale {
  position: absolute;
  top: 0; left: 0;
  width: 397px; height: 400px;
  transform-origin: top left;
  transform: scale(calc(100cqw / 397px));
}
.card__media {
  position: absolute; inset: 0;
  border-radius: 24px;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  position: absolute; left: 0; right: 0; top: 263px; bottom: 0; width: auto;
  padding: 32px;
  background: var(--white);
  border-radius: 0 0 24px 24px;
  transition: top .3s var(--ease);
}
/* The original pins the title box to two lines and clips any overflow. */
.card__title { height: 58px; overflow: hidden; font-size: 24px; line-height: 1.2; font-weight: 400; color: var(--ink); }
/* The whole card is the click target; the label stays for accessibility but
   is not shown — the live site shows image + title only (no visible button). */
.card__cta {
  position: absolute; inset: 0;
  border-radius: 24px;
  background: none; box-shadow: none; border: 0; padding: 0;
  font-size: 0; line-height: 0; color: transparent;
}
.card__cta svg { display: none; }

.insights__actions { margin-top: 36px; display: flex; justify-content: center; }

/* The full /insights/ listing page's cards (marked `.card-grid--listing`)
   have no `.card__scale` wrapper — unlike the homepage teaser, they're not
   built to shrink as a fixed-397px unit. Below desktop they instead go to
   one full-width card per row with a plain block layout (media on top, body
   below) rather than the fixed-pixel absolute overlay the homepage uses. */
@media (max-width: 1287px) {
  .card-grid--listing { grid-template-columns: 1fr; gap: 32px; }
  .card-grid--listing .card { aspect-ratio: auto; height: auto; }
  .card-grid--listing .card__media {
    position: static;
    aspect-ratio: 1000 / 450;
    border-radius: 24px 24px 0 0;
  }
  .card-grid--listing .card__body { position: static; width: auto; padding: 24px 32px 32px; }
  /* A full row's width to work with — let the title wrap fully instead of
     clipping at two lines like the homepage's shrunk teaser cards. */
  .card-grid--listing .card__title { height: auto; overflow: visible; }
}
@media (max-width: 760px) {
  .card-grid--listing .card__body { padding: 20px 24px 24px; }
  /* On a phone, truncate long titles to two lines with an ellipsis instead
     of letting them run long; short titles are unaffected. */
  .card-grid--listing .card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Blog "Similar Insights" cards keep the fixed-397px absolute-card look on
   desktop (≥1366px). Below that the fixed 397px body no longer fits the
   shrinking grid cell (the grid is repeat(3,1fr) and squeezes the two cards
   to ~300px), so the title clips off. Switch to a plain block layout below
   desktop — two across on tablet (800–1365), stacked on phones (≤799) — so
   each card's title shows in full. Breakpoints per the spec: desktop 1366+,
   tablet 800–1365, mobile 1–799. */
@media (max-width: 1365px) {
  .card-grid--similar { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .card-grid--similar .card { aspect-ratio: auto; height: auto; }
  .card-grid--similar .card__media {
    position: static; aspect-ratio: 1000 / 450; border-radius: 24px 24px 0 0;
  }
  .card-grid--similar .card__body { position: static; width: auto; padding: 24px 24px 28px; }
  .card-grid--similar .card__title { height: auto; overflow: visible; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--navy-900); }
  /* The "Read Article" pill only appears on hover (desktop); in this static
     block layout it would otherwise reserve ~60px of empty space under the
     title on touch devices, so drop it out of flow here. */
  .card-grid--similar .card__cta-pill { display: none; }
}
@media (max-width: 600px) {
  .card-grid--similar { grid-template-columns: 1fr; max-width: 397px; margin-inline: auto; }
  .card-grid--similar .card__body { padding: 20px 24px 24px; }
}

/* --------------------------------------------------------------------------
   17. Contact CTA
   -------------------------------------------------------------------------- */
/* The grey section ends at the navy footer's top edge; the photo panel then
   overhangs DOWN onto the navy footer (so the navy shows around its lower
   edge instead of being covered by the grey). */
/* The section overhangs the footer; the grey background stays BEHIND the navy
   footer (z-order below), while the photo panel stays in FRONT of it — so the
   navy shows around the panel's overhang instead of grey covering it. */
.cta { position: relative; background: var(--grey-200); padding-top: 100px; padding-bottom: 0; margin-bottom: -72px; }
.cta__panel {
  position: relative;
  z-index: 3;
  height: 550px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--white);
}
.cta__panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Frosted card floating over the right of the photograph. */
.cta__content {
  position: absolute; left: 638px; top: 48px;
  width: 554px; height: 454px;
  padding: 24px;
  border-radius: 32px;
  background: rgba(0,0,0,.4);
  text-align: center;
}
.cta__content h2 { margin-top: 76px; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--amber); }
.cta__content p  { margin-top: 24px; font-size: 20px; line-height: 1.3; }
.cta__content .btn { margin-top: 12px; }
.cta__mail { margin-top: 37px !important; }
.cta__address {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--amber);
}
.cta__address:hover { text-decoration: underline; }
/* Back-to-top button — a sibling of the panel (not inside it, so the panel's
   overflow:hidden can't clip it). It straddles the panel/footer edge, fully
   round, above both. */
.cta .container { position: relative; }
.to-top {
  position: absolute; right: 24px; bottom: -26px; z-index: 4;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--navy-900);
}
.to-top:hover { background: var(--amber-200); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; z-index: 2; background: var(--navy-700); color: var(--white); padding-block: 120px 56px; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-footer__logo { width: 225px; height: 76px; }
/* Copyright + legal links form a right-hand group next to the logo. */
.site-footer__right { display: flex; align-items: center; gap: 30px; }
.site-footer__copy  { font-size: 16px; line-height: 1.3; font-weight: 300; color: var(--white); }
.site-footer__links { display: flex; gap: 24px; font-size: 16px; line-height: 1.3; font-weight: 300; }
.site-footer__links a:hover { text-decoration: underline; }

/* Tablet: logo stays left, the copyright + links stack on the right. */
@media (max-width: 900px) and (min-width: 601px) {
  .site-footer__right { flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
}
/* Phone: everything centred and stacked — links above the copyright line. */
@media (max-width: 600px) {
  .site-footer { padding-block: 72px 40px; }
  .site-footer__inner { flex-direction: column; text-align: center; gap: 28px; }
  .site-footer__right { flex-direction: column; align-items: center; gap: 16px; }
  .site-footer__links { order: 1; }
  .site-footer__copy  { order: 2; }
}

@media (max-width: 1287px) {
  /* Cards keep their fixed 397px design and wrap instead of shrinking:
     shrinking would clip the absolutely-positioned photo crops and card
     footers, which are calibrated in pixels for a 397px-wide card. */
  .cta__content { left: auto; right: 48px; }
}
@media (max-width: 900px) {
  .team { padding-block: 64px; }
  .quote { height: auto; padding-block: 64px; }
  .quote__frame { height: auto; margin-top: 0; padding: 48px 24px; border-radius: 32px; }
  .quote__frame::before { border-radius: 32px; }
  .quote__frame p { font-size: clamp(26px, 6vw, 48px); }
  .insights { padding-block: 64px; }
}
/* Tablet: the card stays a small floating overlay (like desktop), just
   shorter and narrower, and vertically centred with a transform instead of
   a hand-tuned `top` — so it's never at risk of being taller than the
   panel and getting clipped by its overflow:hidden. */
@media (max-width: 900px) and (min-width: 761px) {
  .cta__panel { height: 380px; }
  .cta__content {
    left: auto; right: 32px; top: 50%; transform: translateY(-50%);
    width: 300px; height: auto; padding: 24px;
  }
  .cta__content h2 { margin-top: 0; font-size: 24px; }
  .cta__content p  { margin-top: 10px; font-size: 14px; }
  .cta__content .btn { margin-top: 14px; }
  .cta__mail { margin-top: 18px !important; }
  .cta__address { margin-top: 6px; font-size: 14px; }
}
/* Mobile: the card moves to the left (matching the mobile design), the
   panel shortens further, and the photo's crop shifts up so the woman's
   face stays centred instead of being cropped by the shorter box. */
@media (max-width: 760px) {
  .cta__panel { height: 320px; }
  /* At this box's aspect ratio the crop is entirely horizontal (the full
     photo height already fits). Shifting the crop rightward (increasing the
     x%) pushes her face toward the left edge of the frame instead of the
     centre, freeing up the right side for the card to sit clear of her. */
  .cta__panel > img { object-position: 30% center; }
  .cta__content {
    left: auto; right: 12px; top: 50%; transform: translateY(-50%);
    width: 200px; height: auto; padding: 16px;
  }
  .cta__content h2 { margin-top: 0; font-size: 19px; }
  .cta__content p  { margin-top: 8px; font-size: 12px; }
  .cta__content .btn { margin-top: 12px; }
  .cta__mail { margin-top: 14px !important; }
  .cta__address { margin-top: 4px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   19. Interior page hero (Insights)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  padding-block: 160px 60px;
  background: var(--navy-800);
  color: var(--white);
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* Light gradient (was an opaque .88/.82 wash that flattened the photo into
     a solid navy block): now just enough to keep the white heading readable
     while the blog-hero silhouette image shows through. */
  background: linear-gradient(180deg, rgba(0,19,44,.20), rgba(0,19,44,.55));
}
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 17px; color: rgba(255,255,255,.85); }
.breadcrumb a { color: var(--amber); }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero .h1 { margin-top: 16px; }


/* --------------------------------------------------------------------------
   20. Scroll reveal (progressive enhancement)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* "Pop" variant: scales up from the centre as it enters — used for the
   Enterprise Breakpoints diagram, matching the live site's entrance. */
.reveal--pop { transform: translateY(50px) scale(.5); transform-origin: center center; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal--pop.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   21. Contact page (booking form)
   The /contact route is a standalone page, not a JS-toggled overlay, but it
   keeps the "modal popped up on a dark backdrop" look the card was designed
   for — full-height navy section, white card centered inside it.
   -------------------------------------------------------------------------- */
.contact-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* The site header is position:absolute (it's designed to float over the
     hero video on the homepage), so this page needs its own top clearance. */
  padding-block: 160px 96px;
  background: var(--navy-950);
  color: var(--white);
}

/* Decorative blurred image, fixed to the viewport, behind everything. */
.contact-page__bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.contact-page__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(26px);
  transform: scale(1.1);
}
.contact-page__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 28%, rgba(0,19,61,.45) 0%, rgba(0,6,61,.72) 78%);
}

/* Scrim ABOVE the header: blurs and dims the logo + navigation into the
   backdrop, so the whole screen reads as "behind the modal". */
.contact-page__scrim {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: rgba(0,6,61,.30);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

/* The card sits above the scrim, so it stays crisp. */
.contact-page .container { position: relative; z-index: 60; min-width: 0; }

.contact-card {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0,6,61,.35);
  overflow: hidden;
}

.contact-card__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.6rem; line-height: 1;
  color: var(--grey-700);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.contact-card__close:hover { background: var(--grey-100); color: var(--navy-900); }

.contact-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
  padding: 56px 48px;
}

.contact-card__intro { display: flex; flex-direction: column; }
.contact-card__intro .eyebrow { margin-bottom: 8px; }
.contact-card__intro h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 300;
  color: var(--teal);
  margin: 4px 0 16px;
}
.contact-card__intro p { color: var(--grey-700); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.contact-card__meta { margin-top: auto; font-size: 14px; color: var(--grey-700); line-height: 1.5; }
.contact-card__meta b { display: block; color: var(--navy-900); font-size: 15px; margin-bottom: 2px; }

.contact-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 700; color: var(--navy-900); }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { height: auto; min-height: 100px; padding: 10px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(254,194,50,.2);
}

.contact-form__submit { width: 100%; height: 44px; justify-content: center; margin-top: 4px; }

/* Red asterisk on required-field labels. */
.field .req { color: #F87171; margin-left: 2px; }

/* Per-field validation error badge: compact inline micro-pill sitting cleanly below input. */
.field { position: relative; }
.field__error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC6B6B;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 500;
  width: fit-content;
  max-width: 100%;
  animation: field-error-in .15s var(--ease);
}
.field__error-icon {
  flex-shrink: 0;
  opacity: .75;
}
@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
  border-color: #FCA5A5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, .18);
}

/* Submit-button loading spinner. */
.contact-form__submit { position: relative; }
.contact-form__submit.is-loading { color: transparent; pointer-events: none; }
.contact-form__submit.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: rgba(0, 0, 0, .8);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Success overlay: covers the form area with a check-circle animation. */
.contact-form { position: relative; }
.contact-form__success {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .96);
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  z-index: 4;
}
.contact-form__success[hidden] { display: none !important; }
.contact-form__success.is-open { opacity: 1; pointer-events: auto; }
.contact-form__success-inner { text-align: center; padding: 24px; }
.contact-form__success h2 {
  margin-top: 16px;
  font-size: 28px;
  font-weight: 500;
  color: var(--navy-900);
}
.contact-form__success p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey-700);
}

/* Tick: circle draws first, then the check strokes in. */
.tick { width: 72px; height: 72px; color: #16A46A; margin: 0 auto; display: block; }
.tick__circle,
.tick__check {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.contact-form__success.is-open .tick__circle {
  animation: tick-draw .55s var(--ease) forwards;
}
.contact-form__success.is-open .tick__check {
  animation: tick-draw .35s var(--ease) .5s forwards;
}
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tick__circle, .tick__check { stroke-dashoffset: 0; animation: none; }
  .contact-form__submit.is-loading::after { animation: none; }
  .field__error { animation: none; }
}

/* Honeypot input: invisible and unreachable to real users/keyboard nav,
   but present in the DOM so bots that auto-fill every field still catch it. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .contact-card__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px 24px 32px; }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
  .contact-card__intro h1 { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   22. Blog article pages (blog/<slug>.html)
   -------------------------------------------------------------------------- */
/* 800px centred content column for the blog hero + body. */
.container--narrow { max-width: calc(800px + var(--gutter) * 2); }

/* Navy hero: full-bleed background photo, breadcrumb + big white title + date. */
.blog-hero { position: relative; background: var(--navy-800); height: 537px; overflow: hidden; }
.blog-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blog-hero__inner { position: relative; z-index: 1; padding-top: 225px; }

.breadcrumb { font-size: 14px; line-height: 1.3; color: var(--amber); }
.breadcrumb a { color: var(--amber); }
.breadcrumb a:hover { text-decoration: underline; }

.blog-hero__title {
  margin-top: 16px;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.0; font-weight: 400; color: var(--white);
}
.blog-hero__date { margin-top: 20px; font-size: 14px; color: var(--white); }

/* White body. The hero image is wider than the text column and pulls up into
   the navy hero, overlapping the two sections. */
.article { background: var(--white); padding-bottom: 120px; }
.article__hero {
  display: block; width: 1000px; max-width: 100%; height: auto;
  margin: -72px auto 0; border-radius: 24px; position: relative; z-index: 2;
}

/* Tablet & below: the body sits in an 800px reading column while the hero
   image spans up to 1000px, so the copy looks indented relative to the image.
   Widen the blog content column to the image's width (1000px cap) so the
   title, image, and body all share the same left/right edges — with the
   normal 24px gutter as breathing room. Desktop keeps the narrow 800px
   reading column. */
@media (max-width: 1365px) {
  .container--narrow { max-width: calc(900px + var(--gutter) * 2); }
}

.article__body { margin-top: 48px; }
.article__body p { font-size: 20px; line-height: 1.5; color: var(--grey-700); }
.article__body p + p { margin-top: 24px; }
.article__body h2 {
  margin-top: 40px;
  font-size: 32px; line-height: 1.3; font-weight: 700; color: var(--navy-900);
}
.article__body h2 + p { margin-top: 16px; }
.article__body ul { margin-top: 16px; display: grid; gap: 10px; }
.article__body li {
  position: relative; padding-left: 24px;
  font-size: 20px; line-height: 1.5; color: var(--grey-700);
}
.article__body li::before {
  content: ""; position: absolute; left: 4px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grey-500);
}

@media (max-width: 1024px) {
  .blog-hero { height: auto; min-height: 420px; padding-bottom: 72px; }
  .blog-hero__inner { padding-top: 140px; }
  .blog-hero__title { font-size: clamp(28px, 4.2vw, 48px); }
  .article { padding-bottom: 80px; }
  .article__hero { margin-top: -56px; border-radius: 20px; }
  .article__body { margin-top: 36px; }
  .article__body p { font-size: 18px; line-height: 1.55; }
  .article__body h2 { font-size: 26px; margin-top: 32px; }
  .article__body li { font-size: 18px; line-height: 1.55; }
  .similar { padding-bottom: 80px; }
}

.similar { background: var(--white); padding-top: 0; padding-bottom: 120px; }

/* Similar-insights cards are a plain link wrapping the whole card. */
.article-card { display: block; }

/* Card hover — a gentle lift. The card keeps its height; the white panel
   grows UPWARD (eating into the image) to reveal the "Read Article" pill. */
.card { overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 64px rgba(156,199,255,.5); }
.card:hover .card__body { top: 216px; }

.card__cta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 12px 24px;
  border-radius: 52px; background: var(--navy-900); color: #fff;
  font-size: 14px; line-height: 1.3; white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease) .05s, transform .25s var(--ease) .05s;
}
.card__cta-pill svg { flex: none; }
.card:hover .card__cta-pill { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Section dividers & separators (added to match the live site)
   -------------------------------------------------------------------------- */
/* Vertical rule between the role-workspaces column and the optimization grid. */
.split__col--opt { position: relative; }
.split__col--opt::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0;
  width: 1px; background: #EDEAE4;
}
/* Vertical rule between the two Realtime-advisory agent columns. */
.split--even > * + * { position: relative; }
.split--even > * + *::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: #EDEAE4;
}
/* Vertical separators between the four upgrading stats. */
.stats > div + div { border-left: 1px solid var(--grey-200); }

/* Keep the centre emblem above the radial grid lines so they never cross it. */
.quadrants__art { z-index: 0; }
.quadrants__emblem { z-index: 1; }

@media (max-width: 1287px) {
  .split__col--opt::before { display: none; }
}
@media (max-width: 760px) {
  .split--even > * + *::before { display: none; }
  .stats > div + div { border-left: 0; }
}

/* The contact panel fades in without translating, so it never dips into the
   navy footer before the scroll-reveal settles. */
.cta__panel.reveal { transform: none; }

/* --------------------------------------------------------------------------
   24. Card grids on phones
   The team + insight cards ride a 3-up row down through tablet (shrinking as
   one via the .card__scale transform). On phones they stack one per row and
   sit centred at their natural 397px design size. Because the inner scale box
   scales to whatever width the card renders, no inner overrides are needed.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .team-grid,
  .card-grid {
    grid-template-columns: 1fr;
    max-width: 397px;
    margin-inline: auto;
  }
}