/* Yammm studio: four connected disciplines, expressed as one dimensional object. */
:root {
    --welcome-canvas: #f6f8fd;
    --welcome-surface: #fff;
    --welcome-ink: #213052;
    --welcome-copy: #5a6884;
    --welcome-purple: #565aa0;
    --welcome-line: #dce3f0;
    --welcome-glass: #ffffffc9;
    --welcome-shadow: #2f46651a;
    --welcome-peach: #fff0e5;
    --welcome-selected: #e7ebf5;
    --welcome-radius: 2rem;
    --welcome-pill: 100rem;
    --welcome-serif: georgia, "Times New Roman", serif;
}

.site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-5) 5%;
    background: var(--welcome-canvas);
    color: var(--welcome-ink);
    color-scheme: light;
}

.brand-slot {
    grid-column: 1 / -1;
    flex: none;
    inline-size: 7.5rem;
    block-size: 2.75rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: 100%;
}

.brand img {
    block-size: auto;
}

.brand-mark {
    inline-size: 25%;
    flex: none;
}

.brand-wordmark {
    inline-size: calc(75% - var(--space-3));
}

.brand-compact {
    display: none;
    inline-size: 100%;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-inline-start: 0;
    font-size: var(--text-small);
}

.main-nav a {
    padding-block: var(--space-3);
}

.main-nav a:not(:first-child) {
    display: none;
}

.main-nav a:hover {
    color: var(--welcome-purple);
}

.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--space-4);
}

.header-support {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.75rem;
    font-size: var(--text-small);
    white-space: nowrap;
}

.header-support:hover {
    color: var(--welcome-purple);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.header-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: var(--space-3) 1.25rem;
    border-radius: var(--welcome-pill);
    background: var(--welcome-ink);
    color: var(--welcome-surface);
    font-size: var(--text-small);
    white-space: nowrap;
    transition: background 0.2s;
}

.header-contact:hover {
    background: var(--welcome-purple);
}

.experience {
    --overview-viewport: calc(100vw - var(--overview-scrollbar, 0px));

    max-width: none;
    padding: 0 5% var(--space-6);
    background: var(--welcome-canvas);
    color: var(--welcome-ink);
    color-scheme: light;
}

.face {
    color: var(--paper);
    border-radius: var(--welcome-radius);
}

/* Shared artwork connects the overview sculpture to each flat service card. */
.face-overview,
.service-card {
    --flow-edge: #ffffffeb;
    --flow-shadow: #3c4d862b;
    --flow-line: #8698c04d;
    --flow-plane: #eff3fba8;
    --flow-back: #dde5f5cf;
    --flow-orange: #f2611c;
}

/* The sculpture is decorative; every service stays in normal, readable flow. */
.face-overview {
    --focus-ring: var(--welcome-purple);
    --overview-padding: var(--space-5);
    --overview-outset: 0px;

    display: block;
    min-block-size: 0;
    padding: var(--space-7) var(--space-5) var(--space-5);
    border: 0;
    background: radial-gradient(ellipse at 50% 60%, var(--welcome-canvas), var(--welcome-surface) 68%);
    color: var(--welcome-ink);
    color-scheme: light;
    container: welcome / inline-size;
}

/* Expand only the resting overview. Equal changes to width and padding keep
   its content container, type and sculpture fixed throughout the handoff. */
.is-enhanced .face-overview {
    width: calc(100% + 2 * var(--overview-outset));
    left: calc(-1 * var(--overview-outset));
    padding-inline: calc(var(--overview-padding) + var(--overview-outset));
}

.is-ready .face-overview {
    transition:
        width 0.32s var(--ease),
        left 0.32s var(--ease),
        padding-left 0.32s var(--ease),
        padding-right 0.32s var(--ease),
        border-radius 0.32s var(--ease);
}

.is-overview-expanded .face-overview {
    --overview-outset: calc((var(--overview-viewport) - 100%) / 2);

    border-radius: 0;
}

.is-resizing .face-overview {
    transition: none;
}

.is-enhanced .welcome-art {
    overflow: visible;
}

/* Keep the drawing surface stable; the face reveals/crops it as it expands.
   Resizing the Canvas every transition frame would rebuild its material. */
.is-enhanced .welcome-ribbon {
    inset-inline: auto;
    left: calc(50% - var(--overview-viewport) / 2);
    width: var(--overview-viewport);
    overflow: clip;
}

.is-enhanced .ribbon-canvas,
.is-enhanced .welcome-ribbon img {
    block-size: calc(190cqi * 426 / 1280);
}

.welcome-copy {
    position: relative;
    z-index: var(--layer-content);
    text-align: center;
}

