/*
 * MartCode components (docs/plans/phase-3-multi-page-premium-site.md, section 6).
 *
 * Loaded after site.css and built only on its tokens (--mc-*): cards, grids,
 * detail layouts, timeline, checklist, FAQ and chips. site.css keeps the base,
 * buttons, navbar, footer, page-hero, cta-band and code. One BEM block per
 * section below; a class used in a template must be defined here or in
 * site.css (TemplateCssClassCoverageTest), a custom property must be defined
 * in site.css (DesignTokensTest).
 */

/* ----------------------------------------------------------- service-hub */

/* One section per service group on the hub (pages/services/index). */
.service-hub {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.service-hub__head {
    max-width: 46rem;
    margin-bottom: 2rem;
}

.service-hub__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.service-hub__summary {
    margin-top: 0.75rem;
    font-size: var(--mc-step-1);
    color: var(--mc-text);
}

/* ---------------------------------------------------------- service-grid */

.service-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.service-grid__item {
    display: flex;
    min-width: 0;
}

/* The featured service on the home page (the only card with bullets) spans
   two columns from 992px and sets its bullets in two columns, so its row
   has no tall empty cards beside it. */
@media (min-width: 992px) {
    .service-grid__item--featured {
        grid-column: span 2;
    }

    .service-grid__item--featured .service-card__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

/* ------------------------------------------------------ service-overview */

/* A service group on the home page (pages/home/_services): its title and
   summary above its cards. */
.service-overview {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.service-overview__head {
    max-width: 46rem;
    margin-bottom: 1.25rem;
}

.service-overview__title {
    font-size: var(--mc-step-2);
    font-weight: 600;
    line-height: 1.25;
    color: var(--mc-ink);
}

.service-overview__summary {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------- service-card */

/* The accent comes from the card's group (--mc-accent-<group>, contrast in
   site.css). The title link stretches over the card (::after), so the whole
   card is one click target and one focus ring. */
.service-card {
    --card-accent: var(--mc-accent-build);
    --card-accent-soft: var(--mc-accent-build-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1.75rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card--modernize {
    --card-accent: var(--mc-accent-modernize);
    --card-accent-soft: var(--mc-accent-modernize-soft);
}

.service-card--operate {
    --card-accent: var(--mc-accent-operate);
    --card-accent-soft: var(--mc-accent-operate-soft);
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent);
    box-shadow: var(--mc-shadow-2);
}

.service-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--card-accent);
    background: var(--card-accent-soft);
    border-radius: 0.75rem;
}

.service-card__title {
    font-size: var(--mc-step-2);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mc-ink);
}

.service-card__link {
    color: inherit;
    text-decoration: none;
}

.service-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mc-card-radius);
}

.service-card__link:focus-visible {
    outline: none;
}

.service-card__link:focus-visible::after {
    outline: 3px solid var(--color-primary-300);
    outline-offset: 2px;
}

.service-card__summary {
    color: var(--mc-text);
}

.service-card__points {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: var(--mc-muted);
}

.service-card__points li {
    position: relative;
    padding-left: 1.1rem;
}

.service-card__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--card-accent);
}

.service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 600;
    color: var(--card-accent);
}

.service-card__more i {
    transition: transform 0.2s ease;
}

.service-card:hover .service-card__more i {
    transform: translateX(3px);
}

/* -------------------------------------------------------- service-detail */

