@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400.a32ace5dba84.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-600.84cf795ee940.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-700.d19e33cac5f6.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-800.7ad9017c5008.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-400.19d889c7d3cc.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Material Symbols Outlined";
    src: url("../fonts/material-symbols-outlined-400.bd1963e41b55.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
}

:root {
    --surface: #faf8ff;
    --surface-dim: #d9d9e4;
    --surface-low: #f3f3fe;
    --surface-high: #e7e7f2;
    --surface-highest: #e2e2ec;
    --white: #ffffff;
    --ink: #191b23;
    --muted: #434654;
    --outline: #737685;
    --outline-soft: #c3c6d7;
    --primary: #003594;
    --primary-container: #2563eb;
    --primary-soft: #dbe1ff;
    --secondary: #565e74;
    --tertiary: #6e2700;
    --error: #ba1a1a;
    --grid-line: rgba(0, 53, 148, .055);
    --shadow-soft: 0 4px 16px rgba(15, 23, 42, .05);
    --shadow-hover: 0 12px 28px rgba(15, 23, 42, .11);
    --radius-sm: .25rem;
    --radius: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
    font-family: "Inter", sans-serif;
}

html {
    scroll-behavior: smooth;
}

:root {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--surface);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
}

body,
button,
input,
select,
textarea {
    font-family: "Inter", sans-serif;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.portal-list {
    display: grid;
    gap: 14px;
}

.portal-card {
    padding: 24px;
    border: 1px solid var(--outline-soft);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.portal-card--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.portal-card strong,
.portal-card span,
.portal-card small {
    display: block;
}

.portal-card span,
.portal-card small {
    color: var(--muted);
    margin-top: 4px;
}

.portal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 0;
}

.portal-details dt {
    color: var(--muted);
    font-size: .85rem;
}

.portal-details dd {
    margin: 4px 0 0;
    font-weight: 600;
}

.portal-timeline {
    display: grid;
    gap: 18px;
    border-left: 2px solid var(--primary-soft);
    padding-left: 18px;
}

.portal-timeline p {
    margin: 6px 0 0;
    color: var(--muted);
}

.portal-actions,
.portal-card--row form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-card--row input,
.portal-card--row textarea {
    max-width: 240px;
    padding: 9px 10px;
    border: 1px solid var(--outline-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

@media (max-width: 760px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }

    .portal-card--row {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-card--row form {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-card--row input,
    .portal-card--row textarea {
        max-width: none;
        width: 100%;
    }
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--primary-soft);
    color: var(--primary);
}

.container {
    width: min(1280px, calc(100% - 96px));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--primary-container);
    color: #fff;
    font-weight: 600;
}

.skip-link:focus {
    top: 16px;
}

.material-symbols-outlined {
    display: inline-block;
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
    font-size: 1.125rem;
}

p {
    margin: 0;
}

.eyebrow-text {
    margin-bottom: 12px;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(0, 53, 148, .1);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.eyebrow-chip .material-symbols-outlined {
    font-size: 17px;
}

.gradient-text {
    color: var(--primary);
}

.section-heading {
    margin-bottom: 40px;
}

.section-heading h2 {
    margin-bottom: 8px;
}

.section-heading p {
    color: var(--muted);
    font-size: .92rem;
}

.section-heading--center {
    text-align: center;
}

.section-heading--center p {
    max-width: 720px;
    margin-inline: auto;
}

.empty-state {
    grid-column: 1 / -1;
    color: var(--muted);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(195, 198, 215, .3);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.nav-shell {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
}

.brand-wordmark {
    color: var(--primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.23rem;
    font-weight: 800;
    letter-spacing: -.045em;
    white-space: nowrap;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.primary-nav a {
    position: relative;
    padding: 9px 4px;
    color: var(--muted);
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s var(--ease), background .2s var(--ease);
}

.primary-nav a:hover,
.primary-nav a.is-active {
    color: var(--primary);
}

.primary-nav a.is-active::after {
    position: absolute;
    right: 4px;
    bottom: 1px;
    left: 4px;
    height: 2px;
    background: var(--primary);
    content: "";
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.motion-toggle,
.nav-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
}

.motion-toggle:hover,
.nav-toggle:hover {
    background: rgba(0, 53, 148, .08);
}

.motion-toggle[aria-pressed="true"] {
    background: var(--primary-soft);
}

.motion-toggle .material-symbols-outlined {
    font-size: 20px;
}

.nav-toggle {
    display: none;
}

.nav-toggle__line {
    width: 20px;
    height: 2px;
    margin: 3px auto;
    border-radius: 999px;
    background: currentColor;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 10px 21px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
    transition: box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.button--primary {
    background: var(--primary-container);
    color: #fff;
    box-shadow: var(--shadow-soft);
}

.button--primary:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.button--outline {
    border-color: var(--primary);
    background: transparent;
    color: var(--primary);
}

.button--outline:hover {
    background: rgba(0, 53, 148, .06);
}

.button--white {
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow-soft);
}

.button--white:hover {
    transform: scale(1.03);
}

.nav-cta {
    min-height: 38px;
    padding: 9px 17px;
}

.brand--footer .brand-wordmark {
    font-size: 1.45rem;
}

.stitch-hero {
    padding: 128px 0 120px;
}

.stitch-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
}

.stitch-hero__copy h1 {
    margin-bottom: 18px;
}

.stitch-hero__copy h1 span {
    color: var(--primary);
}

.stitch-hero__copy>p {
    max-width: 570px;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hero-actions--center {
    justify-content: center;
}

.stitch-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(25, 27, 35, .13));
}

.stitch-section {
    padding: 80px 0;
}

.stitch-section--tinted {
    background: transparent;
}

.service-grid {
    display: grid;
    gap: 24px;
}

.service-grid--home {
    grid-template-columns: repeat(3, 1fr);
}

.service-card {
    display: flex;
    min-height: 242px;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--surface-high);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

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

.service-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(0, 53, 148, .1);
    color: var(--primary);
}

.service-card__icon .material-symbols-outlined {
    font-size: 25px;
}

.service-card h2 {
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.service-card h2 a {
    text-decoration: none;
}

.service-card>p {
    min-height: 48px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .92rem;
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--primary);
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
}

.arrow-link .material-symbols-outlined {
    font-size: 17px;
    transition: transform .2s var(--ease);
}

.arrow-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.arrow-link:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.home-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-portfolio-grid .portfolio-card__media {
    height: 220px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--surface-high);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.testimonial-card>p {
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.7;
}

.testimonial-card footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.testimonial-card footer img,
.avatar-fallback {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    object-fit: cover;
    font-weight: 700;
}

.testimonial-card footer strong,
.testimonial-card footer small {
    display: block;
}

.testimonial-card footer strong {
    font-size: .8rem;
}

.testimonial-card footer small {
    color: var(--muted);
    font-size: .7rem;
}

.testimonial-grid--landing {
    grid-template-columns: repeat(3, 1fr);
}

.testimonial-page-hero {
    padding-bottom: 72px;
}

.testimonial-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    color: var(--muted);
}

.testimonial-summary strong {
    color: var(--primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem;
}

.testimonial-summary span {
    font-size: .78rem;
}

.testimonial-grid--single {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
}

.faq-section {
    max-width: 900px;
}

.faq-grid {
    display: grid;
    gap: 12px;
}

.faq-item {
    border-bottom: 1px solid var(--outline-soft);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    cursor: pointer;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item__question {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.faq-item__category {
    color: var(--primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.faq-item__icon {
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 400;
}

.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__answer {
    padding: 0 40px 18px 0;
    color: var(--muted);
    font-size: .85rem;
}

.cta-section {
    padding: 56px 0;
}

.cta-card {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: var(--radius-xl);
    background: var(--primary-container);
    color: #fff;
    text-align: center;
}

.cta-card__visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .72;
}

.cta-card__wash {
    display: none;
}

.cta-card h2 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-card .button {
    position: relative;
    z-index: 1;
}

.cta-card__contact {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, .86);
    font-size: .75rem;
}

.cta-card__contact a {
    color: inherit;
    text-decoration: none;
}

.cta-card__contact a:hover {
    color: #fff;
    text-decoration: underline;
}

.stitch-page-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 0 58px;
    text-align: center;
}

.stitch-page-hero__wash {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: transparent;
}

.stitch-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stitch-page-hero h1 {
    max-width: 850px;
    margin-bottom: 14px;
}

.stitch-page-hero h1 .gradient-text {
    display: inline-block;
}

.stitch-page-hero__content>p {
    max-width: 700px;
    margin-bottom: 32px;
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

.stitch-feature-image {
    width: min(100%, 1050px);
    height: 365px;
    margin-top: 64px;
    overflow: hidden;
    border: 1px solid rgba(195, 198, 215, .35);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.stitch-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stitch-page-hero--process {
    padding-bottom: 72px;
}

.stitch-page-hero--process .stitch-page-hero__content>p {
    max-width: 560px;
}

.timeline-section {
    padding: 80px 0 72px;
    background: transparent;
}

.timeline {
    position: relative;
    max-width: 950px;
    margin-inline: auto;
}

.timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--outline-soft);
    content: "";
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    display: grid;
    min-height: 175px;
    grid-template-columns: 1fr 64px 1fr;
    align-items: start;
    gap: 26px;
    margin-bottom: 48px;
}

.timeline-item--left .timeline-card {
    grid-column: 1;
}

.timeline-item--right .timeline-card {
    grid-column: 3;
}

.timeline-card {
    padding: 24px;
    border: 1px solid rgba(195, 198, 215, .28);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .75);
    box-shadow: var(--shadow-soft);
}

.timeline-number {
    display: block;
    margin-bottom: 12px;
    color: var(--primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.timeline-card p {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .8rem;
}

.timeline-card ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .72rem;
    list-style: none;
}

.timeline-card li::before {
    margin-right: 7px;
    color: var(--primary);
    content: "⊙";
}

.timeline-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-inline: auto;
    border: 3px solid rgba(0, 53, 148, .18);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    font-size: 19px;
}

.method-section {
    padding: 72px 0;
    background: transparent;
}

.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 54px;
}

.method-grid h2 {
    margin-bottom: 20px;
}

.method-grid>div:first-child>p {
    margin-bottom: 24px;
    color: var(--muted);
    font-size: .9rem;
}

.method-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.method-list li {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 9px;
    color: var(--muted);
    font-size: .75rem;
}

.method-list .material-symbols-outlined {
    color: var(--primary);
    font-size: 19px;
}

.method-list strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: .78rem;
}

.method-image {
    height: 310px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.method-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-hero {
    padding: 92px 0 72px;
    background: transparent;
    text-align: center;
}

.portfolio-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-hero h1 {
    margin-bottom: 16px;
}

.portfolio-hero p {
    max-width: 720px;
    margin-bottom: 30px;
    color: var(--muted);
    font-size: 1rem;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.portfolio-filters button {
    border: 1px solid var(--outline-soft);
    border-radius: 999px;
    padding: 7px 17px;
    background: transparent;
    color: var(--ink);
    font-size: .73rem;
}

.portfolio-filters button:hover,
.portfolio-filters button.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.portfolio-filter__count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .66rem;
    font-weight: 700;
}

.portfolio-filters button:hover .portfolio-filter__count,
.portfolio-filters button.is-active .portfolio-filter__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.portfolio-stats {
    border-top: 1px solid rgba(195, 198, 215, .25);
    border-bottom: 1px solid rgba(195, 198, 215, .25);
    background: transparent;
}

.portfolio-stats .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 25px 0;
    text-align: center;
}

.portfolio-stats strong,
.portfolio-stats span {
    display: block;
}

.portfolio-stats strong {
    color: var(--primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.65rem;
}

.portfolio-stats span {
    color: var(--ink);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.portfolio-archive {
    padding: 88px 0 115px;
}

.portfolio-archive__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.portfolio-archive__grid .portfolio-card:nth-child(1) {
    grid-column: span 8;
}

.portfolio-archive__grid .portfolio-card:nth-child(2) {
    grid-column: span 4;
}

.portfolio-archive__grid .portfolio-card:nth-child(3) {
    grid-column: span 4;
}

.portfolio-archive__grid .portfolio-card:nth-child(4) {
    grid-column: span 8;
}

.portfolio-archive__grid .portfolio-card:nth-child(5) {
    grid-column: span 12;
}

.portfolio-card {
    min-width: 0;
    border: 1px solid var(--outline-soft);
    border-radius: var(--radius-md);
    background: var(--white);
    overflow: hidden;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.portfolio-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.portfolio-card__media {
    position: relative;
    display: block;
    height: 315px;
    overflow: hidden;
    background: var(--surface-low);
    text-decoration: none;
}

.portfolio-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.portfolio-card:hover .portfolio-card__media img {
    transform: scale(1.04);
}

.portfolio-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 600;
}

.portfolio-card__body {
    display: flex;
    min-height: 160px;
    flex-direction: column;
    padding: 20px;
}

.portfolio-card__body h2 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.portfolio-card__body h2 a {
    text-decoration: none;
}

.portfolio-card__body p {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .82rem;
}

.portfolio-empty-state {
    grid-column: 1 / -1;
    display: grid;
    min-height: 230px;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed var(--outline-soft);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-low) 72%, transparent);
    text-align: center;
}

.portfolio-empty-state[hidden],
.portfolio-card[hidden] {
    display: none;
}

.portfolio-empty-state strong {
    color: var(--primary);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.4rem;
}

.portfolio-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.technology-section {
    padding-bottom: 88px;
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.technology-card {
    position: relative;
    min-height: 205px;
    grid-column: span 3;
    padding: 24px;
    border: 1px solid rgba(195, 198, 215, .35);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.technology-card--wide {
    grid-column: span 6;
}

.technology-card--cloud {
    grid-column: span 6;
}

.technology-card--ai {
    grid-column: span 3;
    background: var(--white);
}

.technology-card__icon {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(0, 53, 148, .13);
    font-size: 52px;
}

.technology-card__icon--warm {
    color: rgba(110, 39, 0, .18);
}

.technology-card__label {
    margin-bottom: 20px;
    color: var(--primary);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.technology-card__label--secondary {
    color: var(--secondary);
}

.technology-card__label--warm {
    color: var(--tertiary);
}

.technology-card>p:last-child {
    max-width: 520px;
    color: var(--muted);
    font-size: .78rem;
}

.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.tech-chips span {
    padding: 5px 12px;
    border: 1px solid rgba(195, 198, 215, .32);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: Geist, monospace;
    font-size: .72rem;
}

.tech-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--ink);
    font-family: Geist, monospace;
    font-size: .8rem;
}

.tech-check .material-symbols-outlined {
    color: var(--outline);
    font-size: 15px;
}

.leadership-section {
    padding: 78px 0 96px;
    background: transparent;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    max-width: 820px;
    margin-inline: auto;
}

.leader-card {
    text-align: center;
}

.leader-card img,
.leader-avatar,
.leader-initials {
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    border: 4px solid var(--surface-high);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}

.leader-avatar {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--primary-soft), #f3f7ff);
    color: var(--primary);
}

.leader-avatar .material-symbols-outlined {
    font-size: 76px;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

.leader-initials {
    display: grid;
    place-items: center;
    background: var(--primary-container);
    color: #fff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
}

.leader-card h3 {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.leader-card>p {
    margin: 4px 0 12px;
    color: var(--primary);
    font-size: .78rem;
}

.leader-card a {
    color: var(--outline);
    text-decoration: none;
}

.leader-card a:hover {
    color: var(--primary);
}

.leader-card a .material-symbols-outlined {
    font-size: 18px;
}

.contact-hero {
    padding: 90px 0 72px;
    background: transparent;
}

.contact-hero h1 {
    margin-bottom: 18px;
}

.contact-hero h1 span {
    color: var(--primary);
}

.contact-hero p:last-child {
    max-width: 600px;
    color: var(--muted);
    font-size: 1.05rem;
}

.contact-section {
    padding: 82px 0 120px;
}

.contact-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 80px;
}

.contact-grid h2 {
    max-width: 380px;
    margin-bottom: 18px;
}

.page-content {
    max-width: 820px;
    color: var(--muted);
}

.page-content p {
    margin-bottom: 16px;
}

.contact-aside-copy {
    max-width: 330px;
    margin-bottom: 28px;
    color: var(--muted);
}

.contact-link {
    display: block;
    width: fit-content;
    margin-bottom: 10px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field label {
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--outline-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    outline: 0;
    background: var(--white);
    color: var(--ink);
    font-size: 1rem;
}

.form-field textarea {
    min-height: 140px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 53, 148, .17);
}

.form-errors {
    color: var(--error);
    font-size: .8rem;
}

.site-footer {
    padding: 64px 0;
    border-top: 1px solid var(--outline-soft);
    background: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 24px;
}

.footer-brand p {
    max-width: 280px;
    margin-top: 18px;
    color: var(--muted);
    font-size: .78rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-column__title {
    margin: 0 0 2px;
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .78rem;
    font-weight: 700;
}

.footer-column a {
    color: var(--muted);
    font-size: .78rem;
    text-decoration: none;
}

.footer-column a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.message-stack {
    padding-top: 16px;
}

.message {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .85rem;
}

.page-hero,
.detail-section {
    padding: 78px 0;
}

.page-hero {
    background: transparent;
}

.page-hero__inner {
    max-width: 820px;
}

.page-hero h1 {
    margin-bottom: 18px;
}

.page-hero__lead {
    max-width: 620px;
    color: var(--muted);
    font-size: 1.05rem;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .55fr);
    gap: 70px;
    align-items: start;
}

.detail-body {
    color: var(--muted);
}

.detail-body h2 {
    margin: 40px 0 14px;
}

.service-detail-intro {
    margin: 4px 0 28px;
}

.service-detail-intro .eyebrow-text {
    margin-bottom: 10px;
}

.service-detail-intro h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.service-detail-intro>p:last-child {
    max-width: 62ch;
    margin: 0;
    line-height: 1.7;
}

.service-faq-list {
    display: grid;
    gap: 14px;
}

.service-faq {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 17px;
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--surface-high));
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.service-faq__number {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.service-faq__content h2 {
    margin: 1px 0 8px;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.35;
}

.service-faq__content p {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.75;
}

.service-faq__content p br+br {
    display: none;
}

.detail-image {
    width: 100%;
    max-height: 500px;
    margin-bottom: 25px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.detail-aside {
    position: sticky;
    top: 90px;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--surface-low);
}

.detail-aside h2 {
    margin: 14px 0 24px;
    font-size: 1.45rem;
}

.detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.detail-gallery img {
    width: 100%;
    aspect-ratio: 1 / .75;
    border-radius: var(--radius);
    object-fit: cover;
}

@media (max-width: 900px) {
    .container {
        width: min(100% - 64px, 720px);
    }

    .primary-nav {
        gap: 12px;
    }

    .service-grid--home {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-portfolio-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid--landing {
        grid-template-columns: repeat(2, 1fr);
    }

    .method-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .technology-card,
    .technology-card--wide,
    .technology-card--cloud,
    .technology-card--ai {
        grid-column: span 6;
    }

    .portfolio-archive__grid .portfolio-card {
        grid-column: span 6 !important;
    }

    .footer-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .container {
        width: min(100% - 32px, 560px);
    }

    .nav-shell {
        display: flex;
        min-height: 60px;
    }

    .brand-wordmark {
        font-size: 1.1rem;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-toggle {
        display: grid;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 10px 16px 16px;
        border-bottom: 1px solid var(--outline-soft);
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        box-shadow: var(--shadow-hover);
    }

    .primary-nav.is-open {
        display: flex;
    }

    .primary-nav a {
        padding: 13px 4px;
    }

    .primary-nav a.is-active::after {
        right: auto;
        bottom: 6px;
        left: 4px;
        width: 45px;
    }

    .nav-cta {
        display: none;
    }

    .stitch-hero {
        padding: 80px 0;
    }

    .stitch-hero__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .stitch-hero__copy h1 {
        font-size: clamp(2.15rem, 11vw, 3.2rem);
    }

    .stitch-hero__copy>p {
        font-size: 1rem;
    }

    .service-grid--home {
        grid-template-columns: 1fr;
    }

    .home-portfolio-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-grid--landing {
        grid-template-columns: 1fr;
    }

    .stitch-section {
        padding: 64px 0;
    }

    .stitch-page-hero {
        padding: 64px 0 50px;
    }

    .stitch-page-hero h1 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .stitch-page-hero__content>p {
        font-size: 1rem;
    }

    .stitch-feature-image {
        height: 235px;
        margin-top: 42px;
    }

    .timeline::before {
        left: 23px;
    }

    .timeline-item {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
        padding-left: 58px;
    }

    .timeline-item--right .timeline-card {
        order: 1;
    }

    .timeline-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 46px;
        height: 46px;
    }

    .method-image {
        height: 230px;
    }

    .portfolio-hero {
        padding: 70px 0 54px;
    }

    .portfolio-hero h1 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .portfolio-stats .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .portfolio-stats strong {
        font-size: 1.35rem;
    }

    .portfolio-stats span {
        font-size: .59rem;
    }

    .portfolio-archive {
        padding: 60px 0 80px;
    }

    .portfolio-archive__grid {
        grid-template-columns: 1fr;
    }

    .portfolio-archive__grid .portfolio-card {
        grid-column: auto !important;
    }

    .portfolio-card__media {
        height: 245px;
    }

    .technology-grid {
        grid-template-columns: 1fr;
    }

    .technology-card,
    .technology-card--wide,
    .technology-card--cloud,
    .technology-card--ai {
        grid-column: auto;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .contact-hero {
        padding: 70px 0 58px;
    }

    .contact-hero h1 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .contact-section {
        padding: 64px 0 80px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .detail-aside {
        position: static;
    }

    .service-faq {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 13px;
        padding: 18px;
    }

    .service-faq__number {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: .65rem;
    }

    .service-faq__content h2 {
        font-size: 1rem;
    }

    .service-faq__content p {
        font-size: .93rem;
        line-height: 1.68;
    }
}

/* UI Pro Max polish: soft-tech depth, ambient background, and deliberate motion. */
:root {
    --glass-surface: rgba(255, 255, 255, .72);
    --glass-line: rgba(255, 255, 255, .72);
    --ease-spring: cubic-bezier(.2, .8, .2, 1);
    --duration-fast: 180ms;
    --duration-normal: 280ms;
}

body {
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(23, 73, 199, .12) 1px, transparent 1.2px);
    background-position: center top;
    background-repeat: repeat;
    background-size: 28px 28px;
}

a,
button,
input,
select,
textarea,
summary {
    touch-action: manipulation;
}

a,
button {
    cursor: pointer;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--primary-container);
    outline: 3px solid color-mix(in srgb, var(--primary-container) 72%, white);
    outline-offset: 3px;
}

.site-header {
    border-bottom-color: var(--outline-soft);
    border-bottom-color: color-mix(in srgb, var(--primary) 14%, transparent);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    transition: background var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-spring);
}

.nav-shell {
    display: grid;
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.brand {
    grid-column: 1;
    justify-self: start;
}

.primary-nav {
    grid-column: 2;
    justify-self: center;
    margin-left: 0;
}

.nav-actions {
    grid-column: 3;
    justify-self: end;
}

.primary-nav a,
.motion-toggle,
.nav-toggle {
    min-height: 44px;
}

.primary-nav a {
    display: inline-flex;
    align-items: center;
}

.button {
    min-height: 44px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
    transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-spring), background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.button--primary {
    background: var(--primary-container);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.button--primary:hover {
    box-shadow: 0 14px 30px rgba(37, 99, 235, .3);
    transform: translateY(-2px);
}

.button:active {
    transform: scale(.98);
}

.button--outline:hover {
    border-color: var(--primary-container);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .1);
    transform: translateY(-1px);
}

.gradient-text {
    color: var(--primary);
}

.stitch-hero,
.stitch-page-hero,
.portfolio-hero,
.contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.stitch-hero {
    background: transparent;
}

.site-body>main,
.site-body>footer {
    position: relative;
    z-index: 1;
}

.stitch-hero__grid,
.stitch-page-hero__content {
    position: relative;
    z-index: 1;
}

.stitch-hero__image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 14px;
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-xl);
    background: var(--glass-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: visual-float 8s ease-in-out infinite;
}

.stitch-hero__image::before {
    display: none;
}

.stitch-hero__image img {
    border-radius: calc(var(--radius-xl) - 6px);
}

.stitch-hero__image--3d {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.stitch-hero__image--3d::before {
    display: none;
}

.hero-3d {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--radius-xl);
    background: radial-gradient(circle at 76% 30%, rgba(109, 161, 255, .24), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(236, 244, 255, .9));
    box-shadow: 0 24px 60px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .82);
    perspective: 1100px;
    isolation: isolate;
}

.hero-3d::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 83, 210, .16) 1px, transparent 1.3px);
    background-position: 10px 10px;
    background-size: 24px 24px;
    content: "";
    opacity: .32;
    -webkit-mask-image: radial-gradient(circle at 70% 50%, black, transparent 74%);
    mask-image: radial-gradient(circle at 70% 50%, black, transparent 74%);
    pointer-events: none;
}

