/* ==========================================================================
   HAKKIMIZDA — kurumsal giriş + ekip kolajı, biz kimiz, hikâye, misyon/vizyon,
   değerler, ekip, alıntı, ofis, CTA
   ========================================================================== */

/* ---------- Giriş: iki sütunlu başlık + tam genişlik Türkiye haritası ---------- */
.about-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(32px, 5vw, 64px));
  padding-bottom: clamp(48px, 6vw, 88px);
  isolation: isolate;
  overflow: hidden;
}
.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 50% at 50% 70%, rgb(30 58 109 / .08), transparent 70%),
    linear-gradient(180deg, var(--bg-alt), var(--bg) 70%);
}

.about-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
}
.about-hero__title-wrap { display: grid; gap: 22px; justify-items: start; }
.about-hero__title {
  font-size: clamp(2.125rem, 1.3rem + 3vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.about-hero__side { display: grid; gap: 22px; padding-bottom: 6px; }
.about-hero__lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); }
.about-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.js .about-hero [data-hero-in] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--hero-i, 0) * 90ms);
}
.js .about-hero [data-hero-in].is-in { opacity: 1; transform: none; }

/* Harita sahnesi */
.map-stage {
  position: relative;
  margin-top: clamp(32px, 5vw, 64px);
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 64px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(40% 60% at 58% 20%, rgb(211 20 28 / .06), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}

.tr-map { display: block; width: 100%; height: auto; overflow: visible; }
/* Noktalar tek bir path: sıfır uzunluklu parçalar yuvarlak uçla nokta olarak çizilir */
.tr-map__dots { fill: none; stroke: var(--navy-100); stroke-width: 3.1; stroke-linecap: round; }
.tr-map__lines path {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: .55;
  /* Yollar pathLength="1" ile normalize edildi; uzunluktan bağımsız 1 → 0 çizilir */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.map-stage.is-in .tr-map__lines path {
  animation: tr-draw 1.6s var(--ease-out) forwards;
  animation-delay: calc(.4s + var(--i) * 110ms);
}
@keyframes tr-draw { to { stroke-dashoffset: 0; } }

.tr-map__pins circle { fill: var(--navy-900); stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; scale: 0; }
.map-stage.is-in .tr-map__pins circle {
  animation: tr-pop .5s var(--ease-spring) forwards;
  animation-delay: calc(1.2s + var(--i) * 110ms);
}
@keyframes tr-pop { to { scale: 1; } }

.tr-map__hq { fill: var(--red-600); stroke: #fff; stroke-width: 2.5; }
.tr-map__hq-ring {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: tr-ring 2.4s var(--ease-out) infinite;
}
@keyframes tr-ring {
  0% { opacity: .8; scale: 1; }
  100% { opacity: 0; scale: 2.6; }
}

/* Haritanın üstündeki kartlar */
.map-stage__stat,
.map-stage__hq {
  position: absolute;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.map-stage__stat { padding: 14px 20px; line-height: 1.2; }
.map-stage__stat b { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: var(--navy-900); }
.map-stage__stat > span { font-size: 14px; color: var(--muted); }
.map-stage__stat--a { left: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 40px); }
.map-stage__stat--b { right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 40px); }

.map-stage__hq {
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 4vw, 48px);
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
}
.map-stage__hq > span:last-child { display: grid; line-height: 1.3; }
.map-stage__hq b { font-size: 14.5px; }
.map-stage__hq small { font-size: 12.5px; color: var(--muted); }
.map-stage__hq-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--red-600);
  color: #fff;
}
.map-stage__hq-icon .i { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .tr-map__lines path { stroke-dashoffset: 0; }
  .tr-map__pins circle { scale: 1; }
  .tr-map__hq-ring { animation: none; opacity: 0; }
}

/* ---------- Biz kimiz: büyük açılış cümlesi + iki sütun metin ---------- */
.intro { display: grid; gap: 24px; }
.intro__statement, .intro__cols { max-width: 1100px; }
.intro__statement {
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.intro__statement span { color: var(--muted); }
.intro__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.intro__cols p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }

/* ---------- Hikâyemiz: yatay zaman çizelgesi ---------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* Noktaları birleştiren çizgi: soluk iz + görünür olunca dolan renkli çizgi */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 24px;
  right: calc(25% - 24px);
  top: 24px;
  height: 2px;
  background: var(--line-2);
}
.timeline::after {
  background: linear-gradient(90deg, var(--navy-900), var(--red-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-in-out) .2s;
}
.timeline.is-in::after { transform: scaleX(1); }

.timeline__item { position: relative; display: grid; gap: 6px; align-content: start; padding-right: 12px; }
.timeline__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--navy-800);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm);
}
.timeline__dot .i { width: 22px; height: 22px; }
.timeline__dot--brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgb(7 19 40 / .7);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.06em;
}
.timeline__dot--brand b { color: #ff5a61; }
.timeline__item small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-600);
}
.timeline__item h3 { font-size: 1.125rem; }
.timeline__item p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.timeline__item--now h3 { color: var(--navy-900); }

