/*=====================================================*/
/*  CAREERS AT VERSA CLOUD ERP — page styles           */
/*  Depends on assets/css/ai/common.css                */
/*                                                     */
/*  This is the company's people page, so it runs at   */
/*  the same editorial pitch as about-us: a light      */
/*  hero with a smiling person in front of the orange  */
/*  disc as on the homepage, chaptered sections, line- */
/*  masked headings, a team collage, a journey that    */
/*  draws itself, and six value cards with their own   */
/*  line motifs.                                       */
/*                                                     */
/*  Same language as the rest of the family —          */
/*  Montserrat / Raleway, ink, cream and one orange.   */
/*=====================================================*/

/*----------------------------*/
/* PAGE BASE                  */
/*----------------------------*/
/* `clip` rather than the inherited `hidden`: it contains sideways bleed
   without turning the page into a scroll container. */
.crs-page {
  overflow: clip;
}

.crs-section {
  padding: clamp(84px, 9vw, 132px) 0;
  /* One pair of tracks for every two-column row in a section, so the opener
     and the block under it share the same left and right edges. */
  --crs-cols: minmax(0, 1fr) minmax(0, 1.05fr);
  --crs-col-gap: 64px;
}

/*-----------------------------------*/
/* MOTION PRIMITIVES                 */
/* Three reveals carry the page:     */
/*  [data-crs-lines]   headings rise */
/*    out of a masked line box       */
/*  [data-crs-fade]    block fades   */
/*    up (delay from data-crs-delay) */
/*  [data-crs-stagger] children run  */
/*    in sequence off --ai-i         */
/* All switched by .is-in, set by    */
/* careers.js.                       */
/*-----------------------------------*/
.crs-lines {
  margin: 0;
}

/* The mask box. The padding/negative-margin pair keeps descenders and the
   orange accent from being clipped by the very overflow doing the masking. */
.crs-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

/* Both the mask box and the line inside it are bare spans, which the live
   theme styles directly (colour and a 1.5em line-height). Inheritance always
   loses to a direct declaration, so the heading's own type has to be restated
   here rather than relied upon. */
.crs-line,
.crs-line>span {
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit !important;
}

.crs-line>span {
  display: block;
  translate: 0 110%;
  transition: translate 0.95s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.crs-lines.is-in .crs-line>span {
  translate: 0 0;
}

.crs-line:nth-child(1)>span {
  transition-delay: 40ms;
}

.crs-line:nth-child(2)>span {
  transition-delay: 150ms;
}

.crs-line:nth-child(3)>span {
  transition-delay: 260ms;
}

[data-crs-fade] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-crs-fade].is-in {
  opacity: 1;
  translate: 0 0;
}

[data-crs-stagger]>* {
  opacity: 0;
}

[data-crs-stagger].is-in>* {
  animation: ai-reveal-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--ai-i, 0) * 90ms);
}

/*-----------------------------------*/
/* CHAPTER MARKER                    */
/* Labelled rule opening every       */
/* section, so the page reads as a   */
/* document rather than a stack.     */
/*-----------------------------------*/
.crs-chapter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.crs-chapter__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ai-muted);
  white-space: nowrap;
}

.crs-chapter__label::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--ai-primary);
}

.crs-chapter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ai-line);
}

.crs-chapter--center {
  justify-content: center;
}

.crs-chapter--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ai-line);
}

.crs-chapter--light .crs-chapter__label {
  color: rgba(255, 255, 255, 0.6);
}

.crs-chapter--light::before,
.crs-chapter--light::after {
  background: rgba(255, 255, 255, 0.14);
}

/*-----------------------------------*/
/* SECTION OPENER                    */
/* Display heading on the left, the  */
/* copy it sets up on the right.     */
/*-----------------------------------*/
/* Top aligned, not bottom: the right-hand column runs two blocks deep on this
   page, and bottom alignment would strand the heading halfway down the row. */
.crs-intro {
  display: grid;
  grid-template-columns: var(--crs-cols);
  align-items: start;
  gap: 32px var(--crs-col-gap);
  margin-bottom: 68px;
}

.crs-intro--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.crs-intro--center .crs-display {
  max-width: 24ch;
}

.crs-intro--center .crs-intro__copy {
  align-items: center;
  max-width: 76ch;
  padding-bottom: 0;
}

