/* Company page */

/* ---------- Structured complexity ---------- */
.scomplex { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-80); }
.scomplex .container { display: flex; flex-direction: column; gap: 44px; }
.scomplex__head { align-items: start; padding-bottom: 40px; }
.scomplex__head .label { max-width: 469px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.scomplex__main { width: 100%; display: flex; flex-direction: column; gap: 44px; }
.scomplex__title { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.scomplex__paras { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.scomplex__paras p { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.scomplex__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.scomplex-item { border-left: 1px solid var(--color-blue-10); padding: 0 16px; }
.scomplex-item__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.scomplex-item h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); margin: 8px 0 16px; max-width: 302px; }
.scomplex-item p { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 302px; }
@media (max-width: 992px) {
  .scomplex__title { font-size: 40px; }
  .scomplex__paras { grid-template-columns: 1fr; }
  .scomplex__grid { grid-template-columns: 1fr; gap: 24px; }
  .scomplex-item { border-left: none; border-top: 1px solid var(--color-blue-10); padding: 16px 0 0; }
}

/* ---------- Leadership & team ---------- */
.team { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-120); }
.team .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.team__indent { margin-left: 33.3333%; }
.team__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.team__head p { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-blue-50); max-width: 872px; }
.team__block { display: flex; flex-direction: column; gap: 64px; }
.team__label { margin-left: 33.3333%; border-bottom: 1px solid var(--color-blue-10); padding-bottom: 4px; font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 64px; }
.team-member { display: flex; flex-direction: column; gap: 32px; }
.team-member__avatar { background: var(--color-blue-10); min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.team-member__avatar span { font-family: var(--font-heading); font-size: 40px; letter-spacing: -0.4px; color: var(--color-night); opacity: 0.5; }
.team-member__info { display: flex; flex-direction: column; gap: 16px; }
.team-member__role { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.team-member__name { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.team-member__info > div { display: flex; flex-direction: column; gap: 8px; }
.team-member__desc { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 351px; }
.team__viewall { margin-left: 33.3333%; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-night); display: block; }
@media (max-width: 992px) {
  .team__indent, .team__label, .team__viewall { margin-left: 0; }
  .team__grid { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; }
  .team-member { gap: 16px; }
  .team-member__avatar { min-height: 150px; }
  .team__head p { font-size: 32px; }
}

/* ---------- Deep-blue / forest bands ---------- */
.cband { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.cband--deep { background: var(--color-deep-blue); color: var(--color-almost-white); }
.cband--forest { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.cband--center { padding-top: 160px; padding-bottom: 160px; }
.cband--center h2 { max-width: 900px; margin: 0 auto; }
.cband__inner { display: grid; grid-template-columns: 4fr 8fr; align-items: center; gap: 40px; }
.cband--center { text-align: center; }
.cband--center .cband__inner { display: block; }
.cband h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-almost-white); }
.cband--forest h2 { font-size: 40px; }
.cband p { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 620px; }
.cband--center p { margin-left: auto; margin-right: auto; }
.cband__cta { margin-top: 32px; }
@media (max-width: 992px) { .cband__inner { grid-template-columns: 1fr; } .cband h2 { font-size: 40px; } }

/* ---------- Careers / open roles ---------- */
.careers { background: var(--color-light-green); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.careers .container { display: flex; flex-direction: column; gap: var(--sp-120); }
.careers__head { align-items: start; }
.careers__head .label { max-width: 400px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.careers__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-forest); }
.careers__roles { align-items: start; }
.careers__roles > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.careers__list { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.role-group__cat { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); margin-bottom: 4px; }
/* Hover paints the grey panel and the arrow; a click opens the bullets, the
   Apply link and the full-length description (Figma 1051:25758 / 1051:25822). */
.role { position: relative; border-top: 1px solid var(--color-green-10); }
.role::before { content: ""; position: absolute; inset: -1px 0 0 -16px; background: var(--color-green-5); opacity: 0; transition: opacity 0.2s ease; }
.role__top {
  position: relative; width: 100%; display: grid; grid-template-columns: 478px 1fr 40px;
  align-items: start; padding: 16px 32px 16px 0; text-align: left; background: none; border: 0; cursor: pointer;
}
.role__title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.role__desc {
  max-width: 322px; max-height: 0; overflow: hidden; opacity: 0;
  font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50);
  -webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 93%);
  mask-image: linear-gradient(180deg, #000 12%, transparent 93%);
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.role__arrow { justify-self: end; font-family: var(--font-heading); font-size: 40px; line-height: 1; color: var(--color-forest); opacity: 0; transition: opacity 0.2s ease; }
.role__icon { display: none; justify-self: end; position: relative; width: 28px; height: 28px; color: var(--color-forest); }
.role__icon::before, .role__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: currentColor; transition: opacity 0.2s ease; }
.role__icon::before { width: 100%; height: 1.5px; }
.role__icon::after { width: 1.5px; height: 100%; }
.role__reveal { position: relative; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; }
.role__meta { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 43px; padding-bottom: 16px; }
.role__meta p { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 22px; letter-spacing: -0.2px; color: var(--color-forest); }
.role__apply { display: inline-block; padding-bottom: 16px; font-family: var(--font-body); font-size: 14px; color: var(--color-forest); text-decoration: underline; text-underline-position: from-font; }
/* hover first, so the opened state below wins where the two overlap */
@media (min-width: 993px) {
  .role:hover::before { opacity: 1; }
  .role:hover .role__arrow { opacity: 1; }
  .role:hover .role__desc { max-height: 88px; opacity: 1; }
}
.role.is-open::before { opacity: 1; }
.role.is-open .role__arrow { opacity: 1; }
.role.is-open .role__desc { max-height: 400px; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.role.is-open .role__icon::after { opacity: 0; }
.role.is-open .role__reveal { max-height: 400px; opacity: 1; }
/* Careers page runs the same block on almost-white */
.careers--light { background: var(--color-almost-white); }
.careers--light .careers__head .label,
.careers--light .careers__roles > .label,
.careers--light .role-group__cat,
.careers--light .role__desc { color: var(--color-blue-50); }
.careers--light .careers__head h2,
.careers--light .role__title, .careers--light .role__arrow, .careers--light .role__icon,
.careers--light .role__meta p, .careers--light .role__apply,
.careers--light .careers__viewall { color: var(--color-night); }
.careers--light .role { border-top-color: var(--color-blue-10); }
.careers--light .role::before { background: var(--color-blue-5); }
.careers--light .careers__viewall { border-bottom-color: var(--color-night); }
.careers__viewall { display: block; border-bottom: 1px solid var(--color-forest); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-forest); }
@media (max-width: 992px) {
  .careers__head, .careers__roles { grid-template-columns: 1fr; row-gap: 24px; }
  .careers__head h2 { font-size: 40px; }
  /* mobile is an accordion: panel always on, edge to edge, plus/minus toggle */
  .role { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); border-top: none; }
  .role::before { inset: 0; opacity: 1; }
  .role__top { grid-template-columns: 1fr 28px; padding: 16px var(--container-pad); }
  .role__title { grid-area: 1 / 1; }
  .role__icon { grid-area: 1 / 2; }
  .role__desc { grid-area: 2 / 1 / 3 / -1; max-width: none; }
  .role.is-open .role__desc { padding-top: 16px; }
  .role__arrow { display: none; }
  .role__icon { display: block; }
  .role__reveal { padding: 0 var(--container-pad); }
  .role__meta { grid-template-columns: 1fr 1fr; row-gap: 16px; column-gap: 16px; }
}

