/* ==========================================================================
   Sitetisfy home: scroll-craft build ("The Assembly")
   Tokens theme the scrollcraft engine; everything below is page-local markup.
   The engine (public/scrollcraft/) is never edited.
   ========================================================================== */

:root {
    --sc-canvas: #060B1A;
    --sc-surface: #0E1733;
    --sc-ink: #EEF3FC;
    --sc-ink-soft: #A3B0CF;
    --sc-accent: #1A56DB;
    --sc-accent-ink: #FFFFFF;
    --sc-font-display: "Sora", system-ui, sans-serif;
    --sc-font-text: "Inter", system-ui, sans-serif;
    --sc-shadow-color: 226 70% 3%;

    /* the accent's text stop: same hue, lifted so it reads on navy */
    --hs-accent-text: #8DB0FF;
    --hs-surface-2: #121D3D;
    --hs-line: rgba(196, 212, 255, 0.12);
    --hs-line-strong: rgba(196, 212, 255, 0.24);
    --hs-nav: calc(var(--navbar-height, 73px) + 8px);
    --hs-r: 18px;
}

/* The engine's body rule would restyle the shared navbar and footer; hand the
   shared chrome back its own metrics and keep the scroll-craft type inside .hs. */
body.is-home {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: normal;
    background: var(--sc-canvas);
}
body.is-home main { padding-top: 0; }
body.is-home :focus-visible { outline-color: var(--hs-accent-text); }
body.is-home ::selection { background: var(--hs-accent-text); color: #060B1A; }

.hs {
    position: relative;
    color: var(--sc-ink);
    font-size: var(--sc-t-base);
    line-height: var(--sc-leading-body);
}
/* app.css pads every <section>; here the acts own their geometry. :where() keeps this at
   element weight so the section classes below still set their own padding. */
:where(.hs) section { padding-block: 0; }
.hs h1, .hs h2, .hs h3 { color: var(--sc-ink); }
.hs .icon { width: 100%; height: 100%; color: inherit; }

/* ------------------------------------------------------------ shared type -- */
.hs-eyebrow {
    margin: 0;
    font-size: var(--sc-t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hs-accent-text);
}
.hs-body {
    margin: 0;
    max-width: 58ch;
    color: var(--sc-ink-soft);
    text-wrap: pretty;
}

.hs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 12px;
    background: var(--sc-accent);
    color: var(--sc-accent-ink);
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px hsl(226 80% 4% / 0.4), 0 12px 24px -10px hsl(222 90% 30% / 0.6);
    transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.hs-cta:active { transform: translateY(1px); }
.hs-cta--lg { min-height: 56px; padding: 0 2rem; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
    .hs-cta:hover { background: #2563EB; }
}

.hs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    color: var(--sc-ink);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: underline;
    text-decoration-color: var(--hs-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: text-decoration-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.hs-link span { transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .hs-link:hover { text-decoration-color: var(--hs-accent-text); }
    .hs-link:hover span { transform: translateX(3px); }
}

/* ========================================================== 1 · HERO ====== */
.hs-hero__stage { isolation: isolate; }

.hs-hero__far {
    position: absolute;
    inset: -6%;
    z-index: 0;
    background:
        radial-gradient(46% 42% at 74% 30%, rgba(26, 86, 219, 0.42), transparent 72%),
        radial-gradient(26% 30% at 92% 8%, rgba(6, 182, 212, 0.26), transparent 70%),
        radial-gradient(40% 40% at 12% 92%, rgba(26, 86, 219, 0.16), transparent 70%);
    will-change: transform;
}
.hs-hero__far::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(196, 212, 255, 0.10) 1px, transparent 1.5px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(60% 60% at 64% 40%, #000 20%, transparent 78%);
    mask-image: radial-gradient(60% 60% at 64% 40%, #000 20%, transparent 78%);
}

.hs-plane {
    position: absolute;
    z-index: 2;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
}
.hs-plane img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 14px;
    box-shadow:
        0 4px 10px hsl(226 70% 3% / 0.35),
        0 24px 48px -12px hsl(226 70% 3% / 0.55),
        0 60px 110px -30px hsl(226 70% 3% / 0.5);
}
/* back plane: farther = smaller, softer, lower contrast */
/* Desktop layer contract: every plane lives right of 57vw and the copy column ends at
   gutter + 50vw, so white panels never sit behind the white headline at any width. */
.hs-plane--crm { width: 36vw; right: 1vw; top: 15%; z-index: 1; }
.hs-plane--crm img { filter: blur(1.4px) brightness(0.62) saturate(0.85); }
.hs-plane--servers { width: 26vw; right: 16vw; top: 24%; }
.hs-plane--servers img { filter: brightness(0.9); }
.hs-plane--runs { width: 23vw; right: -3vw; top: 40%; z-index: 4; }
.hs-plane--runs img { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* near plane: closest to the lens, so the most out of focus; its cut edges bleed off the corner */
.hs-plane--security { width: 21vw; right: 14vw; bottom: -9%; z-index: 6; }
.hs-plane--security img { border-radius: 14px 0 0 0; filter: blur(2px) brightness(0.86); }

/* the scrim is a sibling of the copy, and only where the copy sits */
.hs-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(70% 62% at 18% 88%, rgba(6, 11, 26, 0.92) 0%, rgba(6, 11, 26, 0.6) 46%, transparent 74%);
}

.hs-hero__copy {
    position: absolute;
    z-index: 6;
    left: var(--sc-gutter);
    bottom: calc(clamp(2.5rem, 10vh, 7rem) + var(--hs-banner, 0px));
    width: min(54rem, 50vw);
}
.hs-hero__title {
    margin: 0.9rem 0 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: clamp(2.3rem, 0.9rem + 3.1vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.hs-hero__title em { font-style: normal; color: var(--hs-accent-text); }
.hs-hero__sub {
    margin: 1.25rem 0 0;
    max-width: 44ch;
    font-size: var(--sc-t-lg);
    line-height: 1.5;
    color: var(--sc-ink-soft);
    text-wrap: pretty;
}
.hs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }

.hs-hero__haze {
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to top, var(--sc-canvas) 0%, rgba(6, 11, 26, 0.7) 40%, transparent 100%);
    will-change: transform, opacity;
}

.hs-hero__beat {
    position: absolute;
    z-index: 7;
    left: var(--sc-gutter);
    bottom: clamp(3rem, 14vh, 9rem);
    margin: 0;
    max-width: 18ch;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 1rem + 4.6vw, 5.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.hs-hero__beat span { color: var(--hs-accent-text); }

/* ===================================================== 2 · RECOGNITION ===== */
.hs-quiet { padding-block: clamp(6rem, 22vh, 14rem); }
.hs-quiet__title {
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-3xl);
    line-height: 1;
    letter-spacing: -0.04em;
}
.hs-quiet .sc-stack > .hs-quiet__lead {
    margin-top: 1.5rem;
    max-width: 40ch;
    font-size: var(--sc-t-lg);
    line-height: 1.5;
    color: var(--sc-ink-soft);
}

/* ======================================================= 3 · ASSEMBLY ===== */
.hs-assembly__stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vh, 2rem);
    padding: calc(var(--hs-nav) + clamp(0.75rem, 3vh, 2rem)) var(--sc-gutter) clamp(1.25rem, 5vh, 3rem);
    --hs-gather: 0;
    --hs-frame: 0;
}
.hs-assembly__head { display: grid; gap: 0.5rem; max-width: 1240px; width: 100%; margin-inline: auto; }
.hs-assembly__title {
    display: grid;
    margin: 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-2xl);
    line-height: 1.04;
    letter-spacing: -0.035em;
}
.hs-swap { grid-area: 1 / 1; }
.hs-swap--before { opacity: calc(1 - var(--hs-frame)); }
.hs-swap--after { opacity: var(--hs-frame); color: var(--sc-ink); }