.crs-intro--center .crs-intro__copy p {
  text-wrap: balance;
}

.crs-display {
  font-family: var(--ai-heading);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04 !important;
  color: var(--ai-ink);
  /* Authored line breaks do the shaping; balance keeps any line that still
     has to wrap from dropping a single orphan word */
  text-wrap: balance;
}

.crs-display em {
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--ai-primary);
}

.crs-intro__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 6px;
}

/* Optical alignment: drops the display heading's cap-height onto the first
   line of the couplet beside it, which sits lower inside its own line box. */
.crs-intro>.crs-display {
  padding-top: 0.06em;
}

.crs-intro--center>.crs-display {
  padding-top: 0;
}

.crs-intro__copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75 !important;
  color: var(--ai-muted);
}

.crs-intro__copy strong {
  color: var(--ai-ink);
}

/* The two-line openers the document leads each chapter with. Larger than the
   body around them, and carrying a rule so the pair reads as one statement. */
.crs-intro__couplet {
  padding-left: 20px;
  border-left: 2px solid rgba(var(--ai-primary-rgb), 0.45);
  font-family: var(--ai-heading);
  font-size: clamp(17px, 1.5vw, 19.5px) !important;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.55 !important;
  color: var(--ai-ink) !important;
  text-wrap: pretty;
}

.crs-intro--center .crs-intro__couplet {
  padding: 0 0 18px;
  border-left: 0;
  border-bottom: 2px solid rgba(var(--ai-primary-rgb), 0.35);
}

/*-----------------------------------*/
/* CHAPTER RAIL                      */
/* Fixed marker of where you are in  */
/* the document. Desktop only, and   */
/* deliberately tiny until hovered.  */
/*-----------------------------------*/
.crs-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}

/* Lives outside .ai-page, so it carries its own list and link resets */
.crs-rail ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crs-rail li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crs-rail a,
.crs-rail a:hover,
.crs-rail a:focus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 7px 6px;
  color: var(--ai-muted) !important;
  text-decoration: none !important;
}

/* The label is the hover payoff; the dash is what you normally see */
.crs-rail a em {
  max-width: 0;
  overflow: hidden;
  font-family: var(--ai-heading);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease;
}

.crs-rail a::after {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--ai-line);
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}

.crs-rail a:hover em {
  max-width: 200px;
  opacity: 1;
}

.crs-rail a:hover::after {
  width: 26px;
  background: var(--ai-primary);
}

.crs-rail a.is-current::after {
  width: 30px;
  background: var(--ai-primary);
}

/* Over ink sections the rail flips to light ink */
.crs-rail.is-inverted a em {
  color: #FFF;
}

.crs-rail.is-inverted a::after {
  background: rgba(255, 255, 255, 0.28);
}

.crs-rail.is-inverted a:hover::after,
.crs-rail.is-inverted a.is-current::after {
  background: var(--ai-primary);
}

@media (min-width: 1400px) {
  .crs-rail {
    display: block;
  }
}

/*-----------------------------------*/
/* HERO                              */
/* Light, like the homepage. The     */
/* statement on the left; on the     */
/* right, a smiling person in front  */
/* of the orange disc, cut by the    */
/* foot of the hero, with the page's */
/* own values floating around them.  */
/*-----------------------------------*/
.crs-hero {
  display: flex;
  flex-direction: column;
  min-height: min(100vh, 1020px);
  min-height: min(100svh, 1020px);
  /* Grid focal point follows the person */
  --ai-grid-x: 76%;
  --ai-grid-y: 50%;
}

/* Paint order inside the hero: sheen, then the shared grid texture and its
   beams, then the content. */
.crs-hero .ai-grid-beams,
.crs-hero::before {
  z-index: 1;
}

/* The shared hero wrap is already a two-column grid. Here the stage column
   runs to the foot of the hero, so the person can be cut by it, and the copy
   centres itself in the height that leaves. The top padding is the nav. */
.crs-hero>.ai-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 40px;
  padding: 80px 0 0;
}

/* ---- copy ---- */
.crs-hero__copy {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(36px, 6vh, 72px) 0 clamp(84px, 11vh, 120px);
}

.crs-hero__copy .ai-kicker {
  margin-bottom: 24px;
}