.hero-3d::after {
    position: absolute;
    right: 9%;
    bottom: 8%;
    width: 62%;
    height: 42%;
    border-radius: 50%;
    background: rgba(45, 121, 255, .17);
    content: "";
    filter: blur(42px);
    pointer-events: none;
}

.hero-3d__ambient {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.hero-3d__ambient--one {
    top: 9%;
    right: 6%;
    width: 9rem;
    height: 9rem;
    background: rgba(0, 132, 255, .18);
    filter: blur(26px);
}

.hero-3d__ambient--two {
    bottom: 4%;
    left: 9%;
    width: 11rem;
    height: 5rem;
    background: rgba(36, 85, 220, .13);
    filter: blur(32px);
}

.hero-3d__scene {
    position: absolute;
    z-index: 1;
    inset: 2% 0 1% 0;
    transform: translate3d(0, calc(var(--hero-scroll-y, 0px) + var(--scene-float-y, 0px)), 0) scale(var(--scene-scale, 1)) rotateX(calc(4deg + var(--hero-tilt-x, 0deg))) rotateY(var(--hero-tilt-y, 0deg)) rotateZ(-4deg);
    transform-style: preserve-3d;
    animation: hero-3d-scene-float 8.8s ease-in-out infinite;
    will-change: transform;
}

.hero-3d__platform {
    position: absolute;
    border: 1px solid rgba(60, 139, 255, .58);
    border-radius: 24px;
    transform-style: preserve-3d;
}

.hero-3d__platform::after {
    position: absolute;
    right: -10px;
    bottom: -17px;
    left: 10px;
    height: 18px;
    border: inherit;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(180deg, rgba(25, 90, 205, .82), rgba(8, 37, 112, .96));
    box-shadow: 0 16px 18px rgba(12, 47, 137, .22);
    content: "";
    transform: translateZ(-18px) skewX(-12deg);
    transform-origin: top;
}

.hero-3d__platform--back {
    top: 43%;
    right: 7%;
    left: 17%;
    height: 37%;
    background: linear-gradient(145deg, rgba(228, 243, 255, .92), rgba(92, 163, 255, .72));
    box-shadow: 0 18px 24px rgba(19, 76, 172, .22);
    transform: rotateX(59deg) rotateZ(-20deg) translateZ(-42px);
}

.hero-3d__platform--main {
    top: 47%;
    right: 11%;
    left: 13%;
    height: 37%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(34, 108, 236, .86));
    box-shadow: 0 22px 34px rgba(8, 42, 132, .28);
    transform: rotateX(59deg) rotateZ(-20deg) translateZ(-20px);
}

