/* ==========================================================================
   GeoPress — Home
   Design: Figma "Geopress" › Components › Home v1 (both variants combined)
   Desktop compositions use design pixels from the 1920px frame:
   a ".frame" sets font-size to one scaled design pixel, so children are
   positioned in em (e.g. left: 91em == 91px at 1920px wide).
   ========================================================================== */

/* Montserrat, self-hosted (variable font: one file covers 400–700) */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Primary */
    --primary-1: #4e2b64;
    --primary-3: #7a5994;
    /* Secondary */
    --secondary-1: #009b90;
    --secondary-2: #2dc5ba;
    /* teal dark enough for white button text (WCAG AA, 4.9:1) */
    --secondary-1-strong: #007f75;
    /* Accent */
    --accent-1: #324fdd;
    --accent-3: #7d91f3;
    /* Shades */
    --black: #161325;
    --white: #ffffff;

    --font: "Montserrat", system-ui, sans-serif;

    /* one design pixel of the 1920px frame */
    --u: calc(min(100vw, 1920px) / 1920);
    --gutter: 16px;
    --header-h: 160px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, p, ul, ol, dl, dd, address {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

address {
    font-style: normal;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

/* ---------- Shared pieces ---------- */

.frame {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.paragraph {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
}

.heading-pair {
    line-height: 1.2;
}

.heading-pair__eyebrow {
    color: var(--secondary-2);
    font-size: 23px;
    font-weight: 500;
}

.heading-pair__title {
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    transition: filter .2s, transform .2s;
}

.btn img {
    width: 24px;
    height: 24px;
    transition: transform .2s;
}

.btn:hover {
    filter: brightness(1.12);
}

.btn:hover img {
    transform: translateX(4px);
}

.btn--primary {
    background: var(--secondary-1-strong);
    color: var(--white);
}

.btn--accent {
    background: var(--accent-1);
    color: var(--white);
}

.btn--light {
    background: var(--white);
    color: var(--black);
}

.btn--light:hover {
    filter: none;
    background: #e9e7f2;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
}

.section-title__text {
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.section-title--xl .section-title__text {
    font-size: clamp(44px, 6vw, 90px);
}

.section-title__line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 233.853px;
    height: 39.719px;
}

.section-title__line img {
    width: 232.83px;
    height: 30.581px;
    transform: rotate(2.26deg);
}

/* ---------- Header ---------- */

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: background-color .3s, backdrop-filter .3s;
}

.header.is-scrolled {
    background: rgba(22, 19, 37, .9);
    backdrop-filter: blur(12px);
}

.header__inner {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 90px;
    transition: padding .3s;
}

.header.is-scrolled .header__inner {
    padding-top: 0;
    padding-bottom: 0;
}

.header__logo img {
    width: 273.84px;
    height: 48.033px;
}

.header__toggle {
    display: none;
}

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

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 20px 20px 24px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    transition: color .2s;
}

.nav__item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--white);
    opacity: 0;
    transition: opacity .2s, background-color .2s;
}

.nav__item:hover::before {
    opacity: .5;
}

.nav__item.is-active {
    color: var(--secondary-2);
}

.nav__item.is-active::before {
    background: var(--secondary-2);
    opacity: 1;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* the particles fade in once the script starts them, after the page has loaded */
.hero__bg.is-ready {
    opacity: .4;
}

.hero__fade {
    position: absolute;
    inset: auto 0 0;
    height: 35.03%;
    background: linear-gradient(to bottom, rgba(22, 19, 37, 0), var(--black));
}

.hero__stage {
    font-size: var(--u);
    height: 1060em;
    min-height: 560px;
}

.hero__title {
    position: absolute;
    left: 50%;
    top: max(286.33em, 150px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter));
    font-size: inherit;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
}

.hero__eyebrow {
    color: var(--secondary-2);
    font-size: clamp(16px, 1.46vw, 28px);
    font-weight: 500;
}

.hero__main {
    font-size: clamp(40px, 6.25vw, 120px);
}

.hero__sub {
    font-size: clamp(24px, 2.5vw, 48px);
}

/* ---------- About + Services (desktop composition, 1500 design px tall) ---------- */

.about {
    position: relative;
    z-index: 1;
}

