/* =========================================================
   MARKETING ZA RESTORANE — HOMEPAGE V1
   Vizuelni DNK: Customer Journey
   Scope: #restaurant-homepage + .mr-* global elements
   ========================================================= */

:root {
    --mr-blue: #0088cc;
    --mr-blue-dark: #006fa8;
    --mr-cyan: #00a9ef;
    --mr-navy: #111a22;
    --mr-dark: #20272e;
    --mr-text: #27313a;
    --mr-muted: #6b7580;
    --mr-line: #dfe5e8;
    --mr-soft: #f5f7f8;
    --mr-white: #fff;
    --mr-shadow: 0 20px 55px rgba(17,32,46,.12);
    --mr-radius: 18px;
    --mr-header-height: 112px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #fff;
    color: var(--mr-text);
    font-family: "Open Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.mr-menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }

.container {
    width: min(calc(100% - 40px), 1180px);
    margin-left: auto;
    margin-right: auto;
}

/* HEADER */

.mr-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 28px rgba(13,26,36,.08);
}

.mr-topbar {
    height: 36px;
    background: #111a22;
    color: rgba(255,255,255,.74);
    font-size: 11px;
}

.mr-topbar .container,
.mr-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mr-topbar .container { height: 100%; }

.mr-topbar-left,
.mr-topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mr-topbar-left strong { color: #fff; font-weight: 700; }
.mr-topbar-right a:hover { color: #fff; }
.mr-topbar-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mr-cyan);
}

.mr-navbar { height: 76px; }
.mr-navbar-inner { height: 100%; }

.mr-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mr-logo img {
    width: 100px;
    height: auto;
    display: block;
}

.mr-logo span {
    padding-left: 14px;
    border-left: 1px solid #dfe5e8;
    color: #55616b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.mr-menu {
    display: flex;
    align-items: center;
    gap: 29px;
}

.mr-menu > a {
    color: #313b43;
    font-size: 13px;
    font-weight: 700;
    transition: color .2s ease;
}

.mr-menu > a:hover { color: var(--mr-blue); }

.mr-menu .mr-nav-cta {
    padding: 12px 16px;
    color: #fff;
    background: var(--mr-blue);
}

.mr-menu .mr-nav-cta:hover {
    color: #fff;
    background: var(--mr-blue-dark);
}

.mr-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
}

.mr-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: #17212b;
}

/* GLOBAL SECTIONS */

#restaurant-homepage {
    overflow: hidden;
}

#restaurant-homepage .section {
    margin: 0;
    padding: 105px 0;
}

#restaurant-homepage .alt-bg { background: var(--mr-soft); }

#restaurant-homepage .eyebrow,
.mr-final-cta .eyebrow {
    margin: 0 0 14px;
    color: var(--mr-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-heading { margin-bottom: 52px; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading.narrow { max-width: 830px; }

.section-heading h2,
.mr-production-copy h2,
.mr-package h2,
.mr-control h2,
.mr-about h2,
.mr-final-cta h2 {
    margin: 0;
    color: var(--mr-text);
    font-size: clamp(36px, 4.5vw, 66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

.section-heading p:not(.eyebrow),
.mr-production-copy > p:not(.eyebrow),
.mr-package-intro,
.mr-control p,
.mr-about p {
    color: var(--mr-muted);
    font-size: 17px;
    line-height: 1.78;
}

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    transition: .22s ease;
}

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

.button-primary {
    color: #fff;
    background: var(--mr-blue);
}

.button-primary:hover { background: var(--mr-blue-dark); }

.button-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
}

.button-light {
    color: var(--mr-blue-dark);
    background: #fff;
}

.text-link {
    color: var(--mr-blue);
    font-weight: 800;
}

/* HERO */

.mr-hero {
    position: relative;
    min-height: 760px;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--mr-header-height);
    overflow: hidden;
    background: var(--mr-navy);
}

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

.mr-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(9,15,20,.96) 0%,
            rgba(9,15,20,.85) 40%,
            rgba(9,15,20,.44) 72%,
            rgba(9,15,20,.22) 100%);
}

.mr-hero-content {
    position: relative;
    z-index: 2;
    padding: 90px 0 80px;
}

.mr-hero .eyebrow { color: #67d1f5 !important; }

.mr-hero h1 {
    max-width: 970px;
    margin: 0;
    color: #fff;
    font-size: clamp(54px, 7vw, 100px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.065em;
}

.mr-hero-lead {
    max-width: 730px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.84);
    font-size: 19px;
    line-height: 1.75;
}

.mr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.mr-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 25px;
    width: 28px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 20px;
    transform: translateX(-50%);
}

.mr-scroll span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    border-radius: 8px;
    background: #fff;
    transform: translateX(-50%);
    animation: mr-scroll 1.5s infinite;
}

@keyframes mr-scroll {
    0% { opacity: 0; transform: translate(-50%,0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,18px); }
}

/* LOGOI */

.mr-brands { background: #fff; }

.mr-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

.mr-logo-card {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 25px;
    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);
    background: #fff;
}

.mr-logo-card span {
    color: #87929b;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mr-note {
    margin: 20px 0 0;
    color: #9aa3aa;
    font-size: 12px;
    text-align: center;
}

/* OUTCOMES */

.mr-outcomes {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

.mr-outcome {
    min-height: 300px;
    padding: 30px 28px;
    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);
    background: #fff;
}

.mr-outcome > span,
.mr-revenue-grid article > span {
    color: #a6afb7;
    font-size: 12px;
    font-weight: 700;
}

.mr-outcome h3 {
    margin: 78px 0 15px;
    color: var(--mr-text);
    font-size: 24px;
    line-height: 1.15;
}

.mr-outcome p {
    margin: 0;
    color: var(--mr-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* SERVICES */

.mr-service-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

.mr-service-card {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 29px;
    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);
    background: #fff;
    transition: .25s ease;
}

.mr-service-card:hover {
    position: relative;
    z-index: 2;
    transform: translateY(-5px);
    box-shadow: var(--mr-shadow);
}

.mr-service-number {
    color: #a6afb7;
    font-size: 12px;
    font-weight: 700;
}

.mr-service-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 29px 0 23px;
    color: #fff;
    background: var(--mr-blue);
    font-size: 18px;
    font-weight: 800;
}

.mr-service-card h3 {
    margin: 0 0 11px;
    color: var(--mr-text);
    font-size: 21px;
}

.mr-service-card p {
    margin: 0;
    color: var(--mr-muted);
    font-size: 14px;
    line-height: 1.65;
}

.mr-service-card strong {
    margin-top: auto;
    padding-top: 25px;
    color: var(--mr-blue);
    font-size: 13px;
}

/* PRODUCTION */

.mr-production {
    color: #fff;
    background: #151d24;
}

.mr-production-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.mr-production .eyebrow { color: #67d1f5 !important; }

.mr-production-copy h2 { color: #fff; }

.mr-production-copy > p:not(.eyebrow) {
    color: rgba(255,255,255,.7);
}

.mr-production .text-link { color: #67d1f5; }

.mr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 30px 0 30px;
}

.mr-tags span {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.17);
    color: rgba(255,255,255,.86);
    font-size: 12px;
}

.mr-production-media {
    position: relative;
    overflow: hidden;
    background: #0e1419;
    box-shadow: 0 35px 70px rgba(0,0,0,.28);
}

.mr-production-media video {
    display: block;
    width: 100%;
    min-height: 580px;
    object-fit: cover;
}

.mr-media-label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px;
    background: linear-gradient(transparent,rgba(0,0,0,.82));
}

.mr-media-label span,
.mr-media-label strong {
    display: block;
}

.mr-media-label span {
    color: #74d8fa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.mr-media-label strong {
    margin-top: 5px;
    color: #fff;
    font-size: 24px;
}

.mr-media-strip {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    margin-top: 28px;
}

.mr-media-strip figure { margin: 0; }

.mr-placeholder {
    min-height: 235px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.38);
    background:
        linear-gradient(145deg,#27333d,#10171d);
    font-size: 27px;
    font-weight: 800;
}

.mr-media-strip figcaption {
    padding-top: 12px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
}

/* PACKAGE */

.mr-package {
    color: #fff;
    background: linear-gradient(115deg,#0088cc,#00a9d9);
}

.mr-package-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 75px;
    align-items: center;
}

.mr-package .eyebrow { color: rgba(255,255,255,.72) !important; }
.mr-package h2 { color: #fff; }
.mr-package-intro { color: rgba(255,255,255,.8); }

.mr-price {
    display: grid;
    margin: 38px 0 30px;
}

.mr-price small {
    color: rgba(255,255,255,.64);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.mr-price strong {
    margin-top: 4px;
    color: #fff;
    font-size: clamp(46px,6vw,72px);
    line-height: 1;
    letter-spacing: -.05em;
}

.mr-price span {
    margin-top: 5px;
    color: rgba(255,255,255,.8);
}

.mr-package-map {
    min-height: 500px;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(6,62,88,.22);
    border: 1px solid rgba(255,255,255,.2);
}

.mr-package-core {
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    padding: 25px;
    border-radius: 50%;
    color: var(--mr-blue-dark);
    background: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.mr-package-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: -40px;
}

.mr-package-items span {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    background: rgba(255,255,255,.07);
    font-size: 11px;
    font-weight: 700;
}

/* REVENUE */

.mr-revenue-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.mr-revenue-grid article {
    min-height: 350px;
    padding: 36px;
    border: 1px solid var(--mr-line);
    border-right: 0;
}

.mr-revenue-grid article:last-child { border-right: 1px solid var(--mr-line); }

.mr-revenue-grid h3 {
    margin: 100px 0 15px;
    color: var(--mr-text);
    font-size: 28px;
    line-height: 1.12;
}

.mr-revenue-grid p {
    color: var(--mr-muted);
    font-size: 14px;
    line-height: 1.75;
}

/* CONTROL CENTER */

.mr-control { background: #eef2f4; }

.mr-control-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 72px;
    align-items: center;
}

.mr-check-list {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.mr-check-list li {
    position: relative;
    padding: 12px 0 12px 29px;
    border-bottom: 1px solid #d6dde1;
    color: #3b4650;
    font-size: 14px;
}

.mr-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mr-blue);
    font-weight: 800;
}

.mr-dashboard {
    padding: 24px;
    border: 1px solid #d9e0e4;
    background: #fff;
    box-shadow: 0 28px 70px rgba(17,32,46,.13);
}

.mr-dashboard-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6ebee;
    color: #26323b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mr-live { color: #2eaa64; }

.mr-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border-left: 1px solid #e5eaed;
    margin-top: 22px;
}

.mr-kpis > div {
    padding: 18px 13px;
    border-top: 1px solid #e5eaed;
    border-right: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
}

.mr-kpis small {
    display: block;
    color: #87919a;
    font-size: 10px;
}

.mr-kpis strong {
    display: block;
    margin-top: 8px;
    color: #27313a;
    font-size: 24px;
}

.mr-chart {
    height: 215px;
    display: flex;
    align-items: flex-end;
    gap: 13px;
    padding: 32px 20px 0;
    border-right: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
    border-left: 1px solid #e5eaed;
}

.mr-chart span {
    flex: 1;
    min-width: 12px;
    background: linear-gradient(180deg,#00a9ef,#0088cc);
}

.mr-dashboard > p {
    margin: 17px 0 0;
    color: #9aa3aa;
    font-size: 11px;
}

/* WORK */

.mr-work-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 22px;
}

.mr-work {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 270px;
    overflow: hidden;
    border: 1px solid var(--mr-line);
    background: #fff;
}

.mr-work-large {
    grid-row: span 2;
    grid-template-columns: 1fr;
}

.mr-work-image {
    min-height: 250px;
    background-position: center;
    background-size: cover;
}

.mr-work-large .mr-work-image { min-height: 450px; }