/* ---------- Misyon / vizyon ---------- */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mv__card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(28px, 3.5vw, 48px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}
.mv__card--mission {
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(211 20 28 / .28), transparent 60%),
    var(--navy-900);
  color: #fff;
}
.mv__card--vision { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.mv__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15);
}
.mv__card--vision .mv__icon { background: var(--red-50); color: var(--red-600); box-shadow: inset 0 0 0 1px var(--red-100); }
.mv__icon .i { width: 24px; height: 24px; }
.mv__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff6b72; }
.mv__card--vision .mv__label { color: var(--red-600); }
.mv__card h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing: -.025em; }
.mv__card p:last-child { font-size: 16px; line-height: 1.7; }
.mv__card--mission p:last-child { color: rgb(255 255 255 / .72); }
.mv__card--vision p:last-child { color: var(--ink-2); }

/* ---------- Alıntı ---------- */
.about-quote {
  position: relative;
  display: grid;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.about-quote__mark {
  font-size: 120px;
  font-weight: 800;
  line-height: .6;
  color: var(--red-600);
  opacity: .25;
}
.about-quote blockquote {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.about-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  font-size: 15px;
  color: var(--muted);
}
.about-quote figcaption strong { color: var(--ink); }
.about-quote .stars { display: inline-flex; gap: 2px; color: #fbbc04; }
.about-quote .stars .i { width: 18px; height: 18px; }

/* ---------- Değerler ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.value {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
/* Üstten soldan sağa dolan ince vurgu çizgisi */
.value::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-900), var(--red-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.value:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.value:hover::before { transform: scaleX(1); }

.value__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--navy-50);
  color: var(--navy-800);
  box-shadow: inset 0 0 0 1px var(--navy-100);
  transition: transform .4s var(--ease-spring);
}
.value__icon .i { width: 22px; height: 22px; }
.value:hover .value__icon { transform: translateY(-3px) rotate(-6deg); }
.value__icon--green { background: var(--green-100); color: var(--green-600); box-shadow: none; }
.value__icon--red { background: var(--red-50); color: var(--red-600); box-shadow: inset 0 0 0 1px var(--red-100); }
.value h3 { font-size: 1.1875rem; }
.value p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- Ekibimiz ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* Kurucu kartı iki satır boyunca uzanır */
.member--lead { grid-row: span 2; }

.member {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.member:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.member__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.member--lead .member__photo { aspect-ratio: auto; flex: 1; min-height: 320px; }
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .6s var(--ease-out);
}
.member:hover .member__photo img { transform: scale(1.04); }

/* Fotoğrafı olmayanlar için baş harfler */
.member__initials {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(70% 70% at 30% 20%, rgb(255 255 255 / .12), transparent 60%),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
  color: #fff;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.member__info { display: grid; gap: 2px; padding: 16px 18px 18px; }
.member__info h3 { font-size: 1.0625rem; }
.member__info p { font-size: 14px; color: var(--muted); }
.member--lead .member__info { padding: 20px 22px 22px; }
.member--lead .member__info h3 { font-size: 1.375rem; }
.member--lead .member__info p {
  justify-self: start;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--red-600);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- Ofis ---------- */
.company {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.company__copy { display: grid; gap: 20px; }
.company__facts { display: grid; gap: 10px; margin-top: 4px; }
.company__facts li { display: flex; align-items: center; gap: 14px; }
.company__facts li > span:last-child { display: grid; font-size: 15px; font-weight: 600; line-height: 1.4; }
.company__facts small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.company__facts a { transition: color .2s; }
.company__facts a:hover { color: var(--red-600); }
.company__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--navy-700);
}
.company__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Stilize harita kartı */
.map-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #eef2f8;
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.map-card__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(11 31 69 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(11 31 69 / .05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map-card__road {
  position: absolute;
  height: 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(11 31 69 / .06);
}
.map-card__road--1 { left: -10%; right: -10%; top: 42%; transform: rotate(-8deg); }
.map-card__road--2 { left: 30%; width: 14px; height: auto; top: -10%; bottom: -10%; transform: rotate(14deg); }
.map-card__road--3 { left: 55%; right: -10%; top: 72%; transform: rotate(18deg); height: 10px; }

.map-card__pin {
  position: absolute;
  left: 46%;
  top: 34%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50% 50% 50% 4px;
  background: var(--red-600);
  color: #fff;
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 12px 24px -8px rgb(211 20 28 / .7);
}
.map-card__pin .i { width: 24px; height: 24px; transform: rotate(45deg); }
/* Pin altında yayılan dalga */
.map-card__pin::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--red-600);
  transform: translate(-50%, 50%) rotate(45deg);
  animation: pin-wave 2.2s var(--ease-out) infinite;
}
@keyframes pin-wave {
  0% { opacity: .9; scale: .6; }
  100% { opacity: 0; scale: 3.4; }
}