.crs-hero h1 {
  margin: 0;
  font-family: var(--ai-heading);
  /* Sized so each authored line holds in the copy column */
  font-size: clamp(36px, 3.7vw, 54px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.03 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

/* Deep enough orange to hold 3:1 on the cream at display size */
.crs-hero h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--ai-primary-deep);
  background: linear-gradient(100deg, #DD6C00 0%, #C86200 55%, #AE5200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The last line's mask box grows downward so the swash under it is not
   clipped by the overflow doing the masking. */
.crs-hero .crs-line:last-child {
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

/* Hand-drawn stroke under "Together.", drawn once the line has risen */
.crs-hero__swash {
  position: absolute;
  left: -1%;
  bottom: -0.2em;
  width: 100%;
  height: 0.32em;
  overflow: visible;
  pointer-events: none;
}

.crs-hero__swash path {
  fill: none;
  stroke: var(--ai-primary);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.9s;
}

.crs-lines.is-in .crs-hero__swash path {
  stroke-dashoffset: 0;
}

/* The one bold line the document opens on */
.crs-hero__statement {
  position: relative;
  max-width: 30ch;
  margin: 34px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--ai-primary);
  font-family: var(--ai-heading);
  font-size: clamp(16.5px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.55 !important;
  letter-spacing: -0.01em;
  color: var(--ai-ink-soft);
}

.crs-hero .ai-hero__cta {
  margin-top: 36px;
}

/* ---- stage: the person ---- */
/* Every layer is placed as a share of the stage, so the composition scales
   as one piece. The disc sits a little below the top of the portrait, so the
   head rises out of it, as on the homepage. */
.crs-hero__stage {
  position: relative;
  align-self: end;
  justify-self: end;
  /* Held to the viewport's height as well, so a short laptop screen still
     shows the whole disc under the nav */
  width: min(100%, calc((100vh - 110px) / 1.04));
  width: min(100%, calc((100svh - 110px) / 1.04));
  aspect-ratio: 100 / 104;
}

.crs-hero__disc {
  position: absolute;
  left: 13%;
  top: 17%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 44%),
    linear-gradient(155deg, #FFA43A 0%, var(--ai-primary) 48%, #EE6C00 100%);
  box-shadow:
    0 50px 90px -40px rgba(var(--ai-primary-rgb), 0.7),
    inset 0 -24px 50px rgba(176, 72, 0, 0.22);
  /* Pointer depth, written by careers.js */
  translate: var(--crs-nx, 0) var(--crs-ny, 0);
  transition: translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: crs-disc-in 1.2s cubic-bezier(0.2, 0.9, 0.3, 1.12) 0.1s both;
}

/* A quiet concentric ring inside the disc */
.crs-hero__disc::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dotted orbit round the disc, carrying one satellite. The spin is on this
   wrapper, not on the <svg>: Chrome cannot run `rotate` on an SVG element on
   the compositor, and would repaint the ring on the main thread every frame. */
.crs-hero__orbit {
  position: absolute;
  top: -11%;
  left: -11%;
  width: 122%;
  height: 122%;
  animation: crs-spin 48s linear infinite;
}

.crs-hero__orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crs-hero__orbit circle {
  stroke: rgba(var(--ai-primary-rgb), 0.55);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 0.01 3.4;
}

.crs-hero__orbit .crs-hero__satellite {
  fill: var(--ai-primary);
  stroke: #FFF;
  stroke-width: 1.2;
  stroke-dasharray: none;
}

/* Centred on the disc (13% + 84% / 2 = 55%) and standing on the foot of the
   hero */
.crs-hero__person {
  position: absolute;
  left: 20%;
  bottom: 0;
  z-index: 1;
  width: 70%;
  max-width: none !important;
  height: auto !important;
  translate: var(--crs-px, 0) 0;
  transition: translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: crs-person-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
}

/* Outline icons around the disc, as on the homepage — they pop in after the
   person, then drift on their own loops. */
.crs-hero__icon {
  position: absolute;
  z-index: 0;
  width: 46px;
  height: 46px;
  color: var(--ai-primary);
  animation:
    crs-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) calc(0.9s + var(--crs-i, 0) * 0.12s) both,
    crs-drift 7s ease-in-out calc(var(--crs-i, 0) * -1.8s) infinite;
}

.crs-hero__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.crs-hero__icon--1 {
  --crs-i: 0;
  left: 14%;
  top: 3%;
}

.crs-hero__icon--2 {
  --crs-i: 1;
  right: -1%;
  top: 9%;
  width: 40px;
  height: 40px;
}

.crs-hero__icon--3 {
  --crs-i: 2;
  right: -7%;
  top: 62%;
}

.crs-hero__icon--4 {
  --crs-i: 3;
  left: -4%;
  top: 60%;
  width: 38px;
  height: 38px;
}

/* ---- chips ---- */
.crs-hero__chip,
.crs-hero__crew {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  /* Solid rather than frosted: a backdrop blur under a chip that is always
     moving, over layers that are always moving, is recomputed every frame
     and flickers. */
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow:
    0 22px 44px -18px rgba(20, 20, 20, 0.32),
    0 2px 6px rgba(20, 20, 20, 0.05);
  white-space: nowrap;
  animation:
    crs-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) calc(1.15s + var(--crs-i, 0) * 0.16s) both,
    crs-bob 6s ease-in-out calc(var(--crs-i, 0) * -2.1s) infinite;
}

.crs-hero__chip svg {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ai-primary);
  color: #FFF;
  stroke-width: 2.2;
}