.mr-work-buddha { background: linear-gradient(145deg,#111,#604f43); }
.mr-work-two { background: linear-gradient(145deg,#c3a98c,#4d3424); }
.mr-work-three { background: linear-gradient(145deg,#33404b,#11181e); }

.mr-work-copy { padding: 27px; }

.mr-work-copy > span {
    color: var(--mr-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.mr-work-copy h3 {
    margin: 8px 0 18px;
    color: var(--mr-text);
    font-size: 26px;
    line-height: 1.16;
}

.mr-work-copy p {
    margin: 0;
    color: var(--mr-blue);
    font-size: 13px;
    font-weight: 800;
}

/* BLOG */

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

.mr-blog-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--mr-line);
    background: #fff;
}

.mr-blog-card > span {
    color: var(--mr-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.mr-blog-card h3 {
    margin: 60px 0 15px;
    color: var(--mr-text);
    font-size: 24px;
    line-height: 1.23;
}

.mr-blog-card p {
    margin: 0;
    color: var(--mr-muted);
    font-size: 14px;
    line-height: 1.7;
}

.mr-blog-card a {
    margin-top: auto;
    padding-top: 24px;
    color: var(--mr-blue);
    font-size: 13px;
    font-weight: 800;
}

.centered-action {
    margin-top: 40px;
    text-align: center;
}

/* ABOUT */

.mr-about { background: #fff; }

.mr-about-grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 80px;
    align-items: center;
}

.mr-about-logo {
    min-height: 310px;
    display: grid;
    place-items: center;
    padding: 55px;
    background: var(--mr-soft);
}

.mr-about-logo img {
    width: 240px;
    height: auto;
}

/* FINAL CTA */

.mr-final-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background: #111a22;
}

.mr-final-bg {
    position: absolute;
    inset: 0;
    opacity: .34;
    background:
        radial-gradient(circle at 75% 45%, rgba(0,169,239,.65), transparent 35%),
        linear-gradient(125deg,#10171d,#26333d);
}

.mr-final-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
}

.mr-final-cta .eyebrow { color: #67d1f5; }

.mr-final-cta h2 { color: #fff; }

.mr-final-cta p {
    max-width: 720px;
    margin: 25px auto 34px;
    color: rgba(255,255,255,.76);
    font-size: 17px;
    line-height: 1.75;
}

.mr-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* FOOTER */

.mr-footer {
    padding: 70px 0 25px;
    color: #acb6bd;
    background: #0b1116;
}

.mr-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3,1fr);
    gap: 50px;
}

.mr-footer-logo {
    width: 135px;
    filter: brightness(0) invert(1);
}

.mr-footer p {
    max-width: 320px;
    color: #7f8c95;
    font-size: 13px;
    line-height: 1.7;
}

.mr-footer-grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.mr-footer strong {
    margin-bottom: 8px;
    color: #fff;
    font-size: 13px;
}

.mr-footer a,
.mr-footer span {
    font-size: 12px;
}

.mr-footer a:hover { color: #fff; }

.mr-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 55px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #63717b;
    font-size: 11px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .mr-menu { gap: 19px; }
    .mr-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mr-outcomes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
    :root { --mr-header-height: 76px; }

    .mr-topbar { display: none; }

    .mr-menu-toggle { display: block; }

    .mr-menu {
        position: fixed;
        top: 76px;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 30px 20px;
        background: #fff;
    }

    .mr-menu.is-open { display: flex; }

    .mr-menu > a {
        padding: 17px 8px;
        border-bottom: 1px solid #edf0f2;
        font-size: 16px;
    }

    .mr-menu .mr-nav-cta {
        margin-top: 20px;
        padding: 17px;
        text-align: center;
    }

    .mr-production-grid,
    .mr-package-grid,
    .mr-control-grid,
    .mr-about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mr-revenue-grid { grid-template-columns: 1fr; }

    .mr-revenue-grid article {
        min-height: auto;
        border-right: 1px solid var(--mr-line);
        border-bottom: 0;
    }

    .mr-revenue-grid article:last-child { border-bottom: 1px solid var(--mr-line); }

    .mr-revenue-grid h3 { margin-top: 55px; }

    .mr-work-grid { grid-template-columns: 1fr; }

    .mr-work-large { grid-row: auto; }

    .mr-blog-grid { grid-template-columns: 1fr; }

    .mr-blog-card { min-height: 300px; }

    .mr-about-logo { min-height: 220px; }

    .mr-footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 700px) {
    .container { width: min(calc(100% - 30px),1180px); }

    #restaurant-homepage .section { padding: 78px 0; }

    .mr-logo span { display: none; }

    .mr-hero {
        height: auto;
        min-height: 720px;
    }

    .mr-hero h1 {
        font-size: clamp(48px,13vw,66px);
        line-height: .98;
    }

    .mr-hero-lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .mr-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .section-heading h2,
    .mr-production-copy h2,
    .mr-package h2,
    .mr-control h2,
    .mr-about h2,
    .mr-final-cta h2 {
        font-size: 38px;
    }

    .mr-logo-grid,
    .mr-outcomes,
    .mr-service-grid,
    .mr-media-strip {
        grid-template-columns: 1fr;
    }

    .mr-logo-card { min-height: 115px; }

    .mr-outcome {
        min-height: auto;
    }

    .mr-outcome h3 { margin-top: 45px; }

    .mr-service-card { min-height: 285px; }

    .mr-production-media video { min-height: 420px; }

    .mr-package-map { min-height: 430px; }

    .mr-kpis { grid-template-columns: repeat(2,1fr); }

    .mr-work,
    .mr-work-large {
        grid-template-columns: 1fr;
    }

    .mr-work-large .mr-work-image,
    .mr-work-image {
        min-height: 280px;
    }

    .mr-footer-grid { grid-template-columns: 1fr; }

    .mr-footer-bottom {
        flex-direction: column;
        gap: 12px;
    }
}

/* =========================================================
   GOOGLE ADS ZA RESTORANE + ZNANJE HUB
   ========================================================= */
#restaurant-google-ads-page,#restaurant-knowledge-page{overflow:hidden}#restaurant-google-ads-page .section,#restaurant-knowledge-page .section{margin:0;padding:105px 0}#restaurant-google-ads-page .alt-bg,#restaurant-knowledge-page .alt-bg{background:var(--mr-soft)}#restaurant-google-ads-page .eyebrow,#restaurant-knowledge-page .eyebrow{margin:0 0 14px;color:var(--mr-blue);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.mr-menu>a.is-active{color:var(--mr-blue)}
.mr-gads-hero{position:relative;min-height:780px;display:flex;align-items:center;padding-top:var(--mr-header-height);background:#111a22}.mr-gads-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 83% 35%,rgba(0,136,204,.30),transparent 31%),linear-gradient(110deg,#0c1319 0%,#17232d 58%,#0e171e 100%)}.mr-gads-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;padding-top:80px;padding-bottom:70px}.mr-gads-hero .eyebrow{color:#67d1f5!important}.mr-gads-hero h1{max-width:810px;margin:0;color:#fff;font-size:clamp(54px,6.3vw,92px);font-weight:800;line-height:.96;letter-spacing:-.06em}.mr-gads-hero-lead{max-width:700px;margin:28px 0 0;color:rgba(255,255,255,.79);font-size:18px;line-height:1.75}.mr-search-demo{padding:24px;background:#fff;box-shadow:0 35px 80px rgba(0,0,0,.27)}.mr-search-bar{min-height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:0 17px;border:1px solid #dfe5e8;border-radius:28px;color:#3b454d;font-size:14px}.mr-search-g{color:var(--mr-blue);font-size:20px;font-weight:800}.mr-search-card{margin-top:18px;padding:19px;border:1px solid #e4e9ec}.mr-search-card small{display:block;margin-bottom:5px;color:#737f88;font-size:10px}.mr-search-card strong{color:#1b5dbf;font-size:17px;line-height:1.35}.mr-search-card p{margin:7px 0 0;color:#56616a;font-size:12px;line-height:1.6}.mr-map-demo{position:relative;height:115px;margin-top:14px;background:linear-gradient(90deg,rgba(0,136,204,.06) 1px,transparent 1px),linear-gradient(rgba(0,136,204,.06) 1px,transparent 1px),#f4f6f7;background-size:25px 25px}.mr-map-demo span{position:absolute;color:#dd4b39;font-size:19px}.mr-map-demo span:nth-child(1){left:25%;top:38%}.mr-map-demo span:nth-child(2){left:55%;top:55%}.mr-map-demo span:nth-child(3){left:76%;top:24%}.mr-demo-note{margin:15px 0 0;color:#98a1a8;font-size:10px;line-height:1.5}
.mr-gads-intent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--mr-line);border-left:1px solid var(--mr-line)}.mr-gads-intent-grid article,.mr-gads-track-grid article{min-height:300px;padding:31px;border-right:1px solid var(--mr-line);border-bottom:1px solid var(--mr-line)}.mr-gads-intent-grid span,.mr-gads-track-grid span{color:#a4adb4;font-size:11px}.mr-gads-intent-grid h3,.mr-gads-track-grid h3{margin:78px 0 15px;color:var(--mr-text);font-size:25px;line-height:1.15}.mr-gads-intent-grid p,.mr-gads-track-grid p{margin:0;color:var(--mr-muted);font-size:14px;line-height:1.7}.mr-gads-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mr-gads-usecases article{min-height:300px;padding:34px;border:1px solid var(--mr-line);background:#fff}.mr-gads-usecases>article>strong{color:var(--mr-blue);font-size:10px;letter-spacing:.14em}.mr-gads-usecases h3{max-width:460px;margin:70px 0 14px;color:var(--mr-text);font-size:28px;line-height:1.12}.mr-gads-usecases p{color:var(--mr-muted);font-size:14px;line-height:1.75}
.mr-gads-dark{color:#fff;background:#151d24}.mr-gads-dark-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.mr-gads-dark .eyebrow{color:#67d1f5!important}.mr-gads-dark h2,.mr-gads-honest h2{margin:0;font-size:clamp(36px,4.5vw,66px);font-weight:800;line-height:1.03;letter-spacing:-.045em}.mr-gads-dark h2{color:#fff}.mr-gads-dark p{color:rgba(255,255,255,.68);font-size:17px;line-height:1.78}.mr-gads-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.13)}.mr-gads-metrics>div{min-height:145px;padding:25px;border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}.mr-gads-metrics small{display:block;color:rgba(255,255,255,.46);font-size:10px;text-transform:uppercase}.mr-gads-metrics strong{display:block;margin-top:33px;color:#fff;font-size:19px}
.mr-gads-system{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px}.mr-gads-system-step{min-height:240px;padding:26px;border:1px solid var(--mr-line)}.mr-gads-system-step span{color:#9fa8ae;font-size:11px}.mr-gads-system-step strong{display:block;margin-top:65px;color:var(--mr-text);font-size:19px}.mr-gads-system-step p{color:var(--mr-muted);font-size:13px;line-height:1.65}.mr-gads-arrow{color:var(--mr-blue);font-size:25px;font-weight:800}.mr-gads-proof-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.mr-gads-proof-grid>div:first-child>p:not(.eyebrow){color:var(--mr-muted);font-size:16px;line-height:1.8}.mr-gads-screenshot-placeholder{padding:22px;border:1px solid #dce3e7;background:#fff;box-shadow:0 25px 60px rgba(17,32,46,.12)}.mr-gads-screen-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid #e6ebee;color:#38434b;font-size:10px;font-weight:800;letter-spacing:.1em}.mr-gads-query{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #edf1f3}.mr-gads-query strong{color:#2c3740;font-size:13px}.mr-gads-query span{color:var(--mr-blue);font-size:10px;font-weight:700}.mr-gads-screenshot-placeholder>p{margin:17px 0 0;color:#939da5;font-size:10px}.mr-gads-track-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--mr-line);border-left:1px solid var(--mr-line)}
.mr-gads-honest{background:#e9f5fa}.mr-gads-honest-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.mr-gads-honest-list{border-top:1px solid rgba(0,136,204,.2)}.mr-gads-honest-list article{padding:26px 0;border-bottom:1px solid rgba(0,136,204,.2)}.mr-gads-honest-list strong{color:var(--mr-text);font-size:18px}.mr-gads-honest-list p{margin:8px 0 0;color:var(--mr-muted);font-size:14px;line-height:1.7}.mr-gads-knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mr-gads-knowledge-placeholder{min-height:350px;display:flex;flex-direction:column;padding:30px;border:1px solid var(--mr-line);background:#fff}.mr-gads-knowledge-placeholder>span{color:var(--mr-blue);font-size:10px;font-weight:800;letter-spacing:.13em}.mr-gads-knowledge-placeholder h3{margin:60px 0 14px;color:var(--mr-text);font-size:23px;line-height:1.22}.mr-gads-knowledge-placeholder p{margin:0;color:var(--mr-muted);font-size:13px;line-height:1.7}.mr-gads-knowledge-placeholder small{margin-top:auto;padding-top:25px;color:#a4adb4;font-weight:800}
.mr-gads-process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--mr-line);border-left:1px solid var(--mr-line)}.mr-gads-process li{min-height:300px;padding:26px 23px;border-right:1px solid var(--mr-line);border-bottom:1px solid var(--mr-line)}.mr-gads-process span{color:#a2acb2;font-size:11px}.mr-gads-process strong{display:block;margin-top:78px;color:var(--mr-text);font-size:17px;line-height:1.35}.mr-gads-process p{color:var(--mr-muted);font-size:13px;line-height:1.68}.mr-gads-faq{max-width:900px}.mr-gads-faq details{border-bottom:1px solid var(--mr-line);background:#fff}.mr-gads-faq summary{position:relative;padding:24px 52px 24px 0;color:var(--mr-text);font-size:17px;font-weight:700;cursor:pointer;list-style:none}.mr-gads-faq summary::-webkit-details-marker{display:none}.mr-gads-faq summary::after{content:'+';position:absolute;right:6px;top:18px;color:var(--mr-blue);font-size:28px}.mr-gads-faq details[open] summary::after{content:'−'}.mr-gads-faq details p{max-width:760px;margin:0;padding:0 50px 24px 0;color:var(--mr-muted);font-size:14px;line-height:1.75}
.mr-knowledge-hero{padding:220px 0 110px;background:radial-gradient(circle at 82% 25%,rgba(0,136,204,.25),transparent 30%),#111a22}.mr-knowledge-hero .eyebrow{color:#67d1f5!important}.mr-knowledge-hero h1{max-width:900px;margin:0;color:#fff;font-size:clamp(54px,7vw,94px);font-weight:800;line-height:.96;letter-spacing:-.06em}.mr-knowledge-hero>.container>p:not(.eyebrow){max-width:760px;margin:28px 0 0;color:rgba(255,255,255,.76);font-size:18px;line-height:1.75}.mr-knowledge-categories{display:flex;flex-wrap:wrap;gap:10px}.mr-knowledge-categories span{padding:11px 14px;border:1px solid var(--mr-line);color:#4c5962;background:#fff;font-size:12px;font-weight:700}.mr-knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mr-knowledge-grid article{min-height:320px;display:flex;flex-direction:column;padding:30px;border:1px solid var(--mr-line);background:#fff}.mr-knowledge-grid article>span{color:var(--mr-blue);font-size:10px;font-weight:800;letter-spacing:.13em}.mr-knowledge-grid h3{margin:58px 0 14px;color:var(--mr-text);font-size:26px;line-height:1.2}.mr-knowledge-grid p{color:var(--mr-muted);font-size:14px;line-height:1.72}.mr-knowledge-grid a{margin-top:auto;color:var(--mr-blue);font-size:13px;font-weight:800}.mr-knowledge-grid .is-coming{background:#f9fafb}
@media(max-width:1100px){.mr-gads-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mr-gads-process{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.mr-gads-hero-grid,.mr-gads-dark-grid,.mr-gads-proof-grid,.mr-gads-honest-grid{grid-template-columns:1fr;gap:50px}.mr-search-demo{max-width:620px}.mr-gads-system{grid-template-columns:1fr}.mr-gads-arrow{transform:rotate(90deg);text-align:center}.mr-gads-knowledge-grid,.mr-knowledge-grid{grid-template-columns:1fr}}@media(max-width:700px){#restaurant-google-ads-page .section,#restaurant-knowledge-page .section{padding:78px 0}.mr-gads-hero{min-height:760px}.mr-gads-hero h1{font-size:clamp(47px,13vw,64px);line-height:.98}.mr-gads-intent-grid,.mr-gads-usecases,.mr-gads-metrics,.mr-gads-track-grid,.mr-gads-process{grid-template-columns:1fr}.mr-gads-intent-grid article,.mr-gads-usecases article,.mr-gads-track-grid article,.mr-gads-process li{min-height:auto}.mr-gads-intent-grid h3,.mr-gads-usecases h3,.mr-gads-track-grid h3,.mr-gads-process strong{margin-top:48px}.mr-knowledge-hero{padding:180px 0 85px}.mr-knowledge-hero h1{font-size:clamp(47px,13vw,64px)}}


/* CASE STUDY — WAGYU */
#mr-wagyu-case{overflow:hidden}
.mr-case-hero{padding:225px 0 110px;background:radial-gradient(circle at 80% 28%,rgba(0,136,204,.24),transparent 28%),linear-gradient(120deg,#0d151b,#17232c 60%,#0e171d)}
.mr-case-hero .eyebrow{color:#67d1f5!important}
.mr-case-hero h1{max-width:1100px;margin:0;color:#fff;font-size:clamp(52px,6.6vw,94px);font-weight:800;line-height:.98;letter-spacing:-.055em}
.mr-case-lead{max-width:800px;margin:30px 0 0;color:rgba(255,255,255,.76);font-size:19px;line-height:1.75}
.mr-case-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:35px}
.mr-case-meta span{padding:9px 12px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.7);font-size:10px;font-weight:800;letter-spacing:.1em}
.mr-case-result-strip{padding:34px 0;background:#0088cc}
.mr-case-result-grid{display:grid;grid-template-columns:1fr auto 1fr 1.5fr;align-items:center;gap:28px}
.mr-case-result-grid>div:not(.mr-case-result-arrow){display:flex;flex-direction:column}
.mr-case-result-grid small,.mr-case-result-grid span{color:rgba(255,255,255,.72);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.mr-case-result-grid strong{margin:5px 0;color:#fff;font-size:27px;line-height:1.15}
.mr-case-result-arrow{color:#fff;font-size:25px}
.mr-case-article{background:#fff}
.mr-case-section{max-width:1180px;display:grid;grid-template-columns:minmax(0,720px) minmax(300px,1fr);gap:75px;align-items:start;margin:0 auto;padding:105px 28px;border-bottom:1px solid #e3e8eb}
.mr-case-copy{max-width:720px}
.mr-case-copy-wide{max-width:850px;grid-column:1/-1}
.mr-case-copy .eyebrow,.mr-case-numbers .eyebrow{margin:0 0 14px;color:#0088cc;font-size:11px;font-weight:800;letter-spacing:.15em}
.mr-case-copy h2,.mr-case-numbers h2{margin:0 0 26px;color:#27313a;font-size:clamp(38px,4.4vw,62px);line-height:1.04;letter-spacing:-.045em}
.mr-case-copy p,.mr-case-disclaimer p{color:#59656e;font-size:16px;line-height:1.9}
.mr-case-copy strong{color:#27313a}
.mr-case-quote{margin:34px 0 0;padding:28px 0 28px 26px;border-left:4px solid #0088cc;color:#27313a;font-size:22px;font-weight:700;line-height:1.5}
.mr-case-media{margin:0}.mr-case-media-wide{grid-column:1/-1;margin-top:20px}
.mr-case-placeholder{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(135deg,rgba(0,136,204,.12),rgba(15,25,33,.06)),#edf2f4;border:1px dashed #aebbc2}
.mr-case-placeholder span,.mr-case-reel-placeholder span{color:#0088cc;font-size:10px;font-weight:800;letter-spacing:.13em}
.mr-case-placeholder strong,.mr-case-reel-placeholder strong{margin-top:9px;color:#27313a;font-size:18px;line-height:1.35}
.mr-case-placeholder small,.mr-case-reel-placeholder small,.mr-case-media figcaption,.mr-case-reel figcaption{margin-top:8px;color:#7c8890;font-size:11px;line-height:1.6}
.mr-case-video-section{grid-template-columns:1fr 380px;align-items:center}
.mr-case-reel{margin:0}
.mr-case-reel-placeholder{aspect-ratio:9/16;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(180deg,transparent 35%,rgba(12,20,26,.72)),linear-gradient(135deg,#d8e2e7,#eef3f5);border:1px dashed #aebbc2}
.mr-case-reel-placeholder strong,.mr-case-reel-placeholder small{color:#fff}
.mr-case-keywords,.mr-case-examples{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 30px}
.mr-case-keywords span,.mr-case-examples span{padding:10px 13px;border:1px solid #dce4e8;background:#f7f9fa;color:#46525a;font-size:12px;font-weight:700}
.mr-case-funnel{max-width:560px;margin:38px 0}
.mr-case-funnel div{padding:17px 20px;border:1px solid #dbe3e7;background:#f8fafb;color:#27313a;font-weight:700}
.mr-case-funnel span{display:block;padding:6px 0;color:#0088cc;text-align:center;font-weight:800}
.mr-case-numbers{padding:105px max(28px,calc((100vw - 1180px)/2));color:#fff;background:#151e25}
.mr-case-numbers h2{color:#fff}.mr-case-numbers .mr-case-copy p{color:rgba(255,255,255,.7)}
.mr-case-number-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.13)}
.mr-case-number-grid>div{min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.mr-case-number-grid small,.mr-case-number-grid span{color:rgba(255,255,255,.53);font-size:10px;text-transform:uppercase}
.mr-case-number-grid strong{margin:10px 0;color:#fff;font-size:28px}
.mr-case-disclaimer{max-width:900px;margin-top:32px;padding:24px;border:1px solid rgba(255,255,255,.13)}
.mr-case-disclaimer strong{color:#67d1f5}.mr-case-disclaimer p{margin-bottom:0;color:rgba(255,255,255,.63);font-size:13px;line-height:1.75}
.mr-case-closing{background:#f4f7f8}
@media(max-width:900px){.mr-case-result-grid{grid-template-columns:1fr 1fr}.mr-case-result-arrow{display:none}.mr-case-section,.mr-case-video-section{grid-template-columns:1fr;gap:45px}.mr-case-reel{max-width:380px}.mr-case-number-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.mr-case-hero{padding:185px 0 80px}.mr-case-hero h1{font-size:clamp(44px,12vw,60px)}.mr-case-lead{font-size:16px}.mr-case-result-grid{grid-template-columns:1fr}.mr-case-section{padding:75px 20px}.mr-case-number-grid{grid-template-columns:1fr}.mr-case-result-grid strong{font-size:24px}}


/* WAGYU CASE — REAL MEDIA */
.mr-case-main-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#eef2f4}
.mr-case-video-horizontal{margin:0;width:100%}
.mr-case-video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#111;overflow:hidden}
.mr-case-video-embed iframe,.mr-case-reel-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mr-case-video-horizontal figcaption{margin-top:8px;color:#7c8890;font-size:11px;line-height:1.6}
.mr-case-reel-video{position:relative;width:100%;aspect-ratio:9/16;background:#111;overflow:hidden}
.mr-case-reel--shorts {
    width: 310px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
}

.mr-case-reel--shorts iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.mr-case-video-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.mr-case-video-card-inner {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: #151d24;
}

.mr-case-video-label {
    margin-bottom: 24px;
    color: #67d1f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.mr-case-youtube-horizontal {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.mr-case-youtube-horizontal iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.mr-case-video-card-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 25px;
}

.mr-case-video-card-copy strong {
    color: #fff;
    font-size: 17px;
}

.mr-case-video-card-copy span {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================================
   WAGYU — ORIGINALNI BLOG ČLANAK
   ========================================================= */

.mr-case-article-preview {
    width: 100%;
    margin: 0;
}


/* CEO BROWSER */

.mr-case-browser {
    overflow: hidden;

    width: 100%;

    background: #ffffff;

    border: 1px solid #dbe3e7;

    box-shadow:
        0 30px 70px rgba(20, 35, 48, 0.12);
}


/* GORNJA BROWSER TRAKA */

.mr-case-browser-bar {
    height: 42px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    background: #e9eef1;

    border-bottom: 1px solid #d7dfe4;
}


.mr-case-browser-dots {
    display: flex;
    gap: 6px;
}


.mr-case-browser-dots span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background: #a9b4bb;
}


.mr-case-browser-url {
    margin-left: 14px;

    color: #77838b;

    font-size: 9px;
}


/* SADRŽAJ ČLANKA */

.mr-case-browser-content {
    padding: 38px 36px 40px;
}


.mr-case-browser-category {
    display: block;

    margin-bottom: 13px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


.mr-case-browser-content h3 {
    margin: 0 0 20px;

    color: #27313a;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1px;
}


.mr-case-browser-lead {
    margin-bottom: 25px;

    color: #4e5b64;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.75;
}


/* FOTOGRAFIJA U ČLANKU */

.mr-case-browser-image {
    width: 100%;
    margin: 28px 0;

    overflow: hidden;

    aspect-ratio: 16 / 8.5;

    background: #111820;
}


.mr-case-browser-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* PODNASLOVI */

.mr-case-browser-content h4 {
    margin: 25px 0 9px;

    color: #27313a;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.35;
}


.mr-case-browser-content p {
    margin: 0;

    color: #68747d;

    font-size: 12px;

    line-height: 1.75;
}


/* NASTAVAK TEKSTA */

.mr-case-browser-more {
    margin-top: 27px;

    padding-top: 18px;

    border-top: 1px solid #e5eaed;

    color: #929ca3;

    font-size: 10px;
    font-weight: 700;

    text-align: center;
}


.mr-case-browser-more span {
    display: block;

    margin-bottom: 3px;

    color: #0088cc;

    font-size: 16px;
}


/* CAPTION ISPOD */

.mr-case-article-preview figcaption {
    margin-top: 10px;

    color: #7c8890;

    font-size: 11px;

    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 600px) {

    .mr-case-browser-content {
        padding: 28px 22px 30px;
    }

    .mr-case-browser-content h3 {
        font-size: 25px;
    }

    .mr-case-browser-image {
        aspect-ratio: 16 / 10;
    }

}

/* =========================================================
   WAGYU — SEKCIJA 1 / ORIGINALNI ČLANAK
   ========================================================= */

.mr-case-section {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
    gap: 70px;
}


/* DESNI BLOK KAO DOKAZ / ORIGINALNI ČLANAK */

.mr-case-article-preview {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 18px;

    background: #f4f7f8;

    border: 1px solid #dce4e8;

    box-shadow:
        0 24px 60px rgba(20, 35, 48, 0.10);
}


/* STICKER */

.mr-case-article-preview::before {
    content: "ORIGINALNI ČLANAK";

    position: absolute;
    z-index: 5;

    top: -14px;
    right: 18px;

    padding: 9px 13px;

    color: #ffffff;
    background: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;

    box-shadow:
        0 8px 20px rgba(0, 136, 204, 0.22);
}


/* BROWSER */

.mr-case-browser {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d9e1e5;
}


/* BROWSER GORNJI DEO */

.mr-case-browser-bar {
    min-height: 40px;

    display: flex;
    align-items: center;

    padding: 0 13px;

    background: #e8edf0;

    border-bottom: 1px solid #d9e0e4;
}


.mr-case-browser-dots {
    display: flex;
    gap: 5px;
}


.mr-case-browser-dots span {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #aab5bc;
}


.mr-case-browser-url {
    margin-left: 11px;

    color: #69767f;

    font-size: 9px;
}


/* SADRŽAJ */

.mr-case-browser-content {
    padding: 28px 24px 30px;
}


.mr-case-browser-category {
    display: inline-block;

    margin-bottom: 15px;

    padding: 5px 8px;

    color: #0079b5;
    background: #e8f5fb;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


.mr-case-browser-content h3 {
    margin: 0 0 17px;

    color: #27313a;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.15;
}


.mr-case-browser-lead {
    margin-bottom: 20px !important;

    color: #44515a !important;

    font-size: 12px !important;
    font-weight: 600;

    line-height: 1.65 !important;
}


/* SLIKA */

.mr-case-browser-image {
    width: 100%;

    margin: 22px 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #111820;
}


.mr-case-browser-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* PODNASLOVI U ORIGINALNOM ČLANKU */

.mr-case-browser-content h4 {
    margin: 23px 0 8px;

    color: #27313a;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.35;
}


.mr-case-browser-content p {
    color: #65717a;

    font-size: 11px;

    line-height: 1.7;
}


/* NASTAVAK */

.mr-case-browser-more {
    margin-top: 24px;

    padding: 16px 12px 0;

    border-top: 1px solid #e2e8eb;

    color: #879198;

    font-size: 9px;
    font-weight: 700;

    text-align: center;
}


.mr-case-browser-more span {
    display: block;

    margin-bottom: 2px;

    color: #0088cc;

    font-size: 15px;
}


/* CAPTION */

.mr-case-article-preview figcaption {
    margin-top: 12px;

    color: #7b878e;

    font-size: 10px;

    line-height: 1.6;
}


/* TABLET */

@media (max-width: 900px) {

    .mr-case-section {
        grid-template-columns: 1fr;
    }

    .mr-case-article-preview {
        max-width: 620px;
    }

}

/* =========================================================
   WAGYU — GOOGLE ADS / SEARCH TERMS
   ========================================================= */

.mr-case-ads-preview {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 18px;

    background: #f4f7f8;

    border: 1px solid #dce4e8;

    box-shadow:
        0 24px 60px rgba(20, 35, 48, .10);
}


/* STICKER */

.mr-case-ads-preview::before {
    content: "KAMPANJA U PRAKSI";

    position: absolute;
    z-index: 5;

    top: -14px;
    right: 18px;

    padding: 9px 13px;

    color: #fff;
    background: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;

    box-shadow:
        0 8px 20px rgba(0, 136, 204, .22);
}


/* GLAVNA KARTICA */

.mr-case-ads-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #d9e1e5;
}


/* HEADER */

.mr-case-ads-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px;

    border-bottom: 1px solid #e4e9ec;
}


.mr-case-ads-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.mr-case-ads-label {
    color: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


.mr-case-ads-top strong {
    color: #27313a;

    font-size: 20px;
    font-weight: 800;
}


.mr-case-ads-status {
    color: #268b57;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;
}


/* TABLE HEADER */

.mr-case-ads-head {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 20px;

    padding: 10px 20px;

    background: #f5f7f8;

    color: #8a959c;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .1em;
}


/* SEARCH TERM */

.mr-case-search-row {
    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 20px;

    padding: 17px 20px;

    border-top: 1px solid #edf0f2;
}


.mr-case-search-row > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.mr-case-search-row strong {
    color: #27313a;

    font-size: 12px;
    font-weight: 700;
}


.mr-case-search-row small {
    color: #929ca2;

    font-size: 9px;
}


/* INTENT */

.mr-case-intent {
    padding: 6px 8px;

    background: #e9f7ef;

    color: #248553;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .06em;
}


.mr-case-intent-medium {
    color: #9a701c;
    background: #fff5d9;
}


/* LANDING PAGE */

.mr-case-ads-destination {
    padding: 22px;

    background: #17212b;
}


.mr-case-ads-destination > span {
    display: block;

    margin-bottom: 7px;

    color: #67d1f5;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


.mr-case-ads-destination > strong {
    display: block;

    color: #fff;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}


.mr-case-ads-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 19px;
    padding-top: 15px;

    border-top: 1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.55);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .06em;
}


.mr-case-ads-flow b {
    color: #67d1f5;
}


/* CAPTION */

.mr-case-ads-preview figcaption {
    margin-top: 12px;

    color: #7b878e;

    font-size: 10px;

    line-height: 1.6;
}


@media (max-width: 600px) {

    .mr-case-ads-preview {
        padding: 12px;
    }

    .mr-case-ads-top {
        padding: 20px 16px;
    }

    .mr-case-search-row {
        padding: 15px 16px;
    }

}

/* =========================================================
   AUTOR / STRUČNA PROVERA
   ========================================================= */

.mr-author-box {
    max-width: 960px;

    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 36px;
    align-items: center;

    margin: 80px auto;
    padding: 30px;

    background: #fff;

    border: 1px solid #d9e2e7;
    border-top: 5px solid #0088cc;
}


/* FOTO */

.mr-author-photo {
    width: 180px;
    height: 220px;

    overflow: hidden;

    background: #eef2f4;
}

.mr-author-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* CONTENT */

.mr-author-content {
    max-width: 650px;
}

.mr-author-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #53616b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}

.mr-author-content h3 {
    margin: 0 0 14px;

    color: #202a32;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.1;
    letter-spacing: -.035em;
}

.mr-author-intro {
    max-width: 620px;

    margin: 0 0 22px;

    color: #59656e;

    font-size: 15px;
    line-height: 1.65;
}

.mr-author-intro strong {
    color: #27313a;
}


/* ULOGA */

.mr-author-role {
    margin-bottom: 7px;

    color: #27313a;

    font-size: 12px;
    font-weight: 800;
}

.mr-author-description {
    margin: 0;

    color: #6c7780;

    font-size: 11px;
    line-height: 1.7;
}


/* CASE STUDY NAPOMENA */

.mr-author-case-note {
    margin: 14px 0 0;
    padding-left: 13px;

    border-left: 2px solid #0088cc;

    color: #59656e;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}


/* LINK */

.mr-author-link {
    display: inline-block;

    margin-top: 18px;

    color: #0088cc;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.mr-author-link:hover {
    text-decoration: underline;
}


/* MOBILE */

@media (max-width: 650px) {

    .mr-author-box {
        grid-template-columns: 1fr;

        margin: 55px 20px;
        padding: 24px;
    }

    .mr-author-photo {
        width: 140px;
        height: 170px;
    }

    .mr-author-content h3 {
        font-size: 26px;
    }

}

/* =========================================================
   FINAL CTA — POSLOVNI CILJEVI RESTORANA
   ========================================================= */

.mr-final-cta-results .mr-final-inner {
    max-width: 1180px;
}

.mr-final-cta-results h2 {
    max-width: 800px;
}

.mr-final-lead {
    max-width: 720px;
    margin-bottom: 45px;
}


/* 4 CILJA */

.mr-final-goals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin: 45px 0 55px;

    border-top: 1px solid rgba(255,255,255,.18);
    border-left: 1px solid rgba(255,255,255,.18);
}

.mr-final-goal {
    min-height: 245px;

    padding: 28px 25px;

    border-right: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.mr-final-goal > span {
    display: block;

    margin-bottom: 45px;

    color: #67d1f5;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mr-final-goal h3 {
    margin: 0 0 13px;

    color: #fff;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.mr-final-goal p {
    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 12px;
    line-height: 1.7;
}


/* ZAVRŠNA PORUKA */

.mr-final-question {
    max-width: 900px;

    margin-bottom: 35px;
}

.mr-final-question span {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.55);

    font-size: 13px;
}

.mr-final-question strong {
    display: block;

    color: #fff;

    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -.03em;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .mr-final-goals {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .mr-final-goals {
        grid-template-columns: 1fr;
    }

    .mr-final-goal {
        min-height: auto;
    }

    .mr-final-goal > span {
        margin-bottom: 25px;
    }

}

/* =========================================================
   LANDING SEKCIJA + ROTACIONI STO
   ========================================================= */

.mr-case-landing-section {
    grid-template-columns: minmax(0, 1.45fr) 360px;
    gap: 90px;
    align-items: center;
}


/* DESNA KARTICA */

.mr-case-tech-reel {
    width: 100%;
    margin: 0;
}

.mr-case-tech-card {
    padding: 22px;

    background: #151d24;

    box-shadow:
        0 28px 65px rgba(20, 35, 48, .16);
}


/* LABEL */

.mr-case-tech-label {
    margin-bottom: 18px;

    color: #67d1f5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


/* SHORTS 9:16 */

.mr-case-shorts-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #000;
}

.mr-case-shorts-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* COPY ISPOD */

.mr-case-tech-copy {
    padding-top: 22px;
}

.mr-case-tech-copy strong {
    display: block;

    color: #fff;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.35;
}

.mr-case-tech-copy p {
    margin: 10px 0 0;

    color: rgba(255,255,255,.66);

    font-size: 11px;
    line-height: 1.7;
}


/* SITNA NAPOMENA */

.mr-case-tech-copy small {
    display: block;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.45);

    font-size: 9px;
    line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .mr-case-landing-section {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mr-case-tech-reel {
        max-width: 360px;
    }

}


@media (max-width: 600px) {

    .mr-case-tech-reel {
        max-width: 100%;
    }

    .mr-case-tech-card {
        padding: 16px;
    }

}

/* =========================================================
   HOME — PRODUKCIJA ISPOD HERO-A
   ========================================================= */

.mr-home-production-intro {
    position: relative;

    padding: 115px 0 120px;

    background: #f5f7f8;

    overflow: hidden;
}


/* NASLOV */

.mr-home-production-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);

    gap: 85px;
    align-items: end;

    margin-bottom: 65px;
}


.mr-home-production-heading .eyebrow {
    margin-bottom: 17px;

    color: #0088cc;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
}


.mr-home-production-heading h2 {
    max-width: 800px;

    margin: 0;

    color: #202a32;

    font-size: clamp(46px, 5vw, 72px);
    font-weight: 800;

    line-height: .98;
    letter-spacing: -.055em;
}


.mr-home-production-heading h2 span {
    display: block;

    color: #0088cc;
}


.mr-home-production-lead p {
    margin: 0 0 14px;

    color: #65717a;

    font-size: 15px;

    line-height: 1.8;
}


.mr-home-production-lead p:first-child {
    color: #27313a;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.55;
}


/* 3 KARTICE */

.mr-home-production-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.mr-home-production-card {
    position: relative;

    padding: 16px;

    background: #fff;

    border: 1px solid #dce4e8;

    box-shadow:
        0 20px 50px rgba(20, 35, 48, .055);
}


.mr-home-production-number {
    position: absolute;

    z-index: 5;

    top: 28px;
    left: 28px;

    color: rgba(255,255,255,.82);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}


/* MEDIA */

.mr-home-production-media {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #12191f;
}


.mr-home-production-media img,
.mr-home-production-media iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    object-fit: cover;
}


/* STICKER PREKO MEDIA */

.mr-home-production-sticker {
    position: absolute;

    z-index: 4;

    right: 14px;
    bottom: 14px;

    padding: 8px 10px;

    color: #fff;

    background: rgba(15, 24, 31, .88);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;

    backdrop-filter: blur(7px);
}


/* COPY */

.mr-home-production-copy {
    padding: 25px 10px 12px;
}


.mr-home-production-copy h3 {
    margin: 0 0 12px;

    color: #27313a;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.025em;
}


.mr-home-production-copy p {
    margin: 0;

    color: #65717a;

    font-size: 13px;

    line-height: 1.75;
}


.mr-home-production-copy small {
    display: block;

    margin-top: 18px;
    padding-top: 15px;

    border-top: 1px solid #e5eaed;

    color: #929ca3;

    font-size: 9px;

    line-height: 1.6;
}


/* DONJI RED */

.mr-home-production-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;

    margin-top: 55px;
    padding-top: 35px;

    border-top: 1px solid #dce4e8;
}


.mr-home-production-bottom > div {
    max-width: 720px;
}


.mr-home-production-bottom span {
    display: block;

    margin-bottom: 8px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .13em;
}


.mr-home-production-bottom strong {
    display: block;

    color: #27313a;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.35;
}


/* TABLET */

@media (max-width: 950px) {

    .mr-home-production-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .mr-home-production-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .mr-home-production-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .mr-home-production-intro {
        padding: 80px 0;
    }


    .mr-home-production-heading {
        margin-bottom: 45px;
    }


    .mr-home-production-heading h2 {
        font-size: clamp(43px, 12vw, 58px);
    }


    .mr-home-production-grid {
        grid-template-columns: 1fr;
    }


    .mr-home-production-card {
        max-width: 430px;
    }


    .mr-home-production-bottom {
        margin-top: 40px;
    }

}

/* =========================================================
   NAŠ RAD — YOUTUBE VIDEO KARTICE
   ========================================================= */

.mr-work {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #fff;
    border: 1px solid #dce4e8;

    text-decoration: none;
}


/* VIDEO */

.mr-work-video {
    position: relative;

    width: 100%;

    overflow: hidden;
    background: #111820;
}

.mr-work-video iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    border: 0;
}


/* HORIZONTALNI */

.mr-work-video-horizontal {
    aspect-ratio: 16 / 9;
}


/* VERTIKALNI SHORTS */

.mr-work-video-short {
    aspect-ratio: 9 / 16;

    width: 100%;
    max-height: 430px;

    background: #111820;
}


/* SHORTS KARTICA */

.mr-work-short-card .mr-work-video-short {
    width: 242px;
    max-width: 100%;

    margin: 0 auto;
}


/* COPY */

.mr-work-copy {
    flex: 1;

    padding: 26px 22px;
}

.mr-work-copy span {
    display: block;

    margin-bottom: 10px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.mr-work-copy h3 {
    margin: 0;

    color: #202a32;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
}

.mr-work-copy p {
    margin: 15px 0 0;

    color: #0088cc;

    font-size: 11px;
    font-weight: 700;
}


/* VELIKA BUDDHA-BAR KARTICA */

.mr-work-large .mr-work-video-horizontal {
    aspect-ratio: 16 / 10;
}


/* MOBILE */

@media (max-width: 700px) {

    .mr-work-short-card .mr-work-video-short {
        width: min(100%, 320px);
    }

}

/* =========================================================
   HOME — PR / BIZLIFE CASE
   ========================================================= */

.mr-pr-case {
    padding: 115px 0 120px;
    background: #f4f7f8;
}


/* UVOD */

.mr-pr-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);

    gap: 90px;
    align-items: end;

    margin-bottom: 65px;
}


.mr-pr-heading h2 {
    max-width: 760px;

    margin: 0;

    color: #202a32;

    font-size: clamp(46px, 5vw, 72px);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -.05em;
}


.mr-pr-heading-text p {
    color: #65717a;

    font-size: 15px;
    line-height: 1.8;
}


.mr-pr-heading-text .mr-pr-lead {
    color: #27313a;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.55;
}


/* 3 KOLONE */

.mr-pr-case-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr .75fr;

    gap: 18px;
    align-items: stretch;
}


.mr-pr-article-card,
.mr-pr-photo-card,
.mr-pr-video-card {
    position: relative;

    padding: 16px;

    background: #fff;

    border: 1px solid #dce4e8;
}


.mr-pr-card-label {
    margin-bottom: 15px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


/* BROWSER / BIZLIFE */

.mr-pr-browser {
    overflow: hidden;

    border: 1px solid #dce3e7;

    background: #fff;
}


.mr-pr-browser-bar {
    height: 39px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    background: #e9eef1;
}


.mr-pr-browser-dots {
    display: flex;
    gap: 5px;
}


.mr-pr-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a8b3ba;
}


.mr-pr-browser-url {
    margin-left: 12px;

    color: #7d8990;

    font-size: 8px;
}


.mr-pr-browser-content {
    padding: 28px;
}


.mr-pr-media-name {
    color: #0088cc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}


.mr-pr-browser-content h3 {
    margin: 17px 0 13px;

    color: #27313a;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.1;
}


.mr-pr-browser-content p {
    color: #65717a;

    font-size: 12px;
    line-height: 1.7;
}


/* ARTICLE IMAGE */

.mr-pr-article-image {
    margin: 25px 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #17212b;
}


/* PLACEHOLDER */

.mr-pr-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    color: rgba(255,255,255,.55);

    background: #17212b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .1em;

    line-height: 1.6;
    text-align: center;
}


/* FAKE ARTICLE LINES */

.mr-pr-article-lines {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.mr-pr-article-lines span {
    display: block;

    height: 6px;

    background: #edf1f3;
}


.mr-pr-article-lines span:nth-child(2) {
    width: 92%;
}

.mr-pr-article-lines span:nth-child(3) {
    width: 84%;
}

.mr-pr-article-lines span:nth-child(4) {
    width: 65%;
}


.mr-pr-article-link {
    margin-top: 25px;

    color: #0088cc;

    font-size: 10px;
    font-weight: 800;
}


.mr-pr-caption {
    margin: 16px 7px 5px;

    color: #7a868e;

    font-size: 10px;

    line-height: 1.65;
}


/* FOTO */

.mr-pr-photo {
    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #17212b;
}


.mr-pr-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* REEL */

.mr-pr-reel {
    position: relative;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #10171d;
}


.mr-pr-reel iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* COPY ISPOD FOTO/VIDEA */

.mr-pr-card-copy {
    padding: 22px 8px 10px;
}


.mr-pr-card-copy h3 {
    margin: 0 0 10px;

    color: #27313a;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.2;
}


.mr-pr-card-copy p {
    margin: 0;

    color: #65717a;

    font-size: 12px;

    line-height: 1.75;
}


/* PROCES */

.mr-pr-process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    margin-top: 55px;

    border-top: 1px solid #dce4e8;
    border-left: 1px solid #dce4e8;
}


.mr-pr-process > div {
    min-height: 115px;

    padding: 20px;

    border-right: 1px solid #dce4e8;
    border-bottom: 1px solid #dce4e8;
}


.mr-pr-process span {
    display: block;

    margin-bottom: 25px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;
}


.mr-pr-process strong {
    color: #27313a;

    font-size: 12px;
}


/* BOTTOM */

.mr-pr-bottom {
    margin-top: 45px;
    padding-top: 30px;

    border-top: 1px solid #dce4e8;
}


.mr-pr-bottom span {
    display: block;

    margin-bottom: 8px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;
}


.mr-pr-bottom strong {
    max-width: 760px;

    display: block;

    color: #27313a;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.35;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .mr-pr-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mr-pr-case-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mr-pr-article-card {
        grid-column: 1 / -1;
    }

    .mr-pr-process {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 650px) {

    .mr-pr-case {
        padding: 80px 0;
    }

    .mr-pr-case-grid {
        grid-template-columns: 1fr;
    }

    .mr-pr-article-card {
        grid-column: auto;
    }

    .mr-pr-process {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   HEADER — USLUGE DROPDOWN
   FINAL
   ========================================================= */

/* Dropdown wrapper */
.mr-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}


/* Glavni USLUGE link */
.mr-menu .mr-nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;

    height: 100%;

    color: inherit;
    text-decoration: none;

    cursor: pointer;
}


/* Strelica */
.mr-nav-chevron {
    display: inline-block;

    position: relative;
    top: -1px;

    font-size: 13px;
    line-height: 1;

    transition: transform .2s ease;
}


/* =========================================================
   DROPDOWN PANEL
   ========================================================= */

.mr-nav-dropdown-menu {
    position: absolute;
    z-index: 9999;

    top: calc(100% + 18px);
    left: 50%;

    width: 660px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #dce4e8;

    box-shadow:
        0 25px 65px rgba(20, 35, 48, .16);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(8px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}


/*
   Nevidljivi most između linka USLUGE
   i dropdown panela — sprečava zatvaranje
   dok miš prelazi preko praznog prostora.
*/
.mr-nav-dropdown-menu::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -22px;

    height: 22px;
}


/* Otvaranje */
.mr-nav-dropdown:hover .mr-nav-dropdown-menu,
.mr-nav-dropdown:focus-within .mr-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* Rotacija strelice */
.mr-nav-dropdown:hover .mr-nav-chevron,
.mr-nav-dropdown:focus-within .mr-nav-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   GRID — 2 KOLONE
   ========================================================= */

.mr-nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Pojedinačna usluga */
.mr-menu .mr-nav-dropdown-grid > a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);

    gap: 10px;
    align-items: start;

    min-height: 80px;

    padding: 16px;

    color: #27313a;

    background: #ffffff;

    border-bottom: 1px solid #edf1f3;

    text-decoration: none;

    transition:
        background-color .18s ease,
        color .18s ease;
}


/* Vertikalna linija između kolona */
.mr-menu .mr-nav-dropdown-grid > a:nth-child(odd) {
    border-right: 1px solid #edf1f3;
}


/* Poslednji red bez donje linije */
.mr-menu .mr-nav-dropdown-grid > a:nth-last-child(-n+2) {
    border-bottom: 0;
}


/* Hover */
.mr-menu .mr-nav-dropdown-grid > a:hover,
.mr-menu .mr-nav-dropdown-grid > a:focus {
    background: #f4f8fa;

    color: #27313a;
}


/* =========================================================
   BROJ USLUGE
   ========================================================= */

.mr-menu .mr-nav-dropdown-grid > a > span {
    display: block;

    padding-top: 2px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .08em;
}


/* =========================================================
   NASLOV + OPIS
   ========================================================= */

.mr-nav-dropdown-grid strong {
    display: block;

    margin: 0 0 5px;

    color: #202a32;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}


.mr-nav-dropdown-grid small {
    display: block;

    color: #7a858d;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.45;

    letter-spacing: 0;
    text-transform: none;
}


/* Hover naslov */
.mr-menu .mr-nav-dropdown-grid > a:hover strong {
    color: #0088cc;
}


/* =========================================================
   DONJI CTA — SVE USLUGE
   ========================================================= */

.mr-menu .mr-nav-dropdown-all {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 50px;

    margin-top: 10px;
    padding: 0 17px;

    color: #ffffff;

    background: #17212b;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition: background-color .18s ease;
}


.mr-menu .mr-nav-dropdown-all:hover {
    color: #ffffff;

    background: #0088cc;
}


.mr-nav-dropdown-all > span {
    color: #67d1f5;

    font-size: 18px;
    line-height: 1;

    transition: transform .18s ease;
}


.mr-nav-dropdown-all:hover > span {
    color: #ffffff;

    transform: translateX(4px);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .mr-nav-dropdown {
        display: block;

        width: 100%;
    }


    /* USLUGE */
    .mr-menu .mr-nav-dropdown-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        height: auto;
    }


    /*
       Na mobilnom dropdown postaje deo samog menija,
       nema floating panela.
    */
    .mr-nav-dropdown-menu {
        position: static;

        width: 100%;

        margin: 8px 0 12px;
        padding: 7px;

        background: #f5f7f8;

        border: 1px solid #dce4e8;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: none;

        display: none;
    }


    .mr-nav-dropdown-menu::before {
        display: none;
    }


    /* Otvara se klikom/focusom */
    .mr-nav-dropdown:focus-within .mr-nav-dropdown-menu {
        display: block;

        transform: none;
    }


    .mr-nav-dropdown:focus-within .mr-nav-chevron {
        transform: rotate(180deg);
    }


    /* Jedna kolona */
    .mr-nav-dropdown-grid {
        grid-template-columns: 1fr;
    }


    .mr-menu .mr-nav-dropdown-grid > a {
        min-height: auto;

        padding: 13px 12px;

        grid-template-columns: 27px minmax(0, 1fr);

        border-right: 0 !important;
        border-bottom: 1px solid #e2e8eb !important;
    }


    .mr-menu .mr-nav-dropdown-grid > a:last-child {
        border-bottom: 0 !important;
    }


    .mr-nav-dropdown-grid small {
        font-size: 9px;
    }


    .mr-menu .mr-nav-dropdown-all {
        min-height: 46px;

        margin-top: 7px;

        padding: 0 13px;
    }

}


/* =========================================================
   DESKTOP — spreči izlazak dropdowna van ekrana
   ========================================================= */

@media (min-width: 901px) and (max-width: 1150px) {

    .mr-nav-dropdown-menu {
        left: 0;

        width: 620px;

        transform: translateY(8px);
    }


    .mr-nav-dropdown:hover .mr-nav-dropdown-menu,
    .mr-nav-dropdown:focus-within .mr-nav-dropdown-menu {
        transform: translateY(0);
    }

}

/* =========================================================
   USLUGE — INTRO + SHORTS
   ========================================================= */

.mr-services-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 430px);

    gap: 70px;
    align-items: center;

    margin-bottom: 75px;
}


.mr-services-intro-copy {
    max-width: 720px;
}


.mr-services-intro-copy h2 {
    max-width: 680px;

    margin: 0 0 22px;

    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.04;

    letter-spacing: -.045em;
}


.mr-services-lead {
    max-width: 650px;

    margin-bottom: 28px;

    color: #27313a;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
}


.mr-services-intro-copy > p:not(.eyebrow):not(.mr-services-lead):not(.mr-services-closing) {
    max-width: 650px;

    margin: 0 0 18px;

    color: #68747d;

    font-size: 15px;
    line-height: 1.75;
}


/* 3 STAVKE */

.mr-services-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 34px 0;
}


.mr-services-points > div {
    padding: 20px 18px;

    background: #f5f7f8;

    border-top: 2px solid #0088cc;
}


.mr-services-points span {
    display: block;

    margin-bottom: 14px;

    color: #0088cc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .1em;
}


.mr-services-points strong {
    display: block;

    margin-bottom: 8px;

    color: #17212b;

    font-size: 14px;
}


.mr-services-points p {
    margin: 0;

    color: #76818a;

    font-size: 11px;
    line-height: 1.55;
}


/* ZAVRŠNA PORUKA */

.mr-services-closing {
    max-width: 650px;

    margin: 0;

    padding-left: 18px;

    border-left: 3px solid #0088cc;

    color: #59656e;

    font-size: 15px;
    line-height: 1.7;
}


.mr-services-closing strong {
    color: #17212b;
}


/* =========================================================
   VIDEO CARD
   ========================================================= */

.mr-services-video-card {
    width: 100%;

    padding: 16px;

    background: #17212b;

    box-shadow:
        0 30px 70px rgba(22, 32, 42, .18);
}


.mr-services-video-label {
    padding: 4px 4px 14px;

    color: #67d1f5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


/* SHORTS 9:16 */

.mr-services-short {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #000;
}


.mr-services-short iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* COPY ISPOD VIDEA */

.mr-services-video-copy {
    padding: 18px 4px 5px;
}


.mr-services-video-copy strong {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.35;
}


.mr-services-video-copy p {
    margin: 0;

    color: #aeb9c1;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .mr-services-intro-grid {
        grid-template-columns: 1fr 360px;

        gap: 40px;
    }

    .mr-services-points {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .mr-services-intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 55px;
    }


    .mr-services-intro-copy {
        max-width: none;
    }


    .mr-services-video-card {
        max-width: 390px;

        margin: 0 auto;
    }


    .mr-services-points {
        grid-template-columns: 1fr;
    }


    .mr-services-intro-copy h2 {
        font-size: 38px;
    }


    .mr-services-lead {
        font-size: 17px;
    }

}

/* =========================================================
   PR CASE — 3 RAVNOPRAVNE KARTICE
   ========================================================= */

.mr-pr-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}


/* sve kartice ista logika */

.mr-pr-article-card,
.mr-pr-photo-card,
.mr-pr-video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;

    background: #ffffff;
    border: 1px solid #e3e8eb;
}


/* LABELA */

.mr-pr-card-label {
    padding: 15px 18px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .12em;

    border-bottom: 1px solid #edf1f3;
}


/* =========================================================
   PR / BIZLIFE
   ========================================================= */

.mr-pr-browser {
    background: #ffffff;
}


.mr-pr-browser-bar {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 42px;
    padding: 0 14px;

    background: #f5f7f8;

    border-bottom: 1px solid #e3e8eb;
}


.mr-pr-browser-dots {
    display: flex;
    gap: 5px;
}


.mr-pr-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c5cdd2;
}


.mr-pr-browser-url {
    flex: 1;

    padding: 5px 10px;

    color: #818b92;
    background: #ffffff;

    font-size: 9px;
    line-height: 1.2;
}


/* BITNO — cela slika mnogo vidljivija */

.mr-pr-article-image {
    width: 100%;
    overflow: hidden;

    background: #f5f5f5;
}


.mr-pr-article-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   FOTO KARTICA
   ========================================================= */

.mr-pr-photo {
    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f5f5f5;
}


.mr-pr-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   VIDEO
   ========================================================= */

.mr-pr-reel {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #000;
}


.mr-pr-reel iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   TEKST SVE TRI KARTICE
   ========================================================= */

.mr-pr-card-copy {
    padding: 22px 20px 24px;
}


.mr-pr-media-name {
    display: block;

    margin-bottom: 10px;

    color: #0088cc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .08em;
}


.mr-pr-card-copy h3 {
    margin: 0 0 12px;

    color: #17212b;

    font-size: 20px;
    line-height: 1.25;

    letter-spacing: -.02em;
}


.mr-pr-card-copy p {
    margin: 0;

    color: #6d7880;

    font-size: 13px;
    line-height: 1.65;
}


/* brišemo logiku starog captiona */

.mr-pr-caption {
    display: none;
}


/* MOBILE */

@media (max-width: 900px) {

    .mr-pr-case-grid {
        grid-template-columns: 1fr;
    }

    .mr-pr-reel {
        max-width: 420px;
        margin: 0 auto;
    }

}

/* =========================================================
   BIZLIFE KARTICA — VELIKI PR SCREENSHOT
   ========================================================= */

.mr-pr-article-card {
    display: flex;
    flex-direction: column;
}


/* browser + screenshot neka zauzmu prostor kartice */

.mr-pr-article-card .mr-pr-browser {
    display: flex;
    flex-direction: column;
}


/* Screenshot članka */

.mr-pr-article-card .mr-pr-article-image {
    width: 100%;
    height: 500px;

    overflow: hidden;

    background: #f3f5f6;
}


/* BITNO:
   slika se povećava po širini,
   ali kreće od VRHA originalnog screenshot-a */

.mr-pr-article-card .mr-pr-article-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top center;
}


/* tekst ispod screenshota */

.mr-pr-article-card .mr-pr-card-copy {
    padding: 22px 20px 26px;
}


/* malo kompaktniji naslov */

.mr-pr-article-card .mr-pr-card-copy h3 {
    margin: 5px 0 12px;
}


/* ukloni eventualnu staru prazninu */

.mr-pr-article-card .mr-pr-caption {
    display: none !important;
}

/* DRUGA FOTOGRAFIJA U FOTO PRODUKCIJA KARTICI */

.mr-pr-photo-card .mr-pr-photo-second {
    margin-top: auto;
    border-top: 1px solid #e3e8eb;
}

.mr-pr-photo-card .mr-pr-photo-second img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   NAŠ RAD — SOCIAL CONTENT CAROUSEL
   ========================================================= */

.mr-social-work {
    margin-top: 70px;
    padding-top: 38px;
    border-top: 1px solid #dce4e8;
}


.mr-social-work-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 25px;
}


.mr-social-work-heading > div:first-child {
    max-width: 650px;
}


.mr-social-work-heading span {
    display: block;

    margin-bottom: 10px;

    color: #0088cc;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}


.mr-social-work-heading h3 {
    margin: 0;

    color: #17212b;

    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -.035em;
}


/* CONTROLS */

.mr-social-carousel-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}


.mr-social-carousel-controls button {
    width: 46px;
    height: 46px;

    padding: 0;

    border: 1px solid #d7dfe3;

    color: #17212b;
    background: #ffffff;

    font-size: 19px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.mr-social-carousel-controls button:hover {
    color: #ffffff;
    background: #0088cc;
    border-color: #0088cc;
}


/* CAROUSEL */

.mr-social-carousel {
    width: 100%;
    overflow: hidden;
}


.mr-social-track {
    display: flex;
    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}


.mr-social-track::-webkit-scrollbar {
    display: none;
}


/* 4 OBJAVE NA DESKTOPU */

.mr-social-slide {
    flex: 0 0 calc((100% - 54px) / 4);

    scroll-snap-align: start;

    overflow: hidden;

    background: #eef2f4;
}


.mr-social-slide img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    transition: transform .35s ease;
}


.mr-social-slide:hover img {
    transform: scale(1.025);
}


/* TABLET */

@media (max-width: 900px) {

    .mr-social-slide {
        flex-basis: calc((100% - 18px) / 2);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .mr-social-work {
        margin-top: 50px;
    }

    .mr-social-work-heading {
        align-items: flex-end;
        gap: 15px;
    }

    .mr-social-work-heading h3 {
        font-size: 24px;
    }

    .mr-social-slide {
        flex-basis: 82%;
    }

    .mr-social-carousel-controls button {
        width: 42px;
        height: 42px;
    }

}
/* =========================================================
   REZULTAT, NE SAMO MARKETING — FULL BLACK
   ========================================================= */

section#kako-radimo,
section#kako-radimo.section,
section#kako-radimo.alt-bg {
    background: #000 !important;
    background-color: #000 !important;
    background-image: none !important;
}


/* AKO POSTOJI PSEUDO BACKGROUND */

section#kako-radimo::before,
section#kako-radimo::after {
    background: transparent !important;
}


/* CEO CONTAINER OSTAJE NA CRNOJ */

#kako-radimo .container {
    background: transparent !important;
}


/* NASLOV */

#kako-radimo .section-heading h2 {
    color: #fff !important;
}


/* UVODNI TEKST */

#kako-radimo .section-heading p:not(.eyebrow) {
    color: #aeb6bc !important;
}


/* EYEBROW */

#kako-radimo .eyebrow {
    color: #67d1f5 !important;
}


/* GRID */

#kako-radimo .mr-outcomes {
    background: #10171b !important;
}


/* KARTICE */

#kako-radimo .mr-outcome {
    background: #10171b !important;
    border-color: #2a3339 !important;
}


/* BROJEVI */

#kako-radimo .mr-outcome-content > span {
    color: #0088cc !important;
}


/* NASLOVI KARTICA */

#kako-radimo .mr-outcome-content h3 {
    color: #fff !important;
}


/* OPISI */

#kako-radimo .mr-outcome-content p {
    color: #9fa9b0 !important;
}

/* =========================================================
   NAŠ RAD — FULL BLACK SECTION
   ========================================================= */

section#radovi,
section#radovi.section {
    background: #000 !important;
    background-color: #000 !important;
    background-image: none !important;
}

section#radovi::before,
section#radovi::after {
    background: transparent !important;
}

#radovi .container {
    background: transparent !important;
}


/* GLAVNI NASLOV */

#radovi .section-heading h2 {
    color: #fff !important;
}


/* UVODNI TEKST */

#radovi .section-heading > p:not(.eyebrow) {
    color: #aeb6bc !important;
}


/* STRONG U UVODU */

#radovi .section-heading strong {
    color: #fff;
}


/* EYEBROW */

#radovi .eyebrow {
    color: #67d1f5 !important;
}


/* =========================================================
   VIDEO KARTICE
   ========================================================= */

#radovi .mr-work {
    background: #10171b !important;
    border-color: #252d33 !important;
}

#radovi .mr-work-copy span {
    color: #0088cc !important;
}

#radovi .mr-work-copy h3 {
    color: #fff !important;
}

#radovi .mr-work-copy p {
    color: #9fa9b0 !important;
}


/* =========================================================
   SOCIAL CONTENT
   ========================================================= */

#radovi .mr-social-work {
    border-top-color: #252d33 !important;
}

#radovi .mr-social-work-heading span {
    color: #67d1f5 !important;
}

#radovi .mr-social-work-heading h3 {
    color: #fff !important;
}

#radovi .mr-social-work-heading p {
    color: #aeb6bc !important;
}

#radovi .mr-social-work-heading strong {
    color: #fff !important;
}


