/* WRK Fuels team pages
   Standalone stylesheet. Mirrors the design tokens used by the main site
   (brand green, charcoal, Montserrat, 896px content column) so these pages
   sit alongside the app build without depending on its Tailwind output. */

:root {
  --brand: #03472e;
  --brand-dark: #02351f;
  --black: #111111;
  --charcoal: #3f3f3f;
  --n900: #111111;
  --n700: #3f3f3f;
  --n600: #4f4f4f;
  --n500: #6b6b6b;
  --n200: #e2e2e2;
  --n100: #ededed;
  --n50: #f5f5f5;
  --wrap: 1180px;
  --pad: 28px;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.t-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.t-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--brand);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
}
.t-skip:focus { left: 8px; top: 8px; }

/* ---------- scroll progress (matches the app's top bar) ---------- */
.t-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.t-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 150ms ease-out;
}

/* ---------- header ---------- */
.t-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms, box-shadow 300ms;
}
.t-header.is-stuck {
  border-bottom-color: var(--n200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.t-bar {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.t-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.t-logo img { height: 30px; width: auto; }
.t-logo span {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1;
  transform: translateY(1px);
}

.t-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 768px) { .t-nav { display: flex; } }

.t-nav a.t-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--n600);
  text-decoration: none;
  transition: color 200ms;
}
.t-nav a.t-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms;
}
.t-nav a.t-link:hover { color: var(--brand); }
.t-nav a.t-link:hover::after { transform: scaleX(1); }
.t-nav a.t-link[aria-current="page"] { color: var(--brand); }
.t-nav a.t-link[aria-current="page"]::after { transform: scaleX(1); }

.t-cta {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  padding: 11px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 180ms ease;
}
.t-cta:hover { background: var(--brand-dark); }

.t-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--n700);
  cursor: pointer;
}
@media (min-width: 768px) { .t-burger { display: none; } }

.t-mobile {
  display: none;
  border-top: 1px solid var(--n200);
  background: #fff;
  padding-block: 12px 20px;
}
.t-mobile.is-open { display: block; }
.t-mobile a {
  display: block;
  padding: 8px 0;
  font-weight: 500;
  color: var(--n700);
  text-decoration: none;
}
.t-mobile a.t-mobile-cta { color: var(--brand); font-weight: 600; }

/* ---------- shared type ---------- */
.t-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 16px;
}
.t-h1 {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--n900);
  text-wrap: balance;
  margin: 0;
}
.t-h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--n900);
  text-wrap: balance;
  margin: 0;
}
.t-h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n900);
  margin: 0;
}
.t-lede {
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--n600);
  max-width: 40em;
}
.t-body {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--n600);
  max-width: 40em;
}
.t-rule {
  width: 32px;
  height: 2px;
  background: var(--brand);
  border: 0;
  margin: 14px 0 18px;
}

/* ---------- hero ---------- */
.t-hero { position: relative; overflow: hidden; }
.t-hero-inner { padding-block: 72px 48px; }
@media (min-width: 768px) { .t-hero-inner { padding-block: 112px 64px; } }
.t-glow {
  position: absolute;
  top: -160px;
  right: -128px;
  width: 36rem;
  height: 36rem;
  border-radius: 9999px;
  display: none;
}

/* ---------- reveal on scroll ---------- */
.t-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.t-reveal.is-in { opacity: 1; transform: none; }

/* ---------- group label ---------- */
.t-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.t-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--n200);
}

/* ---------- feature card (leadership) ---------- */
.t-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 48px;
  transition: transform 300ms ease-out;
}
@media (min-width: 640px) {
  .t-feature {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    max-width: 940px;
    padding: 28px;
    margin-left: -28px;
    border-radius: 6px;
    transition: background 240ms ease;
  }
  .t-feature:hover { background: var(--n50); }
}
.t-feature:hover .t-feature-name { color: var(--brand); }
.t-feature:last-of-type { margin-bottom: 76px; }
.t-feature .t-photo { max-width: 258px; }
.t-feature-name {
  font-family: var(--display);
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--n900);
}
.t-feature-role {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.t-feature-blurb {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--n600);
  max-width: 34em;
}
.t-feature-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.t-feature-more span { transition: transform 200ms; }
.t-feature:hover .t-feature-more span { transform: translateX(4px); }

/* ---------- team grid ---------- */
.t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 232px));
  justify-content: start;
  gap: 40px 26px;
  padding-bottom: 96px;
  align-items: start;
}

