.page-home {
    background: var(--color-surface);
}

@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .signals-pending .signal-line .signal-path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 3.4s linear;
    }

    .signals-pending .site-header .signal-path {
        transition-duration: 420ms;
    }

    .signals-pending .is-signal-active .signal-line .signal-path {
        stroke-dashoffset: 0;
    }

    .signals-pending .trust .signal-path-out,
    .signals-pending .services .signal-line-services-entry .signal-path:nth-child(2) {
        transition-delay: 0.75s;
    }

    .signals-pending .signal-service-node,
    .signals-pending .signal-web-node,
    .signals-pending .signal-partnership-node,
    .signals-pending .signal-svg-node,
    .signals-pending .signal-turn-node-fixed {
        opacity: 0;
        transform: scale(0);
        transform-box: fill-box;
        transform-origin: center;
        transition: opacity 220ms ease 3.05s, transform 260ms ease 3.05s;
    }

    .signals-pending .signal-turn-node-fixed {
        transform: translate(-50%, -50%) scale(0);
    }

    .signals-pending .is-signal-active .signal-service-node,
    .signals-pending .is-signal-active .signal-web-node,
    .signals-pending .is-signal-active .signal-partnership-node,
    .signals-pending .hero.is-signal-active .signal-svg-node {
        opacity: 1;
        transform: scale(1);
    }

    .signals-pending .node-hero-end {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: opacity 220ms ease 3.15s, transform 260ms ease 3.15s;
    }

    .signals-pending .hero.is-signal-active .node-hero-end {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .signals-pending .hero-label-lead {
        transform: translateY(-50%) scaleX(0);
        transform-origin: right;
        transition: transform 1.15s ease 1.35s;
    }

    .signals-pending .hero-visual-labels li::before,
    .signals-pending .hero-label-join {
        opacity: 0;
        transition: opacity 200ms ease 2.55s;
    }

    .signals-pending .hero.is-signal-active .hero-label-lead {
        transform: translateY(-50%) scaleX(1);
    }

    .signals-pending .hero.is-signal-active .hero-visual-labels li::before,
    .signals-pending .hero.is-signal-active .hero-label-join {
        opacity: 1;
    }

    .signals-pending .hero-visual-labels li:nth-child(2) .hero-label-lead {
        transition-delay: 1.7s;
    }

    .signals-pending .hero-visual-labels li:nth-child(3) .hero-label-lead {
        transition-delay: 2.05s;
    }

    .signals-pending .hero-visual-labels li:nth-child(2)::before,
    .signals-pending .hero-visual-labels li:nth-child(2) .hero-label-join {
        transition-delay: 2.85s;
    }

    .signals-pending .hero-visual-labels li:nth-child(3)::before,
    .signals-pending .hero-visual-labels li:nth-child(3) .hero-label-join {
        transition-delay: 3.2s;
    }

    .signals-pending .trust.is-signal-active .signal-turn-node-fixed {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .signals-pending .services .signal-service-node:nth-of-type(1) {
        transition-delay: 900ms;
    }

    .signals-pending .services .signal-service-node:nth-of-type(2) {
        transition-delay: 1.65s;
    }

    .signals-pending .services .signal-service-node:nth-of-type(3) {
        transition-delay: 2.35s;
    }

    .signals-pending .services .signal-service-node:nth-of-type(4) {
        transition-delay: 3.05s;
    }

    .signals-pending .project-references-signal {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 2.7s cubic-bezier(0.42, 0, 0.18, 1);
    }

    .signals-pending .project-references-signal::after {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: opacity 200ms ease 1.35s, transform 240ms ease 1.35s;
    }

    .signals-pending .project-references.is-signal-active .project-references-signal {
        transform: scaleY(1);
    }

    .signals-pending .project-references.is-signal-active .project-references-signal::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .signals-pending .trust-segment::before {
        transform: translateY(-50%) scaleX(0);
        transform-origin: left;
        transition: transform 1.8s ease 1.1s;
    }

    .signals-pending .trust-node-fill,
    .signals-pending .trust-node-end {
        opacity: 0;
        transition: opacity 220ms ease 2.7s;
    }

    .signals-pending .trust.is-signal-active .trust-segment::before {
        transform: translateY(-50%) scaleX(1);
    }

    .signals-pending .trust.is-signal-active .trust-node-fill,
    .signals-pending .trust.is-signal-active .trust-node-end {
        opacity: 1;
    }

    .signals-pending .technology-column li::after {
        transform: scaleX(0);
        transition: transform 2.25s cubic-bezier(0.42, 0, 0.18, 1) 300ms;
    }

    .signals-pending .technology-column-left li::after {
        transform-origin: left;
    }

    .signals-pending .technology-column-right li::after {
        transform-origin: right;
    }

    .signals-pending .technology-column li::before {
        opacity: 0;
        transform: translateY(-50%) scale(0);
        transition: opacity 160ms ease, transform 200ms ease;
    }

    .signals-pending .technology.is-signal-active .technology-column li::after {
        transform: scaleX(1);
    }

    .signals-pending .technology.is-signal-active .technology-column li::before {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .signals-pending .technology-column li:nth-child(2)::after {
        transition-delay: 850ms;
    }

    .signals-pending .technology-column li:nth-child(3)::after {
        transition-delay: 1.4s;
    }

    .signal-spark {
        fill: #fff4dc;
        stroke: #ff5a1f;
        stroke-width: 2.25;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
        filter:
            drop-shadow(0 0 2px #fff)
            drop-shadow(0 0 5px #ff8a42)
            drop-shadow(0 0 10px rgb(255 90 31 / 0.9));
    }
}

.hero {
    position: relative;
    padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(2.35rem, 3.8vw, 3.5rem);
    background:
        radial-gradient(circle at 78% 34%, rgba(242, 95, 40, 0.2), transparent 24%),
        linear-gradient(180deg, var(--color-ink) 0%, #06141a 100%);
    color: var(--color-on-dark);
    overflow-x: clip;
}

.signal-line-hero,
.signal-line-trust {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    height: 100%;
    transform: translateX(-50%);
}

.signal-line-trust {
    height: 100%;
    overflow: visible;
}

.signal-turn-node-fixed {
    display: none;
    position: absolute;
    top: 46.176%;
    left: calc(50% + (min(calc(100% - (var(--gutter) * 2)), var(--container)) * 0.04861));
    z-index: 4;
    width: 0.5rem;
    height: 0.5rem;
    box-sizing: border-box;
    border: var(--signal-stroke) solid var(--color-orange);
    border-radius: 50%;
    background: var(--color-surface);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.signal-svg-node {
    fill: var(--color-ink);
    stroke: var(--color-orange);
    stroke-width: var(--signal-stroke);
    vector-effect: non-scaling-stroke;
}

.signal-turn-node {
    fill: var(--color-surface);
    stroke: var(--color-orange);
    stroke-width: var(--signal-stroke);
    vector-effect: non-scaling-stroke;
}

.node-hero-end,
.node-trust-join,
.node-trust-out {
    display: none;
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
}

.node-trust-join,
.node-trust-out {
    background: var(--color-surface);
}

.hero-grid {
    position: relative;
    z-index: 4;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: start;
}

.hero-copy {
    position: relative;
    z-index: 4;
    max-width: 40.625rem;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    color: var(--color-orange);
}

.hero-kicker::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-orange);
}

.hero h1 {
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.04em;
    color: var(--color-on-dark);
}

.hero-title-main,
.hero-title-accent {
    display: block;
}

.hero-title-accent {
    display: block;
    margin-top: 0.15em;
    color: var(--color-orange);
}

.hero-lead {
    max-width: 38.75rem;
    margin-top: clamp(1.75rem, 1.5rem + 1.6vw, 2.875rem);
    color: var(--color-on-dark-muted);
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.hero-actions .button {
    min-height: 3.25rem;
    padding: 0.7rem 1.2rem;
    font-size: 0.9375rem;
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin-top: 0.85rem;
}

.hero-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    color: var(--color-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
}

.hero-benefits li::before {
    content: "";
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    border: var(--signal-stroke) solid var(--color-orange);
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.7 8.2 6.4 11l5.9-6.4' stroke='%23f25f28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

.hero-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.hero-figure {
    position: relative;
    width: 116%;
    max-width: 100vw;
    margin-left: 50%;
    translate: -50% 0;
}

.hero-picture,
.hero-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 933;
    object-fit: contain;
    object-position: center;
}

.hero-visual-labels {
    position: relative;
    z-index: auto;
    display: grid;
    gap: 1.55rem;
    margin-top: 0.85rem;
}

.hero-visual-labels li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    z-index: auto;
    padding-left: 1.55rem;
    color: var(--color-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    --lead-w: 0.75rem;
}

.hero-visual-labels li::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    z-index: 2;
    width: 0.5rem;
    height: 0.5rem;
    border: var(--signal-stroke) solid var(--color-orange);
    border-radius: 50%;
    background: var(--color-ink);
    transform: translateY(-50%);
}

.hero-label-lead {
    position: absolute;
    top: 50%;
    right: calc(100% - 0.85rem);
    z-index: 0;
    width: var(--lead-w);
    height: var(--signal-stroke);
    background: var(--color-orange);
    border-radius: 1px;
    pointer-events: none;
    transform: translateY(-50%);
}

.hero-label-join {
    display: none;
    position: absolute;
    top: 50%;
    left: calc(0.85rem - var(--lead-w));
    z-index: 2;
    width: 0.5rem;
    height: 0.5rem;
    border: var(--signal-stroke) solid var(--color-orange);
    border-radius: 50%;
    background: var(--color-ink);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.hero-label-icon {
    position: relative;
    z-index: 2;
    width: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    height: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    flex: 0 0 auto;
    overflow: visible;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-label-text {
    position: relative;
    z-index: 2;
}

.trust {
    position: relative;
    padding: 3.25rem 0 3.5rem;
    background: var(--color-surface);
    overflow: visible;
}

.trust-inner {
    position: relative;
    z-index: 1;
}

.trust .section-kicker {
    margin-bottom: 1.35rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem 1.25rem;
}

.trust-grid li {
    position: relative;
    z-index: 1;
}

.trust-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.125rem;
    margin-bottom: 0.7rem;
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.trust-head .icon-line {
    flex: 0 0 auto;
}

.trust-google {
    display: block;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.trust-segment {
    display: none;
    position: relative;
    width: 4.75rem;
    height: 0.7rem;
    flex: 0 0 auto;
    overflow: visible;
}

.trust-segment::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0.22rem;
    top: 50%;
    height: var(--signal-stroke);
    background: var(--color-orange);
    border-radius: 1px;
    transform: translateY(-50%);
}

.trust-node-fill {
    position: absolute;
    left: 38%;
    top: 50%;
    z-index: 1;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-orange);
    transform: translate(-50%, -50%);
}

.trust-node-end {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    width: 0.5rem;
    height: 0.5rem;
    border: var(--signal-stroke) solid var(--color-orange);
    border-radius: 50%;
    background: var(--color-surface);
    transform: translateY(-50%);
}

.trust-value {
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
}

.trust-label {
    margin-top: 0.28rem;
    color: var(--color-muted);
    font-size: var(--text-small);
}

.services {
    position: relative;
    padding: 3.75rem 0 4.25rem;
    background: var(--color-surface-soft);
    overflow: visible;
}

.services-intro {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.services-heading {
    display: grid;
    gap: 0.7rem;
}

.services-intro h2 {
    display: flex;
    flex-direction: column;
    gap: 0.12em;
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.services-lead {
    max-width: 28rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.services-track {
    position: relative;
    z-index: 1;
}

.signal-line-services {
    display: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 5.5rem);
    overflow: visible;
    pointer-events: none;
}

.signal-line-services-entry {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    height: 16rem;
    overflow: visible;
    transform: translateX(-50%);
}

.signal-service-node {
    fill: var(--color-orange);
    stroke: var(--color-orange);
    stroke-width: var(--signal-stroke);
    vector-effect: non-scaling-stroke;
}

.services-list {
    display: grid;
}

.service-item {
    display: grid;
    grid-template-columns: 1.5rem 2rem 3.5rem minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.35rem;
    align-items: center;
    min-height: 6.75rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--color-line);
    transition: background-color var(--transition-fast);
}

.service-item:last-child {
    border-bottom: 1px solid var(--color-line);
}

.service-index {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.service-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-surface-soft);
    transition: background-color var(--transition-fast);
}

.service-icon .icon-line {
    width: 3.25rem;
    height: 3.25rem;
    stroke-width: 1.7;
}

.service-line-space {
    display: block;
    width: 2rem;
    height: 100%;
}

.service-item h3 {
    grid-column: 1 / -1;
    font-size: clamp(1.125rem, 1.05rem + 0.55vw, 1.5rem);
    line-height: 1.2;
}

.service-item p {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.service-item .text-link {
    grid-column: 1 / -1;
}

.service-item .text-link svg {
    transition: transform var(--transition-fast);
}

.service-item:hover .text-link svg {
    transform: translateX(0.25rem);
}

.web-solutions {
    position: relative;
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: var(--color-surface);
}

.web-solutions > .container {
    position: relative;
    z-index: 1;
}

.signal-line-web-entry {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    height: 13.5rem;
    overflow: visible;
    pointer-events: none;
    transform: translateX(-50%);
}

.signal-web-node {
    fill: var(--color-orange);
    stroke: var(--color-orange);
    stroke-width: var(--signal-stroke);
    vector-effect: non-scaling-stroke;
}

.web-solutions-intro {
    display: grid;
    gap: 2rem;
}

.web-solutions-heading h2 {
    margin-top: 0.7rem;
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.web-solutions-copy {
    display: grid;
    gap: 1.25rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.web-solutions-features {
    position: relative;
    display: grid;
    margin-top: 3rem;
}

.web-solutions-features li {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 6rem;
    padding: 1rem 0;
}

.web-solutions-features .icon-line {
    width: 2.75rem;
    height: 2.75rem;
    stroke-width: 1.8;
}

.web-solutions-features h3 {
    font-size: 1.125rem;
    line-height: 1.25;
}

.partnership {
    position: relative;
    padding: 3.75rem 0 4rem;
    background: var(--color-surface-soft);
    overflow: visible;
}

.partnership-inner {
    display: grid;
    gap: 2.25rem;
}

.partnership-intro {
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.partnership-line-space {
    display: none;
}

.signal-partnership-node {
    fill: var(--color-orange);
    stroke: var(--color-orange);
    stroke-width: var(--signal-stroke);
    vector-effect: non-scaling-stroke;
}

.partnership-copy h2 {
    max-width: 23ch;
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.partnership-copy h2 span {
    display: block;
}

.partnership-lead {
    max-width: 28rem;
    color: var(--color-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.partnership-list {
    display: grid;
    gap: 1rem;
}

.partnership-list li {
    display: block;
    min-height: 13rem;
    padding: 1.5rem;
    background: var(--color-surface);
    box-shadow: 0 0.4rem 1.5rem rgba(5, 28, 39, 0.035);
}

.partnership-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 0.85rem;
}

.partnership-icon .icon-line {
    width: 4rem;
    height: 4rem;
    stroke-width: 2;
}

.partnership-list h3 {
    font-size: 1.2rem;
    line-height: 1.2;
}

.partnership-list p {
    margin-top: 0.28rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.references {
    position: relative;
    padding: 4.25rem 0 4.75rem;
    background: var(--color-surface);
    overflow: visible;
}

.references-head {
    display: grid;
    gap: 0.35rem 1.5rem;
    margin-bottom: 1.75rem;
}

.references-heading h2 {
    max-width: 22ch;
    font-size: var(--text-h2);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.references .section-kicker {
    font-size: 1rem;
}

.references-all {
    justify-self: start;
    font-size: 1rem;
}

.references-all svg {
    width: 1rem;
    height: 1rem;
}

.references-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
}

.references-controls {
    display: flex;
    gap: 0.55rem;
}

.references-controls button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid rgb(8 24 32 / 0.18);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.references-controls button:hover:not(:disabled) {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.references-controls button:disabled {
    cursor: default;
    opacity: 0.28;
}

.references-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(88%, 31rem);
    gap: 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.25rem 0 1.25rem;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.references-grid::-webkit-scrollbar {
    display: none;
}

.ref-card {
    min-width: 0;
    scroll-snap-align: start;
}

.ref-visual {
    position: relative;
}

.signal-line-ref,
.node-ref-join {
    display: none;
}

.ref-screen {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(8 24 32 / 0.1);
    background: #cfd8de;
    box-shadow: 0 16px 38px rgb(8 24 32 / 0.1);
    color: inherit;
    text-decoration: none;
}

.ref-shot {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #d8dee3;
}

.ref-shot img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms ease;
}

.ref-screen:hover .ref-shot img {
    transform: scale(1.025);
}

.ref-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    padding-top: 1.15rem;
}

.ref-type {
    grid-column: 1 / -1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.ref-name {
    margin-top: 0.28rem;
    font-size: 1.375rem;
    line-height: 1.2;
}

.ref-description {
    grid-column: 1 / -1;
    max-width: 42rem;
    margin-top: 0.65rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.ref-link {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin-top: 0.85rem;
    color: var(--color-orange);
    font-size: 0.875rem;
    font-weight: 700;
}

.ref-name a {
    color: inherit;
}

.ref-name a:hover {
    color: var(--color-orange);
}

.project-references {
    padding-top: clamp(4.5rem, 7vw, 7rem);
    padding-bottom: clamp(4.75rem, 7vw, 7rem);
}

.references-head.project-references-head {
    grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr);
    align-items: center;
    margin-bottom: 2rem;
}

.project-references-signal {
    position: relative;
    justify-self: center;
    width: 2px;
    height: 8.75rem;
    background: var(--color-orange);
}

.project-references-signal::after {
    content: "";
    position: absolute;
    top: 38%;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-orange);
    transform: translate(-50%, -50%);
}

.project-references .references-all {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    justify-self: end;
    width: fit-content;
    border-bottom: 1px solid rgb(8 24 32 / 0.28);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
}

.project-references .references-all:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.project-references-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.project-ref-card .ref-screen {
    box-shadow: 0 18px 42px rgb(8 24 32 / 0.12);
}

.project-ref-title {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.15rem;
}

.project-ref-title h3 {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.project-ref-title span {
    color: var(--color-orange);
    font-size: 2rem;
    line-height: 1;
}

.project-ref-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.15rem 0 0;
}

.project-ref-results > div {
    min-width: 0;
    padding-right: 1rem;
}

.project-ref-results > div + div {
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-line);
}

.project-ref-results dt {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.project-ref-results dd {
    margin: 0.45rem 0 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.references-review-layout {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.references-review-stage {
    min-width: 0;
}

.references-review-stage .references-grid {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.reference-review {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(1rem);
    transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease;
}

.reference-review.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.reference-review-mark {
    color: var(--color-orange);
    font-size: clamp(4.5rem, 6vw, 6.5rem);
    font-weight: 700;
    line-height: 0.75;
}

.reference-review blockquote {
    max-width: 52rem;
    margin: 0;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 1.55vw, 1.35rem);
    font-style: italic;
    line-height: 1.55;
}

.reference-review figcaption {
    grid-column: 2;
    margin-top: 0.8rem;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
}

.references-review-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem;
    padding-left: clamp(4.75rem, 7vw, 7.75rem);
}

.references-dots {
    display: flex;
    gap: 0.65rem;
}

.references-dots button {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: 2px solid rgb(242 95 40 / 0.45);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.references-dots button.is-active {
    border-color: var(--color-orange);
    background: var(--color-orange);
    box-shadow: 0 0 0 0.3rem rgb(242 95 40 / 0.12);
}

.technology {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 6vw, 6.5rem) 0;
    background:
        radial-gradient(circle at 50% 60%, rgb(242 95 40 / 0.14), transparent 31%),
        linear-gradient(145deg, #07171e, #0b222b);
    color: var(--color-on-dark);
}

.technology-services {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(18rem, 1.25fr) minmax(13rem, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: center;
}

.technology-column {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2.25rem, 4vw, 4.25rem);
}

.technology-column li {
    --technology-connector: clamp(7rem, 10vw, 11rem);

    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
}

.technology-column li::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--technology-connector);
    height: 1px;
    background: var(--color-orange);
}

.technology-column li::before {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-orange);
    transform: translateY(-50%);
}

.technology-column-left li::after {
    right: calc((var(--technology-connector) * -1) + 1.5rem);
}

.technology-column-left li::before {
    right: 1.225rem;
}

.technology-column-right li::after {
    left: calc((var(--technology-connector) * -1) - 1.5rem);
}

.technology-column-right li::before {
    left: -1.775rem;
}

.technology-icon {
    display: grid;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.035);
}

.technology-icon svg {
    width: 2.25rem;
    height: 2.25rem;
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.technology-column h2 {
    margin: 0;
    color: var(--color-on-dark);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.technology-text {
    min-width: 0;
}

.technology-text p {
    max-width: 18rem;
    margin-top: 0.35rem;
    color: var(--color-on-dark-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.technology-visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.technology-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2%;
    z-index: -1;
    width: 78%;
    height: 16%;
    border-radius: 50%;
    background: rgb(242 95 40 / 0.23);
    filter: blur(35px);
    transform: translateX(-50%);
}

.technology-visual img {
    display: block;
    width: min(100%, 31rem);
    height: auto;
}

.video-story {
    background: var(--color-ink);
}

.video-wrap {
    position: relative;
    min-height: clamp(18rem, 36vw, 31rem);
    overflow: hidden;
}

.video-wrap::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: min(72rem, 64vw);
    background: linear-gradient(115deg, rgb(242 95 40 / 0.72), rgb(242 95 40 / 0.48));
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.story-video,
.video-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.story-video {
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.video-shade {
    z-index: 1;
    background: linear-gradient(90deg, rgb(8 24 32 / 0.48), rgb(8 24 32 / 0.25) 58%, rgb(8 24 32 / 0.38));
}

.video-content {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: inherit;
    flex-direction: column;
    justify-content: center;
    color: var(--color-on-dark);
}

.video-kicker {
    color: var(--color-on-dark);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.video-content h2 {
    max-width: 16ch;
    margin-top: 0.8rem;
    color: var(--color-on-dark);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.video-content > p:last-child {
    max-width: 34rem;
    margin-top: 1.15rem;
    color: var(--color-on-dark-muted);
    font-size: 1.0625rem;
}

.testimonial {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: var(--color-surface);
}

.testimonial-inner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.quote-mark {
    align-self: start;
    color: var(--color-orange);
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 0.72;
}

.testimonial-review {
    margin: 0;
}

.testimonial-review blockquote {
    max-width: 52rem;
    margin: 0;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 1.55vw, 1.35rem);
    line-height: 1.5;
}

.testimonial-review figcaption {
    margin-top: 0.55rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.testimonial-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.testimonial-dots {
    display: flex;
    gap: 0.65rem;
    align-items: center;
}

.testimonial-dots span {
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--color-orange);
    border-radius: 50%;
}

.testimonial-dots .is-active {
    background: var(--color-orange);
    box-shadow: 0 0 0 0.35rem rgb(242 95 40 / 0.13);
}

.testimonial-side strong {
    color: #7c8da0;
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.contact-cta {
    position: relative;
    min-height: 24rem;
    overflow: hidden;
    background: #e8edf0;
}

.contact-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.contact-map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(232 237 240 / 0.94) 0%, rgb(232 237 240 / 0.8) 38%, rgb(232 237 240 / 0.28) 68%, rgb(232 237 240 / 0.08) 100%);
    pointer-events: none;
}

.contact-map-frame {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    border: 0;
    filter: grayscale(1) saturate(0) contrast(0.82) brightness(1.08);
    opacity: 0.68;
    pointer-events: none;
}

.signal-line-map {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.map-marker svg {
    display: block;
    width: 100%;
    height: 100%;
}

.map-pin {
    position: absolute;
    left: 70%;
    top: 49%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.9);
    color: var(--color-ink);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.map-pin:hover {
    color: var(--color-ink);
    box-shadow: 0 12px 30px rgb(8 24 32 / 0.2);
    transform: translateY(-2px);
}

.map-marker {
    width: 1.75rem;
    height: 2.3rem;
    flex: 0 0 1.75rem;
    filter: drop-shadow(0 4px 5px rgb(8 24 32 / 0.18));
}

.map-marker path {
    fill: var(--color-orange);
    stroke: #fff;
    stroke-width: 1.5;
}

.map-marker circle {
    fill: #fff;
}

.contact-content {
    position: relative;
    z-index: 2;
    padding-top: clamp(4rem, 7vw, 6.5rem);
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

.contact-content h2 {
    margin-top: 0.8rem;
    font-size: clamp(2.25rem, 4.2vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.contact-content h2 span { color: var(--color-orange); }

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.75rem;
}

.button-light {
    border-color: #9baab2;
    background: rgb(255 255 255 / 0.55);
    color: var(--color-ink);
}

.button-light:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

@media (min-width: 24rem) {
    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 48rem) {
    .hero-title-main {
        white-space: nowrap;
    }

    .signal-line-services {
        display: none;
    }

    .service-item {
        grid-template-columns: 1.7rem 2rem 3.75rem minmax(0, 1fr);
        min-height: 6.75rem;
        padding: 1.2rem 0;
    }

    .web-solutions-copy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
    }

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

    .web-solutions-features li:nth-child(odd) {
        padding-right: 2rem;
    }

    .web-solutions-features li:nth-child(even) {
        padding-left: 2rem;
        border-left: 1px solid var(--color-line);
    }

    .web-solutions-features li:nth-child(-n + 4) {
        border-bottom: 0;
    }

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

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .trust-head .icon-line,
    .trust-google {
        width: 2rem;
        height: 2rem;
    }
}

@media (min-width: 64rem) {
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: clamp(36.875rem, 27.625rem + 10.83vw, 40.625rem);
    }

    .hero-grid {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
        column-gap: clamp(1.5rem, 3vw, 3.25rem);
        align-items: center;
        flex-shrink: 0;
    }

    .signal-line-hero,
    .signal-line-trust,
    .node-hero-end,
    .node-trust-join,
    .node-trust-out {
        display: block;
    }

    .signal-turn-node-fixed {
        display: block;
    }

    .node-hero-end,
    .node-trust-join,
    .node-trust-out {
        left: calc(50% + (min(calc(100% - (var(--gutter) * 2)), var(--container)) * 0.0993));
        transform: translate(-50%, -50%);
    }

    .node-hero-end {
        top: 100%;
    }

    .node-trust-join {
        top: 7.29rem;
    }

    .node-trust-out {
        display: none;
    }

    .hero-figure {
        width: 100%;
        max-width: 47.5rem;
        margin-left: 0;
        translate: 0;
    }

    .hero-label-join {
        display: block;
    }

    .hero-visual-labels li {
        --lead-w: 2.75rem;
    }

    .trust {
        padding: 2.75rem 0 3rem;
    }

    .trust-head {
        align-items: center;
        gap: 1rem;
        min-height: 3rem;
        margin-bottom: 0.45rem;
    }

    .trust-icon {
        width: 2.625rem;
        height: 2.625rem;
    }

    .trust-grid > li:nth-child(-n+3) .trust-icon {
        width: 3.125rem;
        height: 3.125rem;
        margin: -0.0625rem 0 -0.0625rem -0.125rem;
    }

    .trust-head .trust-icon-cal {
        width: 2.9375rem;
        height: 2.9375rem;
        stroke-width: 1.7;
    }

    .trust-head .trust-icon-people {
        width: 3.0625rem;
        height: 3.0625rem;
        stroke-width: 1.7;
    }

    .trust-head .trust-icon-star {
        width: 3rem;
        height: 3rem;
        stroke-width: 1.7;
    }

    .trust-google {
        width: 2.375rem;
        height: 2.375rem;
    }

    .trust-segment {
        display: block;
    }

    .trust-segment-meet::before {
        display: none;
    }

    .trust-segment-meet .trust-node-fill {
        display: none;
    }

    .node-trust-join::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: 4.25rem;
        height: 0.7rem;
        background: var(--color-surface);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem 1.5rem;
        padding-top: 0.35rem;
    }

    .services {
        padding: 3.75rem 0 5.5rem;
    }

    .services-intro {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        column-gap: 3rem;
        margin-bottom: 2.75rem;
    }

    .services-lead {
        justify-self: end;
        margin-top: 1rem;
        font-size: 1.25rem;
        line-height: 1.55;
    }

    .signal-line-services {
        display: block;
    }

    .signal-line-services-entry {
        display: block;
    }

    .signal-line-web-entry {
        display: block;
    }

    .signal-line-map {
        display: block;
    }

    .partnership {
        padding: 4.25rem 0 4.5rem;
    }

    .partnership-inner {
        gap: 2.75rem;
    }

    .partnership-intro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
        align-items: center;
        column-gap: clamp(9rem, 12vw, 13rem);
    }

    .partnership-copy {
        align-self: start;
    }

    .partnership-copy h2 span:last-child {
        white-space: nowrap;
    }

    .partnership-line-space {
        display: block;
        position: absolute;
        top: -4.25rem;
        left: 50%;
        width: 1.5rem;
        height: 8rem;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .signal-line-partnership {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .partnership-lead {
        justify-self: end;
        width: min(100%, 28rem);
        font-size: 1.25rem;
        line-height: 1.55;
    }

    .partnership-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .partnership-list li {
        min-height: 16rem;
        padding: 1.75rem 1.5rem;
    }

    .references {
        padding: 3.75rem 0 4.5rem;
    }

    .references-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 2rem;
        margin-bottom: 2.25rem;
    }

    .references-all {
        justify-self: end;
        margin-bottom: 0.2rem;
    }

    .references-actions {
        justify-content: flex-end;
    }

    .references-grid {
        grid-auto-columns: calc((100% - 2rem) / 2);
        align-items: start;
    }

    .references-review-layout {
        grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
    }

    .references-review-stage .references-grid {
        grid-auto-columns: auto;
    }

    .testimonial-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 2rem;
    }

    .testimonial-side {
        width: 17rem;
    }

    .signal-line-ref {
        display: block;
        position: absolute;
        z-index: 2;
        left: -0.15rem;
        top: -0.85rem;
        width: 7.5rem;
        height: 5.5rem;
        overflow: visible;
        pointer-events: none;
    }

    .node-ref-join {
        display: block;
        position: absolute;
        z-index: 3;
        left: 1.05rem;
        top: 0.9rem;
        width: 0.55rem;
        height: 0.55rem;
        background: var(--color-surface-mist);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .services-list {
        grid-template-columns: 1.8rem 2.75rem 4.5rem minmax(12rem, 0.8fr) minmax(0, 1.2fr) auto;
    }

    .service-item {
        position: relative;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        min-height: 7.5rem;
        padding: 1.15rem 0.5rem;
        column-gap: 1rem;
        border-top: 0;
    }

    .service-item:last-child {
        border-bottom: 0;
    }

    .service-item::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        bottom: 0;
        left: calc(1.8rem + 2.75rem + 4.5rem + 3rem);
        height: 1px;
        background: var(--color-line);
        pointer-events: none;
    }

    .service-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .service-icon .icon-line {
        width: 3.75rem;
        height: 3.75rem;
    }

    .service-item:hover {
        background: rgb(255 255 255 / 0.55);
    }

    .service-item:hover .service-icon {
        background: transparent;
    }

    .service-item h3,
    .service-item p,
    .service-item .text-link {
        grid-column: auto;
    }

    .service-item h3 {
        padding-left: 2.25rem;
    }

    .service-item p {
        max-width: 32rem;
        font-size: 1.125rem;
    }

    .service-item .text-link {
        justify-self: end;
        white-space: nowrap;
    }

    .web-solutions-intro {
        display: block;
    }

    .web-solutions-heading {
        max-width: 36rem;
    }

    .web-solutions-copy {
        margin-top: 2.25rem;
        gap: 3.5rem;
        font-size: 1.0625rem;
    }

    .web-solutions-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 3.5rem;
    }

    .web-solutions-features li,
    .web-solutions-features li:nth-child(odd),
    .web-solutions-features li:nth-child(even) {
        padding: 1.25rem 2.25rem;
        border-bottom: 0;
        border-left: 0;
    }

    .web-solutions-features li:nth-child(3n + 1) {
        padding-left: 0;
    }

    .web-solutions-features li:nth-child(3n) {
        padding-right: 0;
    }

    .web-solutions-features li:nth-child(-n + 3) {
        border-bottom: 0;
    }

    .web-solutions-features::before,
    .web-solutions-features::after {
        content: "";
        position: absolute;
        top: 0.35rem;
        bottom: 0.35rem;
        width: 1px;
        background: var(--color-line);
        pointer-events: none;
    }

    .web-solutions-features::before {
        left: 33.333%;
    }

    .web-solutions-features::after {
        left: 66.666%;
    }

    .web-solutions-features li:nth-child(-n + 3)::after {
        content: "";
        position: absolute;
        right: 2.25rem;
        bottom: 0;
        left: 2.25rem;
        height: 1px;
        background: var(--color-line);
        pointer-events: none;
    }

    .web-solutions-features li:first-child::after {
        left: 0;
    }

    .web-solutions-features li:nth-child(3)::after {
        right: 0;
    }

    .web-solutions-features .icon-line {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 90rem) {
    .hero-copy {
        padding-top: 0.2rem;
    }

    .hero-visual {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0;
        align-items: center;
    }

    .hero-visual-labels {
        align-content: space-evenly;
        min-height: 20.5rem;
        margin-top: 0;
        margin-left: -1.25rem;
        padding: 1.75rem 0 1.75rem 0.25rem;
    }

    .hero-visual-labels li {
        white-space: nowrap;
    }

    .hero-visual-labels li:nth-child(1) {
        --lead-w: 8.25rem;
    }

    .hero-visual-labels li:nth-child(2) {
        --lead-w: 7.5rem;
    }

    .hero-visual-labels li:nth-child(3) {
        --lead-w: 7.35rem;
    }

    .hero-figure {
        translate: 2.25rem 0;
    }
}

@media (max-width: 63.99rem) {
    .signal-line-hero,
    .signal-line-trust,
    .node-hero-end,
    .node-trust-join,
    .node-trust-out,
    .signal-line-header,
    .signal-line-services,
    .signal-line-ref,
    .node-ref-join {
        display: none;
    }

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

    .technology-visual {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .technology-column {
        grid-row: 2;
    }

    .technology-column li::before,
    .technology-column li::after {
        display: none;
    }

    .references-head.project-references-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .project-references-signal {
        display: none;
    }

    .project-references-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
}

@media (max-width: 47.99rem) {
    .references {
        padding: 3.5rem 0;
    }

    .references-heading h2 {
        max-width: 18ch;
    }

    .references-head.project-references-head {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .project-references .references-all {
        justify-self: start;
    }

    .project-ref-results {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-ref-results > div {
        padding: 0 0 1rem;
    }

    .project-ref-results > div + div {
        padding: 1rem 0;
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }

    .technology-services {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .technology-column,
    .technology-visual {
        grid-column: 1;
        grid-row: auto;
    }

    .technology-column {
        gap: 1.25rem;
    }

    .technology-visual {
        grid-row: 1;
    }

    .technology-icon {
        flex-basis: 3.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }

    .video-wrap {
        min-height: 24rem;
    }

    .video-wrap::before {
        width: 112%;
        background: linear-gradient(115deg, rgb(242 95 40 / 0.72), rgb(242 95 40 / 0.45));
        clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
    }

    .story-video {
        object-position: 58% center;
    }

    .contact-map::after {
        background: linear-gradient(180deg, rgb(232 237 240 / 0.92) 0%, rgb(232 237 240 / 0.65) 58%, rgb(232 237 240 / 0.18) 100%);
    }

    .map-pin {
        left: auto;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        padding: 0.55rem 0.75rem;
        font-size: 0.75rem;
    }
}