/* STRELICE CAROUSELA */

#radovi .mr-social-carousel-controls button {
    background: #10171b !important;
    border-color: #303a40 !important;
    color: #fff !important;
}

#radovi .mr-social-carousel-controls button:hover {
    background: #0088cc !important;
    border-color: #0088cc !important;
    color: #fff !important;
}


/* CAROUSEL SLIKE */

#radovi .mr-social-slide {
    background: #10171b !important;
}

/* =========================================================
   PRODUKCIJA.HTML
   Scope: #restaurant-production-page
   ========================================================= */


/* =========================================================
   GLOBALNO ZA PRODUKCIJSKU STRANICU
   ========================================================= */

#restaurant-production-page {
    overflow: hidden;
    background: #fff;
}

#restaurant-production-page .section {
    margin: 0;
    padding: 105px 0;
}

#restaurant-production-page .alt-bg {
    background: var(--mr-soft);
}

#restaurant-production-page .eyebrow {
    margin: 0 0 14px;
    color: var(--mr-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#restaurant-production-page .section-heading {
    margin-bottom: 52px;
}

#restaurant-production-page .section-heading.narrow {
    max-width: 830px;
}

#restaurant-production-page .section-heading h2,
#restaurant-production-page .mr-prod-feature-copy h2,
#restaurant-production-page .mr-prod-agency-grid h2 {
    margin: 0;
    color: var(--mr-text);
    font-size: clamp(38px, 4.5vw, 66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

#restaurant-production-page .section-heading > p:not(.eyebrow),
#restaurant-production-page .mr-prod-feature-copy > p:not(.eyebrow),
#restaurant-production-page .mr-prod-agency-grid > div:first-child > p:not(.eyebrow) {
    color: var(--mr-muted);
    font-size: 17px;
    line-height: 1.78;
}