.about__stage {
    font-size: var(--u);
    /* the services list keeps fixed-size text, so leave room for it */
    height: max(1500em, calc(916em + 700px));
}

.deco,
.about__stage > * {
    position: absolute;
}

.about__shape-right {
    left: 765.5em;
    top: 0;
    width: 1162.575em;
    height: 799.089em;
    max-width: none;
}

.about__shape-left {
    left: -430.2em;
    top: 663.4em;
    width: 1162.575em;
    height: 799.089em;
    max-width: none;
    transform: rotate(180deg);
}

.about__blur {
    left: 27.42em;
    top: 774.19em;
    width: 489.469em;
    height: 348.614em;
    object-fit: cover;
    opacity: .4;
    filter: blur(2px);
}

.about__orn35,
.about__orn81 {
    width: 197.815em;
    height: 197.815em;
}

.about__orn35 { left: 91em; top: 7.43em; }
.about__orn81 { left: 859.17em; top: 1237.19em; }

.about__ornaments {
    left: 740.29em;
    top: -457.01em;
    width: 1117.712em;
    height: 626.84em;
    max-width: none;
}

.about__orn45,
.about__orn46 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__orn45 { left: 1187.49em; top: -150.82em; width: 208.291em; height: 208.291em; }
.about__orn46 { left: 1009.97em; top: 2.97em; width: 206.736em; height: 206.736em; }

.ornament-tri {
    position: relative;
    flex: none;
    width: 147.891em;
    height: 147.891em;
}

.ornament-tri--45 { transform: rotate(-39.81deg); }
.ornament-tri--46 { transform: rotate(36.29deg); }

.ornament-tri img {
    position: absolute;
    inset: 0 6.7% 25%;
    width: 86.6%;
    height: 75%;
}

.about__logo {
    left: 830.55em;
    top: 295em;
    width: 258.889em;
    height: 133.709em;
}

