/* =========================================================
   TEAMS PAGE — matched to teams.jpeg (1024px design)
   Sizes are written as vw of the 1024px design, clamped so the
   layout keeps the same proportions from tablet to wide desktop.
   ========================================================= */

body { background: #F7F8FD; }

/* ---------- Header (design: 67px tall at 1024, no dropdown caret) ---------- */
:root { --header-h: clamp(68px, 6.6vw, 88px); }
@media (min-width: 1001px) {
  .main-nav .sub-toggle { display: none; }
  .main-nav .has-sub > a { padding-right: 16px; }
  .main-nav .has-sub > a::after { right: 16px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .main-nav .has-sub > a { padding-right: 9px; }
  .main-nav .has-sub > a::after { right: 10px; }
}

/* ---------- Spacing between blocks ---------- */
.section { padding-top: clamp(12px, 1.3vw, 18px); }

/* ---------- Hero ---------- */
.hero--teams { padding: clamp(12px, 1.5vw, 20px) 0 clamp(10px, 1.2vw, 16px); background: #F3F3FB; }
.hero--teams .hero__inner { grid-template-columns: minmax(0, 27.5%) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.hero--teams .hero__shape--left { width: clamp(40px, 5.9vw, 76px); height: clamp(60px, 8.8vw, 114px); bottom: 0; }
.hero--teams .hero__shape--right {
  width: 37%; height: 100%;
  clip-path: polygon(64% 0, 100% 0, 100% 100%, 0 100%, 0 96%, 64% 96%);
}
.hero--teams .hero__content { padding-left: 0; }
.teams-hero__title {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(56px, 7.9vw, 104px) !important;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hero--teams .bar { width: clamp(56px, 7.8vw, 100px); height: clamp(4px, .5vw, 6px); margin: clamp(14px, 2.1vw, 28px) 0 clamp(14px, 2vw, 26px); }
.hero--teams .hero__text { font-size: clamp(16px, 1.86vw, 24px); line-height: 1.22; color: var(--ink); }

.teams-hero__media {
  position: relative;
  aspect-ratio: 695 / 268;
  overflow: hidden;
  border-radius: 8px;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
}
.teams-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 38%; }
.teams-hero__watermark {
  position: absolute;
  left: 13%; top: 5%;
  font-family: var(--f-logo);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(24px, 3.7vw, 50px);
  line-height: .9;
  white-space: nowrap;
  text-align: center;
  color: rgba(255,255,255,.62);
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
  transform: skewX(-6deg);
  pointer-events: none;
}
.teams-hero__watermark > span { display: block; }
.teams-hero__watermark .wm-the { font-family: var(--f-wide); font-style: normal; font-size: .32em; letter-spacing: .3em; color: rgba(253,249,88,.75); margin-bottom: .15em; }
.teams-hero__watermark .logo__e { --c: rgba(255,255,255,.62); }
.teams-hero__watermark b { color: rgba(253,249,88,.62); font-weight: 900; }

/* ---------- Intro strip ---------- */
.teams-intro { background: #F4F5F9; padding: clamp(14px, 1.75vw, 24px) 0; }
.teams-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.teams-intro__text {
  border-left: 4px solid var(--yellow);
  border-right: 3px solid var(--yellow);
  padding: 2px clamp(14px, 2.1vw, 28px) 2px clamp(14px, 2.1vw, 28px);
  margin-left: clamp(0px, 2.2vw, 30px);
  font-size: clamp(15px, 1.72vw, 22px);
  line-height: 1.25;
  color: var(--ink);
}
.teams-intro__text b { font-family: var(--f-head); font-style: italic; font-weight: 800; }
.teams-intro__logo { display: flex; justify-content: center; padding: 0; }
.teams-intro__logo .logo--dark { --s: clamp(1px, .135vw, 1.75px); }

/* ---------- Level cards ---------- */
.levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.3vw, 18px);
}
.level {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #F9F9FB;
  border: 1px solid #DCDDE2;
  border-radius: 8px;
  padding: 8px 8px 0;
  overflow: hidden;
  min-height: clamp(440px, 50vw, 650px);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.level:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(0,0,0,.12); }
.level__media {
  position: relative;
  aspect-ratio: 302 / 220;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.level__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.level:hover .level__media img { transform: scale(1.04); }
.level__media::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  width: 19%; height: 28%;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.level__plate {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 90%;
  margin: clamp(-30px, -2.1vw, -18px) 0 0 -8px;
  padding: .06em 22px .02em 9%;
  background: var(--yellow);
  clip-path: polygon(5% 0, 100% 0, 91% 100%, 0 100%);
  font-family: var(--f-logo);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
}
.level__plate-logo { height: .85em; width: auto; margin-left: auto; margin-right: 6%; }

.level__body { position: relative; z-index: 1; padding: clamp(10px, 1.2vw, 16px) 10px 8px clamp(10px, 1.3vw, 18px); }
.level__sub {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(17px, 2.05vw, 27px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: clamp(8px, 1.1vw, 14px);
}
.level__body p { font-family: "Montserrat", var(--f-body); font-weight: 500; font-size: clamp(14px, 1.48vw, 19px); line-height: 1.12; color: var(--ink); }

.level__watermark {
  display: block;
  width: 56%;
  max-width: 210px;
  margin: auto auto 6px;
  opacity: .24;
  pointer-events: none;
}
.level__watermark--sa { width: 66%; max-width: 250px; margin-left: 12%; }

/* ---------- Find the right fit ---------- */
.mission--fit {
  padding: clamp(10px, 1.1vw, 14px) clamp(16px, 2.6vw, 34px);
  background: #E6E7EC;
}
.mission--fit .mission__icon {
  width: clamp(56px, 7.3vw, 96px); height: clamp(56px, 7.3vw, 96px);
  font-size: clamp(34px, 4.6vw, 60px);
  margin-left: clamp(0px, 2.6vw, 34px);
  margin-right: clamp(16px, 3vw, 38px);
}
.mission--fit .mission__title {
  font-size: clamp(28px, 4.3vw, 56px);
  padding: 2px clamp(14px, 2.4vw, 32px) 2px clamp(14px, 2.2vw, 28px);
  letter-spacing: -.01em;
}
.mission--fit .mission__text { padding-left: clamp(14px, 2.4vw, 30px); font-size: clamp(14.5px, 1.56vw, 20px); line-height: 1.2; color: var(--ink); }

@media (min-width: 901px) {
  .mission--fit { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 0; }
  .mission--fit .mission__title { border-right: 3px solid var(--yellow); }
  .mission--fit .mission__text { grid-column: auto; border-top: 0; padding-top: 0; }
}

.fit-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3.7vw, 48px);
  margin-top: clamp(10px, 1.5vw, 18px);
}
.btn--slant {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(17px, 2.15vw, 28px);
  padding: clamp(8px, .75vw, 10px) clamp(18px, 3vw, 38px);
  border-radius: 10px;
  box-shadow: 0 2px 0 var(--yellow-dark);
}
.btn--slant svg { font-size: 1.05em; margin-left: .35em; }

/* ---------- Affiliations ---------- */
.affiliations {
  display: grid;
  grid-template-columns: auto 1fr 1.4fr;
  align-items: center;
  background: #E5E6EB;
  border-radius: var(--radius);
  padding: clamp(8px, .9vw, 12px) clamp(14px, 2.3vw, 30px);
}
.affiliations > * { padding: 4px clamp(14px, 3vw, 40px); text-align: center; }
.affiliations > * + * { border-left: 2px solid var(--ink); }
.affiliations__title {
  position: relative;
  text-align: left;
  padding-left: 4px;
  font-family: var(--f-wide);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(14px, 1.75vw, 22px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--ink);
}
.affiliations__title::after {
  content: "";
  display: block;
  width: 70px; height: 3px;
  background: var(--yellow);
  margin-top: 4px;
}
.affiliations p {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(17px, 2.15vw, 28px);
  color: var(--ink);
  letter-spacing: -.01em;
}

/* ---------- CTA band (design: 63px tall at 1024) ---------- */
.cta-band { margin-top: clamp(10px, 1.2vw, 16px); padding: clamp(10px, 1.05vw, 14px) 0; }
.cta-band__inner { gap: clamp(16px, 3vw, 40px); }
.cta-band__title { font-size: clamp(24px, 3.3vw, 43px); padding-right: clamp(16px, 3vw, 40px); }
.cta-band__actions { gap: clamp(10px, 1.9vw, 24px); }
.cta-band .btn--dark { font-size: clamp(14px, 1.5vw, 19px); padding: clamp(8px, .9vw, 12px) clamp(14px, 1.9vw, 24px); }

@media (min-width: 901px) {
  .cta-band { clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%); }
  .cta-band__inner { flex-direction: row; text-align: left; }
  .cta-band__title { border-right: 2px solid var(--ink); }
}

/* ---------- Footer (design: logo | quick links | follow us) ---------- */
.site-footer .footer__inner { grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr); }
@media (min-width: 901px) {
  .site-footer .footer__follow { justify-self: stretch; text-align: center; padding-right: 28px; }
  .site-footer .footer__social { justify-content: center; }
}
.site-footer .footer__links { grid-template-rows: repeat(4, auto); column-gap: clamp(40px, 9vw, 120px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero--teams .hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .hero--teams .hero__shape--right { width: 70%; height: 30%; clip-path: polygon(30% 100%, 100% 0, 100% 100%); }
  .teams-hero__media { clip-path: none; }
  .teams-intro__inner { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .teams-intro__text { max-width: 720px; margin-left: 0; }
  .teams-intro__logo .logo--dark { --s: 1.25px; }
  .levels { grid-template-columns: 1fr 1fr; }
  .levels .level:last-child { grid-column: 1 / -1; max-width: calc(50% - 7px); justify-self: center; width: 100%; }
  .level { min-height: 0; }
  .mission--fit { grid-template-columns: auto minmax(0, 1fr); }
  .mission--fit .mission__icon { margin-left: 0; }
  .mission--fit .mission__text { padding-left: 0; }
  .affiliations { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .affiliations__title { grid-column: 1 / -1; text-align: center; padding: 0 0 6px; }
  .affiliations__title br { display: none; }
  .affiliations__title::after { margin: 6px auto 0; }
  .affiliations > *:nth-child(2) { border-left: 0; }
  .site-footer .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .levels { grid-template-columns: 1fr; }
  .levels .level:last-child { max-width: none; }
  .level__watermark { width: 40%; max-width: 150px; margin-top: 10px; }
  .affiliations { grid-template-columns: 1fr; padding: 16px; }
  .affiliations > * + * { border-left: 0; border-top: 2px solid rgba(0,0,0,.15); padding-top: 10px; }
  .affiliations > *:nth-child(2) { border-top: 0; }
}

@media (max-width: 600px) {
  .teams-hero__title { font-size: 56px !important; }
  .teams-intro__text { border-right: 0; padding-right: 0; }
  .teams-intro__logo .logo--dark { --s: 1.05px; }
  .fit-actions { gap: 12px; }
  .fit-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .level__plate { font-size: 40px; }
  .site-footer .footer__inner { grid-template-columns: 1fr; }
}