/* =========================================================
   HERO
   ========================================================= */

#restaurant-production-page .mr-prod-hero {
    position: relative;
    min-height: 760px;
    height: 92vh;

    display: flex;
    align-items: center;

    padding-top: var(--mr-header-height);

    overflow: hidden;

    background: #10171d;
}

#restaurant-production-page .mr-prod-hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

#restaurant-production-page .mr-prod-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,12,16,.96) 0%,
            rgba(7,12,16,.88) 38%,
            rgba(7,12,16,.54) 68%,
            rgba(7,12,16,.30) 100%
        );
}

#restaurant-production-page .mr-prod-hero-content {
    position: relative;
    z-index: 2;

    padding: 90px 0 80px;
}

#restaurant-production-page .mr-prod-hero .eyebrow {
    color: #67d1f5;
}

#restaurant-production-page .mr-prod-hero h1 {
    max-width: 980px;

    margin: 0;

    color: #fff;

    font-size: clamp(55px, 7vw, 98px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.065em;
}

#restaurant-production-page .mr-prod-hero-content > p:not(.eyebrow) {
    max-width: 740px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.78);

    font-size: 18px;
    line-height: 1.75;
}

#restaurant-production-page .mr-prod-hero .mr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 36px;
}


/* =========================================================
   01 — HRANA / AMBIJENT / LJUDI / AKCIJA
   ========================================================= */

#restaurant-production-page .mr-prod-pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-production-page .mr-prod-pillars article {
    min-height: 320px;

    display: flex;
    flex-direction: column;

    padding: 31px 28px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-production-page .mr-prod-pillars article > span {
    color: var(--mr-blue);

    font-size: 11px;
    font-weight: 800;
}

