@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/hanken-grotesk-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: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/hanken-grotesk-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 {
    --cream: #f1f2ef;
    --white: #ffffff;
    --ink: #20272b;
    --muted: #58656c;
    --line: rgba(88, 101, 108, .22);
    --brand: #e8662a;
    --brand-2: #e8662a;
    --brand-soft: rgba(232, 102, 42, .14);
    --dark: #283238;
    --dark-2: #58656c;
    --dark-line: rgba(232, 102, 42, .42);
    --dark-muted: #f1f2ef;
    --gold: #e8662a;
    --ok: #e8662a;
    --max: 1160px;
    --r: 20px;
    --display: "Arial Black", "Arial Bold", Arial, sans-serif;
    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --shadow: 0 30px 60px -35px rgba(32, 39, 43, .45);
    --shadow-sm: 0 12px 30px -18px rgba(32, 39, 43, .4);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased
}

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

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

.svg-sprite {
    position: absolute
}

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px
}

.eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: .9rem;
    color: var(--brand);
    margin-bottom: 6px
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0
}

h2.title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    margin: .35em 0 .4em
}

.lead {
    color: var(--muted);
    font-size: 1.12rem;
    max-width: 60ch
}

.pain-flush {
    padding-top: 0
}

.compact-head {
    max-width: 60ch
}

.solution-head {
    max-width: 64ch;
    margin: 0 auto 44px;
    text-align: center
}

.solution-head .lead,
.packages-head .lead {
    margin: 0 auto
}

.packages-head {
    max-width: 64ch;
    margin: 0 auto 46px;
    text-align: center
}

.centered-head {
    max-width: 60ch;
    margin: 0 auto 44px;
    text-align: center
}
.project-start,
.pain-flush {
    overflow-x: clip
}

.project-start .centered-head,
.solution-head {
    position: relative;
    padding-top: 32px
}

.project-start .centered-head::before,
.solution-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    border-top: 1px solid var(--line);
    transform: translateX(-50%)
}


.faq-head {
    max-width: 60ch;
    margin: 0 auto 40px;
    text-align: center
}

.whatsapp-button {
    margin-top: 24px
}

.icn {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 999px;
    padding: 15px 26px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s
}

.btn .icn {
    width: 19px;
    height: 19px;
    stroke-width: 2
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-primary {
    background: var(--brand);
    color: var(--ink);
    box-shadow: 0 14px 30px -12px rgba(232, 102, 42, .45)
}

.btn-primary:hover {
    color: #fff;
    background: var(--ink)
}

.btn-dark {
    background: var(--ink);
    color: #fff
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line)
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.btn-light {
    background: #fff;
    color: var(--ink)
}

.btn-lg {
    padding: 17px 32px;
    font-size: 1.05rem
}

section {
    padding: 96px 0
}



/* LANGUAGE NOTICE */
.language-notice {
    background: var(--brand);
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700
}

.language-notice[hidden] {
    display: none
}

.language-notice .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center
}

.language-notice-actions,
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.language-notice-actions a,
.language-switcher a {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    padding: 3px 5px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center
}

.language-notice-actions a[hidden],
.language-switcher a[hidden],
.language-switcher[hidden] {
    display: none
}

.language-notice-actions a[aria-current="page"],
.language-switcher a[aria-current="page"] {
    color: var(--ink);
    background: #fff;
    border-color: #fff
}

.language-notice button {
    display: grid;
    flex: none;
    padding: 4px;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

.language-notice button .icn {
    width: 19px;
    height: 19px;
    stroke-width: 2
}

@media(max-width:600px) {
    .language-notice .container {
        gap: 10px;
        text-align: left
    }

    .language-notice-actions {
        display: none
    }
}

/* TOP BAR */
.topbar {
    background: var(--ink);
    color: var(--cream);
    font-size: .83rem;
    font-weight: 600
}

.topbar .container {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    padding-right: clamp(20px, 3.5vw, 44px);
    padding-left: clamp(20px, 3.5vw, 44px);
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: left;
    flex-wrap: nowrap
}

.topbar .container > span {
    flex: 1;
    min-width: 0
}

.topbar .icn {
    width: 16px;
    height: 16px;
    stroke: var(--brand-2)
}

.topbar b {
    color: #fff
}

.language-switcher a {
    color: var(--cream);
    border-color: rgba(255, 255, 255, .4)
}

.language-switcher a:hover {
    border-color: #fff
}

@media(max-width:520px) {
    .topbar .container {
        gap: 10px;
        justify-content: space-between;
        padding-right: 20px;
        padding-left: 20px
    }

    .topbar .container > span {
        font-size: .72rem;
        line-height: 1.25
    }

    .language-switcher {
        flex: none;
        gap: 3px
    }

    .language-switcher a {
        min-width: 28px;
        padding: 3px;
        font-size: .9rem
    }
}

/* NAV */
header.nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(242, 244, 245, .9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 14px clamp(20px, 3.5vw, 44px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800
}

.mark {
    display: block;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: var(--shadow-sm)
}

.brand .txt {
    line-height: 1.05;
    font-size: 1.08rem;
    letter-spacing: -.01em;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.brand .txt small {
    display: block;
    font-weight: 600;
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .05em
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    font-weight: 600;
    font-size: .95rem;
    justify-self: center
}

.menu a.link {
    color: var(--muted)
}

.menu a.link:hover {
    color: var(--ink)
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-self: end;
    white-space: nowrap
}

.nav-actions .call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 700
}

.nav-actions .call .icn {
    width: 18px;
    height: 18px;
    stroke: var(--brand)
}

.burger {
    display: none;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer
}

.burger .icn {
    stroke: var(--ink)
}

@media(max-width:1500px) {
    .nav-actions .call span {
        display: none
    }
}

@media(max-width:1000px) {
    .menu .link {
        display: none
    }

    .burger {
        display: grid
    }
}

@media(max-width:600px) {
    .nav-actions .btn {
        display: none
    }
}

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    padding: 78px 0 88px
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center
}

.hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 4rem)
}