.hs-lattice {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1240px;
    max-height: 660px;
    margin-inline: auto;
    min-height: 0;
}
.hs-lattice__frame {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    overflow: visible;
    pointer-events: none;
    opacity: calc(0.2 + var(--hs-frame) * 0.8);
}
.hs-lattice__frame rect {
    fill: none;
    stroke: var(--hs-accent-text);
    stroke-opacity: 0.55;
    stroke-width: 1.25;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--hs-frame));
}

.hs-lattice__core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: var(--sc-canvas);
    border: 1px solid var(--hs-accent-text);
    box-shadow: 0 0 0 8px var(--sc-canvas), 0 10px 30px -8px hsl(222 90% 30% / 0.7);
    opacity: var(--hs-frame);
    transform: scale(calc(0.9 + var(--hs-frame) * 0.1));
}
.hs-lattice__core img { width: auto; height: 28px; }

.hs-tile {
    position: relative;
    min-height: 0;
    perspective: 1400px;
    container-type: size;
    will-change: transform;
}
.hs-tile__card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--flip, 0) * 180deg));
}
.hs-tile__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 2.2vw, 1.6rem);
    border-radius: var(--hs-r);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.hs-tile__face--problem {
    background: #101931;
    border: 1px solid var(--hs-line);
    box-shadow: var(--sc-e2);
}
.hs-tile__face--fix {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #13214A 0%, #0F1A3B 100%);
    border: 1px solid rgba(141, 176, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--sc-e2);
}
.hs-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(196, 212, 255, 0.07);
    border: 1px solid var(--hs-line);
    color: var(--sc-ink-soft);
}
.hs-tile__icon svg { width: 22px; height: 22px; }
.hs-tile__title {
    margin: auto 0 0;
    font-family: var(--sc-font-display);
    font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.hs-tile__symptom { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.45; }
.hs-tile__was {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hs-accent-text);
}
.hs-tile__fix {
    margin: 0.55rem 0 0;
    font-family: var(--sc-font-display);
    font-size: clamp(1.02rem, 0.8rem + 0.6vw, 1.32rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
    text-wrap: balance;
}
.hs-tile__detail { margin: 0.6rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
.hs-tile__link {
    margin-top: auto;
    padding-top: 0.75rem;
    display: inline-flex;
    gap: 0.35em;
    align-items: center;
    min-height: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sc-ink);
    text-decoration: underline;
    text-decoration-color: var(--hs-line-strong);
    text-underline-offset: 0.3em;
}
@media (hover: hover) and (pointer: fine) {
    .hs-tile__link:hover { text-decoration-color: var(--hs-accent-text); }
}
/* the tile is its own container: drop the long line when the cell is short */
@container (max-height: 300px) { .hs-tile__detail { display: none; } }
@container (max-height: 190px) { .hs-tile__symptom { display: none; } }

/* ======================================================= 4 · SERVICES ===== */
.hs-services__stage {
    display: flex;
    align-items: center;
    padding-top: var(--hs-nav);
}
.hs-rail {
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-inline: var(--sc-gutter);
    align-items: stretch;
}
.hs-rail__lead,
.hs-rail__end {
    flex: 0 0 min(28rem, 82vw);
    align-self: center;
    display: grid;
    gap: 1.1rem;
    justify-items: start;
}
.hs-rail__lead { padding-right: clamp(0rem, 3vw, 3rem); }
.hs-rail__title {
    margin: 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-2xl);
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.hs-rail__end { padding-left: clamp(0rem, 3vw, 3rem); padding-right: var(--sc-gutter); }
.hs-rail__end-title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.03em; }
.hs-rail__end p { margin: 0; color: var(--sc-ink-soft); max-width: 32ch; }

