/* First-screen iteration, September 2026. Scoped to the homepage. */
@font-face {
    font-family: Montserrat;
    src: url('../assets/fonts/landing/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url('../assets/fonts/landing/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url('../assets/fonts/landing/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url('../assets/fonts/landing/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Match the fallback's text width and line metrics while Montserrat loads. */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('ArialMT');
    font-weight: 400;
    size-adjust: 113.032%;
    ascent-override: 85.817%;
    descent-override: 22.118%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('ArialMT');
    font-weight: 500;
    size-adjust: 114.691%;
    ascent-override: 84.575%;
    descent-override: 21.798%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 600;
    size-adjust: 108.897%;
    ascent-override: 89.076%;
    descent-override: 22.958%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700;
    size-adjust: 110.077%;
    ascent-override: 88.120%;
    descent-override: 22.711%;
    line-gap-override: 0%;
}

/* Homepage: the studio's tile design, followed by proof from real projects. */
.home-conversion { font-family: Montserrat, 'Montserrat Fallback', sans-serif; }
.home-conversion .wrapper { overflow: clip; }
.home-conversion .header {
    position: sticky;
    top: 0;
    z-index: 80;
    padding: 22px 0;
    background: #fffffff2;
    backdrop-filter: blur(12px);
}
.home-conversion :is(section[id], #top) { scroll-margin-top: 95px; }
.hero.hero--conversion { padding: 8px 0 0; color: #373737; }
:is(.hero--conversion, .home-projects) *,
:is(.hero--conversion, .home-projects) *::before,
:is(.hero--conversion, .home-projects) *::after { box-sizing: border-box; }
.hero--conversion .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, .7fr) minmax(0, .7fr);
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
.hero--conversion .hero-copy {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 42px 38px;
    border-radius: 42px;
    background: radial-gradient(ellipse at 100% 0%, #e1d4f7, transparent 65%), #f4f0f8;
}
.hero--conversion .hero-eyebrow,
.home-projects .projects-eyebrow {
    margin: 0 0 23px;
    color: #655080;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.hero--conversion h1 {
    margin: 0;
    font-size: clamp(38px, 3.45vw, 49px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.045em;
}
.hero--conversion h1 span { color: #7860aa; }
.hero--conversion .hero-description {
    margin: 23px 0 0;
    color: #625b6b;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}
.hero--conversion .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 21px; margin-top: 27px; }
:is(.hero--conversion, .home-projects) .hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 56px;
    padding: 8px 8px 8px 23px;
    border: 0;
    border-radius: 32px;
    background: #373737;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .18s ease;
}
:is(.hero--conversion, .home-projects) .hero-primary:hover { background: #59417c; }
:is(.hero--conversion, .home-projects) .hero-primary svg {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 11px;
    border-radius: 50%;
    background: #fff;
    color: #373737;
}
.hero--conversion .hero-secondary,
.home-projects .projects-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 0;
    color: #57436f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #b8a5d0;
}
.hero--conversion .hero-note { margin: 15px 0 0; max-width: 490px; color: #685f71; font-size: 12px; line-height: 1.65; }
:is(.hero--conversion, .home-projects) :is(a,button):focus-visible { outline: 3px solid #7858a9; outline-offset: 5px; }
.hero--conversion .hero-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    overflow: hidden;
    border-radius: 42px;
    padding: 29px 25px;
    isolation: isolate;
}
.hero--conversion .hero-tile strong { font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.hero--conversion .hero-tile-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; }
.hero--conversion .hero-tile-arrow { flex: 0 0 auto; font-size: 27px; line-height: 1; }
.hero--conversion .hero-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; transition: opacity .18s ease; }
.hero--conversion .hero-tile:hover::before { opacity: .88; }
.hero--conversion .hero-tile--projects { grid-column: 2; grid-row: 1 / 3; color: #fff; background: #5f4196; }
.hero--conversion .hero-tile--projects::before { background: linear-gradient(180deg, #39225660, transparent 30%, #291345cf), url('../assets/imgs/pic2.webp') center / cover no-repeat; }
.hero--conversion .hero-tile--services { grid-column: 3; grid-row: 1; color: #3d3155; background: #e9dfef; }
.hero--conversion .hero-tile--services::before { background: linear-gradient(180deg, #eee7f4 0, transparent 50%, #eee7f4ed 100%), url('../assets/imgs/hero-1-mobile.webp') 75% center / auto 100% no-repeat; }
.hero--conversion .hero-tile--team { grid-column: 3; grid-row: 2; color: #fff; background: #383279; }
.hero--conversion .hero-tile--team::before { background: url('../assets/imgs/decor2.webp') right 38% / 135px auto no-repeat; }
.hero--conversion .hero-tile--team .hero-tile-bottom { max-width: 190px; }
.hero--conversion .hero-tile:focus-visible { outline-offset: -5px; outline-color: #b89bfc; }

.home-projects { color: #373737; padding: 65px 0 48px; }
.home-projects .projects-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 27px; }
.home-projects .projects-eyebrow { margin-bottom: 13px; }
.home-projects h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; font-weight: 600; letter-spacing: -.04em; }
.home-projects .projects-intro { max-width: 610px; margin: 17px 0 0; color: #6a626f; font-size: 15px; line-height: 1.65; }
.home-projects .projects-all { flex-shrink: 0; }
.home-projects .projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-projects .project-proof { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e7dfee; border-radius: 30px; overflow: hidden; background: #f5f0fa; }
.home-projects .project-proof--bakaev { background: #faf0e8; border-color: #eddfd2; }
.home-projects .project-proof--proxy { background: #edf3fb; border-color: #dce6f3; }
.home-projects .project-proof-visual { position: relative; display: block; height: 260px; overflow: hidden; border-radius: 29px 29px 0 0; background: radial-gradient(ellipse at 50% 85%, #d5bbed 0, transparent 70%); }
.home-projects .project-proof--bakaev .project-proof-visual { background: radial-gradient(ellipse at 50% 85%, #f0cab4 0, transparent 70%); }
.home-projects .project-proof--proxy .project-proof-visual { background: radial-gradient(ellipse at 50% 85%, #a5c3ed 0, transparent 70%); }
.home-projects .proof-phone {
    position: absolute;
    width: 139px;
    aspect-ratio: 790 / 1608;
    top: 29px;
    left: calc(50% - 134px);
    border-radius: 28px;
    overflow: hidden;
    background: #f5f5f5;
    transform: rotate(-7deg);
    box-shadow: 0 12px 24px #42334b20;
}
.home-projects .proof-phone img { display: block; width: 100%; height: auto; }
.home-projects .proof-phone--second { left: calc(50% + 3px); top: 55px; transform: rotate(7deg); }
.home-projects .proof-phone--bakaev img { position: absolute; width: 354.43%; max-width: none; height: auto; left: -138.608%; top: -16.418%; }
.home-projects .proof-phone--cart img { left: -253.1%; }
.home-projects .proof-phone--visa { box-sizing: content-box; width: 133px; aspect-ratio: 748 / 1674; border: 5px solid #302639; border-radius: 25px; }
.home-projects .proof-phone--visa.proof-phone--second { aspect-ratio: 748 / 1600; }
.home-projects .proof-phone--proxy { box-sizing: content-box; aspect-ratio: 786 / 1704; border: 5px solid #233247; border-radius: 25px; background: #070b08; }
.home-projects .projects-anchor { display: block; height: 0; scroll-margin-top: 95px; }
.home-projects .project-proof-copy { display: flex; flex: 1; flex-direction: column; padding: 25px 27px 24px; }
.home-projects .project-proof-category { margin: 0 0 12px; color: #776876; font-size: 11px; line-height: 1.5; letter-spacing: .045em; text-transform: uppercase; }
.home-projects .project-proof h3 { margin: 0 0 14px; font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.home-projects .project-proof h3 span { display: block; margin-top: 4px; font-size: 19px; line-height: 1.3; }
.home-projects .project-proof-description { margin: 0 0 18px; color: #665d6b; font-size: 14px; line-height: 1.65; }
.home-projects .project-proof-fact { margin: auto 0 0; padding: 15px 0 0; border-top: 1px solid #46335420; font-size: 12px; font-weight: 500; line-height: 1.6; color: #615170; }
.home-projects .project-proof-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; margin: 13px 0 -4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #51416b; }
.home-projects .project-proof-link span { font-size: 23px; font-weight: 400; }
.home-projects .project-proof-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-projects .projects-contact { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 28px; margin-top: 20px; border: 1px solid #e8e1ee; border-radius: 26px; }
.home-projects .projects-contact strong { display: block; margin-bottom: 7px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.home-projects .projects-contact p { max-width: 690px; margin: 0; font-size: 14px; line-height: 1.6; color: #6c6373; }
.home-projects .projects-contact button { flex-shrink: 0; }

@media (max-width: 1180px) {
    .hero--conversion .hero-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, .75fr) minmax(0, .75fr); gap: 13px; }
    .hero--conversion .hero-copy { padding: 34px 28px; border-radius: 34px; }
    .hero--conversion h1 { font-size: 40px; }
    .hero--conversion .hero-description { font-size: 15px; }
    .hero--conversion .hero-tile { padding: 26px 20px; border-radius: 34px; }
    .hero--conversion .hero-tile strong { font-size: 21px; }
    .hero--conversion .hero-tile-bottom { font-size: 13px; }
    .home-projects .project-proof-copy { padding: 23px 22px; }
    .home-projects .project-proof h3 { font-size: 23px; }
}
@media (max-width: 1000px) {
    .hero--conversion .hero-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: 1.1fr 1fr 1fr; gap: 12px; }
    .hero--conversion .hero-copy { grid-row: 1 / 4; }
    .hero--conversion .hero-tile--projects { grid-column: 2; grid-row: 1; }
    .hero--conversion .hero-tile--services { grid-column: 2; grid-row: 2; }
    .hero--conversion .hero-tile--team { grid-column: 2; grid-row: 3; }
    .hero--conversion .hero-tile { min-height: 170px; }
    .hero--conversion .hero-tile--projects::before { background-position: center 43%; }
    .hero--conversion .hero-tile--services::before { background-position: center, 90% center; background-size: auto, auto 150%; }
    .hero--conversion .hero-tile--team::before { background-position: 95% 30%; background-size: 110px auto; }
    .hero--conversion .hero-tile-bottom { max-width: 250px; }
    .home-projects .projects-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
    .home-projects .project-proof { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
    .home-projects .project-proof-visual { height: 100%; min-height: 310px; border-radius: 29px 0 0 29px; }
    .home-projects .proof-phone { top: 45px; }
    .home-projects .proof-phone--second { top: 75px; }
    .home-projects .projects-contact { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
    .home-conversion .header { padding: 17px 0; }
    .home-conversion :is(section[id], #top) { scroll-margin-top: 82px; }
    .hero.hero--conversion { padding-top: 4px; }
    .hero--conversion .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 107px 107px; gap: 10px; }
    .hero--conversion .hero-copy { grid-column: 1 / -1; grid-row: 1; padding: 26px 23px; border-radius: 30px; }
    .hero--conversion .hero-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: .025em; }
    .hero--conversion h1 { font-size: clamp(31px, 8vw, 42px); line-height: 1.1; letter-spacing: -.045em; }
    .hero--conversion .hero-description { margin-top: 19px; font-size: 14px; line-height: 1.65; }
    .hero--conversion .hero-actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 22px; }
    .hero--conversion .hero-primary { min-height: 56px; padding-left: 20px; }
    .hero--conversion .hero-secondary { align-self: center; font-size: 12px; }
    .hero--conversion .hero-note { margin-top: 8px; font-size: 11px; line-height: 1.7; }
    .hero--conversion .hero-tile { min-height: 0; padding: 20px 17px; border-radius: 28px; }
    .hero--conversion .hero-tile--projects { grid-column: 1; grid-row: 2 / 4; }
    .hero--conversion .hero-tile--services { grid-column: 2; grid-row: 2; }
    .hero--conversion .hero-tile--team { grid-column: 2; grid-row: 3; }
    .hero--conversion .hero-tile strong { font-size: 17px; }
    .hero--conversion .hero-tile-bottom { font-size: 12px; line-height: 1.45; gap: 8px; }
    .hero--conversion .hero-tile-arrow { font-size: 23px; }
    .hero--conversion .hero-tile--projects .hero-tile-bottom { flex-direction: column; align-items: flex-start; }
    .hero--conversion :is(.hero-tile--services, .hero-tile--team) .hero-tile-bottom > span:first-child { display: none; }
    .hero--conversion :is(.hero-tile--services, .hero-tile--team) .hero-tile-bottom { justify-content: flex-end; }
    .hero--conversion .hero-tile--team::before { background-position: 55% 90%; background-size: 78px auto; }
    .home-projects { padding: 43px 0 20px; }
    .home-projects .projects-heading { flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 20px; }
    .home-projects .projects-eyebrow { margin-bottom: 12px; font-size: 10px; }
    .home-projects h2 { font-size: 30px; }
    .home-projects .projects-intro { font-size: 14px; margin-top: 14px; }
    .home-projects .project-proof { display: flex; border-radius: 27px; }
    .home-projects .project-proof-visual { height: 230px; min-height: 0; border-radius: 26px 26px 0 0; }
    .home-projects .proof-phone { top: 26px; width: 131px; left: calc(50% - 126px); }
    .home-projects .proof-phone--second { top: 47px; left: calc(50% + 2px); }
    .home-projects .proof-phone--visa { width: 125px; }
    .home-projects .project-proof-copy { padding: 23px; }
    .home-projects .project-proof h3 { font-size: 25px; }
    .home-projects .project-proof h3 span { font-size: 19px; }
    .home-projects .projects-contact { padding: 25px 23px; gap: 19px; }
    .home-projects .projects-contact strong { font-size: 19px; }
    .home-projects .projects-contact button { align-self: stretch; font-size: 12px; padding-left: 18px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.hero--conversion, .home-projects) .hero-primary,
    .hero--conversion .hero-tile::before { transition: none; }
}

/* Keep the existing contact form readable with the assessment context. */
.modal .modal__subtitle { font-size: 16px; line-height: 1.5; }

/* The legacy header hid desktop navigation at 960px, but moved its mobile
   controls at 920px. Keep a usable navigation between those breakpoints. */
@media (min-width: 921px) and (max-width: 960px) {
    .header__body > .header__menu { display: block; margin-right: 0; }
    .header__body > .header__menu li { margin-right: 14px; }
    .header__body > .header__menu li:last-child { margin-right: 0; }
}