/* The service page (pages/services/show). */
.service-detail {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.service-detail__intro {
    max-width: var(--mc-measure);
    font-size: var(--mc-step-1);
    color: var(--mc-ink);
}

/* The page's accent follows its group, like the cards. */
.service-detail {
    --detail-accent: var(--mc-accent-build);
    --detail-accent-soft: var(--mc-accent-build-soft);
}

.service-detail--modernize {
    --detail-accent: var(--mc-accent-modernize);
    --detail-accent-soft: var(--mc-accent-modernize-soft);
}

.service-detail--operate {
    --detail-accent: var(--mc-accent-operate);
    --detail-accent-soft: var(--mc-accent-operate-soft);
}

.service-detail__layout {
    display: grid;
    gap: 2.5rem;
}

/* Side navigation: a row of links on phones, a sticky column on desktop. */
.service-detail__nav-title {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.service-detail__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.service-detail__nav-link {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--mc-ink);
    text-decoration: none;
    background: var(--mc-surface);
    border-radius: 999px;
}

.service-detail__nav-link:hover {
    color: var(--detail-accent);
    background: var(--detail-accent-soft);
}

@media (min-width: 992px) {
    .service-detail__layout {
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: 4rem;
    }

    .service-detail__nav {
        position: sticky;
        top: var(--mc-nav-offset);
        align-self: start;
    }

    .service-detail__nav-list {
        display: grid;
        gap: 0.25rem;
    }

    .service-detail__nav-link {
        padding: 0.4rem 0.75rem;
        border-radius: 0.5rem;
        background: none;
    }
}

.service-detail__body {
    min-width: 0;
}

.service-detail__section {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.service-detail__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.service-detail__text {
    max-width: var(--mc-measure);
    margin-top: 1rem;
}

.service-detail__code {
    margin-top: 2rem;
}

.service-detail__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-weight: 600;
    color: var(--detail-accent);
    text-decoration: none;
}

.service-detail__more:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------- timeline */

/* Numbered steps on a vertical line. The number is a counter: no inline
   style, no markup to keep in sync. The accent comes from the enclosing
   page (--detail-accent), violet elsewhere. */
.timeline {
    counter-reset: timeline;
    position: relative;
    display: grid;
    gap: 1.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.timeline__item {
    position: relative;
    padding-left: 3.5rem;
}

.timeline__item::before {
    counter-increment: timeline;
    content: counter(timeline, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    color: #fff;
    background: var(--detail-accent, var(--mc-accent-build));
    border-radius: 50%;
}

.timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.5rem;
    bottom: -1.5rem;
    width: 2px;
    background: var(--mc-line);
}

.timeline__title {
    font-size: var(--mc-step-1);
    font-weight: 600;
    line-height: 1.35;
    color: var(--mc-ink);
}

.timeline__text {
    max-width: var(--mc-measure);
    margin-top: 0.35rem;
}

/* ------------------------------------------------------------- checklist */

.checklist {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.checklist__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 1rem 1.25rem;
    color: var(--mc-ink);
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
}

.checklist__icon {
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--detail-accent, var(--mc-accent-build));
}

/* ------------------------------------------------------------------- faq */

/* Native <details>: works without JavaScript, the answer stays in the HTML. */
.faq {
    margin-top: 1.5rem;
    border-top: 1px solid var(--mc-line);
}

.faq__item {
    border-bottom: 1px solid var(--mc-line);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-weight: 600;
    color: var(--mc-ink);
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:focus-visible {
    outline: 3px solid var(--color-primary-300);
    outline-offset: 2px;
}

.faq__icon {
    flex: none;
    font-size: 1.25rem;
    color: var(--mc-muted);
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__icon {
    transform: rotate(180deg);
}

.faq__answer {
    max-width: var(--mc-measure);
    padding-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ chip */

/* Small mono label: reference kind, later technologies and tags. */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
    border-radius: 999px;
}

.chip--product {
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
}

.chip--platform {
    color: var(--mc-accent-operate);
    background: var(--mc-accent-operate-soft);
}

.chip--client {
    color: var(--mc-accent-modernize);
    background: var(--mc-accent-modernize-soft);
}

/* -------------------------------------------------------------- case-hub */

/* One section per group of references on the hub (pages/references/index):
   our own products and platform, then client projects. */
.case-hub {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.case-hub__title {
    margin-bottom: 1.5rem;
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

/* ------------------------------------------------------------- case-grid */

.case-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .case-grid--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.case-grid__item {
    display: flex;
    min-width: 0;
}

/* ------------------------------------------------------------- case-card */

/* A reference: kind chip, name, summary, arrow. Like service-card, the
   title link stretches over the card; a card without a page has no link.
   The accent follows the kind (chip colors, contrast in site.css). */
.case-card {
    --case-accent: var(--mc-accent-build);
    --case-accent-soft: var(--mc-accent-build-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1.75rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-card--platform {
    --case-accent: var(--mc-accent-operate);
    --case-accent-soft: var(--mc-accent-operate-soft);
}

.case-card--client {
    --case-accent: var(--mc-accent-modernize);
    --case-accent-soft: var(--mc-accent-modernize-soft);
}

.case-card:has(.case-card__link):hover {
    transform: translateY(-2px);
    border-color: var(--case-accent);
    box-shadow: var(--mc-shadow-2);
}

.case-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Δ Σ ε: IBM Plex Sans 600 carries the Greek subset (ADR-002). */
.case-card__glyph {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--mc-magenta), var(--mc-violet));
    border-radius: 0.65rem;
}

.case-card__title {
    font-size: var(--mc-step-2);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mc-ink);
}

.case-card__link {
    color: inherit;
    text-decoration: none;
}

.case-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mc-card-radius);
}

.case-card__link:focus-visible {
    outline: none;
}

.case-card__link:focus-visible::after {
    outline: 3px solid var(--color-primary-300);
    outline-offset: 2px;
}

.case-card__summary {
    color: var(--mc-text);
}

.case-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 600;
    color: var(--case-accent);
}

.case-card__more i {
    transition: transform 0.2s ease;
}

.case-card:hover .case-card__more i {
    transform: translateX(3px);
}

.case-card__note {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--mc-muted);
}