.hero-3d__platform--front {
    right: 15%;
    bottom: 9%;
    left: 18%;
    height: 17%;
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(60, 139, 255, .82));
    box-shadow: 0 22px 28px rgba(12, 47, 137, .26);
    transform: rotateX(59deg) rotateZ(-20deg) translateZ(0);
}

.hero-3d__platform--front::before {
    position: absolute;
    top: 22%;
    right: 7%;
    left: 9%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .94), transparent);
    content: "";
    opacity: .82;
}

.hero-3d__cloud {
    position: absolute;
    top: 7%;
    left: 57%;
    display: flex;
    width: 124px;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(29, 107, 230, .52);
    border-radius: 42% 46% 38% 44%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(181, 220, 255, .76));
    box-shadow: 11px 14px 0 -5px rgba(49, 127, 242, .22), 0 18px 25px rgba(25, 78, 171, .18), inset 0 2px 0 rgba(255, 255, 255, .9);
    color: var(--primary-container);
    transform: translate3d(0, var(--cloud-float-y, 0px), 74px) rotateZ(-5deg);
    animation: hero-3d-cloud-float 6.2s ease-in-out -.8s infinite;
    transform-style: preserve-3d;
}

.hero-3d__cloud .material-symbols-outlined {
    font-size: 29px;
}