.t-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 300ms ease-out;
}
.t-card:hover .t-name { color: var(--brand); }

.t-photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--n100);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--n200);
}
.t-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.02);
  transform: scale(1);
  transition: filter 500ms ease, transform 700ms ease;
}
.t-card:hover .t-photo img,
.t-card:focus-visible .t-photo img {
  filter: saturate(1);
  transform: scale(1.04);
}

/* whole photo darkens slightly so the panel reads as part of the image */
.t-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.t-card:hover .t-photo::after,
.t-card:focus-visible .t-photo::after { opacity: 1; }

/* the panel that rises on hover; top edge fades into the photo */
.t-panel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  color: #fff;
  padding: 46px 18px 16px;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.97) 0%,
    rgba(20, 20, 20, 0.95) 58%,
    rgba(20, 20, 20, 0) 100%
  );
  transform: translateY(101%);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.t-card:hover .t-panel,
.t-card:focus-visible .t-panel { transform: translateY(0); }
.t-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.t-panel-rule {
  width: 24px;
  height: 2px;
  background: #ffffff;
  margin: 0 0 10px;
}
.t-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.t-panel-more span { transition: transform 200ms; }
.t-card:hover .t-panel-more span { transform: translateX(4px); }

.t-name {
  font-family: var(--display);
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n900);
}
.t-role {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}
.t-role-alt {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--n500);
}

.t-underline {
  width: 24px;
  height: 2px;
  background: var(--brand);
  margin-top: 10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease-out;
}
.t-card:hover .t-underline,
.t-card:focus-visible .t-underline { transform: scaleX(1); }

/* touch devices: no hover, so show the summary under the card instead */
.t-touch-note {
  display: none;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--n600);
}
@media (hover: none) {
  .t-panel { display: none; }
  .t-photo img { filter: saturate(1); }
  .t-touch-note { display: block; }
  .t-underline { transform: scaleX(1); }
}

/* ---------- join / closing strip ---------- */
.t-strip {
  background: var(--n50);
  border-top: 1px solid var(--n200);
  border-bottom: 1px solid var(--n200);
}
.t-strip-inner { padding-block: 64px; }
.t-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.t-textlink span { transition: transform 200ms; }
.t-textlink:hover span { transform: translateX(4px); }

/* ---------- profile page ---------- */
.t-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: 40px 72px;
}
@media (min-width: 768px) {
  .t-profile {
    grid-template-columns: 300px 1fr;
    gap: 56px;
    padding-block: 64px 104px;
  }
}
.t-profile-photo {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--n200);
  max-width: 300px;
}
.t-profile-photo img { width: 100%; height: auto; }

.t-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--n600);
  text-decoration: none;
  transition: color 200ms;
}
.t-back:hover { color: var(--brand); }
.t-back span { transition: transform 200ms; }
.t-back:hover span { transform: translateX(-4px); }

.t-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--n200);
}
.t-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--n200);
  font-size: 14px;
}
.t-facts dt, .t-facts .t-fact-key {
  color: var(--n500);
  font-weight: 500;
}
.t-facts .t-fact-val { font-weight: 600; text-align: right; }

.t-does {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 40em;
}
.t-does li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--n600);
}
.t-does li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--brand);
}

.t-block { margin-top: 48px; }

.t-contactcard {
  margin-top: 48px;
  border: 1px solid var(--n200);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  padding: 26px;
  background: var(--n50);
}

