/* Griffiths & Co. — team page. From handoff 2 (option 2c, "Founder First").
   Loads after griffiths.css, which supplies the tokens, buttons and nav. */

/* ==========================================================================
   Griffiths & Co. — Team page (option 2c, "Founder First")
   Depends on griffiths.css for tokens, buttons, nav and the box-sizing reset.
   Load AFTER griffiths.css.
   ========================================================================== */

/* One addition to the shared button set: navy solid, used on light grounds. */
.gc-btn--navy {
  height: 58px;
  padding: 0 34px;
  background: var(--gc-brand);
  color: var(--gc-bone);
}
.gc-btn--navy:hover { background: #002a8f; }

.tm-eyebrow {
  font: 500 11px/1 var(--gc-ui);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #6B5D3C;
}
/* The page needed a real h1: it is the eyebrow line above the founder quote,
   styled exactly as the line that used to sit there alone. */
h1.tm-eyebrow { margin: 0 0 6px; }
.tm-eyebrow--sub { opacity: .8; }

.tm-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 11px/1 var(--gc-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gc-midnight);
  border-bottom: 1px solid rgba(0, 18, 56, .4);
  align-self: flex-start;
}
.tm-link:hover { border-bottom-color: var(--gc-midnight); }

/* ------------------------------------------------------------- founder */

.tm-founder {
  background: var(--gc-sand);
  /* the nav is fixed and this is the first section, so the eyebrow was sitting
     underneath it on load */
  padding: calc(var(--gc-nav-h-scrolled) + var(--gc-promo-h) + clamp(36px, 4.5vw, 64px)) var(--gc-gutter) clamp(28px, 3.4vw, 48px);
}
.tm-founder__inner {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);   /* larger than a bench card */
  gap: clamp(26px, 4vw, 60px);
  align-items: stretch;   /* the photo matches the copy column, so the contact
                             lines can no longer run past the bottom of it */
}

/* Boxed like a bench card, just larger — it was bleeding to the viewport edge */
.tm-founder__media {
  width: 100%;
  min-height: 460px;      /* no fixed ratio: the copy column sets the height */
  overflow: hidden;
  background: #D6D1C6;
  border: 1px solid rgba(0, 18, 56, .18);
}
.tm-founder__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 18%;
  filter: saturate(.9) contrast(1.03);
}

.tm-founder__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(4px, 1vw, 14px) 0;
}

.tm-quote {
  margin: 0;
  font: 400 clamp(24px, 2.7vw, 36px)/1.36 var(--gc-display);
  color: var(--gc-midnight);
  max-width: 600px;
  text-wrap: pretty;
}

.tm-rule { width: 64px; height: 1px; background: rgba(0, 18, 56, .35); }

.tm-person { display: flex; flex-direction: column; gap: 8px; }
.tm-person__name { font: 400 clamp(19px, 1.6vw, 23px)/1.2 var(--gc-display); color: var(--gc-midnight); }
.tm-person__role {
  font: 500 10.5px/1 var(--gc-ui); letter-spacing: .24em; text-transform: uppercase; color: #6B5D3C;
}

.tm-founder__note {
  font: 300 clamp(14px, 1.1vw, 15.5px)/1.7 var(--gc-ui);
  color: #4A4E58; max-width: 480px; text-wrap: pretty;
  /* bios are stored as plain text, so the blank line between paragraphs has
     to be honoured rather than collapsed */
  white-space: pre-line;
}

.tm-founder__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }

/* --------------------------------------------------------------- bench */

.tm-bench { background: var(--gc-sand); padding: clamp(48px, 6vw, 80px) var(--gc-gutter) clamp(56px, 7vw, 88px); }

.tm-bench__head { display: flex; align-items: center; gap: 24px; padding-bottom: clamp(24px, 3vw, 32px); }
.tm-bench__head h2 { font: 400 clamp(26px, 2.6vw, 34px)/1 var(--gc-display); color: var(--gc-midnight); white-space: nowrap; }
.tm-bench__line { flex: 1; height: 1px; background: rgba(0, 18, 56, .22); }
.tm-bench__meta {
  font: 500 10.5px/1 var(--gc-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6B5D3C;
  white-space: nowrap;
}

/* padding/list-style: .tm-grid is a <ul>, and the browser default 40px
   padding-left was pushing the cards out of line with everything else. */
/* minmax(0, 1fr), not 1fr: a bare 1fr column grows to fit its widest content,
   so a longer name or email widened that card and its 3:4 photo grew taller
   than the rest. minmax(0, …) keeps every column, and every photo, equal. */
.tm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }

.tm-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #EFEAE0;
  border: 1px solid rgba(0, 18, 56, .18);
}