.hero-3d__cloud span:last-child {
    max-width: 58px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.hero-3d__module {
    position: absolute;
    display: grid;
    width: 138px;
    min-height: 82px;
    align-content: center;
    justify-items: start;
    gap: 7px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(211, 231, 255, .88));
    box-shadow: 10px 13px 0 -5px rgba(38, 119, 236, .34), 0 18px 28px rgba(16, 64, 151, .2), inset 0 2px 0 rgba(255, 255, 255, .96);
    color: #16469b;
    transform: translate3d(0, var(--module-float-y, 0px), var(--module-z, 0px)) rotateZ(var(--module-rotate, 0deg));
    transform-style: preserve-3d;
    animation: hero-3d-module-float 6.4s ease-in-out var(--module-delay, 0s) infinite;
    will-change: transform;
}

.hero-3d__module::before {
    position: absolute;
    right: -9px;
    bottom: -12px;
    left: 8px;
    height: 12px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(30, 97, 216, .9), rgba(11, 47, 132, .94));
    box-shadow: 0 10px 13px rgba(11, 47, 132, .17);
    content: "";
    transform: translateZ(-12px) skewX(-14deg);
    transform-origin: top;
}

.hero-3d__module::after {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #43d3ff;
    box-shadow: 0 0 0 4px rgba(67, 211, 255, .16), 0 0 14px rgba(67, 211, 255, .9);
    content: "";
}

.hero-3d__module-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: rgba(34, 110, 239, .12);
    color: var(--primary-container);
    font-size: 20px;
}

.hero-3d__module-label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.1;
    text-transform: uppercase;
}

.hero-3d__module-signal {
    position: absolute;
    right: 14px;
    bottom: 15px;
    width: 34px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(37, 113, 239, .08), rgba(37, 113, 239, .72));
}

.hero-3d__module--api {
    top: 36%;
    left: 8%;
    --module-delay: -.9s;
    --module-rotate: -4deg;
    --module-z: 44px;
}

.hero-3d__module--services {
    top: 30%;
    left: 37%;
    color: #fff;
    --module-delay: -2.1s;
    --module-rotate: 2deg;
    --module-z: 78px;
    background: linear-gradient(145deg, #3f91ff, #0b46bd);
    box-shadow: 10px 13px 0 -5px rgba(6, 47, 149, .52), 0 18px 28px rgba(6, 47, 149, .34), inset 0 2px 0 rgba(255, 255, 255, .32);
}

.hero-3d__module--services .hero-3d__module-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.hero-3d__module--security {
    top: 38%;
    right: 5%;
    --module-delay: -3.2s;
    --module-rotate: 5deg;
    --module-z: 54px;
}

.hero-3d__module--data {
    top: 60%;
    left: 16%;
    --module-delay: -1.8s;
    --module-rotate: -3deg;
    --module-z: 25px;
}

.hero-3d__module--automation {
    top: 60%;
    right: 12%;
    --module-delay: -3.9s;
    --module-rotate: 4deg;
    --module-z: 46px;
}

.hero-3d__module--analytics {
    top: 72%;
    left: 42%;
    width: 128px;
    min-height: 66px;
    --module-delay: -4.8s;
    --module-rotate: 1deg;
    --module-z: 64px;
}

.hero-3d__module--analytics .hero-3d__module-icon {
    width: 27px;
    height: 27px;
    font-size: 17px;
}

.hero-3d__data-stream {
    position: absolute;
    z-index: 0;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #4fd7ff 26%, #1d6cf2 76%, transparent);
    box-shadow: 0 0 12px rgba(38, 159, 255, .72);
    opacity: .86;
    transform-origin: left center;
    animation: hero-3d-data-flow 3s ease-in-out infinite;
}

.hero-3d__data-stream--cloud {
    top: 33%;
    left: 51%;
    width: 25%;
    transform: rotate(-64deg) translateZ(38px);
}

.hero-3d__data-stream--api {
    top: 50%;
    left: 27%;
    width: 30%;
    transform: rotate(12deg) translateZ(42px);
    animation-delay: -.9s;
}

.hero-3d__data-stream--security {
    top: 51%;
    left: 60%;
    width: 28%;
    transform: rotate(15deg) translateZ(48px);
    animation-delay: -1.8s;
}

.hero-3d__orbits {
    position: absolute;
    z-index: 0;
    width: 44%;
    height: 25%;
    border: 1px solid rgba(40, 126, 247, .35);
    border-radius: 50%;
    pointer-events: none;
    transform: rotateX(64deg) rotateZ(-19deg) translateZ(18px);
    animation: hero-3d-orbit-pulse 5.6s ease-in-out infinite;
}

.hero-3d__orbits--one {
    top: 48%;
    left: 32%;
}

.hero-3d__orbits--two {
    top: 57%;
    left: 39%;
    width: 34%;
    height: 19%;
    border-color: rgba(63, 210, 255, .48);
    animation-duration: 4.8s;
    animation-direction: reverse;
}

.js-ready .hero-3d__scene {
    animation-play-state: running;
}

@keyframes hero-3d-scene-float {

    0%,
    100% {
        --scene-float-y: 0px;
    }

    50% {
        --scene-float-y: -8px;
    }
}

@keyframes hero-3d-module-float {

    0%,
    100% {
        --module-float-y: 0px;
    }

    50% {
        --module-float-y: -10px;
    }
}

@keyframes hero-3d-cloud-float {

    0%,
    100% {
        --cloud-float-y: 0px;
    }

    50% {
        --cloud-float-y: -13px;
    }
}

@keyframes hero-3d-data-flow {

    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: 1;
    }
}