/* ----------------------------------------------------------- case-detail */

/* The reference page (pages/references/show): the framed product, the
   story in three sections, and an aside with highlights, technologies and
   the product link. */
.case-detail {
    --detail-accent: var(--mc-accent-build);
    --detail-accent-soft: var(--mc-accent-build-soft);
    padding-top: clamp(3rem, 6vw, 5rem);
}

.case-detail--platform {
    --detail-accent: var(--mc-accent-operate);
    --detail-accent-soft: var(--mc-accent-operate-soft);
}

.case-detail--client {
    --detail-accent: var(--mc-accent-modernize);
    --detail-accent-soft: var(--mc-accent-modernize-soft);
}

.case-detail__layout {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .case-detail__layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 4rem;
    }

    .case-detail__aside {
        position: sticky;
        top: var(--mc-nav-offset);
        align-self: start;
    }
}

.case-detail__body {
    min-width: 0;
}

.case-detail__section {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.case-detail__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.case-detail__text {
    max-width: var(--mc-measure);
    margin-top: 1rem;
}

.case-detail__aside {
    display: grid;
    gap: 2rem;
    align-content: start;
    padding: 1.75rem;
    background: var(--mc-surface);
    border-radius: var(--mc-card-radius);
}

.case-detail__aside-title {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

/* The highlights reuse the checklist, one column in the aside. */
.case-detail__aside .checklist {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0.75rem;
}

.case-detail__aside .checklist__item {
    padding: 0.75rem 1rem;
    background: var(--mc-bg);
}

.case-detail__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.case-detail__visit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--detail-accent);
    text-decoration: none;
}

.case-detail__visit:hover {
    text-decoration: underline;
}

.case-detail__services {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.case-detail__services .service-grid {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------- device-frame */

/* A browser window drawn in CSS (spec section 5: screenshots are taken
   without chrome), light like the hero's glass cards. Around a screenshot,
   or around the product tile until the owner supplies one. --mc-muted on
   --mc-surface (the address bar): 5.0:1. */
.device-frame {
    margin: 0;
    overflow: hidden;
    background: var(--mc-bg);
    border: 1px solid var(--mc-glass-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-glass);
}

.device-frame__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mc-line);
}

.device-frame__dots {
    display: inline-flex;
    gap: 0.4rem;
}

.device-frame__dots span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--mc-magenta);
    opacity: 0.55;
}

.device-frame__dots span:nth-child(2) {
    background: var(--mc-violet);
}

.device-frame__dots span:nth-child(3) {
    background: var(--mc-cyan);
}

.device-frame__address {
    flex: 1;
    max-width: 22rem;
    padding: 0.25rem 0.75rem;
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    color: var(--mc-muted);
    background: var(--mc-surface);
    border-radius: 999px;
}