/* The live theme styles bare inline text, so the label states its own type */
.crs-hero__chip b,
.crs-hero__crew b {
  font-family: var(--ai-heading);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  color: var(--ai-ink);
}

.crs-hero__chip--1 {
  --crs-i: 0;
  left: -2%;
  top: 21%;
}

.crs-hero__chip--2 {
  --crs-i: 1;
  right: -6%;
  top: 40%;
}

.crs-hero__crew {
  --crs-i: 2;
  left: 1%;
  bottom: 6%;
  padding: 7px 18px 7px 7px;
}

.crs-hero__faces {
  display: flex;
  padding-left: 10px;
}

.crs-hero__faces img {
  width: 36px;
  height: 36px !important;
  max-width: none !important;
  margin-left: -10px;
  border: 2px solid #FFF;
  border-radius: 50%;
  object-fit: cover;
}

/* ---- motion ---- */
@keyframes crs-disc-in {
  from {
    opacity: 0;
    scale: 0.55;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes crs-person-in {
  from {
    opacity: 0;
    transform: translateY(9%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes crs-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes crs-bob {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -9px;
  }
}

@keyframes crs-drift {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 4px -12px;
    rotate: 6deg;
  }
}

@keyframes crs-spin {
  to {
    rotate: 360deg;
  }
}

/* Vertical section label along the left edge — only where there is room */
.crs-hero__side {
  display: none;
  position: absolute;
  left: -58px;
  bottom: 60px;
  margin: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--ai-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.34);
}

.crs-hero__side::after {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  margin: 16px auto 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.3), transparent);
}

@media (min-width: 1400px) {
  .crs-hero__side {
    display: block;
  }
}

/* The shared scroll cue, made clickable here. It sits under the copy column
   rather than at the centre, where the person stands. */
.crs-hero__scroll {
  left: max(24px, calc(50% - 590px));
  bottom: 26px;
  transform: none;
  flex-direction: row;
  gap: 10px;
  pointer-events: auto;
  color: rgba(20, 20, 20, 0.45) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.crs-hero__scroll:hover,
.crs-hero__scroll:hover span {
  color: var(--ai-ink) !important;
}

/*-----------------------------------*/
/* OVERTURE                          */
/* The four paragraphs that open the */
/* document, handed down from the    */
/* hero. One statement, then three   */
/* columns under a rule — read as a  */
/* spread rather than a wall.        */
/*-----------------------------------*/
.crs-overture {
  padding: clamp(66px, 7vw, 100px) 0 clamp(56px, 6vw, 84px);
}

/* Short accent above the statement, in place of a chapter label: this is the
   document's opening, not one of its numbered chapters. */
.crs-overture__rule {
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 28px;
  background: var(--ai-primary);
}

.crs-overture__lead {
  max-width: 32ch;
  margin: 0 0 clamp(40px, 4.5vw, 58px);
  font-family: var(--ai-heading);
  font-size: clamp(23px, 2.9vw, 36px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

.crs-overture__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 54px;
  padding-top: clamp(30px, 3.4vw, 42px);
  border-top: 1px solid var(--ai-line);
}

.crs-overture__cols p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8 !important;
  color: var(--ai-muted);
}

/* A short tick starting each column, hung just under the rule above */
.crs-overture__cols p::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 18px;
  background: rgba(var(--ai-primary-rgb), 0.55);
}

