/* ===== Team Member Detail Pages ===== */

/* Tech-color tokens per body (matches our-team avatar colors) */
.tmd-lead    { --tm: #ff5b6c; --tm-soft: rgba(255,91,108,0.12); --tm-glow: rgba(255,91,108,0.3); --tm-strong: #c2354b; --tm-text: #fff; }
.tmd-shopify { --tm: #a4d65e; --tm-soft: rgba(164,214,94,0.14); --tm-glow: rgba(164,214,94,0.35); --tm-strong: #6fa641; --tm-text: #182a00; }
.tmd-design  { --tm: #e8c47a; --tm-soft: rgba(232,196,122,0.14); --tm-glow: rgba(232,196,122,0.35); --tm-strong: #b8954b; --tm-text: #2a1f00; }

/* ===== Hero ===== */
.tmd-hero {
   padding: 90px 0 70px;
   position: relative;
   overflow: hidden;
   background: #0a0a0a;
}
@media (max-width: 767px) { .tmd-hero { padding: 50px 0; } }
.tmd-hero::before {
   content: "";
   position: absolute;
   top: -25%;
   right: -10%;
   width: 600px;
   height: 600px;
   background: var(--tm);
   border-radius: 50%;
   filter: blur(160px);
   opacity: 0.18;
   pointer-events: none;
}
.tmd-hero__grid {
   display: grid;
   grid-template-columns: 360px 1fr;
   gap: 60px;
   align-items: center;
   position: relative;
   z-index: 1;
}
@media (max-width: 991px) { .tmd-hero__grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } }

.tmd-hero__crumb {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   font-weight: 500;
   color: #888;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 20px;
}
.tmd-hero__crumb a { color: #c0c0c0; text-decoration: none; }
.tmd-hero__crumb i { font-size: 9px; opacity: 0.5; }
.tmd-hero__crumb-current { color: var(--tm); }

.tmd-hero__avatar-wrap {
   position: relative;
   width: 360px;
   max-width: 100%;
   aspect-ratio: 1;
   margin: 0 auto;
}
@media (max-width: 991px) { .tmd-hero__avatar-wrap { width: 240px; } }
.tmd-hero__avatar-wrap::before {
   content: "";
   position: absolute;
   inset: -10px;
   border: 1px dashed rgba(255,255,255,0.1);
   border-radius: 50%;
   animation: tmd-rotate 26s linear infinite;
}
.tmd-hero__avatar-wrap::after {
   content: "";
   position: absolute;
   inset: 8%;
   border-radius: 50%;
   background: radial-gradient(circle, var(--tm-soft) 0%, transparent 70%);
   z-index: 0;
}
@keyframes tmd-rotate { to { transform: rotate(360deg); } }
.tmd-hero__avatar {
   position: relative;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: clamp(80px, 12vw, 130px);
   font-weight: 700;
   letter-spacing: -3px;
   border: 2px solid rgba(255,255,255,0.1);
   z-index: 1;
}
.tmd-lead    .tmd-hero__avatar { background: linear-gradient(135deg, #ff5b6c 0%, #c2354b 100%); color: #fff; }
.tmd-shopify .tmd-hero__avatar { background: linear-gradient(135deg, #a4d65e 0%, #6fa641 100%); color: #182a00; }
.tmd-design  .tmd-hero__avatar { background: linear-gradient(135deg, #e8c47a 0%, #b8954b 100%); color: #2a1f00; }

.tmd-hero__avail {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   padding: 8px 18px;
   font-size: 12px;
   font-weight: 600;
   color: #c5e8c5;
   background: rgba(46, 160, 67, 0.12);
   border: 1px solid rgba(46, 160, 67, 0.4);
   border-radius: 999px;
   white-space: nowrap;
   z-index: 2;
}
.tmd-hero__avail::before {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #2ea043;
   margin-right: 8px;
   vertical-align: middle;
}

.tmd-hero__sub {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--tm);
   font-weight: 600;
   margin-bottom: 18px;
}
.tmd-hero__sub::before {
   content: "";
   width: 22px;
   height: 1px;
   background: var(--tm);
}
@media (max-width: 991px) {
   .tmd-hero__sub { justify-content: center; }
}
.tmd-hero__name {
   font-size: clamp(40px, 6vw, 72px);
   line-height: 0.98;
   font-weight: 700;
   margin: 0 0 14px;
   letter-spacing: -2px;
}
.tmd-hero__role {
   font-size: 18px;
   font-weight: 500;
   color: var(--tm);
   margin: 0 0 22px;
   letter-spacing: -0.2px;
}
.tmd-hero__bio {
   font-size: 16px;
   line-height: 1.65;
   color: #b0b0b0;
   max-width: 540px;
   margin: 0 0 30px;
}
@media (max-width: 991px) { .tmd-hero__bio { margin-left: auto; margin-right: auto; } }

.tmd-hero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   padding-top: 22px;
   border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 991px) { .tmd-hero__meta { justify-content: center; } }
.tmd-hero__meta-item strong {
   display: block;
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   line-height: 1;
   margin-bottom: 6px;
   letter-spacing: -0.4px;
}
.tmd-hero__meta-item span {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1.2px;
   color: #777;
   text-transform: uppercase;
}

.tmd-hero__social {
   display: flex;
   gap: 10px;
   margin-top: 22px;
}
@media (max-width: 991px) { .tmd-hero__social { justify-content: center; } }
.tmd-hero__social a {
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.08);
   color: #c0c0c0;
   font-size: 14px;
   transition: all 0.25s ease;
}
.tmd-hero__social a:hover {
   color: #fff;
   background: var(--tm-soft);
   border-color: var(--tm-glow);
   transform: translateY(-2px);
}

/* ===== About / Story ===== */
.tmd-about {
   padding: 90px 0;
   background: #080808;
}
@media (max-width: 767px) { .tmd-about { padding: 60px 0; } }
.tmd-about__inner {
   max-width: 820px;
   margin: 0 auto;
   padding: 0 16px;
}
.tmd-about__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tm);
   font-weight: 600;
   margin-bottom: 18px;
}
.tmd-about__eyebrow::before {
   content: "";
   width: 22px;
   height: 1px;
   background: var(--tm);
}
.tmd-about__title {
   font-size: clamp(26px, 3.8vw, 42px);
   line-height: 1.15;
   font-weight: 700;
   margin: 0 0 32px;
   letter-spacing: -0.7px;
}
.tmd-about__lead {
   font-size: clamp(18px, 2vw, 22px);
   line-height: 1.55;
   color: #ededed;
   margin: 0 0 24px;
}
.tmd-about__lead::first-letter {
   font-size: 1.8em;
   font-weight: 700;
   float: left;
   line-height: 1;
   margin-right: 8px;
   margin-top: 4px;
   color: var(--tm);
   font-family: Georgia, serif;
}
.tmd-about__body p {
   font-size: 16px;
   line-height: 1.75;
   color: #b3b3b3;
   margin: 0 0 20px;
}

/* ===== Expertise / Skills ===== */
.tmd-skills {
   padding: 90px 0;
   background: #0c0c0c;
   border-top: 1px solid rgba(255,255,255,0.04);
   border-bottom: 1px solid rgba(255,255,255,0.04);
}
@media (max-width: 767px) { .tmd-skills { padding: 60px 0; } }
.tmd-skills__header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 50px;
}
.tmd-skills__sub {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tm);
   font-weight: 600;
   margin-bottom: 14px;
}
.tmd-skills__sub::before, .tmd-skills__sub::after {
   content: "";
   width: 22px;
   height: 1px;
   background: var(--tm);
}
.tmd-skills__title {
   font-size: clamp(26px, 3.8vw, 40px);
   font-weight: 700;
   line-height: 1.15;
   margin: 0;
   letter-spacing: -0.5px;
}

.tmd-skills__bars {
   max-width: 760px;
   margin: 0 auto 50px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.tmd-skill {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.tmd-skill__head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}
.tmd-skill__name {
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   margin: 0;
}
.tmd-skill__pct {
   font-size: 13px;
   color: var(--tm);
   font-weight: 700;
   letter-spacing: -0.2px;
}
.tmd-skill__bar {
   height: 6px;
   background: rgba(255,255,255,0.06);
   border-radius: 999px;
   overflow: hidden;
}
.tmd-skill__bar-fill {
   height: 100%;
   background: linear-gradient(to right, var(--tm) 0%, var(--tm-strong) 100%);
   border-radius: 999px;
}

.tmd-skills__tools {
   max-width: 880px;
   margin: 0 auto;
   text-align: center;
}
.tmd-skills__tools-label {
   font-size: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #777;
   margin-bottom: 18px;
   font-weight: 600;
}
.tmd-skills__cloud {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
}
.tmd-tool {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   font-size: 13.5px;
   font-weight: 500;
   color: #d8d8d8;
   background: rgba(255,255,255,0.03);
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 999px;
   transition: all 0.25s ease;
}
.tmd-tool:hover {
   color: #fff;
   background: var(--tm-soft);
   border-color: var(--tm-glow);
   transform: translateY(-2px);
}
.tmd-tool i { color: var(--tm); font-size: 12px; }

/* ===== Selected Work ===== */
.tmd-work {
   padding: 90px 0;
   background: #080808;
}
@media (max-width: 767px) { .tmd-work { padding: 60px 0; } }
.tmd-work__header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 50px;
}
.tmd-work__sub {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tm);
   font-weight: 600;
   margin-bottom: 14px;
}
.tmd-work__sub::before, .tmd-work__sub::after {
   content: "";
   width: 22px;
   height: 1px;
   background: var(--tm);
}
.tmd-work__title {
   font-size: clamp(26px, 3.8vw, 40px);
   line-height: 1.15;
   font-weight: 700;
   margin: 0;
   letter-spacing: -0.5px;
}
.tmd-work__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}
@media (max-width: 991px) { .tmd-work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tmd-work__grid { grid-template-columns: 1fr; } }
.tmd-work__card {
   border-radius: 16px;
   overflow: hidden;
   background: #131313;
   border: 1px solid rgba(255,255,255,0.06);
   transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1);
   text-decoration: none;
   display: flex;
   flex-direction: column;
}
.tmd-work__card:hover {
   transform: translateY(-6px);
   border-color: rgba(255,255,255,0.18);
}
.tmd-work__thumb {
   aspect-ratio: 16/11;
   background: #0a0a0a;
   overflow: hidden;
}
.tmd-work__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   transition: transform 0.6s ease;
}
.tmd-work__card:hover .tmd-work__thumb img { transform: scale(1.06); }
.tmd-work__body {
   padding: 18px 22px 22px;
}
.tmd-work__name {
   font-size: 16px;
   font-weight: 600;
   color: #fff;
   margin: 0 0 4px;
   letter-spacing: -0.2px;
}
.tmd-work__type {
   font-size: 12px;
   color: #888;
   margin: 0;
}
.tmd-work__cta-row {
   text-align: center;
   margin-top: 36px;
}
.tmd-work__cta-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 22px;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   border: 1px solid rgba(255,255,255,0.18);
   border-radius: 999px;
   transition: all 0.25s ease;
}
.tmd-work__cta-link:hover {
   background: #fff;
   color: #0f0f0f;
   border-color: #fff;
}