.hero h1 em {
    font-style: normal;
    color: var(--brand)
}

.hero .lead {
    margin: 22px 0 8px;
    font-size: 1.18rem
}

.hero .cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px
}

.rating {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .92rem
}

.stars {
    display: inline-flex;
    gap: 2px
}

.stars svg {
    width: 18px;
    height: 18px;
    fill: var(--gold);
    stroke: none
}

.rating b {
    color: var(--ink)
}

.rating .divide {
    width: 1px;
    height: 20px;
    background: var(--line)
}

/* hero visual */
.hero-visual {
    position: relative
}

.hv-photo {
    border-radius: 26px;
    height: 440px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(22, 27, 31, .12), rgba(22, 27, 31, .5)), url('/assets/Razanj-07.jpg') center/cover no-repeat
}

.hv-photo .plan {
    position: absolute;
    inset: 0;
    opacity: .5
}

.hv-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    background: rgba(22, 27, 31, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px
}

.hv-badge .icn {
    stroke: var(--brand-2)
}

.hv-badge small {
    display: block;
    font-weight: 600;
    color: var(--muted);
    font-size: .76rem
}

.hv-float {
    position: absolute;
    right: -16px;
    top: 34px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 18px;
    padding: 16px 18px;
    width: 210px
}

.hv-float .k {
    font-family: var(--display);
    font-size: 1.9rem;
    color: var(--brand);
    line-height: 1
}

.hv-float .v {
    color: var(--muted);
    font-size: .86rem;
    margin-top: 2px
}

@media(max-width:920px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .hv-photo {
        height: 340px
    }

    .hv-float {
        display: none
    }
}

/* TRUST STATS */
.stats {
    background: var(--ink);
    color: #fff;
    padding: 46px 0
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    text-align: center
}

.stat .num {
    font-family: var(--display);
    font-size: 2.4rem;
    color: var(--brand-2);
    line-height: 1
}

.stat .lbl {
    color: var(--dark-muted);
    font-size: .92rem;
    margin-top: 6px
}

@media(max-width:720px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px
    }
}

/* PAIN */
.pain {
    background: var(--white)
}

.pain-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: center
}

.pain-list {
    display: grid;
    gap: 14px
}

.pain-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px
}

.pain-item .x {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand)
}

.pain-item .x .icn {
    width: 18px;
    height: 18px;
    stroke-width: 2.2
}

.pain-item p {
    margin: 0;
    font-weight: 600
}

.pain .callout {
    margin-top: 26px;
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.35
}

.pain .callout em {
    font-style: normal;
    color: var(--brand)
}

@media(max-width:920px) {
    .pain-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }
}


/* ABOUT */
.about {
    background: var(--cream)
}

.about-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 52px;
    align-items: center
}


.about-media {
    align-self: stretch;
    margin-top: 58px;
    margin-bottom: 105px;
    position: relative
}

.about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.about-badge {
    position: absolute;
    left: -14px;
    bottom: 26px;
    background: var(--brand);
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1;
    padding: 16px 22px;
    border-radius: 18px;
    box-shadow: var(--shadow)
}

.about-badge small {
    display: block;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    color: var(--cream);
    margin-top: 5px;
    letter-spacing: .02em
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 12px
}

.about-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-weight: 600
}

.about-list li .icn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    stroke: var(--brand);
    stroke-width: 2.4;
    margin-top: 2px
}

.about-sign {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

.about-sign .av {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--white);
    box-shadow: 0 4px 14px rgba(19, 38, 45, .16)
}

.about-sign b {
    display: block
}

.about-sign span {
    color: var(--muted);
    font-size: .88rem
}


@media(max-width:920px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        align-items: start
    }


    .about-media {
        margin-top: 0;
        margin-bottom: 0
    }

    .about-media img {
        height: 340px
    }
}

/* PROCESS */
.process {
    background: var(--white)
}

.timeline {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px
}

.tl {
    position: relative;
    z-index: 1;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px
}

.process-timeline-svg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none
}

.process-timeline-base,
.process-timeline-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.process-timeline-base {
    stroke: var(--line)
}

.process-timeline-progress {
    stroke: var(--brand);
    transition: stroke-dashoffset 1.05s cubic-bezier(.22, 1, .36, 1)
}

.process-timeline-node {
    display: none;
    fill: var(--white);
    stroke: var(--line);
    stroke-width: 2;
    opacity: .7;
    transform: scale(.8);
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    transition: fill .45s ease, stroke .45s ease, stroke-width .45s ease, opacity .45s ease, transform .45s ease
}