.welcome-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--welcome-copy);
    font-size: 0.6875rem;
    line-height: 1.5;
    letter-spacing: 0.025em;
    margin-block-end: var(--space-5);
}

.welcome-kicker > span {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--flow-orange);
    box-shadow: 0 0 0 0.25rem var(--welcome-peach);
}

.welcome-copy h1 {
    font-size: clamp(2.5rem, 10cqi, 6.75rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.welcome-copy h1 > span {
    display: inline-block;
    color: var(--welcome-purple);
    font-weight: 300;
    letter-spacing: -0.075em;
}

.welcome-intro {
    max-inline-size: 34rem;
    margin: var(--space-5) auto 0;
    font-size: var(--text-small);
    line-height: 1.65;
    color: var(--welcome-copy);
    text-wrap: pretty;
}

.welcome-intro br {
    display: none;
}

.welcome-art {
    position: relative;
    isolation: isolate;
    block-size: clamp(16rem, 40cqi, 25rem);
    margin: var(--space-3) calc(-1 * var(--space-5)) 0;
    overflow: clip;
}

.welcome-ribbon {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.78;
    pointer-events: none;
    mask-image: linear-gradient(180deg, var(--clear), var(--mask-solid) 18% 58%, var(--clear) 98%);
}

.welcome-ribbon img,
.ribbon-canvas {
    position: absolute;
    inset-block-start: calc(24% - var(--space-5));
    inset-inline-start: -45%;
    inline-size: 190%;
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 1280 / 426;
    mix-blend-mode: multiply;
    rotate: -8deg;
}

/* Reveal Canvas only after its first successful frame. The separate image
   lives in noscript and is never loaded by scripting-enabled documents. */
.ribbon-canvas {
    visibility: hidden;
}

.ribbon-art.is-enhanced {
    opacity: 1;
}

.ribbon-art.is-enhanced .ribbon-canvas {
    visibility: visible;
}

.ribbon-controls {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    z-index: var(--layer-content);
    inset-inline-end: var(--space-2);
    inset-block-end: var(--space-2);
}

.ribbon-controls > output {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ribbon-controls > output[hidden] {
    display: none;
}

.ribbon-controls > button,
.ribbon-controls > output {
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--welcome-line);
    border-radius: var(--welcome-pill);
    background: var(--welcome-surface);
    color: var(--welcome-copy);
    font-size: 0.6875rem;
}

.ribbon-controls > button {
    display: none;
    cursor: pointer;
}

.ribbon-controls > button:hover {
    background: var(--welcome-selected);
}

.flow-sculpture {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.flow-sculpture::after {
    content: "";
    position: absolute;
    inset-block-end: 8%;
    inline-size: 48%;
    block-size: 9%;
    background: var(--flow-shadow);
    border-radius: 50%;
    filter: blur(1rem);
    z-index: -1;
}

.flow-orbit {
    position: absolute;
    inline-size: 78%;
    block-size: 74%;
    border: 1px solid var(--flow-line);
    border-radius: 50%;
    transform: rotate(-12deg) scaleY(0.6);
}

.flow-orbit::after {
    content: "";
    position: absolute;
    inset: var(--space-5) calc(-1 * var(--space-5));
    border: 1px solid var(--flow-line);
    border-radius: inherit;
}

.flow-stack {
    position: relative;
    inline-size: min(100%, 64rem);
    block-size: clamp(12rem, 28cqi, 20rem);
    perspective: 65rem;
    transform-style: preserve-3d;
}

.flow-plane {
    position: absolute;
    inset-block-start: 1rem;
    inline-size: min(24%, 10rem);
    aspect-ratio: 19 / 24;
    padding: clamp(0.5rem, 1.4cqi, 1rem);
    border: 1px solid var(--flow-edge);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, var(--flow-edge), var(--flow-plane) 55%, var(--flow-back));
    box-shadow:
        -0.375rem 0.5rem 0 var(--flow-back),
        -0.4375rem 0.5625rem 0 var(--welcome-line),
        -1rem 1.5rem 2rem var(--flow-shadow),
        inset 0 0 0 1px var(--flow-edge);
    transform: rotateX(18deg) rotateY(var(--plane-y, -24deg)) rotateZ(var(--plane-z, 8deg)) translateY(var(--plane-lift, 0));
    transition:
        transform 0.65s var(--ease),
        border-color 0.3s;
    backdrop-filter: blur(8px);
}

.flow-plane svg {
    inline-size: 100%;
    block-size: 75%;
    fill: none;
    stroke: var(--welcome-purple);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow-plane > span {
    display: block;
    margin-block-start: var(--space-2);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    color: var(--welcome-copy);
}

.plane-development {
    inset-inline-start: 3%;
    inset-block-start: 3rem;
}

.plane-managed-services {
    inset-inline-start: 14%;
}

.plane-intelligence,
.plane-ai-automation {
    --plane-y: 24deg;
    --plane-z: -8deg;
}

.plane-intelligence {
    inset-inline-end: 14%;
}

.plane-ai-automation {
    inset-inline-end: 3%;
    inset-block-start: 3rem;
}

.service-detail {
    display: flex;
    flex-direction: column;
}

.service-card {
    position: relative;
    inset: auto;
    inline-size: 6rem;
    max-inline-size: 100%;
    flex: none;
    margin-block-start: auto;
    margin-inline-start: auto;
    padding: var(--space-3);
    box-shadow:
        0 0.5rem 1.5rem var(--flow-shadow),
        inset 0 0 0 1px var(--flow-edge);
    transform: none;
    transition: none;
    backdrop-filter: none;
}

.welcome-services {
    position: relative;
    z-index: var(--layer-content);
    display: grid;
    margin-block-start: var(--space-5);
    border-block-start: 1px solid var(--welcome-line);
}

.welcome-services > a {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-inline-size: 0;
    padding: var(--space-5) var(--space-2);
    border-block-end: 1px solid var(--welcome-line);
    color: var(--welcome-ink);
    transition:
        color 0.25s,
        background 0.25s;
}

.portal-index {
    align-self: flex-start;
    padding-block-start: var(--space-1);
    color: var(--welcome-copy);
    font-size: 0.625rem;
}

.welcome-services > a strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.4;
}

.welcome-services > a small {
    display: block;
    color: var(--welcome-copy);
    font-size: 0.6875rem;
    margin-block-end: var(--space-1);
}

.portal-arrow {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    margin-inline-start: auto;
    border: 1px solid var(--welcome-line);
    border-radius: 50%;
    transition:
        transform 0.3s var(--ease),
        background 0.25s,
        color 0.25s;
}

.welcome-services > a:hover,
.welcome-services > a:focus-visible {
    color: var(--welcome-purple);
    background: var(--welcome-canvas);
}

.welcome-services > a:is(:hover, :focus-visible) .portal-arrow {
    transform: rotate(45deg);
    background: var(--welcome-ink);
    color: var(--welcome-surface);
}

.face-overview:has(.welcome-services > a[data-side="development"]:is(:hover, :focus-visible)) .plane-development,
.face-overview:has(.welcome-services > a[data-side="managed-services"]:is(:hover, :focus-visible)) .plane-managed-services,
.face-overview:has(.welcome-services > a[data-side="intelligence"]:is(:hover, :focus-visible)) .plane-intelligence,
.face-overview:has(.welcome-services > a[data-side="ai-automation"]:is(:hover, :focus-visible)) .plane-ai-automation {
    --plane-lift: -1.5rem;

    border-color: var(--flow-orange);
}

.welcome-action {
    position: relative;
    z-index: var(--layer-content);
    text-align: center;
    margin-block-start: var(--space-5);
}

.welcome-action a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2);
    color: var(--welcome-ink);
    font-size: var(--text-caption);
}