/* ===== Connect strip ===== */
.tmd-connect {
   padding: 80px 0;
   background: #0a0a0a;
}
@media (max-width: 767px) { .tmd-connect { padding: 50px 0; } }
.tmd-connect__inner {
   padding: 50px 50px;
   border-radius: 22px;
   background:
      radial-gradient(circle at top right, var(--tm-soft) 0%, transparent 60%),
      linear-gradient(160deg, #131313 0%, #0a0a0a 100%);
   border: 1px solid var(--tm-glow);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   flex-wrap: wrap;
}
@media (max-width: 767px) { .tmd-connect__inner { padding: 36px 24px; flex-direction: column; text-align: center; } }
.tmd-connect__title {
   font-size: clamp(22px, 3vw, 32px);
   font-weight: 700;
   line-height: 1.2;
   margin: 0 0 6px;
   letter-spacing: -0.4px;
}
.tmd-connect__desc {
   font-size: 14.5px;
   color: #b3b3b3;
   margin: 0;
}
.tmd-connect__actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}
.tmd-connect__btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 24px;
   font-size: 14px;
   font-weight: 600;
   border-radius: 999px;
   text-decoration: none;
   transition: all 0.25s ease;
}
.tmd-connect__btn--primary {
   background: var(--tm);
   color: var(--tm-text);
}
.tmd-connect__btn--primary:hover { transform: translateY(-2px); color: var(--tm-text); }
.tmd-connect__btn--ghost {
   color: #fff;
   border: 1px solid rgba(255,255,255,0.2);
}
.tmd-connect__btn--ghost:hover { background: rgba(255,255,255,0.05); color: #fff; }