#restaurant-production-page .mr-prod-pillars h3 {
    margin: auto 0 15px;

    color: var(--mr-text);

    font-size: 27px;
    line-height: 1.12;
}

#restaurant-production-page .mr-prod-pillars p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   REELS / SOCIAL VIDEO
   ========================================================= */

#restaurant-production-page .mr-prod-feature {
    color: #fff;
    background: #111a22;
}

#restaurant-production-page .mr-prod-feature-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;

    gap: 75px;

    align-items: center;
}

#restaurant-production-page .mr-prod-feature .eyebrow {
    color: #67d1f5;
}

#restaurant-production-page .mr-prod-feature-copy h2 {
    color: #fff;
}

#restaurant-production-page .mr-prod-feature-copy > p:not(.eyebrow) {
    color: rgba(255,255,255,.70);
}

#restaurant-production-page .mr-prod-feature .mr-check-list {
    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}

#restaurant-production-page .mr-prod-feature .mr-check-list li {
    position: relative;

    padding: 14px 0 14px 30px;

    border-bottom: 1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.80);

    font-size: 14px;
}

#restaurant-production-page .mr-prod-feature .mr-check-list li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #67d1f5;

    font-weight: 800;
}


/* VERTIKALNI REEL */

#restaurant-production-page .mr-prod-reel-frame {
    position: relative;

    width: min(100%, 490px);

    margin-left: auto;

    overflow: hidden;

    background: #080d11;

    box-shadow: 0 35px 80px rgba(0,0,0,.38);
}

#restaurant-production-page .mr-prod-reel-frame video {
    display: block;

    width: 100%;
    height: 680px;

    object-fit: cover;
}

#restaurant-production-page .mr-prod-reel-label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 55px 28px 26px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.90)
        );
}

#restaurant-production-page .mr-prod-reel-label span,
#restaurant-production-page .mr-prod-reel-label strong {
    display: block;
}

#restaurant-production-page .mr-prod-reel-label span {
    color: #67d1f5;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

#restaurant-production-page .mr-prod-reel-label strong {
    margin-top: 6px;

    color: #fff;

    font-size: 21px;
}


/* =========================================================
   KOMPLETNA PRODUKCIJA — 8 USLUGA
   ========================================================= */

#restaurant-production-page .mr-prod-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-production-page .mr-prod-services article {
    min-height: 290px;

    display: flex;
    flex-direction: column;

    padding: 29px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#restaurant-production-page .mr-prod-services article:hover {
    position: relative;
    z-index: 2;

    transform: translateY(-5px);

    box-shadow: var(--mr-shadow);
}

#restaurant-production-page .mr-prod-service-no {
    color: var(--mr-blue);

    font-size: 11px;
    font-weight: 800;
}

#restaurant-production-page .mr-prod-services h3 {
    margin: auto 0 12px;

    color: var(--mr-text);

    font-size: 22px;
    line-height: 1.18;
}

#restaurant-production-page .mr-prod-services p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   GALERIJA / FORMATI
   ========================================================= */

#restaurant-production-page .mr-prod-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    gap: 18px;
}

#restaurant-production-page .mr-prod-gallery figure {
    margin: 0;
}

#restaurant-production-page .mr-prod-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
}

#restaurant-production-page .mr-prod-placeholder {
    min-height: 270px;

    display: grid;
    place-items: center;

    padding: 20px;

    color: rgba(255,255,255,.48);

    background:
        linear-gradient(
            145deg,
            #2b3842,
            #10171d
        );

    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

#restaurant-production-page .mr-prod-gallery-large .mr-prod-placeholder {
    min-height: 580px;
}

#restaurant-production-page .mr-prod-gallery figcaption {
    padding: 12px 3px 0;

    color: var(--mr-muted);

    font-size: 12px;
}


/* =========================================================
   PROCESS — CRNA SEKCIJA
   ========================================================= */

#restaurant-production-page .mr-prod-process {
    color: #fff;
    background: #0f171d;
}

#restaurant-production-page .mr-prod-process .eyebrow {
    color: #67d1f5;
}

#restaurant-production-page .section-heading-light h2 {
    color: #fff;
}

#restaurant-production-page .section-heading-light > p:not(.eyebrow) {
    color: rgba(255,255,255,.68);
}

#restaurant-production-page .mr-prod-process-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));

    margin: 0;
    padding: 0;

    border-top: 1px solid rgba(255,255,255,.13);
    border-left: 1px solid rgba(255,255,255,.13);

    list-style: none;
}

#restaurant-production-page .mr-prod-process-list li {
    min-height: 315px;

    display: flex;
    flex-direction: column;

    padding: 28px 25px;

    border-right: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.13);
}

#restaurant-production-page .mr-prod-process-list li > span {
    color: #67d1f5;

    font-size: 11px;
    font-weight: 800;
}

#restaurant-production-page .mr-prod-process-list strong {
    margin-top: auto;

    color: #fff;

    font-size: 19px;
    line-height: 1.2;
}

#restaurant-production-page .mr-prod-process-list p {
    margin: 12px 0 0;

    color: rgba(255,255,255,.62);

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   VIŠE OD PRODUKCIJE
   ========================================================= */

#restaurant-production-page .mr-prod-agency-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;

    gap: 80px;

    align-items: start;
}

#restaurant-production-page .mr-prod-agency-grid h2 {
    max-width: 570px;
}

#restaurant-production-page .mr-prod-agency-grid > div:first-child > p:not(.eyebrow) {
    margin-top: 25px;
}

#restaurant-production-page .mr-prod-agency-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-production-page .mr-prod-agency-points article {
    min-height: 225px;

    padding: 28px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-production-page .mr-prod-agency-points strong {
    color: var(--mr-text);

    font-size: 20px;
}

#restaurant-production-page .mr-prod-agency-points p {
    margin: 15px 0 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

#restaurant-production-page .mr-final-cta {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    color: #fff;

    background: #111a22;
}

#restaurant-production-page .mr-final-bg {
    position: absolute;
    inset: 0;

    opacity: .34;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(0,169,239,.65),
            transparent 35%
        ),
        linear-gradient(
            125deg,
            #10171d,
            #26333d
        );
}

#restaurant-production-page .mr-final-inner {
    position: relative;
    z-index: 2;

    max-width: 900px;

    text-align: center;
}

#restaurant-production-page .mr-final-cta .eyebrow {
    color: #67d1f5;
}

#restaurant-production-page .mr-final-cta h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(42px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.05em;
}

#restaurant-production-page .mr-final-cta p {
    max-width: 720px;

    margin: 25px auto 34px;

    color: rgba(255,255,255,.76);

    font-size: 17px;
    line-height: 1.75;
}

#restaurant-production-page .mr-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    #restaurant-production-page .mr-prod-pillars,
    #restaurant-production-page .mr-prod-services {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #restaurant-production-page .mr-prod-feature-grid,
    #restaurant-production-page .mr-prod-agency-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    #restaurant-production-page .mr-prod-process-list {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    #restaurant-production-page .mr-prod-gallery {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE / TABLET PORTRAIT
   ========================================================= */

@media (max-width: 760px) {

    #restaurant-production-page .section {
        padding: 75px 0;
    }

    #restaurant-production-page .section-heading {
        margin-bottom: 38px;
    }

    #restaurant-production-page .section-heading h2,
    #restaurant-production-page .mr-prod-feature-copy h2,
    #restaurant-production-page .mr-prod-agency-grid h2 {
        font-size: 39px;
    }


    /* HERO */

    #restaurant-production-page .mr-prod-hero {
        min-height: 720px;
        height: auto;

        align-items: flex-end;
    }

    #restaurant-production-page .mr-prod-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,12,16,.97) 0%,
                rgba(7,12,16,.83) 58%,
                rgba(7,12,16,.42) 100%
            );
    }

    #restaurant-production-page .mr-prod-hero-content {
        padding: 150px 0 75px;
    }

    #restaurant-production-page .mr-prod-hero h1 {
        font-size: clamp(48px, 13vw, 70px);
    }

    #restaurant-production-page .mr-prod-hero-content > p:not(.eyebrow) {
        font-size: 16px;
    }


    /* PILLARS */

    #restaurant-production-page .mr-prod-pillars {
        grid-template-columns: 1fr;
    }

    #restaurant-production-page .mr-prod-pillars article {
        min-height: 220px;
    }


    /* FEATURE */

    #restaurant-production-page .mr-prod-feature-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    #restaurant-production-page .mr-prod-reel-frame {
        width: 100%;
        margin: 0;
    }

    #restaurant-production-page .mr-prod-reel-frame video {
        height: auto;
        aspect-ratio: 9 / 16;
    }


    /* SERVICES */

    #restaurant-production-page .mr-prod-services {
        grid-template-columns: 1fr;
    }

    #restaurant-production-page .mr-prod-services article {
        min-height: 230px;
    }


    /* GALLERY */

    #restaurant-production-page .mr-prod-gallery {
        grid-template-columns: 1fr;
    }

    #restaurant-production-page .mr-prod-gallery-large {
        grid-column: auto;
        grid-row: auto;
    }

    #restaurant-production-page .mr-prod-gallery-large .mr-prod-placeholder,
    #restaurant-production-page .mr-prod-placeholder {
        min-height: 300px;
    }


    /* PROCESS */

    #restaurant-production-page .mr-prod-process-list {
        grid-template-columns: 1fr;
    }

    #restaurant-production-page .mr-prod-process-list li {
        min-height: 215px;
    }


    /* AGENCY */

    #restaurant-production-page .mr-prod-agency-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    #restaurant-production-page .mr-prod-agency-points {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #restaurant-production-page .section {
        padding: 65px 0;
    }

    #restaurant-production-page .section-heading h2,
    #restaurant-production-page .mr-prod-feature-copy h2,
    #restaurant-production-page .mr-prod-agency-grid h2 {
        font-size: 34px;
    }

    #restaurant-production-page .mr-prod-hero h1 {
        font-size: 47px;
    }

    #restaurant-production-page .mr-prod-pillars article,
    #restaurant-production-page .mr-prod-services article,
    #restaurant-production-page .mr-prod-agency-points article {
        padding: 25px 22px;
    }

    #restaurant-production-page .mr-final-cta {
        padding: 85px 0;
    }

    #restaurant-production-page .mr-final-cta h2 {
        font-size: 39px;
    }

}

/* =========================================================
   PRODUKCIJA — PILLAR IKONICE
   ========================================================= */

#restaurant-production-page .mr-prod-pillar-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 42px 0 26px;

    background: #0088cc;
}

#restaurant-production-page .mr-prod-pillar-icon svg {
    width: 28px;
    height: 28px;

    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* posto sada imamo ikonicu, naslov vise ne guramo sa auto */
#restaurant-production-page .mr-prod-pillars h3 {
    margin: auto 0 15px;
}


/* YouTube Shorts — produkcija */

#restaurant-production-page .mr-prod-reel-youtube {
    position: relative;
    width: min(100%, 490px);
    margin-left: auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #080d11;
    box-shadow: 0 35px 80px rgba(0,0,0,.38);
}

#restaurant-production-page .mr-prod-reel-youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* label ne sme da blokira klik na YouTube */
#restaurant-production-page .mr-prod-reel-youtube .mr-prod-reel-label {
    pointer-events: none;
}

@media (max-width: 760px) {

    #restaurant-production-page .mr-prod-reel-youtube {
        width: 100%;
        max-width: 490px;
        margin: 0 auto;
    }

}

/* =========================================================
   PRODUKCIJA — PROCESS KARTICE SA FOTOGRAFIJAMA
   ========================================================= */

#restaurant-production-page .mr-prod-process-list li {
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* FOTOGRAFIJA */

#restaurant-production-page .mr-prod-process-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #080d11;
}

#restaurant-production-page .mr-prod-process-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transition: transform .45s ease;
}

#restaurant-production-page .mr-prod-process-list li:hover .mr-prod-process-image img {
    transform: scale(1.04);
}


/* TEKST ISPOD FOTOGRAFIJE */

#restaurant-production-page .mr-prod-process-content {
    min-height: 245px;

    display: flex;
    flex-direction: column;

    padding: 25px 24px 27px;
}

#restaurant-production-page .mr-prod-process-content > span {
    color: #67d1f5;
    font-size: 11px;
    font-weight: 800;
}

#restaurant-production-page .mr-prod-process-content strong {
    margin-top: auto;

    color: #fff;

    font-size: 19px;
    line-height: 1.2;
}

#restaurant-production-page .mr-prod-process-content p {
    margin: 12px 0 0;

    color: rgba(255,255,255,.62);

    font-size: 13px;
    line-height: 1.65;
}


/* MOBILE */

@media (max-width: 760px) {

    #restaurant-production-page .mr-prod-process-image {
        aspect-ratio: 16 / 10;
    }

    #restaurant-production-page .mr-prod-process-content {
        min-height: 200px;
        padding: 24px 22px 26px;
    }

}

/* =========================================================
   PRODUKCIJA — GALLERY FOTOGRAFIJE
   ========================================================= */

#restaurant-production-page .mr-prod-gallery-image {
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #111;
}

#restaurant-production-page .mr-prod-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .5s ease;
}

/* Velika leva fotografija */
#restaurant-production-page .mr-prod-gallery-large .mr-prod-gallery-image {
    height: 580px;
}

/* Suptilan hover */
#restaurant-production-page .mr-prod-gallery figure:hover .mr-prod-gallery-image img {
    transform: scale(1.035);
}

#restaurant-production-page .mr-prod-gallery figcaption {
    padding: 12px 3px 0;

    color: var(--mr-muted);

    font-size: 12px;
    font-weight: 600;
}


/* TABLET */

@media (max-width: 1050px) {

    #restaurant-production-page .mr-prod-gallery-large .mr-prod-gallery-image {
        height: 558px;
    }

}


/* MOBILE */

@media (max-width: 760px) {

    #restaurant-production-page .mr-prod-gallery-image,
    #restaurant-production-page .mr-prod-gallery-large .mr-prod-gallery-image {
        height: auto;
        aspect-ratio: 16 / 10;
    }

}

/* =========================================================
   O NAMA
   Scope: #restaurant-about-page
   ========================================================= */

#restaurant-about-page {
    overflow: hidden;
    background: #fff;
}

#restaurant-about-page .section {
    margin: 0;
    padding: 105px 0;
}

#restaurant-about-page .eyebrow {
    margin: 0 0 14px;
    color: var(--mr-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

#restaurant-about-page .mr-about-hero {
    padding: 150px 0 90px;
    background: #f4f6f7;
}

#restaurant-about-page .mr-about-hero-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 75px;
    align-items: center;
}

#restaurant-about-page .mr-about-hero h1 {
    max-width: 720px;
    margin: 0;

    color: var(--mr-text);

    font-size: clamp(52px, 6vw, 86px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.06em;
}

#restaurant-about-page .mr-about-hero-lead {
    max-width: 650px;

    margin: 28px 0 0;

    color: var(--mr-muted);

    font-size: 18px;
    line-height: 1.75;
}

#restaurant-about-page .mr-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 35px;
}

#restaurant-about-page .mr-about-hero-image {
    position: relative;
    overflow: hidden;

    background: #111;
}

#restaurant-about-page .mr-about-hero-image img {
    display: block;

    width: 100%;
    height: 620px;

    object-fit: cover;
    object-position: center;
}

#restaurant-about-page .mr-about-image-label {
    position: absolute;

    right: 0;
    bottom: 0;

    min-width: 210px;

    padding: 20px 24px;

    color: #fff;
    background: #0088cc;
}

#restaurant-about-page .mr-about-image-label span,
#restaurant-about-page .mr-about-image-label strong {
    display: block;
}

#restaurant-about-page .mr-about-image-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

#restaurant-about-page .mr-about-image-label strong {
    margin-top: 5px;
    font-size: 20px;
}


/* =========================================================
   STATS
   ========================================================= */

#restaurant-about-page .mr-about-stats {
    background: #10171d;
}

#restaurant-about-page .mr-about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    border-left: 1px solid rgba(255,255,255,.12);
}

#restaurant-about-page .mr-about-stats article {
    min-height: 185px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 28px;

    border-right: 1px solid rgba(255,255,255,.12);
}

#restaurant-about-page .mr-about-stats strong {
    color: #fff;

    font-size: clamp(30px, 3vw, 48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

#restaurant-about-page .mr-about-stats span {
    margin-top: 12px;

    color: rgba(255,255,255,.60);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   CUSTOMER JOURNEY UVOD
   ========================================================= */

#restaurant-about-page .mr-about-intro-grid,
#restaurant-about-page .mr-about-philosophy {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 90px;
}

#restaurant-about-page .mr-about-intro-grid h2,
#restaurant-about-page .mr-about-philosophy h2 {
    max-width: 680px;

    margin: 0;

    color: var(--mr-text);

    font-size: clamp(38px,4.5vw,64px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.05em;
}

#restaurant-about-page .mr-about-intro-copy,
#restaurant-about-page .mr-about-philosophy-copy {
    padding-top: 28px;
}

#restaurant-about-page .mr-about-intro-copy p,
#restaurant-about-page .mr-about-philosophy-copy p {
    margin: 0 0 22px;

    color: var(--mr-muted);

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   DARK / EQUIPMENT
   ========================================================= */

#restaurant-about-page .mr-about-dark {
    color: #fff;
    background: #10171d;
}

#restaurant-about-page .mr-about-dark .section-heading {
    margin-bottom: 55px;
}

#restaurant-about-page .mr-about-dark .eyebrow {
    color: #67d1f5;
}

#restaurant-about-page .mr-about-dark .section-heading h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(40px,5vw,68px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.05em;
}

#restaurant-about-page .mr-about-dark .section-heading > p:not(.eyebrow) {
    max-width: 780px;

    color: rgba(255,255,255,.65);

    font-size: 16px;
    line-height: 1.75;
}


/* EQUIPMENT GRID */

#restaurant-about-page .mr-about-equipment {
    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    border-top: 1px solid rgba(255,255,255,.13);
    border-left: 1px solid rgba(255,255,255,.13);
}

#restaurant-about-page .mr-about-equipment article {
    min-height: 270px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    border-right: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.13);
}

#restaurant-about-page .mr-about-equipment article > span {
    color: #67d1f5;

    font-size: 11px;
    font-weight: 800;
}

#restaurant-about-page .mr-about-equipment strong {
    margin-top: auto;

    color: #fff;

    font-size: 23px;
    line-height: 1.2;
}

#restaurant-about-page .mr-about-equipment p {
    margin: 13px 0 0;

    color: rgba(255,255,255,.60);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    #restaurant-about-page .mr-about-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    #restaurant-about-page .mr-about-stats-grid {
        grid-template-columns: repeat(2,1fr);
    }

    #restaurant-about-page .mr-about-equipment {
        grid-template-columns: repeat(2,1fr);
    }

    #restaurant-about-page .mr-about-intro-grid,
    #restaurant-about-page .mr-about-philosophy {
        gap: 55px;
    }

}


@media (max-width: 760px) {

    #restaurant-about-page .section {
        padding: 75px 0;
    }

    #restaurant-about-page .mr-about-hero {
        padding: 125px 0 65px;
    }

    #restaurant-about-page .mr-about-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    #restaurant-about-page .mr-about-hero h1 {
        font-size: 48px;
    }

    #restaurant-about-page .mr-about-hero-image img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    #restaurant-about-page .mr-about-stats-grid {
        grid-template-columns: 1fr;
    }

    #restaurant-about-page .mr-about-stats article {
        min-height: 145px;
    }

    #restaurant-about-page .mr-about-intro-grid,
    #restaurant-about-page .mr-about-philosophy {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #restaurant-about-page .mr-about-intro-grid h2,
    #restaurant-about-page .mr-about-philosophy h2 {
        font-size: 39px;
    }

    #restaurant-about-page .mr-about-intro-copy,
    #restaurant-about-page .mr-about-philosophy-copy {
        padding-top: 0;
    }

    #restaurant-about-page .mr-about-equipment {
        grid-template-columns: 1fr;
    }

    #restaurant-about-page .mr-about-equipment article {
        min-height: 220px;
    }

}