.process-timeline-node.active {
    fill: var(--brand);
    stroke: rgba(242, 108, 45, .18);
    stroke-width: 10;
    opacity: 1;
    transform: scale(1)
}

.tl .step-n {
    font-family: var(--display);
    font-size: 2.2rem;
    color: var(--brand);
    opacity: .35;
    line-height: 1
}

.tl h4 {
    margin: 8px 0 6px;
    font-size: 1.12rem;
    font-family: var(--sans);
    font-weight: 800
}

.tl p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem
}

.tl .dur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 11px;
    border-radius: 999px
}

.tl .dur .icn {
    width: 14px;
    height: 14px;
    stroke-width: 2.2
}

@media(min-width:921px) {
    .timeline .tl:nth-of-type(4) {
        grid-column: 3;
        grid-row: 2
    }

    .timeline .tl:nth-of-type(5) {
        grid-column: 2;
        grid-row: 2
    }

    .timeline .tl:nth-of-type(6) {
        grid-column: 1;
        grid-row: 2
    }
}

@media(max-width:920px) {
    .timeline {
        grid-template-columns: 1fr;
        padding-left: 26px
    }

    .process-timeline-node {
        display: block
    }
}

/* SERVICES */
.services {
    background: var(--cream)
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px
}

.svc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: transform .16s, box-shadow .16s
}

.svc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm)
}

.svc .ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand)
}

.svc .ic .icn {
    width: 22px;
    height: 22px
}

.svc span {
    font-weight: 700;
    font-size: .98rem
}

@media(max-width:920px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .svc-grid {
        grid-template-columns: 1fr
    }
}

/* PACKAGES */
.packages {
    background: var(--white)
}

.pkgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
    align-items: stretch
}

.pkg {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm)
}

.pkg.feat {
    background: var(--ink);
    color: #fff;
    border: none;
    transform: scale(1.03);
    box-shadow: 0 40px 80px -35px rgba(22, 27, 31, .7);
    position: relative;
    z-index: 2
}

.pkg.feat .muted2 {
    color: var(--dark-muted)
}

.pkg .badge {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px
}

.pkg.feat .badge {
    background: var(--brand);
    color: #fff
}

.pkg h3 {
    font-size: 1.5rem
}

.pkg .price {
    font-family: var(--display);
    font-size: 2rem;
    margin: 10px 0 2px
}

.pkg .price small {
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted)
}

.pkg.feat .price small {
    color: var(--dark-muted)
}

.pkg .sub {
    color: var(--muted);
    font-size: .92rem;
    min-height: 44px
}

.pkg ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 24px;
    display: grid;
    gap: 11px
}

.pkg li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .95rem
}

.pkg li .icn {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    stroke: var(--ok);
    stroke-width: 2.4;
    margin-top: 2px
}

.pkg.feat li .icn {
    stroke: var(--brand-2)
}

.pkg .btn {
    margin-top: auto;
    width: 100%
}

@media(max-width:920px) {
    .pkgs {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto
    }

    .pkg.feat {
        transform: none
    }
}


/* DIASPORA */
.diaspora {
    background: var(--dark);
    color: #fff;
    position: relative;
    overflow: hidden
}

.dia-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center
}

.diaspora .eyebrow {
    color: var(--brand-2)
}

.diaspora h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .3em 0 .5em
}

.diaspora p {
    color: var(--dark-muted);
    font-size: 1.08rem
}

.flags {
    display: flex;
    gap: 10px;
    margin: 22px 0;
    flex-wrap: wrap
}

.flags span {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cream);
    border: 1px solid var(--dark-line);
    padding: 6px 14px;
    border-radius: 999px
}

.dia-quote {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1.4;
    margin: 8px 0 0;
    color: #fff
}

.dia-quote em {
    font-style: normal;
    color: var(--brand-2)
}

.dia-card {
    background: var(--dark-2);
    border-radius: var(--r);
    padding: 30px
}

.diaspora .btn-primary {
    color: var(--dark);
    background: var(--brand-2);
    box-shadow: none
}

.diaspora .btn-primary:hover {
    color: var(--dark);
    background: var(--cream)
}

.dia-card h3 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 16px
}

.dia-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px
}

.dia-card li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--cream)
}

.dia-card li .icn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    stroke: var(--brand-2);
    stroke-width: 2.2;
    margin-top: 2px
}

@media(max-width:920px) {
    .dia-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }
}

/* GUARANTEES */
.guarantees {
    background: var(--white)
}

.guar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 8px
}

.guar {
    text-align: center;
    padding: 26px 20px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm)
}

.guar .ic {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand)
}

.guar .ic .icn {
    width: 28px;
    height: 28px
}

.guar h4 {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.08rem
}

.guar p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem
}

@media(max-width:920px) {
    .guar-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:520px) {
    .guar-grid {
        grid-template-columns: 1fr
    }
}

/* GALLERY */
.gallery {
    background: var(--cream)
}

.gallery .compact-head {
    max-width: none
}

.gal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px
}

.ba {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.ba-clickable {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease
}

.ba-clickable:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px)
}

