/* Service landing pages (/services/*) and the 404 page.
   Built on the tokens in variables.css; the one loud element is the proof
   column in the hero, everything below it stays quiet and left-aligned. */

/* ========== Hero ========== */
.svc-hero {
    position: relative;
    padding: 8rem 0 var(--space-4xl);
    background: var(--color-bg) url('../assets/images/hero_bg.webp') center/cover no-repeat;
}
.svc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(43, 43, 43, 0.92) 85%);
    pointer-events: none;
}
.svc-hero > .container { position: relative; z-index: 1; }

.svc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-3xl);
    align-items: end;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--space-lg);
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.4rem;
    opacity: 0.6;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs [aria-current] { color: var(--color-text); }

.svc-hero__title {
    font-family: var(--font-family-headline);
    font-weight: 100;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 var(--space-lg);
    max-width: 18ch;
    text-wrap: balance;
}
.svc-hero__lead {
    margin: 0 0 var(--space-xl);
    max-width: 58ch;
    color: #d6dbe3;
    line-height: var(--line-height-relaxed);
}
.svc-hero .hero__actions { flex-wrap: wrap; }

/* Proof column: case-study numbers as the visual anchor */
.svc-proof {
    border-left: 2px solid transparent;
    border-image: var(--gradient-accent) 1;
    padding-left: var(--space-xl);
}
.svc-proof__caption {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.svc-proof__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.svc-proof__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
}
.svc-proof__item:first-child { border-top: none; padding-top: 0; }
.svc-proof__metric {
    font-family: var(--font-family-headline);
    font-weight: 100;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.svc-proof__label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
a.svc-proof__label {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}
a.svc-proof__label:hover { text-decoration-color: var(--color-primary-end); }

/* ========== Sections ========== */
.svc-section {
    padding: var(--space-section) 0;
}
.svc-section + .svc-section:not(.svc-section--alt) { padding-top: 0; }
.svc-section--tight { padding: var(--space-2xl) 0; }
.svc-section--alt {
    background: var(--color-bg-alt);
    padding: var(--space-section) 0;
}
.svc-section--alt + .svc-section:not(.svc-section--alt) { padding-top: var(--space-section); }

.svc-h2 {
    font-family: var(--font-family-headline);
    font-weight: 600;
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-xl);
    max-width: 24ch;
}
.svc-h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0 0 var(--space-md);
}

.svc-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: start;
}
.svc-split .svc-h2 { margin-bottom: 0; }

.svc-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.svc-checks li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    line-height: var(--line-height-normal);
}
.svc-checks li:first-child { border-top: none; padding-top: 0; }
.svc-checks .ico { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; }

/* What we do: a quiet two-column definition list */
.svc-work {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-3xl);
    margin: 0;
}
.svc-work__item {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
}
.svc-work dt {
    font-weight: 600;
    margin: 0 0 var(--space-xs);
}
.svc-work dd {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    max-width: 52ch;
}

/* Engagement steps: a real sequence, so numbered */
.svc-steps-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--space-xl);
}
.svc-steps-row__item h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: var(--space-sm) 0 var(--space-xs);
}
.svc-steps-row__item p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}
.svc-steps-row__num {
    font-family: var(--font-family-headline);
    font-weight: 100;
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--color-primary-end);
}
.svc-inline-cta { margin-top: var(--space-2xl); }

.svc-chips {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tech-stack__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-lg);
}
.tech-stack__group-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}
.tech-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tech-chip {
    font-size: var(--font-size-sm);
    padding: 0.35rem 0.8rem;
    border-radius: var(--m3-shape-full);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--edge-inset-tl);
    white-space: nowrap;
}

.svc-section .story-cards { margin-top: 0; }

.svc-faq .faq__list { max-width: 56rem; }
.svc-faq .faq__answer p { max-width: 64ch; }

.svc-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
}
.svc-related__list a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--m3-shape-full);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.svc-related__list a:hover {
    border-color: var(--color-primary-end);
    color: var(--color-primary-end);
}

.svc-hero--404 { min-height: 70vh; display: flex; align-items: center; }

/* ========== Responsive ========== */
@media (max-width: 56.25rem) {
    .svc-hero { padding: 6.5rem 0 var(--space-3xl); }
    .svc-hero__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .svc-split { grid-template-columns: 1fr; gap: var(--space-lg); }
    .svc-work { grid-template-columns: 1fr; }
    .svc-h2 { font-size: var(--font-size-3xl); }
    .svc-section, .svc-section--alt { padding: var(--space-3xl) 0; }
    .svc-section--alt + .svc-section:not(.svc-section--alt) { padding-top: var(--space-3xl); }
}
@media (max-width: 40rem) {
    .svc-hero .hero__actions { flex-direction: column; align-items: stretch; }
    .svc-hero .hero__actions .btn { text-align: center; }
    .svc-proof { padding-left: var(--space-lg); }
}

/* ========== Blog ========== */
.svc-hero--blog { padding-bottom: var(--space-3xl); }

/* ========== Article ========== */
.article__container { max-width: 46rem; }
.article__header {
    padding: 8rem 0 var(--space-2xl);
    background: linear-gradient(180deg, #1c1c1c, var(--color-bg));
    border-bottom: 1px solid var(--color-border);
}
.article__title {
    font-family: var(--font-family-headline);
    font-weight: 100;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    margin: 0 0 var(--space-lg);
}
.article__meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.article__meta a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.article__meta-sep { margin: 0 0.5rem; opacity: 0.5; }

.article__body {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    font-size: 1.1875rem;
    line-height: 1.75;
    color: #dde2ea;
}
.article__body p { margin: 0 0 1.4em; }
.article__body ul { margin: 0 0 1.4em; padding-left: 1.25rem; }
.article__body li { margin-bottom: 0.4em; }
.article__body li::marker { color: var(--color-primary-end); }
.article__body strong { color: var(--color-text); }
.article__body a {
    color: #ffa45c;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article__body code {
    font-family: var(--font-family-mono);
    font-size: 0.88em;
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
}
.article__body figure { margin: var(--space-xl) 0 var(--space-2xl); }
.article__body figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.article__body figcaption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.article__next {
    margin-bottom: var(--space-section);
    padding: var(--space-xl);
    border-left: 2px solid transparent;
    border-image: var(--gradient-accent) 1;
    background: rgba(255, 255, 255, 0.04);
}
.article__next-title {
    font-weight: 600;
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-sm);
}
.article__next p { color: #c3cad5; line-height: var(--line-height-relaxed); }
.article__next p a { color: #ffa45c; text-decoration: underline; }

@media (max-width: 40rem) {
    .article__header { padding-top: 6.5rem; }
    .article__body { font-size: 1.0625rem; }
}