/* =========================================================
   NAS RAD
   Scope: #restaurant-work-page
   ========================================================= */

#restaurant-work-page {
    overflow: hidden;
}

#restaurant-work-page .section {
    margin: 0;
    padding: 115px 0;
}

#restaurant-work-page .eyebrow {
    margin: 0 0 15px;

    color: var(--mr-blue);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

#restaurant-work-page .mr-work-hero {
    padding: 190px 0 120px;

    color: #fff;
    background: #0e161c;
}

#restaurant-work-page .mr-work-hero-inner {
    max-width: 1180px;
}

#restaurant-work-page .mr-work-hero .eyebrow {
    color: #67d1f5;
}

#restaurant-work-page .mr-work-hero h1 {
    max-width: 1100px;

    margin: 0;

    color: #fff;

    font-size: clamp(58px, 7.5vw, 108px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.07em;
}

#restaurant-work-page .mr-work-hero-lead {
    max-width: 800px;

    margin: 32px 0 0;

    color: rgba(255,255,255,.68);

    font-size: 19px;
    line-height: 1.75;
}

#restaurant-work-page .mr-work-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 45px;
}

#restaurant-work-page .mr-work-hero-tags span {
    padding: 9px 13px;

    border: 1px solid rgba(255,255,255,.18);

    color: rgba(255,255,255,.70);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}


/* =========================================================
   LIGHT / DARK SECTIONS
   ========================================================= */

#restaurant-work-page .mr-work-light {
    color: var(--mr-text);
    background: #fff;
}

#restaurant-work-page .mr-work-dark {
    color: #fff;
    background: #10171d;
}

#restaurant-work-page .mr-work-split {
    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 75px;

    align-items: center;
}

#restaurant-work-page .mr-work-split-reverse {
    grid-template-columns: 1.18fr .82fr;
}


/* COPY */

#restaurant-work-page .mr-work-copy h2 {
    margin: 0;

    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.01;
    letter-spacing: -.055em;
}

#restaurant-work-page .mr-work-light .mr-work-copy h2 {
    color: var(--mr-text);
}

#restaurant-work-page .mr-work-dark .mr-work-copy h2 {
    color: #fff;
}

#restaurant-work-page .mr-work-dark .eyebrow {
    color: #67d1f5;
}

#restaurant-work-page .mr-work-copy > p:not(.eyebrow) {
    max-width: 700px;

    margin: 21px 0 0;

    font-size: 15px;
    line-height: 1.78;
}

#restaurant-work-page .mr-work-light .mr-work-copy > p:not(.eyebrow) {
    color: var(--mr-muted);
}

#restaurant-work-page .mr-work-dark .mr-work-copy > p:not(.eyebrow) {
    color: rgba(255,255,255,.62);
}

#restaurant-work-page .mr-work-copy .mr-work-lead {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.65 !important;
}

#restaurant-work-page .mr-work-light .mr-work-lead {
    color: var(--mr-text) !important;
}

#restaurant-work-page .mr-work-dark .mr-work-lead {
    color: rgba(255,255,255,.88) !important;
}


/* =========================================================
   2 SHORTS
   ========================================================= */

#restaurant-work-page .mr-work-videos {
    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px;

    align-items: start;
}

#restaurant-work-page .mr-work-short {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #05090c;
}

#restaurant-work-page .mr-work-short:nth-child(2) {
    margin-top: 65px;
}

#restaurant-work-page .mr-work-short iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   MENI / FOTOGRAFIJE
   ========================================================= */

#restaurant-work-page .mr-work-images {
    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px;
}

#restaurant-work-page .mr-work-images figure {
    margin: 0;
}

#restaurant-work-page .mr-work-images figure:nth-child(2) {
    margin-top: 65px;
}

#restaurant-work-page .mr-work-images img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;
    object-position: center;
}

#restaurant-work-page .mr-work-images figcaption {
    padding: 12px 2px 0;

    color: rgba(255,255,255,.52);

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   SUMMARY - BELA
   ========================================================= */

#restaurant-work-page .mr-work-summary {
    background: #f3f5f6;
}

#restaurant-work-page .mr-work-summary-grid {
    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 90px;
}

#restaurant-work-page .mr-work-summary h2 {
    max-width: 700px;

    margin: 0;

    color: var(--mr-text);

    font-size: clamp(42px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.05em;
}

#restaurant-work-page .mr-work-summary-grid > div:last-child {
    padding-top: 28px;
}

#restaurant-work-page .mr-work-summary-grid > div:last-child p {
    margin: 0 0 22px;

    color: var(--mr-muted);

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   CTA
   ========================================================= */

#restaurant-work-page .mr-final-cta {
    background: #0e161c;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    #restaurant-work-page .mr-work-split,
    #restaurant-work-page .mr-work-split-reverse {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    #restaurant-work-page .mr-work-images img {
        height: 450px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    #restaurant-work-page .section {
        padding: 80px 0;
    }

    #restaurant-work-page .mr-work-hero {
        padding: 145px 0 80px;
    }

    #restaurant-work-page .mr-work-hero h1 {
        font-size: 53px;
    }

    #restaurant-work-page .mr-work-split,
    #restaurant-work-page .mr-work-split-reverse {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    #restaurant-work-page .mr-work-copy h2 {
        font-size: 40px;
    }

    #restaurant-work-page .mr-work-videos {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    #restaurant-work-page .mr-work-short:nth-child(2) {
        margin-top: 35px;
    }

    #restaurant-work-page .mr-work-images {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #restaurant-work-page .mr-work-images figure:nth-child(2) {
        margin-top: 35px;
    }

    #restaurant-work-page .mr-work-images img {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    #restaurant-work-page .mr-work-summary-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #restaurant-work-page .mr-work-summary-grid > div:last-child {
        padding-top: 0;
    }

}

/* =========================================
   GOOGLE ADS - PRODAJNE STRANICE
========================================= */

.mr-gads-landing {
    background: #f4f6f7;
}

.mr-gads-landing-grid {
    display: grid;
    grid-template-columns: 1.08fr .72fr;
    gap: 90px;
    align-items: center;
}

.mr-gads-landing-copy h2 {
    max-width: 760px;
    margin: 12px 0 25px;
    font-size: clamp(42px, 4.5vw, 70px);
    line-height: .98;
    letter-spacing: -2.5px;
}

.mr-gads-landing-copy > p {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.75;
}

.mr-gads-landing-lead {
    font-size: 21px !important;
    line-height: 1.55 !important;
    color: #26323b;
}

.mr-gads-production-box {
    margin-top: 38px;
    padding: 30px 32px;
    background: #fff;
    border-left: 4px solid #0088cc;
}

.mr-gads-production-box > span {
    display: block;
    margin-bottom: 10px;
    color: #0088cc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mr-gads-production-box h3 {
    margin: 0 0 12px;
    font-size: 23px;
    line-height: 1.2;
}

.mr-gads-production-box p {
    margin: 0;
    line-height: 1.7;
}


/* REEL */

.mr-gads-landing-media {
    max-width: 430px;
    width: 100%;
    margin-left: auto;
}

.mr-gads-landing-reel {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #111;
}

.mr-gads-landing-reel iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mr-gads-landing-caption {
    padding: 22px 24px;
    background: #10171d;
    color: #fff;
}

.mr-gads-landing-caption span {
    display: block;
    margin-bottom: 7px;
    color: #0088cc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.mr-gads-landing-caption strong {
    display: block;
    font-size: 17px;
    line-height: 1.4;
}


/* FLOW */

.mr-gads-landing-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 85px;
    border: 1px solid #d9dfe3;
    background: #fff;
}

.mr-gads-landing-flow > div {
    min-height: 220px;
    padding: 32px 28px;
    border-right: 1px solid #d9dfe3;
}

.mr-gads-landing-flow > div:last-child {
    border-right: 0;
}

.mr-gads-landing-flow span {
    display: block;
    margin-bottom: 42px;
    color: #0088cc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mr-gads-landing-flow strong {
    display: block;
    margin-bottom: 10px;
    color: #202b34;
    font-size: 20px;
}

.mr-gads-landing-flow p {
    margin: 0;
    color: #68747d;
    font-size: 14px;
    line-height: 1.6;
}


@media (max-width: 950px) {

    .mr-gads-landing-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mr-gads-landing-media {
        margin: 0 auto;
    }

    .mr-gads-landing-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .mr-gads-landing-flow > div:nth-child(2) {
        border-right: 0;
    }

    .mr-gads-landing-flow > div:nth-child(-n+2) {
        border-bottom: 1px solid #d9dfe3;
    }
}


@media (max-width: 600px) {

    .mr-gads-landing-copy h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .mr-gads-landing-lead {
        font-size: 18px !important;
    }

    .mr-gads-production-box {
        padding: 25px 22px;
    }

    .mr-gads-landing-media {
        max-width: 360px;
    }

    .mr-gads-landing-flow {
        grid-template-columns: 1fr;
    }

    .mr-gads-landing-flow > div {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #d9dfe3;
    }

    .mr-gads-landing-flow > div:last-child {
        border-bottom: 0;
    }

    .mr-gads-landing-flow span {
        margin-bottom: 25px;
    }
}
/* Google Ads - process icons */

.mr-gads-process-icon {
    width: 58px;
    height: 58px;
    margin: 20px 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0088cc;
}

.mr-gads-process-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mr-gads-intent-image {
    width: 100%;
    margin: 22px 0 20px;
    overflow: hidden;
}

.mr-gads-intent-image img {
    display: block;
    width: 100%;
     
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-gads-intent-grid article:hover .mr-gads-intent-image img {
    transform: scale(1.035);
}

.mr-gads-intent-grid article > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

/* Google Ads - use case fotografije */

.mr-gads-usecase-image {
    width: 100%;
    margin: 22px 0 24px;
    overflow: hidden;
}

.mr-gads-usecase-image img {
    display: block;
    width: 100%;
    
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-gads-usecases article:hover .mr-gads-usecase-image img {
    transform: scale(1.035);
}

/* =========================================
   GOOGLE ADS - PROCESS + REEL
========================================= */

.mr-gads-process-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 70px;
    align-items: start;
}

.mr-gads-process-main {
    min-width: 0;
}

.mr-gads-process-main .section-heading {
    margin-left: 0;
}


/* DESNI REEL */

.mr-gads-process-video {
    width: 100%;
    position: sticky;
    top: 120px;
}

.mr-gads-process-reel {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #10171d;
}

.mr-gads-process-reel iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mr-gads-process-video-caption {
    padding: 24px 25px 26px;
    background: #10171d;
    color: #fff;
}

.mr-gads-process-video-caption span {
    display: block;
    margin-bottom: 9px;
    color: #0088cc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.mr-gads-process-video-caption strong {
    display: block;
    font-size: 17px;
    line-height: 1.45;
}


/* Kada je proces u levoj koloni */
.mr-gads-process-layout .mr-gads-process {
    width: 100%;
}


/* TABLET */

@media (max-width: 1050px) {

    .mr-gads-process-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 40px;
    }

    .mr-gads-process-video {
        top: 100px;
    }
}


/* MOBILE */

@media (max-width: 800px) {

    .mr-gads-process-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mr-gads-process-video {
        position: static;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* =========================================
   META ADS - 3 VERTICAL SHORTS
========================================= */

.mr-gads-intent-reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mr-gads-intent-reels article {
    min-height: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

/* BROJ + NASLOV */

.mr-gads-intent-top {
    margin-bottom: 24px;
}

.mr-gads-intent-top span {
    display: block;
    margin-bottom: 55px;
    color: #0088cc;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.mr-gads-intent-reels .mr-gads-intent-top h3 {
    margin: 0;
    color: var(--mr-text);
    font-size: 27px;
    line-height: 1.12;
}


/* PRAVI SHORTS 9:16 */

.mr-gads-intent-reel {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    margin: 0;
    overflow: hidden;
    background: #10171d;
}

.mr-gads-intent-reel iframe {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    border: 0;
}


/* TEKST ISPOD */

.mr-gads-intent-reels article > p {
    margin: 22px 0 0;
    color: var(--mr-muted);
    font-size: 14px;
    line-height: 1.7;
}


/* TABLET */

@media (max-width: 900px) {

    .mr-gads-intent-reels {
        grid-template-columns: 1fr;
    }

    .mr-gads-intent-reels article {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .mr-gads-intent-top span {
        margin-bottom: 30px;
    }
}

/* META ADS - SYSTEM PHOTOS */

.mr-meta-system .mr-gads-system-step {
    min-height: 0;
    padding: 26px;
}

.mr-meta-system .mr-gads-system-step > strong {
    display: block;
    margin: 35px 0 20px;
    font-size: 21px;
}

.mr-meta-system-image {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

.mr-meta-system-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-meta-system .mr-gads-system-step:hover .mr-meta-system-image img {
    transform: scale(1.035);
}

.mr-meta-system .mr-gads-system-step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 900px) {

    .mr-meta-system-image img {
        aspect-ratio: 16 / 10;
    }

}

.mr-gads-process-icon {
    width: 58px;
    height: 58px;
    margin: 20px 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0088cc;
}

.mr-gads-process-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   DRUŠTVENE MREŽE ZA RESTORANE
   ========================================================= */

#restaurant-social-page {
    overflow: hidden;
}

#restaurant-social-page .section {
    margin: 0;
    padding: 105px 0;
}

#restaurant-social-page .alt-bg {
    background: var(--mr-soft);
}

#restaurant-social-page .eyebrow {
    margin: 0 0 14px;
    color: var(--mr-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Glavni naslovi sekcija */

#restaurant-social-page .section-heading {
    margin-bottom: 58px;
}

#restaurant-social-page .section-heading.narrow {
    max-width: 900px;
}

#restaurant-social-page .section-heading h2 {
    margin: 0 0 20px;
    color: var(--mr-text);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.045em;
}

#restaurant-social-page .section-heading > p:not(.eyebrow) {
    max-width: 780px;
    margin: 0;
    color: var(--mr-muted);
    font-size: 17px;
    line-height: 1.75;
}


/* Mobilni */

@media (max-width: 700px) {

    #restaurant-social-page .section {
        padding: 78px 0;
    }

    #restaurant-social-page .section-heading {
        margin-bottom: 42px;
    }

    #restaurant-social-page .section-heading h2 {
        font-size: 40px;
        line-height: 1.04;
    }

    #restaurant-social-page .section-heading > p:not(.eyebrow) {
        font-size: 15px;
    }
}

/* =========================================================
   DRUŠTVENE MREŽE ZA RESTORANE — NOVA STRANICA
   ========================================================= */

#restaurant-social-new-page {
    overflow: hidden;
    background: #fff;
}

#restaurant-social-new-page *,
#restaurant-social-new-page *::before,
#restaurant-social-new-page *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   COMMON
--------------------------------------------------------- */

#restaurant-social-new-page .mrs-section {
    margin: 0;
    padding: 115px 0;
}

#restaurant-social-new-page .mrs-light {
    background: #fff;
}

#restaurant-social-new-page .mrs-dark {
    color: #fff;
    background: #10171d;
}

#restaurant-social-new-page .mrs-eyebrow {
    margin: 0 0 16px;
    color: #0088cc;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#restaurant-social-new-page .mrs-dark .mrs-eyebrow,
#restaurant-social-new-page .mrs-team-section .mrs-eyebrow,
#restaurant-social-new-page .mrs-final-cta .mrs-eyebrow,
#restaurant-social-new-page .mrs-social-hero .mrs-eyebrow {
    color: #61c9f0;
}


/* =========================================================
   HERO
========================================================= */

.mrs-social-hero {
    position: relative;
    padding: 180px 0 110px;
    color: #fff;
    background:
        radial-gradient(
            circle at 77% 34%,
            rgba(0, 136, 204, .20),
            transparent 30%
        ),
        #0d151b;
}

.mrs-social-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .63fr);
    gap: 90px;
    align-items: center;
}

.mrs-social-hero-copy h1 {
    max-width: 850px;
    margin: 0;
    color: #fff;
    font-size: clamp(60px, 6.7vw, 100px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.06em;
}

.mrs-social-hero-lead {
    max-width: 760px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    line-height: 1.75;
}

.mrs-social-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.mrs-social-hero-media {
    width: 100%;
    max-width: 410px;
    margin-left: auto;
}

.mrs-video-label {
    margin: 0 0 13px;
    color: #0088cc;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mrs-social-hero .mrs-video-label {
    color: #61c9f0;
}

.mrs-short-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
}

.mrs-short-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mrs-video-meta {
    padding: 18px 0 0;
    color: rgba(255, 255, 255, .43);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .13em;
}


/* =========================================================
   OVERVIEW
========================================================= */

.mrs-overview-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 100px;
    align-items: start;
}

.mrs-overview-grid h2 {
    max-width: 720px;
    margin: 0;
    color: #222e37;
    font-size: clamp(47px, 5vw, 76px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.05em;
}

.mrs-overview-copy {
    max-width: 760px;
    padding-top: 28px;
}

.mrs-overview-copy p {
    margin: 0 0 25px;
    color: #5d6972;
    font-size: 17px;
    line-height: 1.85;
}

.mrs-overview-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 80px;
    border-top: 1px solid #dce3e7;
    border-left: 1px solid #dce3e7;
}

.mrs-overview-strip span {
    min-height: 85px;
    display: flex;
    align-items: center;
    padding: 20px;
    border-right: 1px solid #dce3e7;
    border-bottom: 1px solid #dce3e7;
    color: #27333c;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   FOOD APPROACH
========================================================= */

.mrs-food-heading {
    max-width: 1000px;
}

.mrs-food-heading h2 {
    max-width: 960px;
    margin: 0;
    color: #fff;
    font-size: clamp(50px, 5.6vw, 82px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.055em;
}

.mrs-food-heading > p:not(.mrs-eyebrow) {
    max-width: 740px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, .64);
    font-size: 17px;
    line-height: 1.8;
}

.mrs-food-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 75px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.mrs-food-grid article {
    min-height: 290px;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.mrs-food-grid article > span {
    color: #61c9f0;
    font-size: 11px;
}

.mrs-food-grid strong {
    display: block;
    margin-top: 85px;
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
}

.mrs-food-grid p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   PRODUCTION
========================================================= */

.mrs-production-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .58fr);
    gap: 100px;
    align-items: center;
}