.hs-svc {
    flex: 0 0 clamp(300px, 29vw, 430px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--sc-surface);
    border: 1px solid var(--hs-line);
    box-shadow: var(--sc-edge), var(--sc-e2);
    overflow: hidden;
}
.hs-svc__media { margin: 0; height: clamp(150px, 30vh, 290px); overflow: hidden; background: #0B1330; }
.hs-svc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.hs-svc__body { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1rem, 2.4vh, 1.6rem) clamp(1.1rem, 1.6vw, 1.6rem) clamp(0.6rem, 1.6vh, 1.2rem); flex: 1; }
.hs-svc__name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hs-accent-text);
}
.hs-svc__icon { display: inline-flex; width: 18px; height: 18px; color: var(--hs-accent-text); }
.hs-svc__icon svg { width: 18px; height: 18px; }
.hs-svc__headline {
    margin: 0;
    font-family: var(--sc-font-display);
    font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.hs-svc__text { margin: 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.5; text-wrap: pretty; }
.hs-svc__points { display: grid; gap: 0.3rem; margin: 0.2rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; }
.hs-svc__points li { position: relative; padding-left: 1.2rem; color: var(--sc-ink); }
.hs-svc__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5rem;
    height: 1px;
    background: var(--hs-accent-text);
}
.hs-svc .hs-link { margin-top: auto; }
@media (max-height: 760px) { .hs-svc__text { display: none; } }