@keyframes hero-3d-orbit-pulse {

    0%,
    100% {
        opacity: .45;
        transform: rotateX(64deg) rotateZ(-19deg) translateZ(18px) scale(.97);
    }

    50% {
        opacity: 1;
        transform: rotateX(64deg) rotateZ(-19deg) translateZ(18px) scale(1.04);
    }
}

@supports not (transform-style: preserve-3d) {
    .hero-3d__scene {
        display: none;
    }
}

.stitch-feature-image {
    position: relative;
    border-color: var(--outline-soft);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--outline-soft));
    box-shadow: 0 20px 50px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.hero-3d--unavailable {
    isolation: isolate;
}

.section-heading--center::after {
    display: block;
    width: 44px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 99px;
    background: var(--primary-container);
    content: "";
}

.service-card,
.portfolio-card,
.testimonial-card,
.technology-card,
.timeline-card,
.detail-aside {
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-spring), border-color var(--duration-normal) ease, box-shadow var(--duration-normal) var(--ease-spring);
}

.technology-card {
    background: var(--white);
    background: linear-gradient(145deg, var(--white) 0%, color-mix(in srgb, var(--primary-soft) 22%, var(--white)) 100%);
}

.service-card::before,
.portfolio-card::before,
.testimonial-card::before,
.technology-card::before {
    position: absolute;
    top: 0;
    right: 16%;
    left: 16%;
    height: 2px;
    background: var(--primary-container);
    content: "";
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
}

.service-card:hover,
.portfolio-card:hover,
.testimonial-card:hover,
.technology-card:hover,
.timeline-card:hover,
.detail-aside:hover {
    border-color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--outline-soft));
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
    transform: translateY(-5px);
}

.service-card:hover::before,
.portfolio-card:hover::before,
.testimonial-card:hover::before,
.technology-card:hover::before {
    opacity: 1;
}

.service-card__icon {
    transition: background var(--duration-fast) ease, transform var(--duration-normal) var(--ease-spring);
}

.service-card:hover .service-card__icon {
    background: var(--primary-soft);
    background: color-mix(in srgb, var(--primary-soft) 78%, var(--primary-container));
    transform: translateY(-2px) rotate(-4deg);
}

.arrow-link {
    min-height: 44px;
}

.cta-card {
    background: var(--primary-container);
    box-shadow: 0 20px 45px rgba(37, 99, 235, .22);
}

.cta-card::after {
    display: none;
}

.cta-card__contact {
    margin-top: 2px;
}

.page-transition {
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    background-color: #0a2d78;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 42%), linear-gradient(135deg, #071f5d 0%, var(--primary-container) 48%, #071a4a 100%);
    pointer-events: none;
    transform: translateY(100%);
    will-change: transform;
}

.page-transition::before {
    position: absolute;
    top: -28%;
    right: -9%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 68%);
    content: "";
    filter: blur(8px);
    pointer-events: none;
}

.page-transition::after {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    opacity: .72;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.js-ready .page-transition {
    animation: page-enter 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.is-leaving .page-transition {
    animation: page-exit 400ms cubic-bezier(.7, 0, .84, 0) both;
    pointer-events: auto;
}

.timeline {
    --timeline-progress: 0;
}

.timeline::after {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border-radius: 99px;
    background: var(--primary-container);
    content: "";
    pointer-events: none;
    transform: translateX(-50%) scaleY(var(--timeline-progress));
    transform-origin: top;
    transition: transform 120ms ease-out;
}

.timeline-item {
    z-index: 1;
}

.timeline-card {
    background: var(--white);
    background: color-mix(in srgb, var(--white) 78%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.timeline-icon {
    transition: background var(--duration-normal) var(--ease-spring), border-color var(--duration-normal) ease, box-shadow var(--duration-normal) var(--ease-spring), color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-spring);
}

.timeline-item.is-visible .timeline-icon,
.timeline-item.aos-animate .timeline-icon,
.timeline-item .timeline-card.aos-animate+.timeline-icon {
    border-color: var(--primary-container);
    background: var(--primary-container);
    color: #fff;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary-container) 13%, transparent), 0 10px 24px color-mix(in srgb, var(--primary-container) 25%, transparent);
    transform: scale(1.05);
}

.timeline-item.is-current .timeline-icon {
    animation: timeline-pulse 2.2s ease-in-out infinite;
}

.js-ready .stitch-hero__image {
    animation-play-state: paused;
}

.js-ready .stitch-hero__image.aos-animate {
    animation-play-state: running;
}

@keyframes visual-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes page-enter {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes page-exit {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes technology-ticker-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes timeline-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary-container) 13%, transparent), 0 10px 24px color-mix(in srgb, var(--primary-container) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 0 13px color-mix(in srgb, var(--primary-container) 4%, transparent), 0 12px 30px color-mix(in srgb, var(--primary-container) 32%, transparent);
    }
}

@media (max-width: 700px) {
    .site-header {
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 58%, transparent);
    }

    .nav-shell {
        min-height: 64px;
    }

    .nav-actions {
        gap: 6px;
    }

    .primary-nav {
        border-bottom-color: var(--outline-soft);
        border-bottom-color: color-mix(in srgb, var(--primary) 16%, var(--outline-soft));
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 88%, transparent);
    }

    .timeline::after {
        left: 23px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-actions .button {
        flex: 1 1 160px;
    }

    .stitch-hero__image {
        padding: 9px;
        animation: none;
    }

    .hero-3d {
        min-height: 350px;
    }

    .hero-3d__scene {
        --scene-scale: .78;
    }

    .cta-card {
        padding-inline: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    html:not(.motion-enabled) *,
    html:not(.motion-enabled) *::before,
    html:not(.motion-enabled) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    html:not(.motion-enabled) .page-transition {
        display: none;
    }

    html:not(.motion-enabled) [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html:not(.motion-enabled) .technology-ticker__track {
        animation: none !important;
        transform: none !important;
    }
}

html.motion-reduced *,
html.motion-reduced *::before,
html.motion-reduced *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
}

html.motion-reduced .page-transition {
    display: none;
}

html.motion-reduced [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

html.motion-reduced .technology-ticker__track {
    animation: none !important;
    transform: none !important;
}

html.motion-reduced .hero-3d__scene,
html.motion-reduced .hero-3d__module,
html.motion-reduced .hero-3d__cloud,
html.motion-reduced .hero-3d__data-stream,
html.motion-reduced .hero-3d__orbits,
html.motion-reduced .hero-3d__fallback-glow,
html.motion-reduced .hero-3d__fallback-platform,
html.motion-reduced .hero-3d__fallback-stream,
html.motion-reduced .hero-3d__fallback-node {
    animation: none !important;
}

/* Keep animated content visible when JavaScript or the optional AOS asset is unavailable. */
html:not(.js-ready) [data-aos] {
    opacity: 1;
    transform: none;
}

/* Progressive enhancement for browsers without backdrop-filter. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header {
        background: var(--surface);
    }

    .timeline-card {
        background: var(--white);
    }
}

/* Solid-color fallbacks for browsers that do not implement color-mix(). */
@supports not (color: color-mix(in srgb, white, black)) {
    .site-header {
        border-bottom-color: var(--outline-soft);
        background: var(--glass-surface);
    }

    .button--primary,
    .cta-card {
        background: var(--primary-container);
    }

    .stitch-hero {
        background: transparent;
    }

    .stitch-feature-image {
        border-color: var(--outline-soft);
    }

    .timeline-card {
        background: var(--white);
    }
}

/* Native WebGL hero: the model floats directly on the page without a frame. */
.stitch-hero__image--3d {
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hero-3d {
    min-height: 470px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    perspective: none;
}

.hero-3d::before,
.hero-3d::after {
    display: none;
}

.hero-3d__fallback {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    transition: opacity 360ms var(--ease-spring), visibility 360ms ease;
}

.hero-3d.is-enhanced .hero-3d__fallback {
    visibility: hidden;
    opacity: 0;
}

.hero-3d--unavailable .hero-3d__canvas {
    display: none;
}

.hero-3d__fallback-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(24px);
    opacity: .72;
}

.hero-3d__fallback-glow--one {
    top: 8%;
    right: 12%;
    width: 150px;
    height: 150px;
    background: rgba(54, 178, 255, .28);
    animation: safari-fallback-glow 5.4s ease-in-out infinite;
}

.hero-3d__fallback-glow--two {
    bottom: 8%;
    left: 11%;
    width: 180px;
    height: 72px;
    background: rgba(37, 99, 235, .2);
    animation: safari-fallback-glow 6.2s ease-in-out -1.5s infinite reverse;
}

.hero-3d__fallback-platform {
    position: absolute;
    border: 1px solid rgba(76, 157, 255, .68);
    border-radius: 24px;
    transform: rotateX(58deg) rotateZ(-18deg);
    transform-origin: center;
}

.hero-3d__fallback-platform--back {
    top: 38%;
    right: 8%;
    left: 15%;
    height: 39%;
    background: linear-gradient(145deg, rgba(219, 238, 255, .9), rgba(71, 143, 255, .64));
    box-shadow: 0 18px 26px rgba(19, 76, 172, .16);
    animation: safari-fallback-platform 8s ease-in-out infinite;
}

.hero-3d__fallback-platform--main {
    top: 43%;
    right: 12%;
    left: 11%;
    height: 38%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(34, 108, 236, .86));
    box-shadow: 0 22px 34px rgba(8, 42, 132, .22);
    animation: safari-fallback-platform 8s ease-in-out -1.2s infinite reverse;
}

.hero-3d__fallback-platform--front {
    right: 16%;
    bottom: 10%;
    left: 17%;
    height: 16%;
    border-color: rgba(255, 255, 255, .78);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(60, 139, 255, .82));
    box-shadow: 0 22px 28px rgba(12, 47, 137, .2);
    animation: safari-fallback-platform 7.2s ease-in-out -.6s infinite;
}

.hero-3d__fallback-stream {
    position: absolute;
    z-index: 2;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #4fd7ff 26%, #1d6cf2 76%, transparent);
    box-shadow: 0 0 12px rgba(38, 159, 255, .72);
    transform-origin: left center;
    animation: safari-fallback-stream 2.8s ease-in-out infinite;
}

.hero-3d__fallback-stream--one {
    top: 39%;
    left: 41%;
    width: 31%;
    transform: rotate(-35deg);
}

.hero-3d__fallback-stream--two {
    top: 57%;
    left: 24%;
    width: 34%;
    transform: rotate(15deg);
    animation-delay: -1.1s;
}

.hero-3d__fallback-node {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 86px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(204, 228, 255, .88));
    box-shadow: 8px 10px 0 -4px rgba(38, 119, 236, .28), 0 15px 24px rgba(16, 64, 151, .16);
    color: #16469b;
    font-family: Geist, monospace;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    animation: safari-fallback-node 5.8s ease-in-out infinite;
}