/*-----------------------------------*/
/* 01 — TEAM MOSAIC                  */
/* The collage: six teams laid into  */
/* the same grid as two documentary  */
/* photographs.                      */
/*-----------------------------------*/
/* Five team tiles and two photographs tile a 4x3 grid exactly: one upright
   photograph holding the top-left quarter, one cinematic band closing the
   bottom row. The rows are sized here rather than by the pictures, whose
   images are taken out of flow so they cannot push the grid around. */
.crs-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(166px, auto) minmax(166px, auto) minmax(214px, auto);
  gap: 14px;
}

.crs-mosaic>* {
  opacity: 0;
}

.crs-mosaic.is-in>* {
  animation: ai-reveal-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--ai-i, 0) * 85ms);
}

/* ---- photographs ---- */
.crs-mosaic__photo {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ai-ink);
}

/* Explicit areas: the tiles between them auto-flow into what is left, in
   reading order, and the grid comes out full with no orphan cell. */
.crs-mosaic__photo--a {
  grid-area: 1 / 1 / 3 / 3;
}

.crs-mosaic__photo--b {
  grid-area: 3 / 2 / 4 / 5;
}

.crs-mosaic__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(0.2) contrast(1.04);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease;
}

.crs-mosaic__photo:hover img {
  transform: scale(1.045);
  filter: grayscale(0) contrast(1.06);
}

/* Warm wash so the photographs sit inside the palette rather than beside it */
.crs-mosaic__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0) 45%, rgba(20, 20, 20, 0.5) 100%),
    linear-gradient(140deg, rgba(var(--ai-primary-rgb), 0.16), transparent 58%);
  pointer-events: none;
}

/* The band is a much wider crop than the upright, so it takes its own focal
   point rather than the shared one */
.crs-mosaic__photo--b img {
  object-position: 52% 46%;
}

/* ---- team tiles ---- */
.crs-team {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 24px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Orange wash that rises from the foot of the tile on hover */
.crs-team::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  background: linear-gradient(0deg, rgba(var(--ai-primary-rgb), 0.12), transparent 70%);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.crs-team:hover {
  transform: translateY(-5px);
  border-color: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary);
}

.crs-team:hover::before {
  transform: translateY(0);
}

.crs-team__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crs-team:hover .crs-team__icon {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  transform: rotate(-7deg);
}

.crs-team__icon i,
.crs-team__icon svg {
  width: 22px;
  height: 22px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
  transition: color 0.3s ease;
}

.crs-team:hover .crs-team__icon i,
.crs-team:hover .crs-team__icon svg {
  color: #FFF;
}

.crs-team strong {
  position: relative;
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.24 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

/*-----------------------------------*/
/* 01b — HOW THE WORK REFLECTS BACK  */
/* The three words the document      */
/* uses to describe the software,    */
/* and the two closing paragraphs.   */
/*-----------------------------------*/
.crs-reflect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 26px 64px;
  margin-top: clamp(56px, 6vw, 80px);
  padding-top: clamp(40px, 4.5vw, 56px);
  border-top: 1px solid var(--ai-line);
}

.crs-reflect__line {
  grid-column: 1;
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

.crs-reflect__words {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.crs-reflect__words li {
  padding: 9px 16px;
  background: #FFF;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.35);
  border-radius: 999px;
  font-family: var(--ai-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ai-primary-deep);
  transition: background 0.25s ease, color 0.25s ease;
}

.crs-reflect__words li:hover {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  color: #FFF;
}

.crs-reflect__copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.crs-reflect__copy p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.78 !important;
  color: var(--ai-muted);
}

/*-----------------------------------*/
/* 01c — CREDIBILITY CARDS           */
/*-----------------------------------*/
.crs-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(50px, 5.5vw, 72px) 0 0 !important;
  padding: 0;
  list-style: none;
}