.tm-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: #D6D1C6; }
.tm-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 14%;
  filter: saturate(.9) contrast(1.03);
}

/* Ben, Sophie and Jasmin sit low in their frames — shifting the crop further
   down the file lifts each of them in the capsule without a re-crop. */
.tm-card__media[data-tm="tm-ben"] img,
.tm-card__media[data-tm="tm-sophie"] img,
.tm-card__media[data-tm="tm-jasmin"] img { object-position: center 24%; }
/* Ben is a full-length shot; everyone else supplied a chest-up crop, so a
   shared object-position cannot serve both. Zoom him onto the face. */
.tm-card__media[data-tm="tm-ben"] img { transform: scale(1.55); transform-origin: 46% 20%; }


.tm-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; }
.tm-card__body h3 { font: 400 clamp(19px, 1.6vw, 22px)/1.2 var(--gc-display); color: var(--gc-midnight); }
.tm-card__role {
  font: 500 9.5px/1.4 var(--gc-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B5D3C;
}
.tm-card .tm-link { margin-top: 6px; font-size: 10.5px; letter-spacing: .18em; }

/* ----------------------------------------------------------------- cta */

.tm-cta {
  position: relative;
  overflow: hidden;
  background: var(--gc-brand);
  padding: clamp(48px, 6vw, 76px) var(--gc-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
.tm-cta h2 {
  font: 400 clamp(26px, 3.2vw, 40px)/1.2 var(--gc-display);
  color: var(--gc-bone);
  max-width: 640px;
  text-wrap: pretty;
}

/* ============================== responsive ============================= */

@media (max-width: 1100px) {
  .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* the grid moved to .tm-founder__inner when the founder was boxed */
  .tm-founder__inner { grid-template-columns: 1fr; }
  .tm-founder__media { aspect-ratio: 4 / 3; max-width: 420px; }
  .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tm-bench__meta { display: none; }
  .tm-founder__actions .gc-btn--navy { width: 100%; }
  .tm-cta { flex-direction: column; align-items: stretch; }
  .tm-cta .gc-btn--primary { width: 100%; }
}

@media (max-width: 520px) {
  .tm-grid { grid-template-columns: 1fr; }
}

/* These pages are sand top to bottom, so the homepage's transparent-at-rest bar
   would leave light type on cream. At rest the bar is solid brand blue; once
   the page scrolls it crosses into the same glass the homepage uses, and back
   to solid when it returns to the top. */
.gc-nav--glass {
  /* height comes from the promo bar plus the nav row now, not a fixed value */
  height: auto;
  background: var(--gc-brand);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 20px 44px -30px rgba(0, 6, 22, .55);
}
.gc-nav--glass.is-scrolled {
  height: auto;
  background: linear-gradient(180deg, rgba(0, 34, 122, .58) 0%, rgba(0, 21, 78, .80) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
          backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 20px 44px -26px rgba(0, 6, 22, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gc-nav--glass, .gc-nav--glass.is-scrolled { background: var(--gc-brand); }
}
.gc-nav--glass .gc-nav__brand img { height: 40px; }

/* Team members with no photo_key yet (added through the admin panel, or
   awaiting a headshot) get a monogram rather than a broken/empty frame. */
.tm-card__media--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #E4DED1 0%, #D3CCBD 100%);
}
.tm-card__media--empty span {
  font: 400 clamp(38px, 4vw, 54px)/1 var(--gc-display);
  color: rgba(0, 18, 56, .34);
}



/* Card contact block: WhatsApp with its glyph, email beneath. Matches the way
   the homepage team rows present the same two actions. */
.tm-card__contact { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.tm-link--wa { display: inline-flex; align-items: center; gap: 8px; }
.tm-link--wa svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.tm-link--em {
  font: 500 10px/1.4 var(--gc-ui);
  letter-spacing: .04em;
  text-transform: none;
  color: #6B5D3C;
  border-bottom-color: rgba(107, 93, 60, .4);
  word-break: break-all;
}
.tm-link--em:hover { color: var(--gc-midnight); border-bottom-color: var(--gc-midnight); }

/* ==========================================================================
   PROFILE CAPSULE — opened by clicking a team card
   ========================================================================== */

.tm-card { cursor: pointer; transition: transform .25s var(--gc-ease), box-shadow .25s var(--gc-ease); }
.tm-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(0, 18, 56, .55); }
.tm-card:focus-visible { outline: 2px solid var(--gc-champagne); outline-offset: 3px; }

/* The founder portrait opens the same dialog. It is a full-bleed image rather
   than a card, so it lifts by zooming the photo instead of the whole block. */
.tm-founder__media[data-name] { cursor: pointer; }
.tm-founder__media[data-name] img { transition: transform .45s var(--gc-ease), filter .25s var(--gc-ease); }
.tm-founder__media[data-name]:hover img { transform: scale(1.03); filter: saturate(.96) contrast(1.05); }
.tm-founder__media[data-name]:focus-visible { outline: 2px solid var(--gc-champagne); outline-offset: 3px; }

.tm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.tm-modal[hidden] { display: none; }
.tm-modal__scrim { position: absolute; inset: 0; background: rgba(0, 10, 34, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.tm-modal__capsule {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  width: min(760px, 100%); max-height: min(560px, 90vh);
  background: var(--gc-sand);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 6, 22, .8);
  animation: tm-capsule-in .34s var(--gc-ease) both;
}
@keyframes tm-capsule-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.tm-modal__media { background: var(--gc-midnight); }
.tm-modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; }

.tm-modal__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 42px); overflow-y: auto; }
.tm-modal__name { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--gc-display); color: var(--gc-midnight); }
.tm-modal__role { font: 500 10.5px/1 var(--gc-ui); letter-spacing: .24em; text-transform: uppercase; color: #6B5D3C; }
.tm-modal__bio  { font: 300 clamp(14px, 1.1vw, 15.5px)/1.72 var(--gc-ui); color: #4A4E58; white-space: pre-line; }

.tm-modal__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; }
.tm-modal__wa {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  background: var(--gc-brand); color: var(--gc-bone);
  font: 500 11px/1 var(--gc-ui); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.tm-modal__wa svg { width: 15px; height: 15px; fill: currentColor; }
.tm-modal__wa:hover { background: #002a8f; }
.tm-modal__em { font: 500 12px/1.4 var(--gc-ui); color: #6B5D3C; border-bottom: 1px solid rgba(107,93,60,.4); word-break: break-all; text-decoration: none; }
.tm-modal__em:hover { color: var(--gc-midnight); border-bottom-color: var(--gc-midnight); }

.tm-modal__close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  background: rgba(243,239,231,.9); border: 0; border-radius: 50%;
  color: var(--gc-midnight); font-size: 22px; line-height: 1;
}
.tm-modal__close:hover { background: #fff; }

@media (max-width: 640px) {
  .tm-modal__capsule { grid-template-columns: 1fr; max-height: 88vh; }
  .tm-modal__media { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-card, .tm-modal__capsule { transition: none; animation: none; }
}

/* Tighter cards. .tm-link carries min-height:44px and a border-bottom for the
   founder block, which on a card became a tall box with an underline. */
.tm-card__body { gap: 7px; padding: 18px 18px 20px; }
.tm-card__body h3 { line-height: 1.15; }
.tm-card__role { margin-bottom: 2px; }
.tm-card__contact { gap: 7px; margin-top: 8px; }
.tm-card .tm-link,
.tm-founder__actions .tm-link { min-height: 0; border-bottom: 0; text-decoration: none; font-size: 10.5px; letter-spacing: .12em; }
/* match the WhatsApp line in colour, size and weight. Only the case differs,
   since an uppercased email address reads badly. Card emails get tighter
   tracking so the longest address fits the now equal-width cards; the
   founder's keeps .12em (overridden below). */
.tm-card .tm-link--em,
.tm-founder__actions .tm-link--em {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10.5px/1 var(--gc-ui);
  letter-spacing: .12em;
  text-transform: none;
  color: var(--gc-midnight);
  word-break: normal;
}
.tm-card .tm-link--em { letter-spacing: .04em; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tm-card .tm-link--em svg,
.tm-founder__actions .tm-link--em svg { width: 13px; height: 13px; flex: none; }
.tm-card .tm-link:hover,
.tm-founder__actions .tm-link:hover { color: var(--gc-midnight); }

/* Founder contact: same treatment as the cards but scaled up — it sits in a
   much larger block, where card-sized type didn't read as tappable. */
/* A 40px touch target on each link plus a 12px gap left a ~39px hole between
   WhatsApp and the email on a mouse pointer. Tighten both there; a finger still
   gets the full target under (pointer: coarse). */
.tm-founder__actions { gap: 2px; margin-top: 8px; }
.tm-founder__actions .tm-link {
  font-size: 13px;
  letter-spacing: .14em;
  gap: 11px;
  min-height: 30px;
  align-items: center;
}
@media (pointer: coarse) {
  .tm-founder__actions { gap: 8px; }
  .tm-founder__actions .tm-link { min-height: 44px; }
}
.tm-founder__actions .tm-link svg,
.tm-founder__actions .tm-link--em svg { width: 17px; height: 17px; }
.tm-founder__actions .tm-link:hover { text-decoration: underline; text-underline-offset: 5px; }