/* ---------- Principles ---------- */
.principles { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.principles__head { align-items: start; margin-bottom: var(--sp-80); }
.principles__head > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.principles__intro h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.principles__intro p { margin-top: 32px; max-width: 588px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
/* Horizontal slider: cards run off the right edge. Scrolls with the wheel or
   trackpad natively, and by dragging (see [data-drag-scroll] in main.js). */
.principles__slider {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-left: var(--container-pad); padding-right: var(--container-pad);
  scrollbar-width: none; cursor: grab;
}
.principles__slider::-webkit-scrollbar { display: none; }
.principles__slider.is-dragging { cursor: grabbing; user-select: none; }
.principle {
  position: relative; overflow: hidden; flex: 0 0 448px; height: 316px;
  background: var(--color-blue-5); padding-top: 16px;
  display: flex; flex-direction: column; justify-content: center;
}
.principle__graphic { position: absolute; left: 120px; top: 117px; width: 708px; height: 708px; max-width: none; opacity: 0.4; pointer-events: none; }
.principle__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }
.principle__label { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.principle h3 { max-width: 339px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.principle__desc { max-width: 293px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.principle__num {
  position: relative; z-index: 1; background: var(--color-almost-white);
  border-top: 1px solid var(--color-blue-10); padding: 4px 8px;
  font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-night); opacity: 0.5;
}
@media (max-width: 992px) {
  .principles__head { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 32px; }
  .principles__intro h2 { font-size: 40px; }
}
@media (max-width: 768px) { .principle { flex: 0 0 300px; } }

/* ---------- Investor relations contact ---------- */
/* Night band: the wireframe volume sits off the left edge, the copy runs in
   the 8-col track with the buttons pinned to the bottom (Figma 1051:14385). */
.ir-contact {
  position: relative; overflow: hidden; background: var(--color-night); color: var(--color-almost-white);
  min-height: 800px; padding-top: var(--sp-120); padding-bottom: var(--sp-120); display: flex;
}
/* the maze SVG strokes are night-coloured, so invert them onto the dark ground */
.ir-contact__bg { position: absolute; left: -280px; top: -150px; width: 1040px; height: 1040px; max-width: none; opacity: 0.4; filter: invert(1); transform: rotate(-25deg); pointer-events: none; }
.ir-contact__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 4fr 8fr; width: 100%; }
.ir-contact__body { grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 80px; }
.ir-contact__text { display: flex; flex-direction: column; gap: 32px; }
.ir-contact__label { display: none; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.ir-contact__text h2 { max-width: 622px; font-family: var(--font-heading); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: -1.26px; color: var(--color-almost-white); }
.ir-contact__desc { max-width: 411px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.ir-contact__buttons { display: flex; }
.ir-contact__buttons .btn--ghost { border-color: var(--color-gray-50); color: var(--color-almost-white); }
.ir-contact__buttons .btn--ghost:hover { border-color: var(--color-gray-40); }

/* Brand band: label above, headline centred, wordmark below (Figma 1051:14263) */
.brandband {
  position: relative; overflow: hidden; background: var(--color-night);
  min-height: 800px; padding: 24px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.brandband__bg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1440px; max-width: none; opacity: 0.1; pointer-events: none; }
.brandband__tag, .brandband__title, .brandband__logo { position: relative; z-index: 1; }
.brandband__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-gray-40); }
.brandband__title { max-width: 966px; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-almost-white); }
.brandband__logo { display: flex; align-items: center; gap: 8px; color: var(--color-almost-white); }
.brandband__logo .logo__mark { width: 24px; height: 24px; }
.brandband__logo .logo__word { color: var(--color-almost-white); }

@media (max-width: 992px) {
  .ir-contact__inner { grid-template-columns: 1fr; }
  .ir-contact__body { grid-column: 1; }
  .ir-contact__label { display: block; }
  .ir-contact__text { gap: 16px; }
  .ir-contact__text h2 { font-size: 40px; letter-spacing: -0.4px; }
  .ir-contact__desc { max-width: none; }
}
@media (max-width: 768px) {
  .ir-contact { min-height: 700px; }
  .ir-contact__buttons { width: 100%; }
  .ir-contact__buttons .btn { flex: 1; min-width: 0; padding: 13px 12px; }
  .ir-contact__bg { left: -240px; top: -120px; width: 700px; height: 700px; }
  .brandband { min-height: 700px; padding: 16px; }
  .brandband__title { font-size: 40px; letter-spacing: -0.4px; }
  .brandband__logo { transform: scale(0.75); }
}

/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
  .scomplex__title { font-size: 28px; }
  .scomplex-item h4 { font-size: 28px; }
  .team__head h2, .team__head p { font-size: 24px; }
  .team__label { font-size: 14px; }
  .team-member__name { font-size: 20px; }
  .team-member__role { font-size: 14px; }
  .team-member__desc { font-size: 14px; }
  .cband--forest h2 { font-size: 40px; }
  .cband--deep h2, .cband--center h2 { font-size: 24px; }
  .careers__head h2 { font-size: 32px; }
  .role__title { font-size: 24px; }

  /* Careers page reuses these classes at larger sizes in the mobile design */
  .page-careers .scomplex__title { font-size: 32px; }
  .page-careers .role__title { font-size: 28px; }
}