.ba-clickable:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

.ba-clickable [class^="imgs"] {
    transition: transform .3s ease
}

.ba-clickable:hover [class^="imgs"] {
    transform: scale(1.03)
}

.ba .imgs1,
.ba .imgs2,
.ba .imgs3,
.ba .imgs4 {
    height: 250px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.ba .imgs1 {
    background-image: url('/assets/Razanj-00.jpg')
}

.ba .imgs2 {
    background-image: url('/assets/Sinj-00.jpg')
}

.ba .imgs3 {
    background-image: url('/assets/Ciovo-zgrada-00.jpg')
}

.ba .imgs4 {
    background-image: url('/assets/Ciovo-kuca-00.jpg')
}

.ba .ph {
    display: none
}

.ba .cap {
    padding: 16px 18px
}

.ba .cap b {
    display: block;
    font-size: 1rem
}

.ba .cap span {
    color: var(--muted);
    font-size: .85rem
}

@media(max-width:640px) {
    .gal-grid {
        grid-template-columns: 1fr
    }
}

/* TESTIMONIALS */
.testimonials {
    background: var(--white)
}

.tst-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 8px
}

.tst {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column
}

.tst .stars {
    margin-bottom: 14px
}

.tst p {
    font-size: 1.02rem;
    margin: 0 0 20px
}

.tst .who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto
}

.tst .av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--ink)
}

.tst .who b {
    display: block;
    line-height: 1.25
}

.tst .who div span {
    line-height: 1.25;
    color: var(--muted);
    font-size: .85rem
}

@media(max-width:920px) {
    .tst-grid {
        grid-template-columns: 1fr
    }
}

/* FAQ */
.faq {
    background: var(--cream)
}

.faq-wrap {
    max-width: 820px;
    margin: 0 auto
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    text-align: left;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ink);
    padding: 22px 46px 22px 0;
    position: relative;
    display: block
}

.faq-q .icn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    stroke: var(--brand);
    stroke-width: 2.4;
    transition: transform .3s
}

.faq-item.open .faq-q .icn {
    transform: translateY(-50%) rotate(45deg)
}

.faq-a {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .36s cubic-bezier(.22, 1, .36, 1), opacity .24s ease
}

.faq-item.open .faq-a {
    opacity: 1
}

.faq-a p {
    margin: 0 0 22px;
    color: var(--muted)
}

/* CTA BANNER */
.cta-band {
    background: var(--dark);
    color: #fff;
    text-align: center;
    padding: 80px 0
}

.cta-band h2 {
    font-size: clamp(2rem, 4.4vw, 3rem)
}

.cta-band p {
    max-width: 56ch;
    margin: 16px auto 30px;
    color: var(--cream);
    font-size: 1.12rem
}

.cta-band .btn-light {
    color: var(--dark);
    background: var(--cream)
}

/* CONTACT */
.contact {
    background: var(--cream)
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 48px;
    align-items: start
}

.contact .info {
    display: grid;
    gap: 14px;
    margin-top: 26px
}

.contact .info a,
.contact .info div {
    display: flex;
    gap: 13px;
    align-items: center;
    font-weight: 600
}

.contact .info .ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--brand)
}

.contact .info small {
    display: block;
    color: var(--muted);
    font-weight: 500;
    font-size: .82rem
}

form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px;
    display: grid;
    gap: 16px;
    box-shadow: var(--shadow-sm)
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

label {
    font-size: .82rem;
    color: var(--muted);
    font-weight: 700;
    display: block;
    margin-bottom: 6px
}

input,
select,
textarea {
    width: 100%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    color: var(--ink);
    border-radius: 12px;
    padding: 13px 15px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.65
}

input,
select {
    height: 54px
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding: 13px 54px 13px 15px;
    cursor: pointer;
    font-weight: 700;
    background-color: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231683d8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    box-shadow: inset 0 0 0 1px rgba(22, 131, 216, .04);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease
}

select:hover {
    border-color: rgba(22, 131, 216, .55);
    background-color: var(--cream)
}

select:focus {
    box-shadow: 0 0 0 4px rgba(22, 131, 216, .14)
}

select option {
    color: var(--ink);
    background: #fff
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    background-color: #fff
}

textarea {
    resize: vertical;
    min-height: 96px
}

.custom-select {
    position: relative;
    width: 100%
}

.custom-select.open {
    z-index: 30
}

.custom-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.custom-select-trigger {
    position: relative;
    width: 100%;
    height: 54px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 13px 54px 13px 15px;
    color: var(--ink);
    background: var(--cream);
    box-shadow: inset 0 0 0 1px rgba(22, 131, 216, .04);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--brand);
    border-bottom: 2.5px solid var(--brand);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease
}

.custom-select-trigger:hover {
    border-color: rgba(22, 131, 216, .55);
    background: var(--cream)
}

.custom-select-trigger:focus-visible,
.custom-select.open .custom-select-trigger {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(22, 131, 216, .14)
}

.custom-select.open .custom-select-trigger::after {
    transform: translateY(-30%) rotate(225deg)
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    gap: 4px;
    max-height: 304px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(22, 131, 216, .24);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 22px 48px -20px rgba(22, 27, 31, .38), 0 8px 18px -12px rgba(22, 131, 216, .28)
}