.device-frame__screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------- product-tile */

/* The abstract product tile (screenshots: 0): the product's glyph, or the
   first letter of its name, over two still brand clouds on --mc-hero-tint.
   White on the glyph's gradient: 7.6:1 (--mc-accent-build) to 6.4:1
   (--mc-accent-modernize); the name in --mc-text, 7.9:1 at the magenta
   cloud's peak (#f1d5f7). */
.product-tile {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.25rem;
    aspect-ratio: 16 / 9;
    padding: 2rem;
    overflow: hidden;
    background:
        radial-gradient(28rem 18rem at 85% 0%, rgba(224, 63, 216, 0.16), transparent 60%),
        radial-gradient(24rem 16rem at 10% 100%, rgba(34, 201, 212, 0.16), transparent 60%),
        var(--mc-hero-tint);
}

.product-tile__glyph {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 12vw, 6.5rem);
    height: clamp(4.5rem, 12vw, 6.5rem);
    font-size: clamp(2.5rem, 7vw, 3.75rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--mc-accent-build), var(--mc-accent-modernize));
    border-radius: 1.25rem;
    box-shadow: 0 18px 36px -18px rgba(90, 47, 208, 0.55);
}

.product-tile__name {
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    text-align: center;
    color: var(--mc-text);
}

/* ------------------------------------------------------------ chip--stack */

/* A technology on a reference page: neutral, it carries no kind. */
.chip--stack {
    color: var(--mc-ink);
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
}

/* Related references on a service page: case cards in the section. */
.service-detail__section .case-grid {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------- team-section */

/* The members of the team page (pages/about/team): two cards side by side
   from 992px, stacked below. */
.team-section {
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.team-section__list {
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-section__item {
    display: grid;
    min-width: 0;
}

/* Stacked, the team lead comes first; side by side, the yaml order holds. */
@media (max-width: 991.98px) {
    .team-section__item--lead {
        order: -1;
    }
}

@media (min-width: 992px) {
    .team-section__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* -------------------------------------------------------------- team-card */

/* The violet wash in the corner never goes darker than #f8f6fe: --mc-text
   9.6:1, --mc-muted 4.85:1, --color-primary-700 6.9:1 on it. */
.team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background:
        radial-gradient(36rem 16rem at 0 0, rgba(143, 124, 232, 0.1), transparent 70%),
        var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: lift 2px and a gradient border (a masked ring, so the radius and
   the background stay). Shared with the capability card. */
.team-card::after,
.capability::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(--mc-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.team-card:hover,
.capability:hover {
    transform: translateY(-2px);
}

.team-card:hover {
    box-shadow: var(--mc-shadow-3);
}

.team-card:hover::after,
.team-card:focus-within::after,
.capability:hover::after,
.capability:focus-within::after {
    opacity: 1;
}

.team-card__head {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 1.75rem);
}

.team-card__identity {
    flex: 1;
    min-width: 0;
}

.team-card__role {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--color-primary-700);   /* 7.6:1 on white */
}

.team-card__name {
    margin-top: 0.35rem;
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

/* "(Takım Lideri)" after the name: lighter so the name stays the heading. */
.team-card__lead {
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--color-primary-700);
    white-space: nowrap;
}

.team-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* --mc-ink on --mc-accent-build-soft: 15.6:1. */
.team-card__years {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.9rem;
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-ink);
    background: var(--mc-accent-build-soft);
    border-radius: 999px;
}

.team-card__years::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--mc-gradient);
    border-radius: 50%;
}