.hero-3d__fallback-node--api {
    top: 32%;
    left: 11%;
    animation-delay: -.7s;
}

.hero-3d__fallback-node--services {
    top: 25%;
    left: 42%;
    color: #fff;
    background: linear-gradient(145deg, #3f91ff, #0b46bd);
    animation-delay: -1.7s;
}

.hero-3d__fallback-node--security {
    top: 37%;
    right: 8%;
    animation-delay: -2.6s;
}

.hero-3d__fallback-node--data {
    bottom: 19%;
    left: 25%;
    animation-delay: -3.4s;
}

.hero-3d__fallback-glow,
.hero-3d__fallback-platform,
.hero-3d__fallback-stream,
.hero-3d__fallback-node {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-3d__canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    outline: none;
    transition: opacity 360ms var(--ease-spring);
    touch-action: none;
    user-select: none;
}

.hero-3d.is-enhanced .hero-3d__canvas {
    opacity: 1;
}

html.motion-reduced .hero-3d__canvas {
    opacity: 1 !important;
}

@keyframes safari-fallback-glow {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .5;
    }

    50% {
        transform: translate3d(0, -12px, 0) scale(1.08);
        opacity: .9;
    }
}

@keyframes safari-fallback-platform {

    0%,
    100% {
        transform: rotateX(58deg) rotateZ(-18deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotateX(58deg) rotateZ(-18deg) translate3d(0, -8px, 0);
    }
}

@keyframes safari-fallback-stream {

    0%,
    100% {
        opacity: .25;
        transform: rotate(-35deg) scaleX(.72);
    }

    50% {
        opacity: 1;
        transform: rotate(-35deg) scaleX(1);
    }
}

@keyframes safari-fallback-node {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@media (max-width: 700px) {
    .hero-3d {
        min-height: 350px;
    }
}

@media (min-width: 701px) {
    .stitch-hero--home {
        min-height: calc(100svh - 68px);
        align-items: center;
        padding: 62px 0 92px;
        display: flex;
        overflow: visible;
    }

    .stitch-hero--home .stitch-hero__grid {
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
        gap: 30px;
    }

    .stitch-hero--home .stitch-hero__image--3d {
        margin-block: -22px 0;
    }

    .stitch-hero--home .hero-3d {
        min-height: clamp(620px, 78svh, 840px);
    }
}

/* Technology cards: a consistent blue visual system with readable icon panels. */
.technology-card,
.technology-card--ai {
    min-height: 238px;
    border-color: rgba(82, 156, 255, .45);
    background: radial-gradient(circle at 92% 12%, rgba(109, 221, 255, .35), transparent 24%), linear-gradient(145deg, #062e86 0%, #0b56c7 54%, #168be8 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(7, 57, 143, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.technology-card--wide,
.technology-card--cloud {
    min-height: 258px;
}

.technology-card::after {
    position: absolute;
    top: -72px;
    right: -55px;
    z-index: 0;
    width: 184px;
    height: 184px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .045), 0 0 0 38px rgba(255, 255, 255, .035);
    content: "";
    pointer-events: none;
}

.technology-card>* {
    position: relative;
    z-index: 1;
}

.technology-card::before {
    right: 24px;
    left: 24px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(100, 226, 255, .7), transparent);
    opacity: .8;
}

.technology-card__icon {
    position: relative;
    top: auto;
    right: auto;
    display: grid;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-items: center;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(115, 216, 255, .12));
    box-shadow: 0 12px 22px rgba(1, 27, 91, .2), inset 0 1px 0 rgba(255, 255, 255, .34);
    color: #fff;
    font-size: 31px;
}

.technology-card__icon--warm {
    color: #fff;
}

.technology-card__label,
.technology-card__label--secondary,
.technology-card__label--warm {
    margin-bottom: 16px;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.technology-card__label::after {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    border-radius: 99px;
    background: rgba(126, 229, 255, .9);
    content: "";
}

.technology-card>p:last-child {
    color: rgba(255, 255, 255, .82);
}

.tech-chips {
    gap: 9px;
}

.tech-chips span {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.tech-check {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
}

.tech-check .material-symbols-outlined {
    color: #8de9ff;
}

/* Process hero banner: match the wide visual treatment used on the technology page. */
.stitch-page-hero--process .stitch-feature-image--process {
    width: min(100%, 1120px);
    height: clamp(320px, 34vw, 500px);
    margin-top: 48px;
    border-color: rgba(79, 148, 255, .45);
    border-radius: 28px;
    background: #062e86;
    box-shadow: 0 24px 58px rgba(7, 57, 143, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.stitch-page-hero--process .stitch-feature-image--process::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 25, 84, .2), transparent 38%, rgba(4, 25, 84, .08));
    content: "";
    pointer-events: none;
}

.stitch-page-hero--process .stitch-feature-image--process img {
    position: relative;
    z-index: 0;
    object-position: center center;
    filter: saturate(1.04) contrast(1.02);
}

.technology-ticker {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-top: -48px;
    border-block: 1px solid rgba(128, 197, 255, .32);
    background: linear-gradient(105deg, #06276f 0%, #0a55c5 48%, #0877d7 100%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(5, 52, 137, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.technology-ticker--standalone {
    margin-top: 0;
}

.technology-ticker::before,
.technology-ticker::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 96px;
    content: "";
    pointer-events: none;
}

.technology-ticker::before {
    left: 0;
    background: linear-gradient(90deg, #06276f, transparent);
}

.technology-ticker::after {
    right: 0;
    background: linear-gradient(270deg, #0877d7, transparent);
}

.technology-ticker__viewport {
    overflow: hidden;
}

.technology-ticker__track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: technology-ticker-right 34s linear infinite;
    will-change: transform;
}

.technology-ticker__group {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 30px;
    padding: 17px 30px;
}

.technology-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .92);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.technology-ticker__item::after {
    width: 4px;
    height: 4px;
    margin-left: 22px;
    border-radius: 50%;
    background: #9be7ff;
    box-shadow: 0 0 12px rgba(155, 231, 255, .85);
    content: "";
}

.technology-ticker__item .material-symbols-outlined {
    color: #9be7ff;
    font-size: 18px;
}

.technology-ticker:hover .technology-ticker__track {
    animation-play-state: paused;
}

.portfolio-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: auto;
}

.portfolio-card__links .arrow-link {
    margin-top: 0;
}

.arrow-link--visit {
    color: var(--primary-container);
}

.detail-aside__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-aside__actions .button {
    width: 100%;
}

/* Testimonial showcase: soft brand gradient keeps the client feedback in focus. */
.testimonial-showcase {
    background: radial-gradient(circle at 12% 24%, rgba(102, 171, 255, .16), transparent 30%), radial-gradient(circle at 88% 72%, rgba(146, 113, 255, .12), transparent 28%), transparent;
}

.testimonial-card {
    min-height: 300px;
    padding: 30px;
    border-color: rgba(86, 132, 220, .22);
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(240, 246, 255, .92) 56%, rgba(247, 243, 255, .94));
    box-shadow: 0 24px 55px rgba(37, 73, 145, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.testimonial-card::after {
    position: absolute;
    top: -82px;
    right: -58px;
    z-index: 0;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(37, 99, 235, .045), 0 0 0 38px rgba(124, 92, 219, .035);
    content: "";
    pointer-events: none;
}

.testimonial-card>* {
    position: relative;
    z-index: 1;
}

.testimonial-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.testimonial-card__eyebrow {
    color: var(--primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.testimonial-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9a6500;
    font-size: .75rem;
    font-weight: 700;
}

.testimonial-card__rating .material-symbols-outlined {
    color: #d89400;
    font-size: 18px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.testimonial-card__mark {
    position: absolute !important;
    top: 49px;
    right: 28px;
    z-index: 0 !important;
    color: rgba(37, 99, 235, .13);
    font-size: 86px;
    pointer-events: none;
}

.testimonial-card__quote {
    max-width: 66ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-weight: 500;
    line-height: 1.8;
}

.testimonial-card footer {
    padding-top: 22px;
    border-top: 1px solid rgba(86, 132, 220, .16);
}

.testimonial-card footer strong {
    color: var(--ink);
    font-size: .84rem;
}

.testimonial-card footer small {
    color: var(--muted);
    font-size: .72rem;
}

/* Contact brief: a guided lead-intake layout with clear grouping and inline feedback. */
.contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(82px, 10vw, 132px) 0 clamp(70px, 8vw, 104px);
    background: radial-gradient(circle at 84% 18%, rgba(69, 146, 255, .18), transparent 28%), radial-gradient(circle at 12% 76%, rgba(112, 102, 226, .1), transparent 26%), transparent;
}

.contact-hero__wash {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
    mask-image: linear-gradient(to bottom, black, transparent 88%);
    pointer-events: none;
}

.contact-hero__content {
    position: relative;
}

.contact-hero h1 {
    max-width: 820px;
    margin-bottom: 20px;
    font-size: clamp(2.45rem, 5vw, 4.5rem);
    line-height: 1.08;
}

.contact-hero h1 span {
    color: var(--primary-container);
}

.contact-hero__lead {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.7;
}

.contact-hero__promise {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 30px;
    color: var(--secondary);
    font-size: .76rem;
    font-weight: 600;
}

.contact-hero__promise span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.contact-hero__promise .material-symbols-outlined {
    color: var(--primary-container);
    font-size: 18px;
}

.contact-section {
    padding: 18px 0 128px;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(42px, 7vw, 92px);
}

.contact-intro {
    position: sticky;
    top: 108px;
    padding-top: 14px;
}

.contact-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--primary-container) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-soft) 58%, transparent);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contact-intro__badge .material-symbols-outlined {
    font-size: 17px;
}