.about__text {
    left: 250em;
    top: 198.65em;
    width: max(320px, 440.646em);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.about__visual {
    left: 1061.28em;
    top: 49.66em;
    width: 829.531em;
}

/* the visual scales itself: 1em == 1 design px of the 829.531px image */
.about__visual {
    container-type: inline-size;
    aspect-ratio: 829.531 / 610.43;
}

.about__visual-stage {
    position: absolute;
    inset: 0;
    font-size: calc(100cqw / 829.531);
}

.about__diamond {
    position: absolute;
    left: 249.13em;
    top: -114.41em;
    width: 386.966em;
    height: 386.966em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__diamond span {
    flex: none;
    width: 276.602em;
    height: 276.602em;
    background: var(--accent-3);
    transform: rotate(-36.59deg);
}

.about__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__services-title {
    /* own font-size, so position in --u instead of em */
    left: calc(1057.54 * var(--u));
    top: calc(671.96 * var(--u));
    color: var(--black);
    font-size: max(56px, 120em);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.about__orn80 {
    left: 634.37em;
    top: 902.54em;
    width: 304.886em;
    height: 154.461em;
}

.about__process-image {
    left: 247.81em;
    top: 1055.88em;
    width: 348.458em;
    height: 359.833em;
    object-fit: cover;
}

.services-list {
    right: 245em;
    top: 916em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.service {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.service__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.service__title {
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.service__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 41px;
    flex-shrink: 0;
}

.service__num span {
    color: var(--secondary-2);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    transform: rotate(90deg);
}

.service__text {
    width: 440.646px;
    max-width: 100%;
}

/* ---------- Our skills ---------- */

.skills {
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 90px 113px;
}

.skills__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 31px;
}

.tech {
    position: relative;
    width: clamp(120px, 10.2vw, 196px);
    aspect-ratio: 196 / 72;
    overflow: hidden;
    opacity: .85;
    transition: opacity .2s;
}

.tech:hover {
    opacity: 1;
}

.tech img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

.tech--wordpress img { top: 22.22%; left: 5.05%; width: calc(100% - 5.05% - 5.05%); height: calc(100% - 22.22% - 22.22%); }
.tech--jquery img { top: 20.14%; left: 5.31%; width: calc(100% - 5.31% - 5.18%); height: calc(100% - 20.14% - 20.14%); }
.tech--nodejs img { top: 18.75%; left: 7.35%; width: calc(100% - 7.35% - 7.35%); height: calc(100% - 18.75% - 18.54%); }
.tech--mysql img { top: 15.14%; left: 6.89%; width: calc(100% - 6.89% - 6.89%); height: calc(100% - 15.14% - 15.28%); }

/* ---------- Why us (desktop composition, 800 design px tall) ---------- */

.why__stage {
    font-size: var(--u);
    height: max(830em, calc(160em + 470px));
}

.why__stage > * {
    position: absolute;
}

.why__bg {
    left: 750em;
    top: 0;
    width: 1162.575em;
    height: 799.089em;
    max-width: none;
}

.why__laptop {
    left: 992em;
    top: 155.65em;
    width: 789.062em;
}

.laptop {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 789.062 / 668.329;
    opacity: .7;
}

.laptop__layer {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;
}

.laptop__layer img {
    width: 100%;
    height: 100%;
}

.laptop__g0 { top: 30.87%; left: 0; width: calc(100% - 0% - 4.85%); height: calc(100% - 30.87% - 0%); opacity: .3; }
.laptop__g1 { top: 36.23%; left: 7.38%; width: calc(100% - 7.38% - 12.22%); height: calc(100% - 36.23% - 5.36%); opacity: .3; }
.laptop__g2 { top: 42.46%; left: 15.95%; width: calc(100% - 15.95% - 20.8%); height: calc(100% - 42.46% - 11.59%); opacity: .3; }
.laptop__v0 { top: 44.45%; left: 13.55%; width: calc(100% - 13.55% - 23.91%); height: calc(100% - 44.45% - 9.97%); }
.laptop__g3 { top: 0; left: 37.3%; width: calc(100% - 37.3% - 18.04%); height: calc(100% - 0% - 34.22%); }
.laptop__g4 { top: 37.84%; left: 13.8%; width: calc(100% - 13.8% - 23.93%); height: calc(100% - 37.84% - 15.8%); }

.laptop__g6,
.laptop__g7 {
    font-size: calc(100cqw / 789.062);
    opacity: .15;
    -webkit-mask-image: url("../img/laptop/mask.svg");
    mask-image: url("../img/laptop/mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 358.755em 403.533em;
    mask-size: 358.755em 403.533em;
}

.laptop__g6 {
    inset: 20.6% 0 33.03% 37.73%;
    -webkit-mask-position: -16.966em -86.691em;
    mask-position: -16.966em -86.691em;
}

.laptop__g7 {
    inset: 32.51% 16.53% 41.78% 47.07%;
    -webkit-mask-position: -92.915em -171.427em;
    mask-position: -92.915em -171.427em;
}

.laptop__g8 { top: 44.18%; left: 30.25%; width: calc(100% - 30.25% - 34.29%); height: calc(100% - 44.18% - 29.21%); }
.laptop__g9 { top: 29.23%; left: 73.75%; width: calc(100% - 73.75% - 22.16%); height: calc(100% - 29.23% - 67.08%); }
.laptop__v1 { top: 10.3%; left: 47.75%; width: calc(100% - 47.75% - 51.37%); height: calc(100% - 10.3% - 88.63%); }
.laptop__v2 { top: 11.17%; left: 48.94%; width: calc(100% - 48.94% - 50.18%); height: calc(100% - 11.17% - 87.77%); }
.laptop__v3 { top: 8.74%; left: 45.6%; width: calc(100% - 45.6% - 52.55%); height: calc(100% - 8.74% - 89.48%); }
.laptop__g10 { top: 18.09%; left: 44.23%; width: calc(100% - 44.23% - 27.71%); height: calc(100% - 18.09% - 48.6%); }
.laptop__v4 { top: 19.11%; left: 56.94%; width: calc(100% - 56.94% - 34.19%); height: calc(100% - 19.11% - 73.1%); }

.why__logo {
    left: 831em;
    top: 309.09em;
    width: 258.889em;
    height: 133.709em;
}

.why__text {
    left: 244em;
    top: 158.09em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 19px;
    line-height: 1.6;
}

.checklist img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.stats {
    right: 89.5em;
    top: 111em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.stat__value {
    font-size: clamp(56px, 4.7vw, 90px);
    font-weight: 700;
    line-height: 1.2;
}

.stat__value::after {
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    margin: 10px 0 0 auto;
    background: var(--secondary-2);
}

.stat__label {
    color: var(--secondary-2);
    font-size: 18px;
    line-height: 1.8;
    white-space: nowrap;
}

/* ---------- Case studies ---------- */

.cases {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px;
}

.cases__panel {
    position: relative;
    max-width: 1740px;
    margin: 31px auto 0;
    container-type: inline-size;
}

/* 1em == 1 design px of the 1740px panel */
.cases__stage {
    position: relative;
    font-size: calc(100cqw / 1740);
    height: 910em;
}

.cases__stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 800em;
    background: radial-gradient(ellipse 160% 120% at 5% 10%, #292945 0%, var(--black) 76.65%);
}

.cases__stage > * {
    position: absolute;
}

.cases__info {
    left: 149em;
    top: 192em;
    width: max(320px, 440.646em);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    transition: opacity .3s;
}

.cases__visual {
    left: 746em;
    top: 107em;
    width: 842.776em;
    transition: opacity .3s;
}

.cases.is-switching .cases__info,
.cases.is-switching .cases__visual {
    opacity: 0;
}

/* before/after composition: 1em == 1 design px of 842.776px */
.compare {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 842.776 / 479.468;
}

.compare__stage {
    position: absolute;
    inset: 0;
    font-size: calc(100cqw / 842.776);
}

.compare__stage > * {
    position: absolute;
}

.compare__block,
.compare__shot {
    width: 518.334em;
    height: 323.081em;
    border-radius: 15.039em;
}

.compare__block--teal { left: 324.44em; top: 23.7em; background: var(--secondary-2); }
.compare__block--purple { left: 0; top: 121.7em; background: var(--primary-3); }

.compare__shot {
    overflow: hidden;
}

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

.compare__shot--before { left: 20.17em; top: 152.16em; }

.compare__shot--after {
    left: 299em;
    top: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
}

.compare__shot--after img {
    height: 760.58%;
    object-fit: fill;
}

.compare__label {
    font-size: 33em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.compare__label--before { left: calc(20.17em / 33); top: calc(89.7em / 33); color: var(--primary-3); }
.compare__label--after { right: calc(25.45em / 33); top: calc(333.42em / 33); color: var(--secondary-2); }

.compare__arrow {
    left: 509em;
    top: 324em;
    width: 183.393em;
    height: 155.468em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare__arrow img {
    flex: none;
    width: 196.041em;
    height: 55.011em;
    max-width: none;
    transform: rotate(-36.89deg) scaleY(-1);
}

.cases__arrow {
    top: 308em;
    width: max(44px, 70em);
    height: max(44px, 70em);
    transition: transform .2s, opacity .2s;
}

.cases__arrow img {
    width: 100%;
    height: 100%;
}

.cases__arrow:hover { opacity: .75; }
.cases__arrow--prev { left: 44em; }
.cases__arrow--next { right: 47em; }
.cases__arrow--next img { transform: rotate(180deg); }

.cases__thumbs {
    left: 152em;
    top: 702em;
    display: flex;
    gap: 12.819em;
}

.cases__thumb,
.cases__all {
    position: relative;
    width: 277.944em;
    height: 208.458em;
    flex: none;
}

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

.cases__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 19, 37, .7);
    transition: opacity .25s;
}

.cases__thumb:hover::after { opacity: .35; }
.cases__thumb.is-active::after { opacity: 0; }

.cases__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--secondary-1-strong);
    transition: filter .2s;
}

.cases__all span {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.cases__all:hover { filter: brightness(1.12); }

.cases__all img {
    width: 24px;
    height: 24px;
}

/* ---------- CTA + contact ---------- */

.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 243px var(--gutter) 157px;
    text-align: center;
}

/* "Like what you see?" — texture shown through the lettering */
.cta__title {
    width: min(1179.36px, 100%);
    aspect-ratio: 1179.36 / 118.68;
    background: url("../img/cta-texture.webp") 54.32% 88.12% / 163.31% auto no-repeat;
    -webkit-mask: url("../img/cta-mask.svg") 0 0 / 100% 100% no-repeat;
    mask: url("../img/cta-mask.svg") 0 0 / 100% 100% no-repeat;
    margin-bottom: calc(min(1179.36px, 100%) * 25.32 / 1179.36);
}

.cta__link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    transition: color .2s;
}

.cta__link:hover {
    color: var(--secondary-2);
}

.cta__tri {
    position: relative;
    width: 31.493px;
    height: 31.493px;
    flex: none;
    transform: rotate(90deg);
    transition: transform .2s;
}

.cta__link:hover .cta__tri {
    transform: rotate(90deg) translateY(-4px);
}

.cta__tri img {
    position: absolute;
    inset: 0 6.7% 25%;
    width: 86.6%;
    height: 75%;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 115px;
}

.contact__social {
    display: flex;
    gap: 20px;
}

.contact__info {
    font-size: 19px;
    line-height: 1.6;
}

.contact__info b {
    color: var(--secondary-2);
    font-weight: 700;
}

.contact__info a:hover {
    color: var(--secondary-2);
}

/* ---------- Footer ---------- */

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 45px 90px;
    background: var(--primary-1);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 61px;
}

.footer__links a:hover {
    color: var(--secondary-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1440px) {
    .header__inner { padding: 30px 48px; }
    .nav { gap: 28px; }
    .skills, .cases { padding-left: 48px; padding-right: 48px; }
    .footer { padding: 45px 48px; }
}

@media (max-width: 1500px) {
    .why__logo { display: none; }
    .cases__info { top: 140em; }
    .cases__info .heading-pair__title { font-size: clamp(30px, 2.8vw, 48px); }
}

@media (max-width: 1280px) {
    :root { --header-h: 80px; }

    /* backdrop-filter would trap the fixed mobile menu inside the header */
    .header.is-scrolled {
        backdrop-filter: none;
        background: rgba(22, 19, 37, .97);
    }

    .header__inner,
    .header.is-scrolled .header__inner {
        padding: 16px 24px;
    }

    .header__logo img {
        width: 200px;
        height: auto;
    }

    .header__toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        padding: 10px;
        position: relative;
        z-index: 2;
    }

    .header__toggle span {
        display: block;
        height: 2px;
        background: var(--white);
        transition: transform .25s, opacity .25s;
    }

    .header.is-open .header__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .header.is-open .header__toggle span:nth-child(2) { opacity: 0; }
    .header.is-open .header__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        background: rgba(22, 19, 37, .97);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }

    .header.is-open .nav {
        opacity: 1;
        visibility: visible;
    }

    .nav__item {
        height: auto;
        padding: 12px 20px;
        font-size: 24px;
    }

    .nav__item::before { display: none; }

    .nav__cta { margin-top: 24px; }
}

/* Below 1200px the free-form compositions collapse into a stacked layout */
@media (max-width: 1199px) {
    .deco { display: none; }

    .hero__stage {
        height: auto;
        min-height: min(100svh, 760px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 120px var(--gutter) 80px;
    }

    .hero__title {
        position: static;
        transform: none;
        width: auto;
    }

    .about__stage,
    .why__stage {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 48px clamp(16px, 5vw, 48px) 80px;
    }

    .about__stage > *,
    .why__stage > * {
        position: relative;
        inset: auto;
    }

    .about__visual {
        order: -1;
        width: 100%;
        max-width: 720px;
        align-self: center;
    }

    .about__text,
    .why__text {
        width: auto;
        max-width: 560px;
    }

    .about__services-title {
        color: var(--accent-3);
        font-size: clamp(48px, 12vw, 96px);
        margin-top: 32px;
    }

    .about__orn80 { display: none; }

    .about__process-image {
        width: min(348px, 70%);
        height: auto;
        aspect-ratio: 348.458 / 359.833;
        align-self: center;
    }

    .services-list {
        align-items: flex-start;
        gap: 32px;
    }

    .service {
        align-items: flex-start;
        width: 100%;
    }

    .service__head { max-width: 100%; }
    .service__title { font-size: clamp(24px, 6.4vw, 48px); min-width: 0; }
    .service__text { width: auto; }

    .service__head {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

    .service__title { white-space: normal; }

    .skills { padding: 24px clamp(16px, 5vw, 48px) 80px; }
    .skills__row { justify-content: center; gap: 16px 32px; }

    .why__laptop {
        width: 100%;
        max-width: 640px;
        align-self: center;
    }

    .stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        gap: 32px;
    }

    .stat { align-items: center; }
    .stat__value::after { margin: 10px auto 0; }

    .cases { padding: 0 clamp(16px, 5vw, 48px); }

    .cases__stage {
        font-size: inherit;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 40px clamp(16px, 4vw, 40px);
        background: radial-gradient(ellipse 160% 120% at 5% 10%, #292945 0%, var(--black) 76.65%);
    }

    .cases__stage::before { display: none; }

    .cases__stage > * { position: relative; inset: auto; }

    .cases__info { width: auto; }
    .cases__visual { width: 100%; }

    .cases__arrow {
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        z-index: 2;
    }

    .cases__arrow--prev { left: 4px; }
    .cases__arrow--next { right: 4px; }

    .cases__thumbs {
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }

    .cases__thumb,
    .cases__all {
        width: 200px;
        height: 150px;
        scroll-snap-align: start;
    }

    .cta { padding-top: 120px; padding-bottom: 96px; }
    .contact { margin-top: 72px; }

    .footer {
        flex-direction: column;
        text-align: center;
        padding: 32px var(--gutter);
    }

    .footer__links { justify-content: center; gap: 12px 32px; }
}

@media (max-width: 600px) {
    .heading-pair__eyebrow { font-size: 19px; }
    .paragraph { font-size: 16px; }
    .checklist li { font-size: 16px; align-items: flex-start; }
    .checklist img { width: 26px; height: 26px; }
    .contact__info { font-size: 16px; }
    .header__logo img { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Case studies — listing (case-studies.html) and detail (case-study.html)
   Built from the same tokens and components as the home page.
   ========================================================================== */

/* ---------- Page hero ---------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 240px 90px 120px;
}

.page-hero__shape {
    position: absolute;
    top: 0;
    right: -8%;
    width: min(60.5%, 1162.57px);
    height: auto;
    max-width: none;
    pointer-events: none;
}

.page-hero__dots {
    position: absolute;
    left: 46%;
    top: 300px;
    width: 197.815px;
    height: 197.815px;
    pointer-events: none;
}

.page-hero__tris {
    position: absolute;
    right: 14%;
    top: 170px;
    display: flex;
    align-items: flex-end;
    gap: 40px;
    font-size: max(.6px, var(--u));
    pointer-events: none;
}

.page-hero__inner {
    position: relative;
    max-width: 1740px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.breadcrumb a {
    transition: color .2s;
}

.breadcrumb a:hover {
    color: var(--secondary-2);
}

.breadcrumb span:last-child {
    color: var(--white);
}

.page-hero__eyebrow {
    color: var(--secondary-2);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}

.page-hero__title {
    font-size: clamp(44px, 6vw, 120px);
    font-weight: 700;
    line-height: 1.2;
}

.page-hero__inner .section-title__line {
    margin: 4px 0 0 -4px;
}

.page-hero__lead {
    max-width: 820px;
    margin-top: 32px;
    font-size: 19px;
    line-height: 1.6;
}

.meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
    margin-top: 72px;
}

.meta__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta__item::before {
    content: "";
    width: 90px;
    height: 1px;
    margin-bottom: 14px;
    background: var(--secondary-2);
}

.meta dt {
    color: var(--secondary-2);
    font-size: 18px;
    line-height: 1.8;
}

.meta dd {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
}

/* ---------- Single-image variant of the compare composition ---------- */

.compare.is-single .compare__block,
.compare.is-single .compare__shot--single {
    width: 640em;
    height: 400em;
}

.compare.is-single .compare__block--purple { left: 76em; top: 10em; }
.compare.is-single .compare__block--teal { left: 126.4em; top: 63.7em; }

.compare__shot--single {
    left: 101em;
    top: 40em;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
}

/* ---------- Listing ---------- */

.work {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px 40px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
}

.filters__item {
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    transition: border-color .2s, background-color .2s;
}

.filters__item:hover {
    border-color: var(--secondary-2);
}

.filters__item.is-active {
    background: var(--secondary-1-strong);
    border-color: var(--secondary-1-strong);
}

.work__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.work-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: rgba(255, 255, 255, .03);
    transition: background-color .25s;
}

.work-card:hover {
    background: rgba(255, 255, 255, .06);
}

.work-card[hidden] {
    display: none;
}

.work-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.work-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

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

.work-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 40px 48px;
}

.work-card__title {
    font-size: clamp(26px, 1.9vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.work__grid:not(.is-filtered) .work-card:first-child .work-card__title {
    font-size: clamp(30px, 2.6vw, 48px);
}

.work-card__title a {
    transition: color .2s;
}

.work-card__title a:hover {
    color: var(--secondary-2);
}

.work-card__meta {
    margin-top: -12px;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    font-weight: 500;
}

.work-card .btn {
    margin-top: auto;
}

/* first project is featured across the full width */
.work__grid:not(.is-filtered) .work-card:first-child {
    grid-column: 1 / -1;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.work__grid:not(.is-filtered) .work-card:first-child .work-card__media {
    aspect-ratio: auto;
    min-height: 520px;
}

.work__grid:not(.is-filtered) .work-card:first-child .work-card__body {
    justify-content: center;
    padding: 60px 80px;
}

.work__grid:not(.is-filtered) .work-card:first-child .btn {
    margin-top: 16px;
}

/* ---------- Detail ---------- */

.cs-cover {
    padding: 0 90px 160px;
}

.cs-cover .compare {
    max-width: 1180px;
    margin: 0 auto;
}

.cs-block {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 40px 120px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px 140px;
}

.cs-block__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.cs-block__head .service__num {
    margin-top: 6px;
}

.cs-block__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 860px;
}

.cs-block__body > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-block__body .checklist {
    margin-top: 8px;
}

.cs-results {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
    gap: 48px 120px;
    max-width: 1740px;
    margin: 0 auto 140px;
    padding: 90px 80px;
    background: radial-gradient(ellipse 160% 120% at 5% 10%, #292945 0%, var(--black) 76.65%);
}

.cs-results__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 60px;
}

.cs-results__stats .stat {
    align-items: flex-start;
}

.cs-results__stats .stat__value::after {
    margin-left: 0;
}

.cs-tech {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px 140px;
}

.cs-tech__row {
    justify-content: center;
    gap: 24px 60px;
}

.cs-next {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px;
}

.cs-next__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1740px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .03);
    transition: background-color .25s;
}

.cs-next__card:hover {
    background: rgba(255, 255, 255, .06);
}

.cs-next__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding: 60px 80px;
}

.cs-next__title {
    font-size: clamp(44px, 5vw, 90px);
    font-weight: 700;
    line-height: 1.2;
}

.cs-next__media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.cs-next__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.cs-next__card:hover .cs-next__media img {
    transform: scale(1.04);
}

.cs-missing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 240px 90px 40px;
}

.cs-missing[hidden],
main[hidden] {
    display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
    .page-hero,
    .cs-missing { padding-left: 48px; padding-right: 48px; }

    .work,
    .cs-cover,
    .cs-block,
    .cs-tech,
    .cs-next { padding-left: 48px; padding-right: 48px; }

    .cs-block,
    .cs-results { column-gap: 72px; }

    .work-card__body { padding: 32px 32px 40px; }
}

@media (max-width: 1199px) {
    .page-hero {
        padding: 140px clamp(16px, 5vw, 48px) 80px;
    }

    .page-hero__shape { width: 90%; right: -40%; opacity: .7; }
    .page-hero__dots,
    .page-hero__tris { display: none; }

    .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }

    .work,
    .cs-cover,
    .cs-tech,
    .cs-next { padding-left: clamp(16px, 5vw, 48px); padding-right: clamp(16px, 5vw, 48px); }

    .cs-cover { padding-bottom: 96px; }
    .cs-tech { padding-bottom: 96px; }

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

    .work__grid:not(.is-filtered) .work-card:first-child {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .work__grid:not(.is-filtered) .work-card:first-child .work-card__media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .work__grid:not(.is-filtered) .work-card:first-child .work-card__body,
    .work-card__body { padding: 32px clamp(20px, 5vw, 40px) 40px; }

    .cs-block,
    .cs-results {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-block { padding: 0 clamp(16px, 5vw, 48px) 80px; }

    .cs-results {
        margin: 0 clamp(16px, 5vw, 48px) 96px;
        padding: 48px clamp(20px, 5vw, 48px);
    }

    .cs-next__card { grid-template-columns: minmax(0, 1fr); }
    .cs-next__media { order: -1; }
    .cs-next__text { padding: 32px clamp(20px, 5vw, 40px) 40px; }

    .cs-missing { padding: 140px clamp(16px, 5vw, 48px) 40px; }
}

@media (max-width: 600px) {
    .page-hero__lead,
    .meta dd { font-size: 16px; }
    .page-hero__eyebrow { font-size: 19px; }
    .cs-results__stats { justify-content: flex-start; }
}

/* ---------- Case study: optional pieces, gallery, screenshot viewer ---------- */

[hidden] {
    display: none !important;
}

.page-hero__cta {
    margin-top: 40px;
}

.cs-gallery {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 90px 140px;
}

.cs-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 30px;
    max-width: 1740px;
    margin: 56px auto 0;
}

.cs-shot {
    margin: 0;
}

/* screenshot in a minimal browser frame */
.cs-shot__frame {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #262338;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
    cursor: zoom-in;
    transition: transform .3s, box-shadow .3s;
}

.cs-shot__frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--secondary-2), 0 12px 40px rgba(0, 0, 0, .35);
}