.custom-select-options[hidden] {
    display: none
}

.custom-select.opens-up .custom-select-options {
    top: auto;
    bottom: calc(100% + 8px)
}

.custom-select-option {
    position: relative;
    width: 100%;
    min-height: 44px;
    padding: 10px 42px 10px 13px;
    border: 0;
    border-radius: 9px;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    cursor: pointer
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
    outline: none;
    color: var(--brand);
    background: var(--brand-soft)
}

.custom-select-option.selected {
    color: #fff;
    background: var(--brand)
}

.custom-select-option.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 7px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-62%) rotate(45deg)
}

.website-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

form .btn:disabled {
    cursor: wait;
    opacity: .68;
    transform: none
}

.form-status {
    min-height: 1.5em;
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    text-align: center
}

.form-status:empty {
    display: none
}

.form-status.pending {
    color: var(--muted)
}

.form-status.success {
    color: var(--brand)
}

.form-status.error {
    color: #9f2d20
}

form .note {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
    margin: 0
}

form .note a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px
}

@media(max-width:920px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .frow {
        grid-template-columns: 1fr
    }
}

/* FOOTER */
footer.ft {
    background: var(--ink);
    color: var(--cream);
    padding: 64px 0 28px
}

.footer-firform {
    font-size: 12px;
    font-weight: 100;
    margin-top: 5px;
}

.ft-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px
}

.ft h5 {
    font-family: var(--sans);
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
    font-size: .95rem;
    letter-spacing: .04em
}

.ft a,
.ft li {
    color: var(--dark-muted);
    font-size: .92rem
}

.ft a:hover {
    color: #fff
}

.ft ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px
}

.ft .brand .txt {
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.ft .brand .txt small {
    color: var(--dark-muted)
}

.ft p.desc {
    color: var(--dark-muted);
    font-size: .92rem;
    margin: 16px 0 0;
    max-width: 34ch
}

.ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 44px;
    padding-top: 22px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--dark-muted);
    font-size: .84rem;
    text-align: center
}

.ft-bottom .statutory {
    flex: 1 1 100%;
    line-height: 1.7
}

.ft-bottom .bank-details {
    flex: 1 1 100%;
    line-height: 1.7
}

@media(max-width:820px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:520px) {
    .ft-grid {
        grid-template-columns: 1fr
    }
}

/* MOBILE STICKY CTA */
.mcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: none;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(242, 244, 245, .94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -24px rgba(32, 39, 43, .65)
}

.mcta .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 12px 10px;
    font-size: .94rem
}

@media(max-width:640px) {
    .mcta {
        display: flex
    }

    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom))
    }
}

/* MOBILE MENU */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100dvh;
    padding: calc(72px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 100% 0, var(--brand-soft), transparent 42%),
        var(--cream);
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .24s ease, opacity .2s ease, visibility 0s linear .24s
}

.mobile-menu.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s
}

.mobile-menu a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: clamp(1.15rem, 5.6vw, 1.45rem);
    line-height: 1.2
}

.mobile-menu .close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 20px;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer
}

.mobile-menu .close .icn {
    width: 26px;
    height: 26px;
    stroke: currentColor
}

.mobile-menu .btn {
    min-height: 52px;
    margin-top: 20px;
    padding-inline: 20px;
    border-bottom: 0;
    font-family: var(--sans);
    font-size: 1rem
}

body.menu-open {
    overflow: hidden
}

/* PROJECT START */
.project-start {
    background: var(--cream)
}

.project-start .centered-head {
    max-width: 70ch
}

.project-start .centered-head .lead {
    margin: 0 auto
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px
}

.path-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm)
}

.path-icon,
.phase-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--brand);
    background: var(--brand-soft)
}

.path-icon .icn,
.phase-icon .icn {
    width: 27px;
    height: 27px
}

.path-card .badge {
    display: inline-block;
    padding: 4px 10px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800
}

.path-card h3 {
    margin: 10px 0 8px;
    font-size: 1.6rem
}

.path-card p {
    margin: 0;
    color: var(--muted)
}

.path-card ul {
    margin: 18px 0 22px;
    padding-left: 20px
}

.path-card li {
    margin: 6px 0
}


/* SERVICE PHASES */
.phase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 12px
}

.phase-card {
    position: relative;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm)
}

.phase-number {
    position: absolute;
    top: 24px;
    right: 26px;
    color: var(--brand);
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 800;
    opacity: .22
}

.phase-card h3 {
    margin: 18px 0 10px;
    font-size: 1.35rem
}

.phase-card ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted)
}

.phase-card li {
    margin: 7px 0
}


.scope-note {
    max-width: 80ch;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: .86rem;
    text-align: center
}

.ba .project-kicker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px
}

.ba .cap .project-type {
    display: inline-block;
    margin: 0;
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em
}

.ba .project-years {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid rgba(232, 102, 42, .24);
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .035em;
    line-height: 1.35;
    white-space: nowrap
}

@media(max-width:920px) {
    .path-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:720px) {
    .phase-grid {
        grid-template-columns: 1fr
    }

    .path-card {
        grid-template-columns: 1fr;
        padding: 24px
    }
}