.mrs-production-copy h2 {
    max-width: 790px;
    margin: 0;
    color: #222e37;
    font-size: clamp(48px, 5.2vw, 78px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}

.mrs-production-copy > p:not(.mrs-eyebrow) {
    max-width: 740px;
    margin: 21px 0 0;
    color: #5f6b74;
    font-size: 16px;
    line-height: 1.8;
}

.mrs-production-copy .mrs-production-lead {
    margin-top: 30px !important;
    color: #2d3942 !important;
    font-size: 20px !important;
    line-height: 1.65 !important;
}

.mrs-production-media {
    max-width: 410px;
    width: 100%;
    margin-left: auto;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.mrs-section-heading {
    max-width: 980px;
}

.mrs-section-heading h2 {
    max-width: 920px;
    margin: 0;
    color: #fff;
    font-size: clamp(50px, 5.5vw, 82px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.055em;
}

.mrs-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 75px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.mrs-service-grid article {
    min-height: 300px;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    transition: background .25s ease;
}

.mrs-service-grid article:hover {
    background: rgba(255, 255, 255, .035);
}

.mrs-service-grid article > span {
    color: #61c9f0;
    font-size: 10px;
    font-weight: 800;
}

.mrs-service-grid h3 {
    margin: 85px 0 13px;
    color: #fff;
    font-size: 23px;
    line-height: 1.18;
}

.mrs-service-grid p {
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   CAROUSEL
========================================================= */

.mrs-carousel-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 80px;
    align-items: end;
}

.mrs-carousel-heading h2 {
    max-width: 800px;
    margin: 0;
    color: #222e37;
    font-size: clamp(48px, 5.3vw, 78px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}

.mrs-carousel-heading > p {
    max-width: 600px;
    margin: 0 0 8px;
    color: #606c75;
    font-size: 16px;
    line-height: 1.8;
}

.mrs-carousel-wrap {
    position: relative;
    margin-top: 65px;
}

.mrs-photo-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mrs-photo-carousel::-webkit-scrollbar {
    display: none;
}

.mrs-photo-carousel figure {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    overflow: hidden;
}

.mrs-photo-carousel img {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    transition: transform .45s ease;
}

.mrs-photo-carousel figure:hover img {
    transform: scale(1.035);
}

.mrs-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    background: #10171d;
    font-size: 22px;
    cursor: pointer;
    transform: translateY(-50%);
}

.mrs-carousel-prev {
    left: -25px;
}

.mrs-carousel-next {
    right: -25px;
}


/* =========================================================
   TEAM
========================================================= */

.mrs-team-section {
    padding: 115px 0;
    color: #fff;
    background: #0f171d;
}

.mrs-team-intro {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 90px;
    align-items: end;
}

.mrs-team-intro h2 {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-size: clamp(50px, 5.5vw, 82px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.055em;
}

.mrs-team-intro > p {
    max-width: 620px;
    margin: 0 0 7px;
    color: rgba(255, 255, 255, .61);
    font-size: 16px;
    line-height: 1.8;
}

.mrs-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 75px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.mrs-team-grid article {
    min-height: 250px;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.mrs-team-grid span {
    color: #61c9f0;
    font-size: 10px;
}

.mrs-team-grid h3 {
    margin: 65px 0 12px;
    color: #fff;
    font-size: 23px;
}

.mrs-team-grid p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    line-height: 1.7;
}


/* materials */

.mrs-materials {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    margin-top: 90px;
    padding-top: 75px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.mrs-materials h3 {
    max-width: 570px;
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 3.5vw, 51px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.mrs-materials-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.mrs-materials-list span {
    min-height: 75px;
    display: flex;
    align-items: center;
    padding: 20px 22px;
    border-right: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   FINAL CTA
========================================================= */

.mrs-final-cta {
    padding: 125px 0;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(0, 136, 204, .21),
            transparent 36%
        ),
        #080e12;
}

.mrs-final-cta .container {
    max-width: 1050px;
}

.mrs-final-cta h2 {
    margin: 0 auto;
    color: #fff;
    font-size: clamp(51px, 6vw, 88px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.055em;
}

.mrs-final-cta > .container > p:not(.mrs-eyebrow) {
    max-width: 700px;
    margin: 28px auto 0;
    color: rgba(255, 255, 255, .65);
    font-size: 17px;
    line-height: 1.8;
}

.mrs-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .mrs-social-hero-grid {
        grid-template-columns: 1fr 340px;
        gap: 55px;
    }

    .mrs-overview-grid,
    .mrs-production-grid,
    .mrs-team-intro,
    .mrs-carousel-heading,
    .mrs-materials {
        gap: 55px;
    }

    .mrs-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrs-food-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    #restaurant-social-new-page .mrs-section,
    .mrs-team-section {
        padding: 85px 0;
    }

    .mrs-social-hero {
        padding: 155px 0 85px;
    }

    .mrs-social-hero-grid,
    .mrs-overview-grid,
    .mrs-production-grid,
    .mrs-team-intro,
    .mrs-carousel-heading,
    .mrs-materials {
        grid-template-columns: 1fr;
    }

    .mrs-social-hero-media,
    .mrs-production-media {
        max-width: 380px;
        margin: 25px auto 0;
    }

    .mrs-overview-copy {
        padding-top: 0;
    }

    .mrs-overview-strip {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 55px;
    }

    .mrs-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrs-photo-carousel figure {
        flex-basis: calc((100% - 18px) / 2);
    }

    .mrs-carousel-prev {
        left: 5px;
    }

    .mrs-carousel-next {
        right: 5px;
    }

}


@media (max-width: 600px) {

    .mrs-social-hero {
        padding: 135px 0 70px;
    }

    .mrs-social-hero-copy h1 {
        font-size: 48px;
        line-height: .98;
    }

    .mrs-social-hero-lead {
        font-size: 16px;
    }

    #restaurant-social-new-page .mrs-section,
    .mrs-team-section {
        padding: 72px 0;
    }

    .mrs-overview-grid h2,
    .mrs-production-copy h2,
    .mrs-food-heading h2,
    .mrs-section-heading h2,
    .mrs-carousel-heading h2,
    .mrs-team-intro h2 {
        font-size: 41px;
        line-height: 1.03;
    }

    .mrs-overview-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .mrs-food-grid,
    .mrs-service-grid,
    .mrs-team-grid {
        grid-template-columns: 1fr;
    }

    .mrs-food-grid article,
    .mrs-service-grid article {
        min-height: 230px;
    }

    .mrs-food-grid strong,
    .mrs-service-grid h3 {
        margin-top: 55px;
    }

    .mrs-materials-list {
        grid-template-columns: 1fr;
    }

    .mrs-photo-carousel figure {
        flex-basis: 84%;
    }

    .mrs-photo-carousel img {
        height: 330px;
    }

    .mrs-carousel-arrow {
        width: 42px;
        height: 42px;
    }

    .mrs-final-cta {
        padding: 90px 0;
    }

    .mrs-final-cta h2 {
        font-size: 45px;
    }

}

/* =========================================================
   OVERRIDE - PODRŠKA I VAN DRUŠTVENIH MREŽA
   samo prepegla postojeći izgled
   ========================================================= */

#restaurant-social-new-page .mrs-materials {
    display: grid !important;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 70px !important;

    margin-top: 90px !important;
    padding: 55px 60px !important;

    background: #ffffff !important;
    color: #222e37 !important;

    border: 1px solid #e1e6e9 !important;
}

#restaurant-social-new-page .mrs-materials .mrs-eyebrow {
    color: #0088cc !important;
}

#restaurant-social-new-page .mrs-materials h3 {
    max-width: 570px !important;
    margin: 0 !important;

    color: #222e37 !important;

    font-size: clamp(32px, 3.5vw, 51px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
}


/* DESNA STRANA */

#restaurant-social-new-page .mrs-materials-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;

    border-top: 1px solid #dce3e7 !important;
    border-left: 1px solid #dce3e7 !important;

    background: #ffffff !important;
}

#restaurant-social-new-page .mrs-materials-list span {
    min-height: 78px !important;

    display: flex !important;
    align-items: center !important;

    padding: 20px 22px !important;

    border-right: 1px solid #dce3e7 !important;
    border-bottom: 1px solid #dce3e7 !important;

    color: #37434c !important;
    background: #f7f9fa !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    transition: .2s ease !important;
}

#restaurant-social-new-page .mrs-materials-list span:hover {
    color: #0088cc !important;
    background: #ffffff !important;
}


/* TABLET */

@media (max-width: 850px) {

    #restaurant-social-new-page .mrs-materials {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
        padding: 45px !important;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    #restaurant-social-new-page .mrs-materials {
        margin-top: 65px !important;
        padding: 30px 24px !important;
    }

    #restaurant-social-new-page .mrs-materials-list {
        grid-template-columns: 1fr !important;
    }

}

/* FOTO U MRS FOOD KARTICAMA */

#restaurant-social-new-page .mrs-food-image {
    width: 100%;
    margin: 22px 0 24px;
    overflow: hidden;
}

#restaurant-social-new-page .mrs-food-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}

#restaurant-social-new-page .mrs-food-grid article:hover .mrs-food-image img {
    transform: scale(1.035);
}

#restaurant-social-new-page .mrs-food-grid strong {
    margin-top: 0;
}

/* =========================================================
   OVERRIDE - VELIKE IKONICE SERVICE GRID
   ========================================================= */

#restaurant-social-new-page .mrs-service-grid article {
    position: relative;
    min-height: 350px !important;
}

#restaurant-social-new-page .mrs-service-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 42px 0 30px;

    background: #0088cc;
}

#restaurant-social-new-page .mrs-service-icon svg {
    width: 38px;
    height: 38px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#restaurant-social-new-page .mrs-service-grid h3 {
    margin: 0 0 13px !important;
}

@media (max-width: 600px) {

    #restaurant-social-new-page .mrs-service-grid article {
        min-height: 290px !important;
    }

    #restaurant-social-new-page .mrs-service-icon {
        width: 64px;
        height: 64px;
        margin: 32px 0 25px;
    }

    #restaurant-social-new-page .mrs-service-icon svg {
        width: 34px;
        height: 34px;
    }

}

/* =========================================================
   REELS & VIDEO PRODUKCIJA ZA RESTORANE
   PAGE FIX / OVERRIDE
   ========================================================= */

#restaurant-video-page {
    overflow: hidden;
}

#restaurant-video-page .section {
    margin: 0 !important;
    padding: 105px 0 !important;
}

#restaurant-video-page .alt-bg {
    background: var(--mr-soft) !important;
}


/* EYEBROW */

#restaurant-video-page .eyebrow {
    margin: 0 0 14px !important;
    color: var(--mr-blue) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}


/* SECTION HEADINGS */

#restaurant-video-page .section-heading {
    margin-bottom: 58px !important;
}

#restaurant-video-page .section-heading.narrow {
    max-width: 900px !important;
}

#restaurant-video-page .section-heading h2 {
    max-width: 900px;
    margin: 0 0 20px !important;

    color: var(--mr-text) !important;

    font-size: clamp(42px, 5vw, 72px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
}

#restaurant-video-page .section-heading > p:not(.eyebrow) {
    max-width: 780px !important;
    margin: 0 !important;

    color: var(--mr-muted) !important;

    font-size: 17px !important;
    line-height: 1.75 !important;
}


/* =========================================================
   HERO
   ========================================================= */

#restaurant-video-page .mr-gads-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    padding-top: var(--mr-header-height);
    background: #111a22;
}

#restaurant-video-page .mr-gads-hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 83% 35%,
            rgba(0,136,204,.30),
            transparent 31%
        ),
        linear-gradient(
            110deg,
            #0c1319 0%,
            #17232d 58%,
            #0e171e 100%
        );
}

#restaurant-video-page .mr-gads-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    align-items: center;

    padding-top: 80px;
    padding-bottom: 70px;
}

#restaurant-video-page .mr-gads-hero .eyebrow {
    color: #67d1f5 !important;
}

#restaurant-video-page .mr-gads-hero h1 {
    max-width: 810px;
    margin: 0;

    color: #fff;

    font-size: clamp(54px, 6.3vw, 92px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.06em;
}

#restaurant-video-page .mr-gads-hero-lead {
    max-width: 700px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.79);

    font-size: 18px;
    line-height: 1.75;
}


/* HERO DESNA KARTICA */

#restaurant-video-page .mr-search-demo {
    padding: 24px;
    background: #fff;

    box-shadow: 0 35px 80px rgba(0,0,0,.27);
}


/* =========================================================
   INTENT - 3 KARTICE
   ========================================================= */

#restaurant-video-page .mr-gads-intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-video-page .mr-gads-intent-grid article {
    min-height: 300px;
    padding: 31px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);
}

#restaurant-video-page .mr-gads-intent-grid span {
    color: #a4adb4;
    font-size: 11px;
}

#restaurant-video-page .mr-gads-intent-grid h3 {
    margin: 78px 0 15px;

    color: var(--mr-text);

    font-size: 25px;
    line-height: 1.15;
}

#restaurant-video-page .mr-gads-intent-grid p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   4 USE CASE KARTICE
   ========================================================= */

#restaurant-video-page .mr-gads-usecases {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

#restaurant-video-page .mr-gads-usecases article {
    min-height: 300px;
    padding: 34px;

    border: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-video-page .mr-gads-usecases > article > strong {
    color: var(--mr-blue);

    font-size: 10px;
    letter-spacing: .14em;
}

#restaurant-video-page .mr-gads-usecases h3 {
    max-width: 460px;

    margin: 70px 0 14px;

    color: var(--mr-text);

    font-size: 28px;
    line-height: 1.12;
}

#restaurant-video-page .mr-gads-usecases p {
    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   DARK METRICS
   ========================================================= */

#restaurant-video-page .mr-gads-dark {
    color: #fff;
    background: #151d24;
}

#restaurant-video-page .mr-gads-dark-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

#restaurant-video-page .mr-gads-dark .eyebrow {
    color: #67d1f5 !important;
}

#restaurant-video-page .mr-gads-dark h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(36px,4.5vw,66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

#restaurant-video-page .mr-gads-dark p {
    color: rgba(255,255,255,.68);

    font-size: 17px;
    line-height: 1.78;
}


/* =========================================================
   SYSTEM - 4 KORAKA
   ========================================================= */

#restaurant-video-page .mr-gads-system {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 12px;
    align-items: center;
}

#restaurant-video-page .mr-gads-system-step {
    min-height: 240px;
    padding: 26px;

    border: 1px solid var(--mr-line);
}

#restaurant-video-page .mr-gads-system-step span {
    color: #9fa8ae;
    font-size: 11px;
}

#restaurant-video-page .mr-gads-system-step strong {
    display: block;

    margin-top: 65px;

    color: var(--mr-text);

    font-size: 19px;
}

#restaurant-video-page .mr-gads-system-step p {
    color: var(--mr-muted);

    font-size: 13px;
    line-height: 1.65;
}

#restaurant-video-page .mr-gads-arrow {
    color: var(--mr-blue);

    font-size: 25px;
    font-weight: 800;
}


/* =========================================================
   4 TRACK KARTICE
   ========================================================= */

#restaurant-video-page .mr-gads-track-grid {
    display: grid;

    grid-template-columns: repeat(4,minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-video-page .mr-gads-track-grid article {
    min-height: 300px;
    padding: 31px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);
}

#restaurant-video-page .mr-gads-track-grid span {
    color: #a4adb4;
    font-size: 11px;
}

#restaurant-video-page .mr-gads-track-grid h3 {
    margin: 78px 0 15px;

    color: var(--mr-text);

    font-size: 25px;
    line-height: 1.15;
}

#restaurant-video-page .mr-gads-track-grid p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   HONEST / BLUE SECTION
   ========================================================= */

#restaurant-video-page .mr-gads-honest {
    background: #e9f5fa;
}

#restaurant-video-page .mr-gads-honest-grid {
    display: grid;

    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
}

#restaurant-video-page .mr-gads-honest h2 {
    margin: 0;

    color: var(--mr-text);

    font-size: clamp(36px,4.5vw,66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    #restaurant-video-page .mr-gads-track-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

}


@media (max-width: 900px) {

    #restaurant-video-page .mr-gads-hero-grid,
    #restaurant-video-page .mr-gads-dark-grid,
    #restaurant-video-page .mr-gads-proof-grid,
    #restaurant-video-page .mr-gads-honest-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    #restaurant-video-page .mr-search-demo {
        max-width: 620px;
    }

    #restaurant-video-page .mr-gads-system {
        grid-template-columns: 1fr;
    }

    #restaurant-video-page .mr-gads-arrow {
        text-align: center;
        transform: rotate(90deg);
    }

}


@media (max-width: 700px) {

    #restaurant-video-page .section {
        padding: 78px 0 !important;
    }

    #restaurant-video-page .mr-gads-hero {
        min-height: 760px;
    }

    #restaurant-video-page .mr-gads-hero h1 {
        font-size: clamp(47px,13vw,64px);
        line-height: .98;
    }

    #restaurant-video-page .mr-gads-intent-grid,
    #restaurant-video-page .mr-gads-usecases,
    #restaurant-video-page .mr-gads-track-grid {
        grid-template-columns: 1fr;
    }

    #restaurant-video-page .mr-gads-intent-grid article,
    #restaurant-video-page .mr-gads-usecases article,
    #restaurant-video-page .mr-gads-track-grid article {
        min-height: auto;
    }

    #restaurant-video-page .mr-gads-intent-grid h3,
    #restaurant-video-page .mr-gads-usecases h3,
    #restaurant-video-page .mr-gads-track-grid h3 {
        margin-top: 48px;
    }

    #restaurant-video-page .section-heading h2 {
        font-size: 40px !important;
    }

}

#restaurant-video-page .mr-gads-system-image {
    width: 100%;
    margin: 22px 0 24px;
    overflow: hidden;
}

#restaurant-video-page .mr-gads-system-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#restaurant-video-page .mr-gads-system-step strong {
    margin-top: 0 !important;
}

/* =========================================================
   GLOBAL FAQ FIX
   važi za sve .mr-gads-faq blokove
   ========================================================= */

.mr-gads-faq {
    width: 100%;
    max-width: 100%;
}

.mr-gads-faq details {
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dfe4e7 !important;
    border-bottom: 0 !important;
}

.mr-gads-faq details:last-child {
    border-bottom: 1px solid #dfe4e7 !important;
}


/* PITANJE */

.mr-gads-faq summary {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    min-height: 76px !important;

    padding: 22px 70px 22px 30px !important;

    color: #17212a !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    cursor: pointer !important;
    list-style: none !important;
}


/* uklanja browser strelicu */

.mr-gads-faq summary::-webkit-details-marker {
    display: none !important;
}

.mr-gads-faq summary::marker {
    display: none !important;
}


/* PLUS DESNO */

.mr-gads-faq summary::after {
    content: "+" !important;

    position: absolute !important;
    right: 28px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #0088cc !important;

    font-size: 27px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}


/* kada je otvoreno */

.mr-gads-faq details[open] summary::after {
    content: "−" !important;
}


/* ODGOVOR */

.mr-gads-faq details > p {
    margin: 0 !important;

    padding: 0 70px 28px 30px !important;

    max-width: 900px !important;

    color: #66727b !important;

    font-size: 15px !important;
    line-height: 1.75 !important;
}


/* diskretan hover */

.mr-gads-faq summary:hover {
    background: #f8fafb !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .mr-gads-faq summary {
        min-height: 68px !important;

        padding:
            19px
            55px
            19px
            20px !important;

        font-size: 15px !important;
    }

    .mr-gads-faq summary::after {
        right: 20px !important;
    }

    .mr-gads-faq details > p {
        padding:
            0
            55px
            24px
            20px !important;

        font-size: 14px !important;
    }

}

/* =========================================================
   WEB & SEO ZA RESTORANE
   PAGE FIX / OVERRIDE
   ========================================================= */

#restaurant-web-seo-page {
    overflow: hidden;
}


/* =========================================================
   OPŠTE SEKCIJE
   ========================================================= */

#restaurant-web-seo-page .section {
    margin: 0 !important;
    padding: 105px 0 !important;
}

#restaurant-web-seo-page .alt-bg {
    background: var(--mr-soft) !important;
}

#restaurant-web-seo-page .eyebrow {
    margin: 0 0 14px !important;

    color: var(--mr-blue) !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

#restaurant-web-seo-page .section-heading {
    margin-bottom: 58px !important;
}

#restaurant-web-seo-page .section-heading.narrow {
    max-width: 920px !important;
}

#restaurant-web-seo-page .section-heading h2 {
    max-width: 920px;

    margin: 0 0 20px !important;

    color: var(--mr-text) !important;

    font-size: clamp(42px, 5vw, 72px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
}

#restaurant-web-seo-page .section-heading > p:not(.eyebrow) {
    max-width: 780px !important;

    margin: 0 !important;

    color: var(--mr-muted) !important;

    font-size: 17px !important;
    line-height: 1.75 !important;
}