.cs-shot__bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

.cs-shot__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.cs-shot__bar i:first-child { background: var(--secondary-2); }
.cs-shot__bar i:nth-child(2) { background: var(--primary-3); }

.cs-shot__frame img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: left top;
}

.cs-shot figcaption {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.cs-shot figcaption::before {
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    margin-bottom: 12px;
    background: var(--secondary-2);
}

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.lightbox::backdrop {
    background: rgba(22, 19, 37, .94);
}

.lightbox__figure {
    margin: 0;
    max-width: min(1600px, calc(100vw - 220px));
}

.lightbox__figure img {
    max-height: calc(100vh - 140px);
    width: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.lightbox__figure figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 44px;
    line-height: 1;
    transition: color .2s;
}

.lightbox__close:hover { color: var(--secondary-2); }

.lightbox__nav {
    flex: none;
    width: 56px;
    height: 56px;
    transition: opacity .2s;
}

.lightbox__nav:hover { opacity: .7; }
.lightbox__nav img { width: 100%; height: 100%; }
.lightbox__nav--next img { transform: rotate(180deg); }

@media (max-width: 1440px) {
    .cs-gallery { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 1199px) {
    .cs-gallery { padding: 0 clamp(16px, 5vw, 48px) 96px; }
    .cs-gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }

    .lightbox[open] { gap: 0; }
    .lightbox__figure { max-width: calc(100vw - 32px); }
    .lightbox__nav {
        position: absolute;
        bottom: 24px;
        width: 44px;
        height: 44px;
    }
    .lightbox__nav--prev { left: calc(50% - 56px); }
    .lightbox__nav--next { right: calc(50% - 56px); }
}

/* device mock-up cover (transparent image over the brand blocks) */
.compare__device {
    position: absolute;
    left: 111em;
    top: 0;
    width: 620em;
    height: 479.468em;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45));
}