.crs-highlights li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 28px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.crs-highlights li:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.55);
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.07);
}

.crs-highlights li i,
.crs-highlights li svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crs-highlights li:hover i,
.crs-highlights li:hover svg {
  transform: translateY(-3px);
}

.crs-highlights li strong {
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.32 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

/*-----------------------------------*/
/* 02 — A SHARED PURPOSE             */
/* The journey draws itself down a   */
/* spine as the reader scrolls; the  */
/* closing copy reads beside it.     */
/*-----------------------------------*/
/* Same tracks and gutter as the .crs-intro above it: the journey lines up
   under the heading, and the copy beside it under the copy above it. */
.crs-purpose {
  display: grid;
  grid-template-columns: var(--crs-cols);
  align-items: center;
  gap: 48px var(--crs-col-gap);
}

.crs-journey {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 !important;
  /* The gutter holds the spine, whose own left edge lands on the column edge —
     so the diagram starts exactly where the heading above it starts. */
  padding: 4px 0 4px 50px;
  list-style: none;
  counter-reset: crs-stage;
}

/* The spine. The <em> inside is the lit part, scaled from --crs-draw. */
.crs-journey__spine {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 7px;
  width: 2px;
  background: var(--ai-line);
  border-radius: 999px;
  overflow: hidden;
}

.crs-journey__spine em {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, var(--ai-primary), var(--ai-primary-deep));
  transform: scaleY(var(--crs-draw, 0));
  transform-origin: top;
  transition: transform 0.25s linear;
}

.crs-journey__stage {
  position: relative;
  counter-increment: crs-stage;
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crs-journey__stage.is-on {
  opacity: 1;
  translate: 0 0;
}

/* Node on the spine */
.crs-journey__dot {
  position: absolute;
  top: 50%;
  left: -50px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--ai-paper);
  border: 2px solid var(--ai-line);
  border-radius: 50%;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.crs-journey__stage.is-on .crs-journey__dot {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 5px rgba(var(--ai-primary-rgb), 0.16);
}

.crs-journey__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--ai-paper);
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.crs-journey__stage:hover .crs-journey__card {
  transform: translateX(6px);
  border-color: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary);
}

.crs-journey__card i,
.crs-journey__card svg {
  width: 21px;
  height: 21px;
  color: var(--ai-primary-deep);
  stroke-width: 2.1;
  flex-shrink: 0;
}

.crs-journey__card strong {
  font-family: var(--ai-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

/* Position in the sequence, set from the counter rather than from markup:
   it is an index, not copy, and it gives the wide card a right-hand anchor. */
.crs-journey__card::after {
  content: counter(crs-stage, decimal-leading-zero);
  margin-left: auto;
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ai-line);
  transition: color 0.4s ease;
}

.crs-journey__stage.is-on .crs-journey__card::after {
  color: var(--ai-primary);
}

/* The destination carries the accent */
.crs-journey__stage--last .crs-journey__card {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
}

.crs-journey__stage--last .crs-journey__card strong {
  color: #FFF;
}

.crs-journey__stage--last .crs-journey__card i,
.crs-journey__stage--last .crs-journey__card svg {
  color: var(--ai-primary);
}

.crs-journey__stage--last .crs-journey__card::after,
.crs-journey__stage--last.is-on .crs-journey__card::after {
  color: rgba(255, 255, 255, 0.4);
}

.crs-journey__stage--last:hover .crs-journey__card {
  box-shadow: 0 4px 0 0 var(--ai-primary);
}

/* ---- copy beside the journey ---- */
.crs-purpose__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.crs-purpose__copy p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.78 !important;
  color: var(--ai-muted);
}

.crs-purpose__copy p:last-child {
  margin-bottom: 0;
}

/* The one line about the mission not changing */
.crs-purpose__pull {
  padding: 20px 24px;
  background: var(--ai-paper);
  border: 1px solid var(--ai-line);
  border-left: 3px solid var(--ai-primary);
  border-radius: 0 14px 14px 0;
  font-family: var(--ai-heading) !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.6 !important;
  color: var(--ai-ink) !important;
}