.team-card__links {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Icon buttons; the name is visually hidden text inside the link. */
.team-card__link {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.15rem;
    color: var(--mc-ink);
    text-decoration: none;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: 0.65rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.team-card__link:hover {
    color: var(--mc-accent-build);     /* 6.6:1 on its tint */
    border-color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
}

.team-card__capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-card__bio {
    max-width: var(--mc-measure);
    font-size: var(--mc-step-1);
    line-height: 1.65;
}

.team-card__block {
    padding-top: 1.75rem;
    border-top: 1px solid var(--mc-line);
}

.team-card__subtitle {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

/* Experience: gradient dots on a line that fades out. */
.team-card__experience {
    position: relative;
    display: grid;
    gap: 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.team-card__experience::before {
    content: "";
    position: absolute;
    left: calc(0.375rem - 1px);
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    background: linear-gradient(var(--mc-violet), var(--mc-line));
    border-radius: 2px;
}

.team-card__experience-item {
    position: relative;
    padding-left: 2rem;
}

.team-card__experience-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--mc-gradient);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--mc-bg);
}

.team-card__experience-title {
    font-weight: 600;
    line-height: 1.4;
    color: var(--mc-ink);
}

.team-card__experience-text {
    max-width: var(--mc-measure);
    margin-top: 0.3rem;
}

.team-card__education {
    display: grid;
    gap: 0.85rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--mc-ink);
}

.team-card__education-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.team-card__education-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
    border-radius: 0.65rem;
}

/* ---------------------------------------------------------------- avatar */

/* The member's photo in a rounded frame: a thin gradient ring, a white gap
   and a soft violet shadow. Without a photo the initials sit on the
   gradient; white on it: 7.6:1 (--mc-accent-build) to 6.4:1
   (--mc-accent-modernize). The initials are decorative (aria-hidden): the
   name is the h2 next to them. */
.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(5.5rem, 14vw, 8rem);
    aspect-ratio: 1;
    padding: 2px;
    overflow: hidden;
    background: var(--mc-gradient);
    border-radius: 1.5rem;
    box-shadow: 0 18px 36px -18px rgba(109, 63, 232, 0.6);
}

.avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--mc-bg);
    border-radius: calc(1.5rem - 2px);
}

.avatar--initials {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--mc-accent-build), var(--mc-accent-modernize));
}

/* ---------------------------------------------------- capability-section */

/* The capability map on a faint lavender band, the heroes' family: a still
   violet and cyan cloud over --mc-hero-tint, white cards with a hairline.
   Worst case on the band, at the violet cloud's peak (14%, #e6e1fa):
   --mc-ink 14.2:1, --mc-text 8.4:1, --color-primary-800 7.7:1. */
.capability-section {
    margin-top: var(--mc-section-space);
    padding: var(--mc-section-space) 0;
    background:
        radial-gradient(50rem 26rem at 100% 0, rgba(143, 124, 232, 0.14), transparent 60%),
        radial-gradient(40rem 24rem at 0 100%, rgba(34, 201, 212, 0.08), transparent 60%),
        var(--mc-hero-tint);
}

.capability-section__head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.capability-section__eyebrow {
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--color-primary-800);
}

.capability-section__title {
    margin-top: 0.75rem;
    font-size: var(--mc-step-4);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.capability-section__lead {
    margin-top: 1rem;
    font-size: var(--mc-step-1);
    color: var(--mc-text);
}

/* ------------------------------------------------------- capability-grid */

.capability-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .capability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* White card on the band (--mc-ink 18.1:1, --mc-text 10.7:1). The chips
   keep their light chip--stack look. */
.capability {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding: 1.75rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.capability:hover {
    border-color: var(--mc-glass-line);
    box-shadow: var(--mc-shadow-2);
    transform: translateY(-2px);
}

/* --color-primary-700 on --mc-accent-build-soft: 6.6:1. */
.capability__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--color-primary-700);
    background: var(--mc-accent-build-soft);
    border-radius: 0.75rem;
}

.capability__title {
    font-size: var(--mc-step-2);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mc-ink);
}

.capability__summary {
    color: var(--mc-text);
}

.capability__technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: auto 0 0;
    padding: 0.75rem 0 0;
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    .team-card:hover,
    .capability:hover {
        transform: none;
    }
}