/* four results read better as a 2 × 2 grid than as 3 + 1 */
.cs-results__stats:has(> :nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: space-around;
}

/* long labels wrap instead of pushing the grid out of the panel */
.cs-results__stats .stat__label {
    white-space: normal;
}

.work__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 60px;
    background: rgba(255, 255, 255, .03);
}

/* footer holds only the copyright line */
.footer {
    justify-content: center;
    text-align: center;
}

/* ---------- Language switcher ---------- */

.lang {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -24px;
}

.lang__item {
    padding: 6px 8px;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, .55);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    transition: color .2s, border-color .2s;
}

.lang__item:hover {
    color: var(--white);
}

.lang__item.is-active {
    color: var(--white);
    border-bottom-color: var(--secondary-2);
}

@media (max-width: 1280px) {
    .lang {
        margin: 16px 0 0;
        gap: 12px;
    }

    .lang__item {
        font-size: 18px;
    }
}

/* "Like what you see?" as live text (Romanian): same texture, no word mask */
.cta__title--text {
    width: auto;
    aspect-ratio: auto;
    max-width: 100%;
    -webkit-mask: none;
    mask: none;
    margin-bottom: 26px;
    background: url("../img/cta-texture.webp") center 70% / cover no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(44px, 7.5vw, 144px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}