.contact-intro h2 {
    max-width: 460px;
    margin-bottom: 18px;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
}

.contact-aside-copy {
    max-width: 450px;
    margin-bottom: 32px;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.75;
}

.contact-steps {
    display: grid;
    gap: 0;
    max-width: 470px;
}

.contact-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, var(--outline-soft));
}

.contact-step:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, var(--outline-soft));
}

.contact-step__number {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(37, 99, 235, .24);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, var(--primary-soft));
    color: var(--primary);
    font-size: .68rem;
    font-weight: 800;
}

.contact-step strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: .86rem;
}

.contact-step p {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.55;
}

.contact-direct {
    display: grid;
    gap: 8px;
    margin-top: 28px;
}

.contact-direct__label {
    color: var(--outline);
    font-size: .72rem;
    font-weight: 600;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.contact-link .material-symbols-outlined {
    font-size: 18px;
}

.contact-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-form-card {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(86, 132, 220, .22);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(241, 247, 255, .9) 58%, rgba(248, 245, 255, .94));
    box-shadow: 0 24px 58px rgba(37, 73, 145, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.contact-form-card::before {
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #5dbbff, var(--primary-container), transparent);
    content: "";
}

.contact-form-card::after {
    position: absolute;
    top: -90px;
    right: -74px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(37, 99, 235, .04), 0 0 0 40px rgba(124, 92, 219, .03);
    content: "";
    pointer-events: none;
}

.contact-form-card>* {
    position: relative;
    z-index: 1;
}

.contact-form-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.contact-form-card__heading .eyebrow-text {
    margin-bottom: 8px;
}

.contact-form-card__heading h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.contact-form-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, var(--primary-soft));
    color: var(--primary);
    font-size: 24px;
}

.contact-form-card__intro {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
}

.contact-form-card__intro span,
.required {
    color: var(--error);
    font-weight: 800;
}

.contact-form {
    display: grid;
    gap: 26px;
}

.form-fieldset {
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid rgba(86, 132, 220, .16);
}

.form-fieldset legend {
    padding: 0;
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.form-fieldset__intro {
    margin: 5px 0 18px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.55;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

.form-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.form-field label {
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(115, 118, 133, .36);
    border-radius: 12px;
    padding: 13px 14px;
    outline: 0;
    background: rgba(255, 255, 255, .86);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.45;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
}

.form-field select {
    appearance: none;
    padding-right: 42px;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.form-field textarea {
    min-height: 164px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 68%, transparent);
    opacity: 1;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: color-mix(in srgb, var(--primary-container) 42%, var(--outline-soft));
    background: #fff;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--primary-container);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--error);
}

.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
    box-shadow: 0 0 0 4px rgba(186, 26, 26, .12);
}

.form-field__hint {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5;
}

.form-field__error {
    margin: 0;
    color: var(--error);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.45;
}

.form-error-summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(186, 26, 26, .24);
    border-radius: 12px;
    background: rgba(186, 26, 26, .06);
    color: var(--error);
    font-size: .8rem;
    line-height: 1.5;
}

.form-error-summary .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 20px;
}

.form-error-summary strong {
    display: block;
    margin-bottom: 2px;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 17px;
}

.contact-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 4px;
}

.contact-form__privacy {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 350px;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.55;
}

.contact-form__privacy .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 17px;
}

.contact-form__footer .button {
    min-height: 48px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .contact-intro {
        position: static;
        padding-top: 0;
    }

    .contact-intro h2,
    .contact-aside-copy,
    .contact-steps {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .technology-ticker {
        margin-top: -28px;
    }

    .technology-ticker--standalone {
        margin-top: 0;
    }

    .stitch-page-hero--process .stitch-feature-image--process {
        height: 235px;
        margin-top: 42px;
        border-radius: 20px;
    }

    .testimonial-card {
        min-height: 0;
        padding: 24px;
    }

    .testimonial-card__top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 22px;
    }

    .testimonial-card__mark {
        top: 72px;
        right: 18px;
        font-size: 68px;
    }

    .testimonial-card__quote {
        font-size: 1rem;
        line-height: 1.72;
    }

    .contact-hero {
        padding: 74px 0 68px;
    }

    .contact-hero h1 {
        font-size: clamp(2.35rem, 11vw, 3.5rem);
    }

    .contact-hero__promise {
        display: grid;
        gap: 11px;
        margin-top: 24px;
    }

    .contact-section {
        padding: 8px 0 80px;
    }

    .contact-form-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .contact-form-card__heading {
        gap: 12px;
    }

    .contact-form-card__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 21px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-fieldset {
        padding-top: 19px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        min-height: 52px;
    }

    .contact-form__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .contact-form__privacy {
        max-width: none;
    }

    .contact-form__footer .button {
        width: 100%;
    }
}

