/* ==========================================================================
   Team member landing page, the shareable profile card, its enquiry form and
   the "who we are" band. Everything else on the page (post cards, fields,
   buttons, section heads) is the shared design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slim header
   -------------------------------------------------------------------------- */
.k-header--slim .k-header__inner { justify-content: space-between; }
.k-header__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: color var(--t) var(--ease);
}
.k-header__back svg { transition: transform var(--t) var(--ease); }
.k-header__back:hover { color: var(--ink); }
.k-header__back:hover svg { transform: translateX(-3px); }

/* The main header hides its actions below 1300px because the burger takes
   over. The slim header has no burger, so they have to stay, the meeting
   button is the whole point of a shareable card. */
@media (max-width: 1300px) {
  .k-header--slim .k-header__login,
  .k-header--slim .k-header__actions .k-btn { display: inline-flex; }
}
@media (max-width: 760px) {
  /* The number is already on the profile card, twice. */
  .k-header--slim .k-header__login { display: none; }
}
/* The main header can push everything behind a burger when it runs out of
   room. This one has no burger, so the three things in it have to go on
   fitting all the way down. Each step gives up the least useful pixels first:
   the words beside the chevron, then the size of the mark and the padding on
   the button, then the chevron itself. The button never shrinks away, because
   booking the meeting is what the page is for. */
@media (max-width: 560px) {
  .k-header__back span { display: none; }
  .k-header--slim .k-header__inner { gap: 10px; }
  .k-header--slim .k-header__actions { gap: 8px; }
  .k-header--slim .k-logo img { height: 25px; }
  .k-header--slim .k-header__actions .k-btn { padding: 9px 14px; font-size: .84rem; }
}
@media (max-width: 400px) {
  /* The chevron goes too: the mark beside it is already a link home, so it was
     a second way to do the same thing taking room the button needed. */
  .k-header--slim .k-header__back { display: none; }
  .k-header--slim .k-logo img { height: 23px; }
  .k-header--slim .k-header__actions .k-btn { padding: 9px 12px; font-size: .8rem; gap: 6px; }
}

/* --------------------------------------------------------------------------
   Hero: profile card + form
   -------------------------------------------------------------------------- */
.rep-hero { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 6vw, 90px); }
.rep-hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .84fr);
  gap: clamp(24px, 3vw, 44px); align-items: start;
}
/* The card is first in the DOM so a phone shows who this is before the form.
   On desktop it moves to the right, where the form reads as the main action. */
.rep-hero__grid > .rep-card { order: 2; }
.rep-hero__grid > .rep-form-col { order: 1; }

/* --------------------------------------------------------------------------
   Profile card
   -------------------------------------------------------------------------- */
.rep-card {
  position: sticky; top: calc(var(--sticky-top) + 22px);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff;
  text-align: center;
}
.rep-card__photo {
  width: 128px; height: 128px; margin: 0 auto 18px;
  border-radius: 50%; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line);
}
.rep-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* A rep with no photo yet: their initials, so the card keeps its shape. */
.rep-card__initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--blue);
}

.rep-card__name { font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -.025em; }
.rep-card__role {
  margin-top: 6px; font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan);
}
.rep-card__intro { margin-top: 14px; font-size: .94rem; color: var(--muted); line-height: 1.6; }

.rep-card__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.rep-card__contact a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.rep-card__contact a .k-icon { color: var(--blue); flex: none; }
.rep-card__contact a:hover { border-color: var(--cyan); background: #fff; color: var(--ink); }

.rep-card__socials { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.rep-card__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--muted); background: #fff;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rep-card__socials a:hover { color: var(--blue); border-color: var(--cyan); transform: translateY(-2px); }

/* The bio reads straight on, under the intro it continues. It used to be a
   0fr → 1fr collapse behind a "Read more", which is why there is no animation
   or overflow left here: there is nothing to open. */
.rep-card__bio { text-align: left; }
.rep-card__bio p { font-size: .89rem; color: var(--muted); line-height: 1.65; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Form column
   -------------------------------------------------------------------------- */
.rep-form-col { min-width: 0; }
.rep-form { margin-top: 26px; }
.rep-form .field__opt { font-weight: 500; color: var(--muted-2); font-size: .78rem; }

.rep-form__or {
  position: relative; text-align: center; margin: 18px 0;
  font-size: .8rem; color: var(--muted-2);
}
.rep-form__or::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line);
}
.rep-form__or span { position: relative; background: #fff; padding: 0 12px; }

/* --------------------------------------------------------------------------
   Who we are
   -------------------------------------------------------------------------- */
.rep-about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.rep-about__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.rep-about__media img {
  width: 100%; border-radius: var(--r-xl); border: 1px solid var(--line);
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* The solutions cards carry an icon beside the product name. */
.page-rep .post__cat { display: inline-flex; align-items: center; gap: 6px; }
.page-rep .post__cat .k-icon { color: var(--accent, var(--blue)); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .rep-hero__grid { grid-template-columns: 1fr; }
  /* Stacked, the card leads. It is the point of the page. */
  .rep-hero__grid > .rep-card { order: 1; position: static; max-width: 520px; margin-inline: auto; }
  .rep-hero__grid > .rep-form-col { order: 2; }
  .rep-about { grid-template-columns: 1fr; }
  .rep-about__media { order: -1; }
}

@media (max-width: 620px) {
  .rep-card { padding: 22px 18px; }
  .rep-card__photo { width: 104px; height: 104px; }
}