/* ---------- footer ---------- */
.t-footer {
  background: var(--black);
  color: #a8a8a8;
}
.t-footer a:hover { color: #fff; }
.t-footer-inner {
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 640px) {
  .t-footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.t-footer-logo { display: inline-flex; align-items: center; gap: 10px; }
.t-footer-logo img { height: 26px; width: auto; }
.t-footer-logo span {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  transform: translateY(1px);
}
.t-footer p { margin: 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .t-reveal { opacity: 1; transform: none; }
}

/* --- tighten the header nav between 768px and 880px so the fifth link
   ("Our team") doesn't crowd the logo. Must stay last to win on source order. --- */
@media (min-width: 768px) and (max-width: 879px) {
  .t-nav { gap: 0.95rem; }
  .t-nav a.t-link { font-size: 13px; white-space: nowrap; }
  .t-cta { padding: 10px 14px; font-size: 13px; }
}


/* ============ MOBILE ============ */
@media (max-width: 639px) {
  /* two cards per row instead of one full-width photo per screen */
  .t-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
    padding-bottom: 64px;
  }
  .t-name { font-size: 14px; margin-top: 12px; }
  .t-role, .t-role-alt { font-size: 12px; }
  /* the full summary is too cramped in a two-up grid; the profile page has it.
     Show a short tap cue instead so the card still reads as a link. */
  .t-touch-note { display: none; }
  .t-card .t-underline { display: none; }
  .t-card::after {
    content: "View profile \2192";
    display: block;
    margin-top: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
  }

  /* partner cards: photo beside the name rather than stacked full-bleed */
  .t-feature {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 36px;
  }
  .t-feature:last-of-type { margin-bottom: 56px; }
  .t-feature .t-photo { max-width: 104px; }
  .t-feature-name { font-size: 19px; }
  .t-feature-role { font-size: 13px; margin-top: 5px; }
  .t-feature-blurb { font-size: 14px; line-height: 1.65; margin-top: 12px; }
  .t-feature-more { font-size: 13px; margin-top: 14px; }

  /* profile pages: photo, then who it is, then the detail table.
     display:contents promotes the left column's children so they can be
     reordered around the right column. */
  .t-profile { display: flex; flex-direction: column; }
  .t-profile > div:first-child { display: contents; }
  .t-profile-photo { order: 1; max-width: 190px; }
  .t-profile > div:last-child { order: 2; }
  .t-facts { order: 3; margin-top: 8px; }
  .t-h1 { font-size: clamp(30px, 9vw, 40px); }
  .t-lede { font-size: 16px; margin-top: 20px; }
  .t-block { margin-top: 36px; }
  .t-facts li { font-size: 13px; padding: 11px 0; }
  .t-contactcard { padding: 20px; margin-top: 36px; }
  .t-group { margin-bottom: 20px; }

  /* bigger tap target on the menu button */
  .t-burger { padding: 10px; margin-right: -10px; }
  .t-mobile a { padding: 11px 0; }
}

/* very narrow phones: one column reads better than two cramped ones */
@media (max-width: 359px) {
  .t-grid { grid-template-columns: minmax(0, 1fr); }
  .t-feature { grid-template-columns: 88px minmax(0, 1fr); }
}

/* Keep expanded software navigation comfortable on tablets. */
@media (min-width:768px) and (max-width:1023px){.t-nav{display:none}.t-burger{display:inline-flex}}
@media(min-width:1024px){.t-nav{gap:18px}}
/* Shared responsive navigation and accessible touch targets. */
.t-nav{gap:18px}
.t-nav a,.t-mobile a{min-height:44px;align-content:center}
.t-mobile{max-height:calc(100dvh - 90px);overflow-y:auto}
.t-photo img{max-width:100%}
@media(min-width:768px) and (max-width:1099px){.t-nav{display:none}.t-burger{display:inline-flex}}
@media(min-width:1100px){.t-nav{display:flex;gap:18px}.t-burger{display:none}.t-mobile,.t-mobile.is-open{display:none}}
@media(max-width:639px){input,select,textarea{font-size:16px}}

/* ---------- footer legal bar ---------- */
.t-footer-legal {
  padding-block: 20px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 32px;
}
.t-footer-legal p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #8d8d8d; }
.t-footer-legal .t-entity { color: #a8a8a8; }
.t-legal-links { display: flex; gap: 22px; }
.t-legal-links a { color: #c9c9c9; text-decoration: none; }
.t-legal-links a:hover { color: #fff; }
.t-footer-inner { padding-block: 44px 24px; }
@media (max-width: 639px) {
  .t-footer-legal { flex-direction: column; gap: 12px; }
}


/* ---------- team page refinements ---------- */

/* a location line, so an owner can see who is near them */
.t-where {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--n500);
}
.t-card .t-where { margin-top: 5px; }

/* the leadership blurb reads better at a controlled measure */
.t-feature-blurb { max-width: 52ch; }
.t-feature-role { margin-top: 4px; }

/* consultant cards: quiet card treatment instead of a bare photo */
.t-card {
  padding-bottom: 4px;
  transition: transform 240ms ease;
}
.t-card:hover { transform: translateY(-2px); }
.t-card .t-name { margin-top: 16px; }

/* section groups need more air above them than below */
.t-group { margin-top: 8px; }
.t-section + .t-section { padding-top: 8px; }

@media (max-width: 639px) {
  .t-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; }
  .t-feature { margin-bottom: 36px; }
}