/* Cross-device responsive pass: phone, tablet, and iPad portrait. */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
}

img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.container,
.stitch-hero__grid>*,
.method-grid>*,
.detail-layout>*,
.contact-layout>*,
.footer-grid>*,
.timeline-item>*,
.technology-card,
.portfolio-card {
    min-width: 0;
}

.contact-link,
.portfolio-card__body,
.detail-body,
.page-content,
.service-faq__content,
.footer-column {
    overflow-wrap: anywhere;
}

.contact-link {
    min-height: 44px;
}

.leader-card a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1120px) {
    .container {
        width: min(100% - 64px, 1100px);
    }

    .nav-shell {
        gap: 14px;
    }

    .brand-wordmark {
        font-size: 1.15rem;
    }

    .primary-nav {
        gap: 14px;
    }

    .primary-nav a {
        font-size: .68rem;
        letter-spacing: .05em;
    }

    .nav-actions {
        gap: 8px;
    }

    .nav-cta {
        padding-inline: 13px;
        font-size: .7rem;
    }

    .stitch-hero__grid {
        gap: 32px;
    }

    .method-grid {
        gap: 42px;
    }

    .detail-layout {
        gap: 48px;
    }

    .technology-grid,
    .portfolio-archive__grid {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .container {
        width: min(100% - 48px, 720px);
    }

    /* Keep the centered desktop navigation until it becomes unsafe to fit. */
    .nav-shell {
        display: flex;
        min-height: 64px;
    }

    .brand {
        grid-column: auto;
    }

    .brand-wordmark {
        font-size: 1.15rem;
    }

    .nav-actions {
        grid-column: auto;
        margin-left: auto;
    }

    .nav-toggle {
        display: grid;
    }

    .nav-cta {
        display: none;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 10px 24px 18px;
        border-bottom: 1px solid var(--outline-soft);
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 90%, transparent);
        box-shadow: var(--shadow-hover);
    }

    .primary-nav.is-open {
        display: flex;
    }

    .primary-nav a {
        min-height: 46px;
        padding: 13px 4px;
    }

    .primary-nav a.is-active::after {
        right: auto;
        bottom: 6px;
        left: 4px;
        width: 45px;
    }

    .stitch-hero__grid,
    .stitch-hero--home .stitch-hero__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .stitch-hero--home .hero-3d {
        min-height: clamp(250px, 52vw, 380px);
    }

    /* WebGL is desktop-only; mobile omits the visual to keep the hero focused. */
    .stitch-hero__image--3d {
        display: none !important;
    }

    .stitch-feature-image {
        height: clamp(270px, 42vw, 365px);
    }

    .timeline-card {
        padding: 20px;
    }

    .method-grid,
    .contact-grid,
    .contact-layout,
    .detail-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .detail-aside {
        position: static;
    }

    .portfolio-stats .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .portfolio-card__media {
        height: clamp(240px, 34vw, 315px);
    }

    .leadership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 620px;
        gap: 34px 24px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column a {
        display: flex;
        min-height: 44px;
        align-items: center;
    }

    .portfolio-filters button {
        min-height: 44px;
    }

    .faq-item summary {
        min-height: 48px;
    }
}

@media (max-width: 700px) {
    .container {
        width: min(100% - 32px, 560px);
    }

    .nav-shell {
        min-height: 64px;
    }

    .brand-wordmark {
        font-size: 1.1rem;
    }

    .nav-actions {
        gap: 6px;
    }

    .primary-nav {
        padding-inline: 16px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
        flex: 0 1 auto;
    }

    .stitch-hero--home .hero-3d {
        min-height: 350px;
    }

    .stitch-feature-image {
        height: 235px;
    }

    .stitch-feature-image--process,
    .stitch-page-hero--process .stitch-feature-image--process {
        height: 235px;
    }

    .timeline-card {
        padding: 18px;
    }

    .timeline-card p {
        font-size: .82rem;
    }

    .timeline-card ul {
        font-size: .75rem;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .technology-ticker::before,
    .technology-ticker::after {
        width: 44px;
    }

    .technology-ticker__group {
        gap: 22px;
        padding-inline: 22px;
    }

    .technology-ticker__item {
        font-size: .68rem;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 28px);
    }

    h1 {
        font-size: clamp(2rem, 12.5vw, 2.8rem);
    }

    h2 {
        font-size: clamp(1.35rem, 8vw, 1.85rem);
    }

    .brand-wordmark {
        font-size: 1rem;
    }

    .motion-toggle,
    .nav-toggle {
        width: 44px;
        height: 44px;
    }

    .stitch-hero {
        padding-block: 68px;
    }

    .stitch-page-hero,
    .portfolio-hero {
        padding-top: 58px;
    }

    .stitch-page-hero__content>p,
    .portfolio-hero p {
        font-size: .98rem;
    }

    .stitch-feature-image,
    .stitch-feature-image--process,
    .stitch-page-hero--process .stitch-feature-image--process {
        height: 214px;
        margin-top: 34px;
        border-radius: 18px;
    }

    .hero-3d,
    .stitch-hero--home .hero-3d {
        min-height: 235px;
        overflow: hidden;
    }

    .service-card,
    .technology-card,
    .timeline-card,
    .portfolio-card__body {
        padding: 20px;
    }

    .technology-card__icon {
        width: 52px;
        height: 52px;
        margin-bottom: 20px;
        font-size: 28px;
    }

    .portfolio-filters {
        gap: 8px;
    }

    .portfolio-filters button {
        flex: 1 1 auto;
        padding-inline: 12px;
    }

    .portfolio-stats .container {
        gap: 18px 8px;
        padding-block: 22px;
    }

    .portfolio-stats strong {
        font-size: 1.25rem;
    }

    .portfolio-stats span {
        font-size: .56rem;
        line-height: 1.35;
    }

    .portfolio-card__media {
        height: 220px;
    }

    .service-faq {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }

    .service-faq__number {
        width: 30px;
        height: 30px;
    }

    .service-faq__content p {
        font-size: .9rem;
    }

    .detail-gallery {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: 22px 16px;
    }

    .contact-form-card__heading {
        align-items: center;
    }

    .contact-form-card__heading h2 {
        font-size: 1.3rem;
    }

    .form-fieldset legend {
        font-size: .95rem;
    }

    .contact-form__privacy {
        font-size: .72rem;
    }

    .site-footer {
        padding: 36px 0 40px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand p {
        margin-top: 12px;
        font-size: .72rem;
    }

    .footer-column {
        gap: 2px;
    }

    .footer-column:last-child {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 16px;
    }

    .footer-column:last-child .footer-column__title {
        grid-column: 1 / -1;
    }

    .brand--footer .brand-wordmark {
        font-size: 1.28rem;
    }

    .cta-card {
        min-height: 220px;
    }

    .cta-card__contact {
        flex-direction: column;
        align-items: center;
    }
}

/* Let the global NET background remain visible through public-facing surfaces. */
.site-body .portal-card,
.site-body .service-card,
.site-body .testimonial-card,
.site-body .portfolio-card,
.site-body .technology-card,
.site-body .timeline-card,
.site-body .service-faq,
.site-body .contact-form-card,
.site-body .detail-aside,
.site-body .stitch-feature-image {
    border-color: rgba(255, 255, 255, .32) !important;
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 18px 42px rgba(10, 30, 100, .09), inset 0 1px 0 rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.site-body .technology-card {
    background: radial-gradient(circle at 92% 12%, rgba(109, 221, 255, .35), transparent 24%), linear-gradient(145deg, #062e86 0%, #0b56c7 54%, #168be8 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
}

.site-body .cta-card {
    background: rgba(8, 50, 150, .3) !important;
    color: #fff;
}

.site-body .cta-card {
    border: 1px solid rgba(255, 255, 255, .25);
}

.site-body .portfolio-card__media {
    background: rgba(255, 255, 255, .1);
}

.site-body main img {
    filter: brightness(1.1) saturate(1.12) contrast(1.04);
}

.site-body main .cta-card__visual {
    opacity: .92;
}

.site-body main .stitch-page-hero--process .stitch-feature-image--process::after {
    opacity: .08;
}

.contact-form__consent label {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
}

.contact-form__consent input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}