.map-card__label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.map-card__label b { font-size: 16px; }
.map-card__label small { font-size: 13.5px; color: var(--muted); }
.map-card__label em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-700);
}
.map-card__label em .i { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.map-card:hover .map-card__label em .i { transform: translate(2px, -2px); }

/* ---------- CTA ---------- */
.cta-section { padding-top: clamp(56px, 6vw, 88px); }
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 140% at 100% 0%, rgb(211 20 28 / .3), transparent 60%),
    var(--navy-900);
  color: #fff;
}
.cta__copy { display: grid; gap: 10px; max-width: 640px; }
.cta__copy h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); letter-spacing: -.03em; }
.cta__copy p { font-size: 16px; color: rgb(255 255 255 / .7); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1060px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { flex-direction: column; align-items: flex-start; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .timeline::before, .timeline::after { display: none; }
}

@media (max-width: 960px) {
  .company { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv { grid-template-columns: 1fr; }
  .intro__cols { grid-template-columns: 1fr; gap: 16px; }
  .about-hero__head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .member--lead { grid-column: 1 / -1; grid-row: auto; }
  .member--lead .member__photo { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .member__info { padding: 12px 14px 14px; }
  .member__info h3 { font-size: 15px; }
  .member__info p { font-size: 12.5px; }
}

@media (max-width: 560px) {
  .map-stage { padding: 14px 8px 92px; border-radius: 22px; }
  .map-stage__hq { display: none; }
  .map-stage__stat { padding: 10px 14px; }
  .map-stage__stat--a { left: 12px; bottom: 12px; }
  .map-stage__stat--b { right: 12px; bottom: 12px; }
  .timeline { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .value { padding: 22px; }
  .cta__actions { width: 100%; }
  .cta__actions .btn { flex: 1 1 auto; }
}
.company__facts em { font-style: normal; font-weight: 500; color: var(--muted); }

/* ---------- Ekibimiz (v5): tek ızgara, renkli portreler ---------- */
.crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 24px); }

.crew-member { --tone: var(--navy-800); --tint: var(--navy-50); display: grid; gap: 4px; align-content: start; }
.crew-member--destek { --tone: var(--red-600); --tint: var(--red-50); }
.crew-member--kurucu { --tone: #fff; --tint: var(--navy-900); }

.crew-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.crew-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .7s var(--ease-out); }
.crew-member:hover .crew-photo img { transform: scale(1.04); }
.crew-photo__initials {
  display: grid; place-items: center; height: 100%;
  background: radial-gradient(70% 60% at 50% 40%, var(--surface), transparent 70%), var(--bg-alt);
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); font-weight: 800; letter-spacing: -.04em;
  color: var(--navy-800); opacity: .5;
}
.crew-member__tag {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: var(--tint); color: var(--tone);
  font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 12px rgb(8 18 40 / .12);
}
.crew-member__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crew-member--kurucu .crew-member__tag::before { background: var(--red-600); }
.crew-member h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.crew-member p { font-size: 14px; line-height: 1.4; color: var(--muted); }

.crew-join {
  display: grid; align-content: center; justify-items: start; gap: 12px;
  aspect-ratio: 4 / 5;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 100% 0%, rgb(211 20 28 / .3), transparent 60%),
    var(--navy-900);
  color: #fff;
}
.crew-join__count { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.crew-join p { font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / .75); }
.crew-join .link-arrow { color: #fff; border-color: rgb(255 255 255 / .4); }

@media (max-width: 1060px) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crew-join { grid-column: span 2; aspect-ratio: auto; } }
@media (max-width: 640px) {
  .crew { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .crew-join { grid-column: auto; align-self: stretch; margin-bottom: 52px; padding: 16px; }
  .crew-join__count { font-size: 1.25rem; }
  .crew-join p { font-size: 13px; }
  .crew-photo { margin-bottom: 10px; }
  .crew-member h3 { font-size: 15px; }
  .crew-member p { font-size: 12.5px; }
  .crew-member__tag { left: 8px; bottom: 8px; font-size: 11px; padding: 4px 9px 4px 7px; }
}