/* =========================================================
   HERO
   ========================================================= */

#restaurant-web-seo-page .mr-gads-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: center;

    padding-top: var(--mr-header-height);

    background: #111a22;
}

#restaurant-web-seo-page .mr-gads-hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 82% 34%,
            rgba(0, 136, 204, .30),
            transparent 31%
        ),
        linear-gradient(
            110deg,
            #0c1319 0%,
            #17232d 58%,
            #0e171e 100%
        );
}

#restaurant-web-seo-page .mr-gads-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;

    align-items: center;

    padding-top: 80px;
    padding-bottom: 70px;
}

#restaurant-web-seo-page .mr-gads-hero .eyebrow {
    color: #67d1f5 !important;
}

#restaurant-web-seo-page .mr-gads-hero h1 {
    max-width: 820px;

    margin: 0;

    color: #fff;

    font-size: clamp(54px, 6.3vw, 92px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.06em;
}

#restaurant-web-seo-page .mr-gads-hero-lead {
    max-width: 720px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.79);

    font-size: 18px;
    line-height: 1.75;
}


/* HERO DESNA ILUSTRACIJA */

#restaurant-web-seo-page .mr-search-demo {
    padding: 24px;

    background: #fff;

    box-shadow:
        0 35px 80px rgba(0,0,0,.27);
}


/* =========================================================
   3 KARTICE
   ========================================================= */

#restaurant-web-seo-page .mr-gads-intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-web-seo-page .mr-gads-intent-grid article {
    min-height: 300px;

    padding: 31px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-intent-grid span {
    color: #a4adb4;
    font-size: 11px;
}

#restaurant-web-seo-page .mr-gads-intent-grid h3 {
    margin: 78px 0 15px;

    color: var(--mr-text);

    font-size: 25px;
    line-height: 1.15;
}

#restaurant-web-seo-page .mr-gads-intent-grid p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   4 USE CASE KARTICE
   ========================================================= */

#restaurant-web-seo-page .mr-gads-usecases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 18px;
}

#restaurant-web-seo-page .mr-gads-usecases article {
    min-height: 300px;

    padding: 34px;

    border: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-usecases > article > strong {
    color: var(--mr-blue);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

#restaurant-web-seo-page .mr-gads-usecases h3 {
    max-width: 470px;

    margin: 70px 0 14px;

    color: var(--mr-text);

    font-size: 28px;
    line-height: 1.12;
}

#restaurant-web-seo-page .mr-gads-usecases p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   DARK METRICS
   ========================================================= */

#restaurant-web-seo-page .mr-gads-dark {
    color: #fff;
    background: #151d24;
}

#restaurant-web-seo-page .mr-gads-dark-grid {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

    align-items: center;
}

#restaurant-web-seo-page .mr-gads-dark .eyebrow {
    color: #67d1f5 !important;
}

#restaurant-web-seo-page .mr-gads-dark h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(36px, 4.5vw, 66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

#restaurant-web-seo-page .mr-gads-dark p {
    color: rgba(255,255,255,.68);

    font-size: 17px;
    line-height: 1.78;
}


/* =========================================================
   SYSTEM - 4 KORAKA
   ========================================================= */

#restaurant-web-seo-page .mr-gads-system {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 12px;

    align-items: center;
}

#restaurant-web-seo-page .mr-gads-system-step {
    min-height: 240px;

    padding: 26px;

    border: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-system-step span {
    color: #9fa8ae;

    font-size: 11px;
}

#restaurant-web-seo-page .mr-gads-system-step strong {
    display: block;

    margin-top: 65px;

    color: var(--mr-text);

    font-size: 19px;
}

#restaurant-web-seo-page .mr-gads-system-step p {
    color: var(--mr-muted);

    font-size: 13px;
    line-height: 1.65;
}

#restaurant-web-seo-page .mr-gads-arrow {
    color: var(--mr-blue);

    font-size: 25px;
    font-weight: 800;
}


/* =========================================================
   PROOF / SEO BLOK
   ========================================================= */

#restaurant-web-seo-page .mr-gads-proof-grid {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 70px;

    align-items: center;
}

#restaurant-web-seo-page .mr-gads-proof-grid > div:first-child > p:not(.eyebrow) {
    color: var(--mr-muted);

    font-size: 16px;
    line-height: 1.8;
}

#restaurant-web-seo-page .mr-gads-screenshot-placeholder {
    padding: 22px;

    border: 1px solid #dce3e7;

    background: #fff;

    box-shadow:
        0 25px 60px rgba(17,32,46,.12);
}


/* =========================================================
   4 TRACK KARTICE
   ========================================================= */

#restaurant-web-seo-page .mr-gads-track-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0,1fr));

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-web-seo-page .mr-gads-track-grid article {
    min-height: 300px;

    padding: 31px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-track-grid span {
    color: #a4adb4;

    font-size: 11px;
}

#restaurant-web-seo-page .mr-gads-track-grid h3 {
    margin: 78px 0 15px;

    color: var(--mr-text);

    font-size: 24px;
    line-height: 1.15;
}

#restaurant-web-seo-page .mr-gads-track-grid p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   HONEST / PLAVI BLOK
   ========================================================= */

#restaurant-web-seo-page .mr-gads-honest {
    background: #e9f5fa;
}

#restaurant-web-seo-page .mr-gads-honest-grid {
    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 70px;
}

#restaurant-web-seo-page .mr-gads-honest h2 {
    margin: 0;

    color: var(--mr-text);

    font-size: clamp(36px,4.5vw,66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
}

#restaurant-web-seo-page .mr-gads-honest-list {
    border-top: 1px solid rgba(0,136,204,.2);
}

#restaurant-web-seo-page .mr-gads-honest-list article {
    padding: 26px 0;

    border-bottom: 1px solid rgba(0,136,204,.2);
}

#restaurant-web-seo-page .mr-gads-honest-list strong {
    color: var(--mr-text);

    font-size: 18px;
}

#restaurant-web-seo-page .mr-gads-honest-list p {
    margin: 8px 0 0;

    color: var(--mr-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   KNOWLEDGE
   ========================================================= */

#restaurant-web-seo-page .mr-gads-knowledge-grid {
    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 20px;
}

#restaurant-web-seo-page .mr-gads-knowledge-placeholder {
    min-height: 350px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    border: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-knowledge-placeholder > span {
    color: var(--mr-blue);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

#restaurant-web-seo-page .mr-gads-knowledge-placeholder h3 {
    margin: 60px 0 14px;

    color: var(--mr-text);

    font-size: 23px;
    line-height: 1.22;
}

#restaurant-web-seo-page .mr-gads-knowledge-placeholder p {
    margin: 0;

    color: var(--mr-muted);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   PROCESS 5 KORAKA
   ========================================================= */

#restaurant-web-seo-page .mr-gads-process {
    display: grid;

    grid-template-columns: repeat(5,minmax(0,1fr));

    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid var(--mr-line);
    border-left: 1px solid var(--mr-line);
}

#restaurant-web-seo-page .mr-gads-process li {
    min-height: 300px;

    padding: 26px 23px;

    border-right: 1px solid var(--mr-line);
    border-bottom: 1px solid var(--mr-line);

    background: #fff;
}

#restaurant-web-seo-page .mr-gads-process span {
    color: #a2acb2;

    font-size: 11px;
}

#restaurant-web-seo-page .mr-gads-process strong {
    display: block;

    margin-top: 78px;

    color: var(--mr-text);

    font-size: 17px;
    line-height: 1.35;
}

#restaurant-web-seo-page .mr-gads-process p {
    color: var(--mr-muted);

    font-size: 13px;
    line-height: 1.68;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    #restaurant-web-seo-page .mr-gads-track-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    #restaurant-web-seo-page .mr-gads-process {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

}


@media (max-width: 900px) {

    #restaurant-web-seo-page .mr-gads-hero-grid,
    #restaurant-web-seo-page .mr-gads-dark-grid,
    #restaurant-web-seo-page .mr-gads-proof-grid,
    #restaurant-web-seo-page .mr-gads-honest-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    #restaurant-web-seo-page .mr-search-demo {
        max-width: 620px;
    }

    #restaurant-web-seo-page .mr-gads-system {
        grid-template-columns: 1fr;
    }

    #restaurant-web-seo-page .mr-gads-arrow {
        text-align: center;

        transform: rotate(90deg);
    }

    #restaurant-web-seo-page .mr-gads-knowledge-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    #restaurant-web-seo-page .section {
        padding: 78px 0 !important;
    }

    #restaurant-web-seo-page .mr-gads-hero {
        min-height: 760px;
    }

    #restaurant-web-seo-page .mr-gads-hero h1 {
        font-size: clamp(47px,13vw,64px);

        line-height: .98;
    }

    #restaurant-web-seo-page .mr-gads-intent-grid,
    #restaurant-web-seo-page .mr-gads-usecases,
    #restaurant-web-seo-page .mr-gads-track-grid,
    #restaurant-web-seo-page .mr-gads-process {
        grid-template-columns: 1fr;
    }

    #restaurant-web-seo-page .mr-gads-intent-grid article,
    #restaurant-web-seo-page .mr-gads-usecases article,
    #restaurant-web-seo-page .mr-gads-track-grid article,
    #restaurant-web-seo-page .mr-gads-process li {
        min-height: auto;
    }

    #restaurant-web-seo-page .mr-gads-intent-grid h3,
    #restaurant-web-seo-page .mr-gads-usecases h3,
    #restaurant-web-seo-page .mr-gads-track-grid h3,
    #restaurant-web-seo-page .mr-gads-process strong {
        margin-top: 48px;
    }

    #restaurant-web-seo-page .section-heading h2 {
        font-size: 40px !important;
    }

}

/* =========================================================
   NOVA PONUDA — IZRADA SAJTA ZA RESTORAN
========================================================= */

#restaurant-web-seo-page .mr-web-offer-dark,
#restaurant-web-seo-page .mr-web-growth-dark,
#restaurant-web-seo-page .mr-web-channels-dark {
    background: #101820 !important;
    color: #fff;
}

#restaurant-web-seo-page .mr-web-offer-dark .eyebrow,
#restaurant-web-seo-page .mr-web-growth-dark .eyebrow,
#restaurant-web-seo-page .mr-web-channels-dark .eyebrow {
    color: #55c8f3 !important;
}


/* INTRO PONUDE */

.mr-web-offer-intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 75px;
}

.mr-web-offer-intro h2,
.mr-web-growth-grid h2,
.mr-web-channels-dark .section-heading h2 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(46px, 5.4vw, 78px);
    line-height: 1;
    letter-spacing: -.05em;
}

.mr-web-offer-intro-copy p,
.mr-web-growth-copy p,
.mr-web-channels-dark .section-heading > p:not(.eyebrow) {
    color: rgba(255,255,255,.70) !important;
    font-size: 16px;
    line-height: 1.8;
}


/* 4 BENEFITA */

.mr-web-offer-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.15);
    border-left: 1px solid rgba(255,255,255,.15);
}

.mr-web-offer-features article {
    min-height: 270px;
    padding: 30px;
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.mr-web-offer-features span,
.mr-web-growth-flow span,
.mr-web-channel-grid > article > span {
    color: #55c8f3;
    font-size: 11px;
}

.mr-web-offer-features strong {
    display: block;
    margin-top: 75px;
    color: #fff;
    font-size: 21px;
}

.mr-web-offer-features p {
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.7;
}


/* BELA DELIVERY SEKCIJA */

.mr-web-delivery {
    background: #fff;
}

.mr-web-delivery-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #dce2e6;
    border-left: 1px solid #dce2e6;
}

.mr-web-delivery-grid article {
    min-height: 280px;
    padding: 30px;
    border-right: 1px solid #dce2e6;
    border-bottom: 1px solid #dce2e6;
}

.mr-web-delivery-grid span {
    color: #9aa6ad;
    font-size: 11px;
}

.mr-web-delivery-grid h3 {
    margin: 70px 0 13px;
    font-size: 22px;
}

.mr-web-delivery-grid p {
    color: #68747c;
    font-size: 14px;
    line-height: 1.7;
}


/* CONNECTION BOX */

.mr-web-connections {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    margin-top: 65px;
    padding: 50px;
    background: #edf6fa;
}

.mr-web-connections h3 {
    margin: 0;
    max-width: 520px;
    font-size: 34px;
    line-height: 1.1;
}

.mr-web-connections-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.mr-web-connections-list span {
    padding: 17px 0;
    border-bottom: 1px solid #d3e1e7;
    font-weight: 700;
}


/* GROWTH */

.mr-web-growth-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    margin-bottom: 75px;
}

.mr-web-growth-lead {
    font-size: 21px !important;
    color: #fff !important;
}

.mr-web-growth-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 15px;
}

.mr-web-growth-flow > div:not(.mr-web-growth-arrow) {
    min-height: 220px;
    padding: 27px;
    border: 1px solid rgba(255,255,255,.15);
}

.mr-web-growth-flow strong {
    display: block;
    margin-top: 60px;
    color: #fff;
    font-size: 18px;
}

.mr-web-growth-flow p {
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 1.65;
}

.mr-web-growth-arrow {
    display: flex;
    align-items: center;
    color: #55c8f3;
    font-size: 25px;
}


/* WAGYU CASE */

.mr-web-case {
    background: #fff;
}

.mr-web-case-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 90px;
    align-items: center;
}

.mr-web-case-copy h2 {
    margin: 0 0 25px;
    max-width: 750px;
    font-size: clamp(42px,5vw,70px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.mr-web-case-copy > p:not(.eyebrow) {
    max-width: 700px;
    color: #68747c;
    line-height: 1.8;
}

.mr-web-case-link {
    display: inline-block;
    margin-top: 20px;
    color: #0088cc;
    font-weight: 800;
}

.mr-web-case-result {
    padding: 55px;
    background: #edf6fa;
}

.mr-web-case-result > span {
    color: #0088cc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.mr-web-case-result strong {
    display: block;
    margin: 35px 0 10px;
    font-size: clamp(50px,6vw,85px);
    line-height: 1;
    letter-spacing: -.05em;
}

.mr-web-case-result p {
    max-width: 430px;
    font-size: 17px;
    line-height: 1.65;
}

.mr-web-case-result small {
    display: block;
    margin-top: 30px;
    color: #7a858c;
}


/* CHANNELS */

.mr-web-channel-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,.15);
    border-left: 1px solid rgba(255,255,255,.15);
}

.mr-web-channel-grid article {
    min-height: 440px;
    padding: 42px;
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.mr-web-channel-label {
    margin-top: 70px;
    color: #55c8f3 !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .14em;
}

.mr-web-channel-grid h3 {
    max-width: 500px;
    margin: 15px 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
}

.mr-web-channel-grid article > p:not(.mr-web-channel-label) {
    max-width: 520px;
    color: rgba(255,255,255,.65);
    line-height: 1.75;
}

.mr-web-channel-grid a {
    display: inline-block;
    margin-top: 22px;
    color: #55c8f3;
    font-weight: 800;
}


/* MOBILE */

@media (max-width: 900px) {

    .mr-web-offer-intro,
    .mr-web-growth-grid,
    .mr-web-case-grid,
    .mr-web-connections {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mr-web-offer-features,
    .mr-web-delivery-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .mr-web-growth-flow {
        grid-template-columns: 1fr;
    }

    .mr-web-growth-arrow {
        justify-content: center;
        transform: rotate(90deg);
    }

}


@media (max-width: 650px) {

    .mr-web-offer-features,
    .mr-web-delivery-grid,
    .mr-web-channel-grid,
    .mr-web-connections-list {
        grid-template-columns: 1fr;
    }

    .mr-web-offer-features article,
    .mr-web-delivery-grid article {
        min-height: auto;
    }

    .mr-web-offer-features strong,
    .mr-web-delivery-grid h3 {
        margin-top: 45px;
    }

    .mr-web-connections,
    .mr-web-case-result {
        padding: 30px;
    }

}

/* =========================================================
   DELIVERY GRID - FOTOGRAFIJE
========================================================= */

.mr-web-delivery-grid article {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mr-web-delivery-grid article > span {
    display: block;
    padding: 28px 30px 18px;
}

.mr-web-delivery-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef1f3;
}

.mr-web-delivery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-web-delivery-grid article:hover .mr-web-delivery-image img {
    transform: scale(1.035);
}

.mr-web-delivery-grid article h3 {
    margin: 0;
    padding: 28px 30px 0;
    font-size: 22px;
    line-height: 1.2;
}

.mr-web-delivery-grid article > p {
    margin: 0;
    padding: 14px 30px 32px;
    line-height: 1.7;
    flex-grow: 1;
}


/* TABLET */

@media (max-width: 900px) {

    .mr-web-delivery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .mr-web-delivery-grid {
        grid-template-columns: 1fr;
    }

    .mr-web-delivery-image {
        aspect-ratio: 16 / 9;
    }

    .mr-web-delivery-grid article > span {
        padding: 24px 24px 16px;
    }

    .mr-web-delivery-grid article h3 {
        padding: 24px 24px 0;
    }

    .mr-web-delivery-grid article > p {
        padding: 12px 24px 28px;
    }

}

/* =========================================================
   FEATURED KNOWLEDGE / WAGYU CASE STUDY
========================================================= */

.mr-knowledge-card-featured {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    padding: 0;
    overflow: hidden;
    background: #101820;
    border: 0;
}

.mr-knowledge-card-image {
    min-height: 380px;
    overflow: hidden;
}

.mr-knowledge-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.mr-knowledge-card-featured:hover .mr-knowledge-card-image img {
    transform: scale(1.025);
}

.mr-knowledge-card-content {
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mr-knowledge-card-label {
    display: block;
    margin-bottom: 18px;
    color: #0088cc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
}

.mr-knowledge-card-content h3 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.mr-knowledge-card-content p {
    margin: 0 0 30px;
    max-width: 520px;
    color: #aeb8bf;
    font-size: 16px;
    line-height: 1.75;
}

.mr-knowledge-card-content a {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.mr-knowledge-card-content a:hover {
    color: #0088cc;
}


/* MOBILE */

@media (max-width: 800px) {

    .mr-knowledge-card-featured {
        grid-template-columns: 1fr;
    }

    .mr-knowledge-card-image {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .mr-knowledge-card-content {
        padding: 34px 28px 38px;
    }

}

/* =========================================================
   KNOWLEDGE - COMING SOON CARDS
========================================================= */

#restaurant-knowledge-page .is-coming {
    display: inline-flex;
    vertical-align: top;
    flex-direction: column;
    width: calc(25% - 18px);
    min-height: 260px;
    margin: 24px 18px 0 0;
    padding: 28px 26px 30px;
    background: #fff;
    border: 1px solid #d9e0e4;
    box-sizing: border-box;
}

#restaurant-knowledge-page .is-coming:nth-of-type(5) {
    margin-right: 0;
}

#restaurant-knowledge-page .is-coming > span,
#restaurant-knowledge-page .is-coming .eyebrow {
    display: block;
    margin-bottom: 20px;
    color: #0088cc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#restaurant-knowledge-page .is-coming h3 {
    margin: 0 0 16px;
    color: #17212a;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

#restaurant-knowledge-page .is-coming p {
    margin: 0;
    color: #66737c;
    font-size: 14px;
    line-height: 1.7;
}


/* TABLET */

@media (max-width: 1000px) {

    #restaurant-knowledge-page .is-coming {
        width: calc(50% - 12px);
        margin-right: 20px;
    }

    #restaurant-knowledge-page .is-coming:nth-of-type(even) {
        margin-right: 0;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    #restaurant-knowledge-page .is-coming {
        display: flex;
        width: 100%;
        min-height: 0;
        margin: 18px 0 0;
        padding: 24px;
    }

}