/*-----------------------------------*/
/* 03 — CORE VALUES                  */
/* Six cards, each with its own line */
/* motif and a highlight that tracks */
/* the pointer.                      */
/*-----------------------------------*/
.crs-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.crs-value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 34px 32px 38px;
  background: var(--ai-paper);
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Pointer highlight. Coordinates come from careers.js; with no pointer the
   card simply never lights, which is the correct resting state. */
.crs-value::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--crs-mx, 50%) var(--crs-my, 0%),
      rgba(var(--ai-primary-rgb), 0.1),
      transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.crs-value:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--ai-primary-rgb), 0.5);
  box-shadow: 0 22px 50px rgba(20, 20, 20, 0.09);
}

.crs-value:hover::before {
  opacity: 1;
}

/* ---- the line motif ---- */
.crs-value__motif {
  position: absolute;
  top: -26px;
  right: -26px;
  z-index: -1;
  width: 168px;
  height: 168px;
  opacity: 0.5;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.crs-value__motif svg {
  width: 100%;
  height: 100%;
  stroke: var(--ai-line);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.45s ease;
}

.crs-value:hover .crs-value__motif {
  opacity: 1;
  transform: rotate(-8deg) scale(1.06);
}

.crs-value:hover .crs-value__motif svg {
  stroke: rgba(var(--ai-primary-rgb), 0.5);
}

/* ---- card contents ---- */
.crs-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crs-value:hover .crs-value__icon {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  transform: translateY(-3px) rotate(-6deg);
}

.crs-value__icon i,
.crs-value__icon svg {
  width: 25px;
  height: 25px;
  color: var(--ai-primary-deep);
  stroke-width: 1.9;
  transition: color 0.35s ease;
}

.crs-value:hover .crs-value__icon i,
.crs-value:hover .crs-value__icon svg {
  color: #FFF;
}

.crs-value strong {
  font-family: var(--ai-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

.crs-value__note {
  font-size: 15px;
  line-height: 1.68 !important;
  color: var(--ai-muted);
}

/* Orange edge drawing in along the foot of the card */
.crs-value__edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--ai-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crs-value:hover .crs-value__edge {
  transform: scaleX(1);
}

/*-----------------------------------*/
/* 04 — CLOSING STATEMENT + CTA      */
/* Uses the shared ink band so it    */
/* inherits the grid and its beams;  */
/* the layout inside is this page's. */
/*-----------------------------------*/
.crs-closing .ai-wrap {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, auto);
  align-items: center;
  gap: 48px 72px;
  padding-top: clamp(84px, 9vw, 116px);
  padding-bottom: clamp(84px, 9vw, 116px);
}

.crs-closing__copy {
  display: flex;
  flex-direction: column;
}

.crs-closing h2 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(29px, 3.7vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.07 !important;
  color: #FFF;
  text-wrap: balance;
}

.crs-closing h2 em {
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--ai-primary);
}

/* The three "Behind every…" lines, arriving one after another */
.crs-behind {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 32px 0 0 !important;
  padding: 0;
  list-style: none;
}

.crs-behind li {
  position: relative;
  padding-left: 26px;
  font-family: var(--ai-heading);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.88);
}

/* A short rule instead of a bullet, growing with the line's index */
.crs-behind li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 14px;
  height: 2px;
  background: var(--ai-primary);
  border-radius: 999px;
}

.crs-closing__note {
  max-width: 62ch;
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 16px;
  line-height: 1.78 !important;
  color: rgba(255, 255, 255, 0.66);
}

.crs-closing__actions {
  align-items: stretch;
  gap: 12px;
}

/*-----------------------------------*/
/* RESPONSIVE                        */
/*-----------------------------------*/
@media (max-width: 1279px) {
  .crs-values {
    gap: 14px;
  }

  .crs-value {
    padding: 30px 26px 34px;
  }
}

@media (max-width: 1099px) {
  .crs-hero {
    min-height: 0;
  }

  /* One column: the statement, then the team standing on the foot of the
     hero beneath it */
  .crs-hero>.ai-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .crs-hero__copy {
    padding: 56px 0 24px;
  }

  /* Stacked, the headline has the full width: scale it off the viewport
     instead, small enough that "Building the Future" holds at 360px */
  .crs-hero h1 {
    font-size: clamp(32px, 8.4vw, 54px);
  }

  .crs-hero__stage {
    justify-self: center;
    width: min(88%, 520px);
    margin-left: 6%;
  }

  .crs-overture__cols {
    grid-template-columns: minmax(0, 1fr);
    max-width: 68ch;
    gap: 20px;
  }

  /* The cue would sit on top of the team once the hero stacks, so it steps
     aside */
  .crs-hero__scroll {
    display: none;
  }

  .crs-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
    margin-bottom: 48px;
  }

  .crs-purpose {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .crs-closing .ai-wrap {
    grid-template-columns: 1fr;
  }

  .crs-closing__actions {
    max-width: 460px;
  }
}