/* ======================================================== 5 · PRODUCT ===== */
.hs-product { padding-block: var(--sc-section); overflow: clip; }
.hs-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-left: max(var(--sc-gutter), calc((100vw - 82rem) / 2 + var(--sc-gutter)));
}
.hs-product__title {
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-3xl);
    line-height: 1;
    letter-spacing: -0.04em;
}
.hs-product__points { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hs-line); max-width: 30rem; }
.hs-product__points li { padding: 0.8rem 0; border-bottom: 1px solid var(--hs-line); font-weight: 500; }
.hs-product__copy.sc-stack > div { margin-top: 2rem; }
.hs-product__frame {
    margin: 0;
    border-radius: 22px 0 0 22px;
    overflow: hidden;
    background: #0B1330;
    border: 1px solid var(--hs-line);
    border-right: 0;
    box-shadow: var(--sc-e3);
}
.hs-product__frame img { width: 100%; height: auto; transform-origin: 50% 50%; scale: 1.08; }

/* ========================================================= 6 · METHOD ===== */
.hs-method__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: clamp(1rem, 4vh, 2.5rem);
    padding: calc(var(--hs-nav) + clamp(1rem, 6vh, 4rem)) var(--sc-gutter) clamp(1.5rem, 6vh, 4rem);
    max-width: 82rem;
    margin-inline: auto;
    --hs-ring: 0;
}
.hs-method__intro { display: grid; gap: 0.9rem; align-content: start; }
.hs-method__title {
    margin: 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-3xl);
    line-height: 1;
    letter-spacing: -0.04em;
}
.hs-method__slots { display: grid; align-items: start; min-height: 0; }
.hs-method__slots > * { grid-area: 1 / 1; }
.hs-step { display: grid; gap: 0.75rem; max-width: 34rem; }
.hs-step__tag { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700; color: var(--hs-accent-text); letter-spacing: -0.02em; }
.hs-step__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }

.hs-why__title { margin: 0 0 1rem; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); letter-spacing: -0.025em; }
.hs-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin: 0; }
.hs-why__list div { padding-top: 0.8rem; border-top: 1px solid var(--hs-line-strong); }
.hs-why__list dt { font-weight: 600; color: var(--sc-ink); }
.hs-why__list dd { margin: 0.3rem 0 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.5; }

.hs-ring {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(100%, 60vh, 480px);
    aspect-ratio: 1;
}
.hs-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.hs-ring circle { fill: none; }
.hs-ring__track { stroke: var(--hs-line-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.hs-ring__arc {
    stroke: var(--hs-accent-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--hs-ring));
}
.hs-ring__node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: var(--sc-canvas);
    border: 1px solid var(--hs-line-strong);
    color: var(--sc-ink-soft);
    font-size: 0.86rem;
    font-weight: 600;
    translate: -50% -50%;
    transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
}
.hs-ring__node.is-lit { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }
.hs-ring__node--0 { left: 50%; top: 8%; }
.hs-ring__node--1 { left: 92%; top: 50%; }
.hs-ring__node--2 { left: 50%; top: 92%; }
.hs-ring__node--3 { left: 8%; top: 50%; }
.hs-ring__center {
    position: absolute;
    inset: 32%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 86, 219, 0.28), transparent 70%);
    opacity: calc(0.35 + var(--hs-ring) * 0.65);
}
.hs-ring__center img { width: auto; height: 42%; }