.welcome-action a:hover {
    color: var(--welcome-purple);
}

.side-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    max-inline-size: 64rem;
    margin: var(--space-5) auto 0;
    padding: var(--space-2);
    border-radius: 1.5rem;
    background: var(--welcome-surface);
}

.side-navigation a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 2.75rem;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--welcome-pill);
    font-size: var(--text-caption);
    text-align: center;
    color: var(--welcome-copy);
    transition:
        background 0.2s,
        color 0.2s;
}

.side-navigation a:first-child {
    grid-column: 1 / -1;
}

.side-navigation a[aria-current="true"] {
    background: var(--welcome-selected);
    color: var(--welcome-ink);
}

.side-navigation a[aria-current="true"]::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: var(--welcome-purple);
    flex: none;
}

.side-navigation a:hover {
    color: var(--welcome-purple);
}

.experience-bottomline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    max-inline-size: 64rem;
    margin: var(--space-4) auto 0;
    color: var(--welcome-copy);
    font-size: 0.75rem;
    line-height: 1.5;
}

.rotation-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.rotation-controls[hidden] {
    display: none;
}

.rotation-controls > span {
    font-size: 0.6875rem;
}

.rotation-controls button {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--welcome-line);
    border-radius: 50%;
    background: var(--welcome-surface);
    color: var(--welcome-ink);
}

.rotation-controls button:hover {
    background: var(--welcome-selected);
}

@media (width >= 30rem) {
    .site-header {
        display: flex;
    }

    .main-nav {
        margin-inline-start: auto;
    }
}