@media (max-width: 899px) {
  /* Two columns, and both photographs become full-width bands between the
     pairs of tiles they introduce. */
  .crs-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(148px, auto);
  }

  .crs-mosaic__photo--a,
  .crs-mosaic__photo--b {
    grid-area: auto / span 2;
    min-height: 250px;
  }

  /* Odd number of tiles: the last one takes the whole closing row rather than
     sitting alone beside a gap. */
  .crs-mosaic .crs-team:last-child {
    grid-column: span 2;
  }

  .crs-reflect {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .crs-reflect__line,
  .crs-reflect__words,
  .crs-reflect__copy {
    grid-column: 1;
  }

  .crs-reflect__copy {
    grid-row: auto;
  }

  .crs-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crs-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .crs-hero__copy {
    padding-top: 40px;
  }

  .crs-hero .ai-btn {
    width: 100%;
  }

  .crs-hero__stage {
    width: 90%;
    margin-left: 10%;
  }

  .crs-hero__chip,
  .crs-hero__crew {
    gap: 8px;
    padding: 6px 13px 6px 6px;
  }

  .crs-hero__chip svg {
    width: 28px;
    height: 28px;
    padding: 6px;
  }

  .crs-hero__chip b,
  .crs-hero__crew b {
    font-size: 12.5px;
  }

  .crs-hero__faces img {
    width: 28px;
    height: 28px !important;
    margin-left: -9px;
  }

  .crs-hero__icon {
    width: 32px;
    height: 32px;
  }

  /* On a narrow stage the first chip would sit on the face, so it drops to
     the shoulder, and the icon that lived there moves up */
  .crs-hero__chip--1 {
    left: -4%;
    top: 58%;
  }

  .crs-hero__icon--4 {
    top: 38%;
  }

  .crs-mosaic {
    grid-template-columns: minmax(0, 1fr);
  }

  .crs-mosaic__photo--a,
  .crs-mosaic__photo--b,
  .crs-mosaic .crs-team:last-child {
    grid-area: auto / span 1;
    min-height: 220px;
  }

  .crs-mosaic .crs-team:last-child {
    min-height: 0;
  }

  .crs-highlights,
  .crs-values {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The spine is a lot of furniture for a narrow column; the stages keep the
     order and the accent without it */
  .crs-journey {
    padding-left: 0;
  }

  .crs-journey__spine,
  .crs-journey__dot {
    display: none;
  }

  .crs-journey__stage:hover .crs-journey__card {
    transform: none;
  }

  .crs-value {
    padding: 28px 24px 32px;
  }

  .crs-closing__actions {
    max-width: none;
  }
}

/*-----------------------------------*/
/* REDUCED MOTION                    */
/* Every reveal starts finished and  */
/* the journey is fully drawn; the   */
/* page still reads exactly the same.*/
/*-----------------------------------*/
@media (prefers-reduced-motion: reduce) {

  .crs-line>span,
  [data-crs-fade],
  [data-crs-stagger]>*,
  .crs-mosaic>* {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  .crs-hero__disc,
  .crs-hero__orbit,
  .crs-hero__person,
  .crs-hero__icon,
  .crs-hero__chip,
  .crs-hero__crew {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }

  .crs-hero__swash path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .crs-journey__stage {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .crs-journey__spine em {
    transform: scaleY(1) !important;
    transition: none !important;
  }

  .crs-journey__stage .crs-journey__dot {
    background: var(--ai-primary);
    border-color: var(--ai-primary);
  }

  .crs-value,
  .crs-value__motif,
  .crs-value__icon,
  .crs-value__edge,
  .crs-team,
  .crs-team__icon,
  .crs-mosaic__photo img,
  .crs-highlights li {
    transition: none !important;
  }
}