.services-heading-grid {
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}
@media (width > 768px) {
    .services-heading-grid{
        grid-template-columns: 1fr 1fr;
    }
}

.service-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start
}

.service-sidebar {    
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: var(--space-4);
}

@media (width > 900px) {
    .service-layout {
        grid-template-columns: 255px minmax(0, 1fr);
    }
    .service-sidebar {
        position: sticky;
        top: calc(var(--header-height) + var(--space-3));
    }
}


.filter-heading{
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
}
.filter-group {
    border: 0;
    margin: 0
}

.filter-group legend {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.filter-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: .65rem .7rem;
    border-radius: .55rem;
    cursor: pointer;
    text-align: start;
    font-size: .82rem
}

.filter-chip:hover {
    background: var(--surface-2);
    color: var(--ink)
}

.filter-chip.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700
}

.filter-chip small {
    font: 600 .65rem var(--font-en);
    opacity: .65
}

.sidebar-note {  
    margin-top: var(--space-3);  
    font-size: var(--fs-xs);
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    
    border: var(--border);
    box-shadow: var(--shadow-md);
}

.sidebar-note strong {
    color: var(--text-soft);
    display: block;
}



.services-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.service-card {
    display: grid;
    grid-template-columns: 50px 1fr;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s
}

.service-card:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
    box-shadow: var(--shadow);
    transform: translateY(-3px)
}

.service-index {
    font: 700 var(--fs-xs) var(--font-mono);

    color: var(--text-muted);
    padding: var(--space-8) var(--space-2);
    padding-inline-end: 0;
    /* border-inline-end: 1px solid var(--border-subtle); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.service-index span {
    height: 100%;
    width: 1px;
    background: linear-gradient(var(--primary), var(--secondary), transparent);
}

.service-card-main {
    padding: var(--space-8);
    padding-inline-start: var(--space-3);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-6);
}

.service-copy h3 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-2);
}
.service-copy p {
    text-wrap: balance;
}

.service-kicker {
    width: fit-content;
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.service-columns {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    border-block: 1px solid var(--border-subtle);
    padding-block: var(--space-6);

    --_ul-icon-color: var(--success);
}
@media (width > 1024px) {
    .service-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
}

.service-columns h4 {
    font-size: .78rem;
    margin-bottom: .55rem;
}

.service-columns li {
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

.service-cta{
    width: 100%;

    & p{
        max-width: 60ch;
        text-wrap: balance;
        margin-bottom: var(--space-3);
    }
}


.sided-tabs {
    display: grid;
    
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;

    & .tabs{
        background: var(--bg-muted);
        padding: var(--space-4);
    }
    & .tab-list{
        border: 0;
    }
    & .grid-cols-2{
        grid-template-columns: 1fr 260px;
    }
}

@media (width > 900px) {
    .sided-tabs{
        grid-template-columns: 260px 1fr;
    }
}

.sided-tabs .tab-list button {
    width: 100%;    
    border: 0;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    border-radius: .7rem;
    text-align: start;
    box-shadow: none;
}

.sided-tabs .tab-list button:hover {
    color: var(--text-heading);
}

.sided-tabs .tab-list button[aria-selected="true"] {
    background: var(--bg-surface);
    color: var(--text-heading);
    box-shadow: var(--shadow-md);
}

.sided-tabs .tab-list button span {
    font: 700 var(--fs-xs) var(--font-mono);
    color: var(--primary);
}

.sided-tabs .tab-list button strong {
    font-size: var(--fs-sm);
}

.sided-tabs .tabpanels {
    padding: var(--space-8);
}

@media (width > 660px) {
    .sided-tabs .tabpanels .grid{
        grid-template-columns: 1fr 250px;
    }
}


.sided-tabs .panel-number {
  font: 800 4rem/1 var(--font-mono);
  color: var(--primary-soft);
  float: inline-end
}

.sided-tabs .eyebrow-text {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}


.sided-tabs .tabpanel h3 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  margin-bottom: 1rem
}

.sided-tabs .tabpanel>div>p:last-child {
  color: var(--text-muted)
}

.sided-tabs .tabpanel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color)
}

.sided-tabs .tabpanel li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--fs-xs);
}

.sided-tabs .tabpanel li strong {
    color: var(--text-heading);
    min-width: 80px;
}

.sided-tabs .tabpanel li span {
    color: var(--text-muted);
    text-align: end;
}


.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-12);
  border: var(--border);
  background: var(--bg-body);
}
@media (width > 540px) {
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.metrics-grid div {
  padding: var(--space-6);
  border-inline-end: var(--border);
}

.metrics-grid div:last-child {
  border: 0;
}

.metrics-grid strong {
  display: block;
  color: var(--text-heading);
  font: 700 var(--fs-2xl) var(--font-mono);
  margin-bottom: var(--space-2);
}

.metrics-grid span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}



.fit-layout-grid{
    margin-top: var(--space-20);    
    gap: var(--space-12);
    align-items: start;
}
@media (width > 1024px) {
    .fit-layout-grid{
        grid-template-columns: .75fr 1.25fr;
        gap: var(--space-16);
    }
}

.fit-cards-grid {
    gap: var(--space-4);
}
@media (width > 540px) {
    .fit-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.fit-card {
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: var(--bg-surface);
}

.fit-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-3);
}

.fit-card h3 > span:first-child {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font: 700 1rem var(--font-mono)
}

.is-fit h3>span:first-child {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.not-fit h3>span:first-child {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.fit-card ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.fit-card li {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.fit-card li:last-child {
  border: 0
}