/* Related services on a service page: two cards side by side. */
@media (min-width: 1200px) {
    .service-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* --------------------------------------------------------------- concept */

/* The our approach page (pages/about/concept): a sticky list of the
   categories on desktop, then one section per category. */
.concept {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.concept__layout {
    display: grid;
    gap: 2.5rem;
}

.concept__nav-title {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.concept__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.concept__nav-link {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--mc-ink);
    text-decoration: none;
    background: var(--mc-surface);
    border-radius: 999px;
}

.concept__nav-link:hover {
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
}

@media (min-width: 992px) {
    .concept__layout {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 4rem;
    }

    .concept__nav {
        position: sticky;
        top: var(--mc-nav-offset);
        align-self: start;
    }

    .concept__nav-list {
        display: grid;
        gap: 0.25rem;
    }

    .concept__nav-link {
        padding: 0.4rem 0.75rem;
        border-radius: 0.5rem;
        background: none;
    }
}

.concept__body {
    min-width: 0;
}

.concept__note {
    max-width: var(--mc-measure);
    padding: 1.25rem 1.5rem;
    color: var(--mc-ink);
    background: var(--mc-surface);
    border-left: 3px solid var(--mc-accent-build);
    border-radius: 0 var(--mc-radius) var(--mc-radius) 0;
}

/* ------------------------------------------------------ concept-category */

.concept-category {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.concept-category__head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.concept-category__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
    border-radius: 0.75rem;
}

.concept-category__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.concept-category__lead {
    max-width: var(--mc-measure);
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------- concept-list */

.concept-list {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1200px) {
    .concept-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------- concept-item */

/* A standard we apply, or (--reference) one we list as a reference only:
   dashed border, no practice text. */
.concept-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
}

.concept-item--reference {
    border-style: dashed;
}

.concept-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.concept-item__title {
    font-size: var(--mc-step-1);
    font-weight: 600;
    line-height: 1.35;
    color: var(--mc-ink);
}

.concept-item__summary {
    font-size: 0.9375rem;
}

.concept-item__practice {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--mc-ink);
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
}

.concept-item__practice-label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.concept-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    font-weight: 600;
    color: var(--mc-accent-build);
    text-decoration: none;
}

.concept-item__link:hover {
    text-decoration: underline;
}

/* Applied: the build accent; reference: neutral. */
.chip--applied {
    color: var(--mc-accent-build);
    background: var(--mc-accent-build-soft);
}

.chip--reference {
    color: var(--mc-muted);
    background: var(--mc-surface);
}


/* ----------------------------------------------------------------- proof */

/* The proof strip: four numbers, each with its source in kaynaklar.md. */
.proof {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.proof__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .proof__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.proof__item {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 1.5rem;
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
}

.proof__value {
    font-size: var(--mc-step-4);
    font-weight: 600;
    line-height: 1;
    /* Equal-width digits: the counter does not jiggle while it counts. */
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-accent-build);
}

.proof__label {
    font-size: 0.9375rem;
    color: var(--mc-text);
}

/* --------------------------------------------------------------- process */

/* How we work, four numbered steps side by side on desktop. */
.process {
    padding-top: var(--mc-section-space);
}

.process__head {
    max-width: 46rem;
    margin-bottom: 2rem;
}

.process__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.process__lead {
    margin-top: 0.75rem;
    font-size: var(--mc-step-1);
}

.process__steps {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .process__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.process__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--mc-surface);
    border-radius: var(--mc-card-radius);
    overflow: hidden;
}

.process__step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--mc-gradient);
}

.process__number {
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--mc-tracking-mono);
    color: var(--color-primary-700);
}

.process__step-title {
    font-size: var(--mc-step-1);
    font-weight: 600;
    color: var(--mc-ink);
}

.process__step-text {
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------- about-section */

/* A section of the about page: the heading beside the text on desktop. */
.about-section {
    padding-top: var(--mc-section-space);
}

.about-section__grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .about-section__grid {
        grid-template-columns: 18rem minmax(0, 1fr);
        gap: 4rem;
    }
}

.about-section__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.about-section__body {
    display: grid;
    gap: 1rem;
    max-width: var(--mc-measure);
}

.about-section__text {
    font-size: var(--mc-step-0);
}

/* ------------------------------------------------------- principle-grid */

.principle-grid {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.principle {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.5rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
}

.principle__title {
    font-size: var(--mc-step-1);
    font-weight: 600;
    color: var(--mc-ink);
}

.principle__text {
    font-size: 0.9375rem;
}

/* ------------------------------------------------------------ about-links */

.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.about-links__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--mc-accent-build);
    text-decoration: none;
    background: var(--mc-accent-build-soft);
    border-radius: 999px;
}