@media (width >= 48rem) {
    .ribbon-controls > button:not([hidden]) {
        display: block;
    }

    .service-card {
        inline-size: 8rem;
        padding: var(--space-4);
    }

    .site-header,
    .experience {
        padding-inline: max(5%, calc((100vw - 85rem) / 2));
    }

    .site-header {
        gap: var(--space-4);
        padding-block: 1.75rem;
    }

    .main-nav {
        gap: var(--space-4);
    }

    .brand-slot {
        inline-size: 11rem;
    }

    .main-nav a:not(:first-child) {
        display: block;
    }

    .face-overview {
        --overview-padding: var(--space-7);

        padding: var(--space-7) var(--space-7) var(--space-5);
    }

    .welcome-kicker {
        font-size: var(--text-caption);
    }

    .welcome-intro {
        font-size: var(--text-base);
    }

    .welcome-intro br {
        display: block;
    }

    .side-navigation a:first-child {
        grid-column: auto;
    }

    .side-navigation {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-radius: var(--welcome-pill);
    }
}

/* One home link keeps its focus while changing from header branding to a compact float. */
@media (width >= 64rem) {
    .site-header,
    .main-nav {
        gap: var(--space-6);
    }

    .brand-slot {
        inline-size: 12rem;
        block-size: 3rem;
    }

    .flow-stack {
        inline-size: min(86%, 55rem);
    }

    .has-brand-handoff .brand.is-floating {
        display: block;
        position: fixed;
        z-index: var(--layer-brand);
        inset-block-start: 1rem;
        inset-inline-start: max(1.5rem, calc((100vw - 90rem) / 2));
        inline-size: 5.25rem;
        min-block-size: 0;
        padding: 0.625rem;
        border-radius: 0.75rem;
        background: var(--welcome-canvas);
        box-shadow: 0 0.25rem 1rem var(--welcome-shadow);
    }

    .has-brand-handoff .is-floating :is(.brand-mark, .brand-wordmark) {
        display: none;
    }

    .has-brand-handoff .is-floating .brand-compact {
        display: block;
    }

    html:has(.has-brand-handoff) {
        scroll-padding-top: 6rem;
    }
}

@container welcome (width >= 36rem) {
    .welcome-art {
        margin-inline: 0;
        margin-block-start: calc(-1 * var(--space-2));
    }

    .welcome-ribbon img,
    .ribbon-canvas {
        inset-inline-start: -5%;
        inset-block-start: calc(16% - var(--space-6));
        inline-size: 110%;
    }

    .is-enhanced .ribbon-canvas,
    .is-enhanced .welcome-ribbon img {
        /* A shallower tilt keeps both ends in the band on wide screens. */
        block-size: calc(110cqi * 426 / 1280);
        rotate: -3deg;
    }

    .flow-orbit {
        inline-size: 70%;
    }

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

    .welcome-services > a {
        position: relative;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-3);
    }

    .welcome-services > a:nth-child(even)::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block: var(--space-5);
        border-inline-start: 1px solid var(--welcome-line);
    }

    .welcome-services > a strong {
        font-size: var(--text-small);
    }

    .portal-index {
        display: none;
    }

    .portal-arrow {
        inline-size: 1.75rem;
        block-size: 1.75rem;
    }
}

@container welcome (width >= 58rem) {
    .welcome-copy h1 {
        font-size: 7.3cqi;
    }

    .welcome-copy h1 br {
        display: none;
    }

    .welcome-copy h1 > span {
        margin-inline-start: 0.15em;
    }

    .welcome-art {
        block-size: 24rem;
    }

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

    .welcome-services > a {
        padding: var(--space-5) var(--space-3);
    }

    .welcome-services > a:nth-child(3)::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block: var(--space-5);
        border-inline-start: 1px solid var(--welcome-line);
    }

    .welcome-services > a strong {
        font-size: var(--text-base);
    }

    .welcome-services > a small {
        font-size: 0.75rem;
    }

    .portal-arrow {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .is-ready .face-overview,
    .has-brand-handoff .brand,
    .flow-plane {
        transition: none;
    }

    .face-overview:has(.welcome-services > a[data-side]:is(:hover, :focus-visible)) .flow-plane {
        --plane-lift: 0;
    }

    .welcome-services > a:is(:hover, :focus-visible) .portal-arrow {
        transform: none;
    }
}

@media (forced-colors: active) {
    .welcome-art {
        block-size: auto;
    }

    .welcome-ribbon,
    .flow-sculpture,
    .service-card {
        display: none;
    }

    .welcome-services > a,
    .header-contact,
    .welcome-action a,
    .side-navigation a,
    .rotation-controls button {
        border: 1px solid ButtonText;
    }

    .side-navigation a[aria-current="true"] {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }
}

@media print {
    .site-header,
    .welcome-art,
    .service-card,
    .side-navigation,
    .rotation-controls {
        display: none;
    }
}