/* MOBILE POLISH */
@media(max-width:640px) {
    body {
        font-size: 16px;
        line-height: 1.58
    }

    .container {
        padding-inline: 20px
    }

    section {
        padding: 68px 0
    }

    section[id] {
        scroll-margin-top: 76px
    }

    h2.title,
    .diaspora h2,
    .cta-band h2 {
        font-size: clamp(1.9rem, 9vw, 2.25rem);
        line-height: 1.1
    }

    .centered-head,
    .solution-head,
    .packages-head,
    .faq-head {
        margin-bottom: 32px
    }

    .lead {
        font-size: 1.02rem
    }

    .btn {
        min-height: 50px;
        padding: 13px 20px
    }

    .nav-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 10px 20px
    }

    .menu {
        display: none
    }

    .brand {
        gap: 8px
    }

    .mark {
        width: 40px;
        height: 40px;
        border-radius: 11px
    }

    .brand .txt {
        gap: 5px;
        font-size: 1rem
    }

    .nav-actions {
        gap: 8px
    }

    .nav-actions .call,
    .burger {
        display: grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, .5)
    }

    .nav-actions .call .icn,
    .burger .icn {
        width: 21px;
        height: 21px
    }

    .hero {
        padding: 54px 0 68px
    }

    .hero-grid {
        gap: 32px
    }

    .hero h1 {
        font-size: clamp(2.05rem, 9vw, 2.35rem);
        line-height: 1.04
    }

    .hero .lead {
        margin-top: 18px;
        font-size: 1.04rem
    }

    .hero .cta {
        gap: 10px;
        margin-top: 24px
    }

    .hero .cta .btn {
        width: 100%
    }

    .rating {
        gap: 8px 12px;
        margin-top: 22px;
        font-size: .86rem
    }

    .rating .divide {
        display: none
    }

    .hv-photo {
        height: 300px;
        border-radius: 22px
    }

    .hv-badge {
        right: 14px;
        bottom: 14px;
        left: 14px;
        padding: 12px 14px;
        border-radius: 14px
    }

    .hv-badge small {
        color: rgba(255, 255, 255, .76)
    }

    .stats {
        padding: 38px 0
    }

    .stats-grid {
        gap: 26px 14px
    }

    .stat .num {
        font-size: 2rem
    }
    .tl .step-n {
        font-size: 1.7rem
    }

    .pain-grid,
    .about-grid,
    .dia-grid,
    .contact-grid {
        gap: 28px
    }

    .timeline,
    .svc-grid,
    .pkgs,
    .guar-grid,
    .gal-grid,
    .tst-grid,
    .path-grid,
    .phase-grid {
        gap: 14px
    }

    .tl,
    .svc,
    .pkg,
    .dia-card,
    .guar,
    .tst,
    .phase-card {
        padding: 22px
    }

    .path-card {
        gap: 16px;
        padding: 22px
    }

    .path-card h3 {
        font-size: 1.45rem
    }

    .path-card ul {
        margin: 16px 0 20px
    }

    .about-media img {
        height: 300px;
        border-radius: 22px
    }

    .about-badge {
        left: -8px;
        bottom: 16px;
        padding: 14px 18px;
        border-radius: 15px;
        font-size: 1.8rem
    }

    .pkg .sub {
        min-height: 0
    }


    .flags {
        margin: 18px 0
    }

    .dia-quote {
        font-size: 1.38rem
    }

    .ba .imgs1,
    .ba .imgs2,
    .ba .imgs3,
    .ba .imgs4 {
        height: 210px
    }

    .faq-q {
        padding: 19px 42px 19px 0;
        font-size: 1.02rem;
        line-height: 1.4
    }

    .cta-band {
        padding: 60px 0
    }

    .cta-band p {
        margin: 14px auto 24px;
        font-size: 1.02rem
    }

    .cta-band .btn {
        width: 100%
    }

    .contact .info {
        margin-top: 22px
    }

    .contact .info a,
    .contact .info div {
        min-width: 0
    }

    .contact .info a > span,
    .contact .info div > span {
        min-width: 0;
        overflow-wrap: anywhere
    }

    form {
        gap: 14px;
        padding: 20px
    }

    input,
    select,
    textarea,
    .custom-select-trigger {
        font-size: 16px
    }

    footer.ft {
        padding: 40px 0 24px
    }

    .ft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 30px
    }

    .ft-grid > div:first-child {
        grid-column: 1 / -1;
        padding-bottom: 26px;
        border-bottom: 1px solid rgba(255, 255, 255, .14)
    }

    .ft-grid > div:last-child {
        grid-column: 1 / -1
    }

    .ft .brand .mark {
        width: 48px;
        height: 48px;
        border-radius: 13px
    }

    .ft .brand .txt {
        font-size: 1.05rem
    }

    .ft p.desc {
        margin-top: 14px;
        max-width: 36ch;
        line-height: 1.55
    }

    .ft h5 {
        margin-bottom: 12px;
        color: var(--accent);
        font-size: .76rem;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .ft ul {
        gap: 12px
    }

    .ft a,
    .ft li {
        font-size: .88rem;
        line-height: 1.45
    }

    .ft-grid > div:last-child ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px
    }

    .ft-grid > div:last-child li {
        min-width: 0;
        overflow-wrap: anywhere
    }

    .ft-bottom {
        margin-top: 30px;
        padding-top: 18px;
        display: grid;
        gap: 8px;
        font-size: .76rem;
        line-height: 1.55
    }

    .ft-bottom span:last-child {
        color: var(--cream)
    }
}