.about-links__link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------- about-address */

.about-address {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
}

.about-address dt {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.about-address dd {
    margin: 0;
    color: var(--mc-ink);
}

/* -------------------------------------------------------- contact-layout */

/* The contact page below the shared contact section (pages/contact/index):
   what happens after a message, and where we are. The address list reuses
   about-address. */
.contact-layout {
    padding-bottom: var(--mc-section-space);
}

.contact-layout__grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .contact-layout__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 2rem;
    }
}

.contact-layout__card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-card-radius);
}

.contact-layout__title {
    font-size: var(--mc-step-2);
    font-weight: 600;
    line-height: 1.25;
    color: var(--mc-ink);
}

.contact-layout__text {
    margin: 0.75rem 0 1rem;
}

.contact-layout__map {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-weight: 600;
    color: var(--mc-accent-build);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------- case-feature */

/* The featured reference on the home page (pages/home/_references): the
   framed product beside its summary and highlights. */
.case-feature {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 992px) {
    .case-feature {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 3.5rem;
    }
}

.case-feature__body {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.case-feature__title {
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

/* The highlights in one column, white on the section's surface. */
.case-feature .checklist {
    grid-template-columns: none;
    justify-self: stretch;
    margin: 0;
}

.case-feature .checklist__item {
    background: var(--mc-bg);
}

/* ------------------------------------------------------------ logo-strip */

/* Our own product marks and the platform (spec section 6), then the logos
   of the clients who allowed it in writing, each a link to its reference
   page. The marks are grayscale until hovered or focused; white on the gray
   tile is 9.4:1 (measured). */
.logo-strip {
    display: grid;
    gap: 1.75rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--mc-line);
}

.logo-strip__title {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.logo-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.logo-strip__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    /* The height of the glyph tile, so a mark without one (ONLINEKURUM)
       lines up with the others. */
    min-height: 2.5rem;
    font-weight: 600;
    color: var(--mc-ink);
    text-decoration: none;
}

.logo-strip__link:hover {
    color: var(--mc-accent-build);
}

.logo-strip__glyph {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--mc-accent-build), var(--mc-accent-modernize));
    border-radius: 0.65rem;
    filter: grayscale(1);
    transition: filter 0.2s ease;
}

.logo-strip__link:hover .logo-strip__glyph,
.logo-strip__link:focus-visible .logo-strip__glyph {
    filter: none;
}

/* A client logo, a little taller than the glyph tile so the wordmark
   stays legible (the 96 pixel file is 2x); the width follows the file.
   Grayscale and slightly dimmed at rest, its own colours on hover or focus.
   A logotype is exempt from the text contrast minimum (WCAG 1.4.3); its
   name is the image's alt text. */
.logo-strip__logo img {
    display: block;
    width: auto;
    height: 3rem;
    filter: grayscale(1);
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-strip__link:hover .logo-strip__logo img,
.logo-strip__link:focus-visible .logo-strip__logo img {
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .logo-strip__glyph,
    .logo-strip__logo img {
        transition: none;
    }
}

/* ----------------------------------------------------------- team-teaser */

/* The team on the home page (pages/home/_team): the heading beside the
   compact cards on desktop. */
.team-teaser__grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .team-teaser__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }
}

.team-teaser__list {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-teaser__list > li {
    min-width: 0;
}

/* The compact card: the full card's head and chips, a smaller sibling. The
   name links to the member on the team page. */
.team-card--compact {
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.team-card--compact .team-card__name {
    font-size: var(--mc-step-2);
}

.team-card__name-link {
    color: inherit;
    text-decoration: none;
}

/* --mc-accent-build on white: 7.6:1. */
.team-card__name-link:hover {
    color: var(--mc-accent-build);
    text-decoration: underline;
}

.team-card__name-link:focus-visible {
    outline: 2px solid var(--mc-accent-build);
    outline-offset: 3px;
    border-radius: 0.25rem;
}