/* =========================================================== 7 · WORK ===== */
.hs-work { padding-block: var(--sc-section); }
.hs-work__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hs-work__title {
    margin: 0 0 0.75rem;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-3xl);
    line-height: 1;
    letter-spacing: -0.04em;
}
.hs-work__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
}
.hs-proj { display: flex; flex-direction: column; gap: 0.5rem; color: var(--sc-ink); text-decoration: none; }
.hs-proj--0, .hs-proj--3 { grid-column: span 7; }
.hs-proj--1, .hs-proj--2 { grid-column: span 5; }
.hs-proj--1, .hs-proj--3 { margin-top: clamp(0rem, 6vw, 5rem); }
.hs-proj__media {
    margin-bottom: 0.75rem;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    background: #0B1330;
    border: 1px solid var(--hs-line);
    box-shadow: var(--sc-e2);
}
.hs-proj__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: scale 420ms var(--sc-ease-out); }
.hs-proj__empty { display: block; width: 100%; height: 100%; background: radial-gradient(circle, var(--hs-line) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.hs-proj__cat { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-accent-text); }
.hs-proj__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.hs-proj__desc { margin: 0; color: var(--sc-ink-soft); font-size: 0.94rem; max-width: 56ch; }
.hs-proj__more { margin-top: 0.25rem; font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-decoration-color: var(--hs-line-strong); text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) {
    .hs-proj:hover .hs-proj__media img { scale: 1.035; }
    .hs-proj:hover .hs-proj__more { text-decoration-color: var(--hs-accent-text); }
}

/* ========================================================== 8 · CLOSE ===== */
.hs-close__stage {
    display: grid;
    place-items: center;
    padding: var(--hs-nav) var(--sc-gutter) 2rem;
    --hs-close: 0;
}
.hs-close__echo {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(1100px, 88vw);
    height: min(560px, 62vh);
    translate: -50% -50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
    pointer-events: none;
}
.hs-close__echo span {
    border-radius: var(--hs-r);
    border: 1px solid rgba(141, 176, 255, calc(0.04 + var(--e, 0) * 0.16));
    background: rgba(18, 29, 61, calc(var(--e, 0) * 0.35));
}
.hs-close__inner { position: relative; z-index: 3; display: grid; justify-items: center; gap: 1.25rem; text-align: center; max-width: 52rem; }
.hs-close__title {
    margin: 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: var(--sc-t-3xl);
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.hs-close__sub { margin: 0; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 36ch; }
.hs-close__inner .hs-cta { margin-top: 0.75rem; }

/* ========================================================= MOBILE ========= */
@media (max-width: 860px) {
    :root { --hs-nav: calc(var(--navbar-height, 73px) + 4px); }

    /* hero: art-directed, not shrunk. Planes in the top half, copy owns the bottom */
    .hs-plane--crm { width: 86vw; right: -16vw; left: auto; top: 15%; }
    .hs-plane--servers { width: 62vw; right: auto; left: -10vw; top: 25%; }
    .hs-plane--runs { width: 40vw; right: -10vw; top: 21%; }
    .hs-plane--security { display: none; }
    .hs-hero__scrim { background: linear-gradient(to top, rgba(6, 11, 26, 0.96) 0%, rgba(6, 11, 26, 0.86) 42%, rgba(6, 11, 26, 0.3) 62%, transparent 76%); }
    /* clear the floating WhatsApp/chat buttons, and the banner while it is still on screen */
    .hs-hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: calc(92px + var(--hs-banner, 0px)); }
    .hs-hero__title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
    .hs-hero__sub { font-size: 1rem; }
    .hs-hero__actions { margin-top: 1.4rem; }
    .hs-hero__beat { right: var(--sc-gutter); bottom: 110px; font-size: clamp(2.3rem, 11vw, 3.2rem); }

    .hs-quiet { padding-block: 5rem 6rem; }

    .hs-assembly__stage { gap: 0.9rem; padding-bottom: 1rem; }
    .hs-lattice { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: none; }
    .hs-tile__face { padding: 0.85rem; border-radius: 14px; }
    .hs-tile__icon { width: 36px; height: 36px; border-radius: 10px; }
    .hs-tile__icon svg { width: 18px; height: 18px; }
    .hs-tile__title { font-size: 0.98rem; }
    .hs-tile__symptom { font-size: 0.8rem; }
    .hs-tile__fix { font-size: 0.95rem; margin-top: 0.35rem; }
    .hs-tile__was { font-size: 0.66rem; }
    .hs-tile__link { font-size: 0.8rem; padding-top: 0.25rem; min-height: 32px; }
    .hs-lattice__core { width: 46px; height: 46px; margin: -23px 0 0 -23px; box-shadow: 0 0 0 6px var(--sc-canvas); }
    .hs-lattice__core img { height: 22px; }

    .hs-svc { flex-basis: 78vw; }
    .hs-svc__media { height: clamp(140px, 24svh, 220px); }
    .hs-svc__text { display: none; }
    .hs-rail__lead, .hs-rail__end { flex-basis: 78vw; }

    .hs-product__grid { grid-template-columns: 1fr; padding-left: 0; gap: 2.5rem; }
    .hs-product__copy { padding-inline: var(--sc-gutter); }
    .hs-product__frame { margin-left: var(--sc-gutter); }

    .hs-method__stage {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 1.25rem;
        padding-top: calc(var(--hs-nav) + 1.25rem);
    }
    .hs-method__intro { grid-column: 1; grid-row: 1; }
    .hs-method__intro .hs-body { font-size: 0.92rem; }
    .hs-ring { grid-column: 2; grid-row: 1; width: 30vw; align-self: start; }
    /* too small for labelled chips: nodes become dots, the slot below names the stage */
    .hs-ring__node { min-height: 0; width: 12px; height: 12px; padding: 0; font-size: 0; }
    .hs-method__slots { grid-column: 1 / -1; grid-row: 2; }
    .hs-step__tag { font-size: 1.4rem; }
    .hs-why__title { font-size: 1.2rem; margin-bottom: 0.6rem; }
    .hs-why__list { gap: 0.8rem 1rem; }
    .hs-why__list dd { font-size: 0.82rem; }

    .hs-work__grid { grid-template-columns: 1fr; }
    .hs-proj--0, .hs-proj--1, .hs-proj--2, .hs-proj--3 { grid-column: auto; margin-top: 0; }

    .hs-close__title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .hs-close__echo { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); height: 64svh; }
}