@media(max-width:380px) {
    .container {
        padding-inline: 16px
    }

    .topbar .container,
    .nav-inner {
        padding-inline: 16px
    }

    .brand .txt {
        font-size: .92rem
    }

    .hero h1 {
        font-size: 2rem
    }

    .mcta {
        gap: 8px;
        padding-inline: 10px
    }

    .mcta .btn {
        font-size: .88rem
    }
}

/* MOTION */
.motion-item {
    opacity: 0;
    translate: 0 16px;
    transition: opacity .78s cubic-bezier(.22, 1, .36, 1), translate .78s cubic-bezier(.22, 1, .36, 1);
    transition-delay: min(calc(var(--motion-order, 0) * 110ms), 330ms)
}

.motion-item.motion-card {
    transition: opacity .78s cubic-bezier(.22, 1, .36, 1), translate .78s cubic-bezier(.22, 1, .36, 1), transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    transition-delay: min(calc(var(--motion-order, 0) * 110ms), 330ms), min(calc(var(--motion-order, 0) * 110ms), 330ms), 0s, 0s, 0s
}

.motion-item.motion-visible {
    opacity: 1;
    translate: none
}

.process-step {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .78s cubic-bezier(.22, 1, .36, 1), translate .78s cubic-bezier(.22, 1, .36, 1), transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    transition-delay: min(calc(var(--motion-order, 0) * 130ms), 390ms), min(calc(var(--motion-order, 0) * 130ms), 390ms), 0s, 0s, 0s
}

.process-step .step-n {
    opacity: .35;
    translate: 0 5px;
    scale: .94;
    transition: color .55s ease, opacity .55s ease, translate .55s ease, scale .55s ease;
    transition-delay: min(calc(var(--motion-order, 0) * 130ms), 390ms)
}

.process-step.motion-visible,
.process-step.motion-visible .step-n {
    opacity: 1;
    translate: none;
    scale: 1
}

.project-reveal {
    opacity: 0;
    translate: 0 14px;
    scale: .98;
    transition: opacity .82s cubic-bezier(.22, 1, .36, 1), translate .82s cubic-bezier(.22, 1, .36, 1), scale .82s cubic-bezier(.22, 1, .36, 1), transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    transition-delay: min(calc(var(--motion-order, 0) * 120ms), 360ms), min(calc(var(--motion-order, 0) * 120ms), 360ms), min(calc(var(--motion-order, 0) * 120ms), 360ms), 0s, 0s, 0s
}

.project-reveal .cap > * {
    opacity: 0;
    translate: 0 7px;
    transition: opacity .6s ease, translate .6s ease;
    transition-delay: min(calc(260ms + var(--motion-order, 0) * 120ms), 620ms)
}

.project-reveal.motion-visible,
.project-reveal.motion-visible .cap > * {
    opacity: 1;
    translate: none;
    scale: 1
}

.hero-motion-item {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .82s cubic-bezier(.22, 1, .36, 1), translate .82s cubic-bezier(.22, 1, .36, 1), scale .88s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--motion-order, 0) * 125ms)
}

.hero-visual.hero-motion-item {
    translate: 18px 0;
    scale: .985
}

.hero-visible .hero-motion-item {
    opacity: 1;
    translate: none;
    scale: 1
}

.cta-motion-item {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .75s cubic-bezier(.22, 1, .36, 1), translate .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: min(calc(var(--motion-order, 0) * 130ms), 260ms)
}

.cta-motion-item.motion-visible {
    opacity: 1;
    translate: none
}

.contact-motion-copy,
.contact-motion-form {
    opacity: 0;
    transition: opacity .82s cubic-bezier(.22, 1, .36, 1), translate .82s cubic-bezier(.22, 1, .36, 1)
}

.contact-motion-copy {
    translate: -18px 0
}

.contact-motion-form {
    translate: 18px 0;
    transition-delay: 160ms
}

.contact-motion-copy.motion-visible,
.contact-motion-form.motion-visible {
    opacity: 1;
    translate: none
}

@media(hover:hover) {
    .motion-card:hover {
        transform: translateY(-4px);
        border-color: rgba(242, 108, 45, .3);
        box-shadow: var(--shadow)
    }

    .pkg.feat.motion-card:hover {
        transform: translateY(-4px) scale(1.03)
    }
}

@media(hover:none) {
    .btn:hover,
    .svc:hover,
    .ba-clickable:hover {
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal,
    .mobile-menu,
    .motion-item,
    .process-step,
    .process-step .step-n,
    .process-timeline-node,
    .process-timeline-progress,
    .project-reveal,
    .project-reveal .cap > *,
    .hero-motion-item,
    .cta-motion-item,
    .contact-motion-copy,
    .contact-motion-form,
    .faq-a {
        transition: none
    }

    .reveal,
    .motion-item,
    .process-step,
    .project-reveal,
    .project-reveal .cap > *,
    .hero-motion-item,
    .cta-motion-item,
    .contact-motion-copy,
    .contact-motion-form {
        opacity: 1;
        translate: none;
        scale: 1
    }

    .reveal {
        transform: none
    }

    .motion-card:hover,
    .ba-clickable:hover {
        transform: none
    }

    .pkg.feat.motion-card:hover {
        transform: scale(1.03)
    }
}

/* 404 PAGE */
body.not-found-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0
}