/* short phones: the planes ride higher and smaller, the actions share one row */
@media (max-width: 860px) and (max-height: 720px) {
    .hs-plane--crm { width: 72vw; top: 12%; }
    .hs-plane--servers { width: 54vw; top: 18%; }
    .hs-plane--runs { width: 34vw; top: 14%; }
    .hs-hero__copy .hs-eyebrow { display: none; }
    .hs-hero__actions { flex-wrap: nowrap; gap: 1rem; margin-top: 1.1rem; }
    .hs-hero__actions .hs-cta { min-height: 44px; padding: 0 1.1rem; }
    .hs-hero__copy { bottom: calc(100px + var(--hs-banner, 0px)); }
}

@media (max-width: 380px) {
    .hs-tile__symptom { display: none; }
    .hs-hero__sub { display: none; }
}

/* ============================================== REDUCED MOTION ============
   Fewer and gentler, not zero. home-scroll.js un-pins the two bespoke acts
   (hero, assembly) and adds .hs-reduced, so they render as complete static
   compositions with no extra scroll. */
.hs-reduced [data-hs-hero],
.hs-reduced [data-hs-assembly] { height: auto !important; }
.hs-reduced .hs-hero__stage,
.hs-reduced .hs-assembly__stage { position: relative; height: auto; min-height: 100svh; }
.hs-reduced .hs-hero__stage { min-height: max(100svh, 760px); }
.hs-reduced .hs-hero__copy { bottom: auto; top: auto; position: relative; padding-top: calc(var(--hs-nav) + 44vh); padding-bottom: 3rem; width: auto; max-width: 62rem; }
.hs-reduced .hs-hero__beat { position: relative; left: auto; bottom: auto; padding: 0 var(--sc-gutter) 5rem; font-size: var(--sc-t-2xl); max-width: none; }
.hs-reduced .hs-assembly__stage { --hs-frame: 1; }
.hs-reduced .hs-lattice { height: auto; max-height: none; grid-auto-rows: minmax(280px, auto); grid-template-rows: none; }
.hs-reduced .hs-tile { container-type: inline-size; }
.hs-reduced .hs-tile__card { --flip: 0 !important; transform: none; }
.hs-reduced .hs-tile__face--problem { display: none; }
.hs-reduced .hs-tile__face--fix { position: relative; transform: none; height: 100%; }
@media (max-width: 860px) {
    .hs-reduced .hs-hero__copy { padding-top: calc(var(--hs-nav) + 36svh); }
    .hs-reduced .hs-lattice { grid-template-columns: 1fr; grid-auto-rows: auto; }
}