.not-found-page .topbar .container > span:last-child {
    text-align: right
}

.not-found-main {
    display: flex;
    flex: 1
}

.not-found {
    display: flex;
    width: 100%;
    padding: clamp(56px, 7vw, 88px) 0
}

.not-found-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
    width: 100%
}

.not-found-copy {
    max-width: 590px
}

.not-found-copy h1 {
    font-size: clamp(2.6rem, 4.8vw, 4.1rem)
}

.not-found-copy .lead {
    margin: 20px 0 0;
    font-size: 1.1rem
}

.not-found-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 28px
}

.not-found-link {
    padding: 10px 4px;
    color: var(--muted);
    font-weight: 700
}

.not-found-link:hover {
    color: var(--brand)
}

.not-found-visual {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(145deg, rgba(32, 39, 43, .08), rgba(32, 39, 43, .58)),
        url('/assets/Razanj-00.jpg') center/cover no-repeat;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-sm)
}

.not-found-code {
    color: rgba(255, 255, 255, .84);
    font-family: var(--display);
    font-size: clamp(5.5rem, 11vw, 8.5rem);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1;
    text-shadow: 0 10px 28px rgba(32, 39, 43, .28);
    transform: translateX(-.04em)
}

.not-found-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    padding: 14px 16px;
    color: #fff;
    background: rgba(32, 39, 43, .74);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    backdrop-filter: blur(8px)
}

.not-found-badge span {
    display: block;
    font-weight: 800
}

.not-found-badge small {
    display: block;
    margin-top: 2px;
    color: var(--dark-muted);
    font-size: .82rem
}

.not-found-footer {
    color: var(--dark-muted);
    background: var(--ink)
}

.not-found-footer .container {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: .84rem
}

.not-found-footer .container span:first-child {
    color: #fff;
    font-weight: 800
}

@media(max-width:920px) {
    .not-found-grid {
        grid-template-columns: 1fr
    }

    .not-found-copy {
        max-width: 720px
    }

    .not-found-visual {
        min-height: 280px
    }
}

@media(max-width:600px) {
    .not-found {
        padding: 48px 0
    }

    .not-found-actions {
        display: grid
    }

    .not-found-actions .btn {
        width: 100%
    }

    .not-found-visual {
        min-height: 220px
    }

    .not-found-footer .container {
        display: grid
    }
}

/* LEGAL INFORMATION */
.legal-page {
    padding-bottom: 0;
    overflow-x: hidden
}

.legal-page .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto
}

.legal-main {
    background: var(--cream)
}

.legal-container {
    max-width: 920px
}

.legal-hero {
    padding: clamp(58px, 8vw, 92px) 0 46px;
    background:
        radial-gradient(circle at 92% 10%, var(--brand-soft), transparent 34%),
        var(--cream)
}

.legal-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem)
}

.legal-hero .lead {
    margin: 22px 0 0
}

.legal-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px
}

.legal-jump a {
    padding: 9px 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 800
}

.legal-jump a:hover {
    color: var(--brand);
    border-color: var(--brand)
}

.legal-content {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding-bottom: clamp(64px, 9vw, 110px)
}

.legal-card {
    padding: clamp(26px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    scroll-margin-top: 24px
}

.legal-card h2 {
    margin-bottom: 22px;
    font-size: clamp(1.7rem, 3vw, 2.35rem)
}

.legal-card h3 {
    margin: 30px 0 8px;
    font-family: var(--sans);
    font-size: 1.1rem;
    line-height: 1.35;
    letter-spacing: 0
}

.legal-card p {
    margin: 0 0 16px
}

.legal-card p:last-child {
    margin-bottom: 0
}

.legal-card a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px
}

.legal-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0
}

.legal-facts div {
    padding: 16px 18px;
    border: 1px solid var(--line);
    margin: -1px 0 0 -1px
}

.legal-facts dt {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.legal-facts dd {
    margin: 5px 0 0;
    font-weight: 650
}

.legal-copy ul {
    margin: 12px 0 20px;
    padding-left: 22px
}

.legal-copy li {
    margin: 8px 0
}

.legal-table-wrap {
    margin: 22px 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
    font-size: .9rem
}

.legal-table th,
.legal-table td {
    padding: 13px 15px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line)
}

.legal-table th {
    color: var(--ink);
    background: var(--cream);
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase
}

.legal-table tr:last-child td {
    border-bottom: 0
}

.legal-table code {
    color: var(--ink);
    font-size: .82rem;
    overflow-wrap: anywhere
}

.legal-footer {
    padding-top: 0
}

.legal-footer .ft-bottom {
    margin-top: 0
}

@media(max-width:700px) {
    .legal-facts {
        grid-template-columns: 1fr
    }

    .legal-hero {
        padding-top: 48px
    }

    .legal-card {
        padding: 24px 20px
    }
}