:root {
            --ink: #222124;
            --ink-soft: #555057;
            --taupe: #ad9a8b;
            --taupe-dark: #8f7d70;
            --copper: #a35f32;
            --copper-dark: #824722;
            --sand: #ece2d8;
            --cream: #f7f2ec;
            --cream-2: #fbf8f4;
            --white: #fffdfb;
            --line: rgba(81, 61, 48, .14);
            --shadow: 0 24px 70px rgba(77, 56, 41, .12);
            --radius: 22px;
            --max: 1220px;
            --header-h: 90px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            color: var(--ink);
            background: var(--cream-2);
            line-height: 1.72;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        img { max-width: 100%; display: block; }
        a { color: inherit; }
        button, input, textarea { font: inherit; }
        ::selection { background: rgba(163, 95, 50, .18); }

        .skip-link {
            position: fixed; left: 14px; top: 12px; z-index: 1000;
            padding: 10px 14px; background: var(--ink); color: white; border-radius: 10px;
            transform: translateY(-150%); transition: .2s ease; text-decoration: none;
        }
        .skip-link:focus { transform: translateY(0); }

        .container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
        .section { padding: 104px 0; position: relative; }
        .section.soft { background: var(--cream); }
        .section.white { background: var(--white); }
        .section.compact { padding: 78px 0; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            color: var(--copper); text-transform: uppercase; letter-spacing: .17em;
            font-weight: 700; font-size: 12px; line-height: 1.3;
        }
        .eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }
        h1, h2, h3, .serif {
            font-family: Georgia, "Times New Roman", serif;
            font-weight: 400;
            letter-spacing: -.025em;
            color: #201f20;
        }
        h1 { margin: 14px 0 22px; font-size: clamp(42px, 5.2vw, 70px); line-height: 1.02; max-width: 850px; }
        h2 { margin: 10px 0 22px; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.06; }
        h3 { margin: 0 0 12px; font-size: 27px; line-height: 1.18; }
        p { margin: 0 0 1.1em; }
        p:last-child { margin-bottom: 0; }
        strong { font-weight: 700; }
        .lead { font-size: clamp(19px, 2vw, 23px); color: #4c474a; max-width: 760px; line-height: 1.65; }
        .muted { color: var(--ink-soft); }
        .center { text-align: center; }
        .center .eyebrow { justify-content: center; }
        .center .eyebrow::after { content: ""; width: 30px; height: 1px; background: currentColor; }
        .center .lead { margin-inline: auto; }

        .header {
            position: sticky; top: 0; z-index: 100;
            background: rgba(255, 253, 251, .91);
            backdrop-filter: blur(18px) saturate(135%);
            border-bottom: 1px solid rgba(90, 68, 53, .09);
        }
        .nav-wrap { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
        .brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 238px; }
        .brand img { width: 224px; height: auto; }
        .nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
        .nav a {
            text-decoration: none; text-transform: uppercase; letter-spacing: .085em;
            font-size: 12px; font-weight: 700; color: #333035; position: relative;
            padding: 9px 0;
        }
        .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1px; background: var(--copper); transition: right .25s ease; }
        .nav a:hover::after, .nav a:focus-visible::after { right: 0; }
        .nav-cta {
            border: 1px solid var(--copper) !important; color: var(--copper-dark) !important;
            padding: 10px 16px !important; border-radius: 999px;
        }
        .nav-cta::after { display: none; }
        .menu-button { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); align-items: center; justify-content: center; cursor: pointer; }
        .menu-button span, .menu-button span::before, .menu-button span::after { width: 19px; height: 1.5px; background: var(--ink); display: block; position: relative; transition: .25s ease; }
        .menu-button span::before, .menu-button span::after { content: ""; position: absolute; left: 0; }
        .menu-button span::before { top: -6px; }
        .menu-button span::after { top: 6px; }
        .menu-button[aria-expanded="true"] span { background: transparent; }
        .menu-button[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
        .menu-button[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

        .hero {
            min-height: auto;
            display: grid; align-items: start; overflow: hidden;
            background:
                radial-gradient(circle at 83% 15%, rgba(173,154,139,.18), transparent 30%),
                radial-gradient(circle at 8% 84%, rgba(163,95,50,.11), transparent 28%),
                linear-gradient(135deg, #fffdfb 0%, #f8f2ec 52%, #f2e8df 100%);
        }
        .hero::before {
            content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
            border: 1px solid rgba(163,95,50,.10); right: -230px; top: 80px;
            box-shadow: 0 0 0 90px rgba(255,255,255,.22), 0 0 0 180px rgba(255,255,255,.12);
        }
        .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 72px; align-items: center; padding: 38px 0 58px; }
        .hero-copy { position: relative; z-index: 2; }
        .hero-copy .lead { max-width: 710px; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
        .hero-language-note { margin: 18px 0 0; max-width: 720px; color: #6a6264; font-size: 13px; line-height: 1.55; }
        .button {
            min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            padding: 13px 22px; border-radius: 999px; text-decoration: none; border: 1px solid transparent;
            font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
            cursor: pointer;
        }
        .button.primary { background: var(--copper); color: #fff; box-shadow: 0 12px 30px rgba(130,71,34,.18); }
        .button.secondary { background: rgba(255,255,255,.62); border-color: rgba(90,68,53,.20); color: var(--ink); }
        .button:hover { transform: translateY(-2px); }
        .button.primary:hover { background: var(--copper-dark); box-shadow: 0 16px 34px rgba(130,71,34,.22); }
        .hero-languages { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 9px; color: #675f62; font-size: 13px; }
        .hero-languages span { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(83,62,50,.13); border-radius: 999px; background: rgba(255,255,255,.52); }

        .hero-card {
            position: relative; z-index: 1; min-height: 515px; border-radius: 34px;
            background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(236,226,216,.72));
            border: 1px solid rgba(113,89,72,.12); box-shadow: var(--shadow);
            padding: 38px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
        }
        .hero-card::before {
            content: "SK"; font-family: Georgia, serif; font-size: 180px; line-height: .8;
            letter-spacing: -.12em; position: absolute; top: 75px; left: 48px; color: rgba(35,33,36,.055);
        }
        .hero-card::after { display: none; }
        .hero-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; position: relative; z-index: 1; }
        .hero-card-mark { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(98,74,58,.15); background: rgba(255,255,255,.62); }
        .hero-card-mark img { width: 66px; height: 66px; object-fit: contain; }
        .hero-card-number { font-family: Georgia, serif; font-size: 16px; color: var(--taupe-dark); }
        .hero-card-quote { position: relative; z-index: 1; max-width: 390px; }
        .hero-card-quote blockquote { margin: 0; font-family: Georgia, serif; font-size: 31px; line-height: 1.28; color: #272327; }
        .hero-card-quote p { margin-top: 16px; color: #6a6264; font-size: 14px; }

        .trust-strip { background: #fffdfb; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
        .trust-item { padding: 24px 28px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 16px; min-height: 92px; }
        .trust-item:last-child { border-right: 0; }
        .trust-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; color: var(--copper); }
        .trust-icon svg { width: 42px; height: 42px; }
        .trust-item strong { display: block; font-size: 13px; line-height: 1.35; }
        .trust-item span { display: block; font-size: 12px; line-height: 1.5; color: #655e61; margin-top: 3px; }

        .services-intro { max-width: 820px; margin-inline: auto; text-align: center; }
        .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
        .service-card {
            background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 18px;
            padding: 28px 22px 24px; min-height: 295px; display: flex; flex-direction: column; transition: .24s ease;
        }
        .service-card:hover { transform: translateY(-5px); border-color: rgba(163,95,50,.34); box-shadow: 0 18px 40px rgba(80,58,44,.08); }
        .service-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(163,95,50,.28); color: var(--copper); margin-bottom: 22px; }
        .service-icon svg { width: 37px; height: 37px; }
        .service-card h3 { font-family: inherit; font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; }
        .service-card p { font-size: 14px; color: #5f585b; line-height: 1.65; }
        .service-card a { margin-top: auto; color: var(--copper-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
        .service-card a span { transition: transform .2s ease; }
        .service-card a:hover span { transform: translateX(4px); }

        .details-stack { display: grid; gap: 14px; margin-top: 46px; }
        .service-detail { border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.65); overflow: hidden; }
        .service-detail summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px 28px; }
        .service-detail summary::-webkit-details-marker { display: none; }
        .detail-index { font-family: Georgia, serif; font-size: 18px; color: var(--taupe-dark); }
        .service-detail summary strong { font-size: 17px; }
        .detail-plus { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
        .detail-plus::before, .detail-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--copper); transform: translate(-50%,-50%); }
        .detail-plus::after { transform: translate(-50%,-50%) rotate(90deg); transition: .2s ease; }
        details[open] .detail-plus::after { transform: translate(-50%,-50%) rotate(0deg); }
        .detail-body { border-top: 1px solid var(--line); padding: 30px 28px 34px 74px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr); gap: 44px; }
        .detail-body p, .detail-body li { color: #544e51; }
        .detail-body ul { margin: 18px 0 0; padding: 0; list-style: none; }
        .detail-body li { padding-left: 23px; position: relative; margin: 8px 0; }
        .detail-body li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--copper); border-radius: 50%; position: absolute; left: 0; top: .72em; }
        .detail-aside { background: var(--cream); border-radius: 16px; padding: 24px; align-self: start; border: 1px solid rgba(113,89,72,.08); }
        .detail-aside strong { display: block; margin-bottom: 8px; }
        .detail-aside p { font-size: 14px; }

        .split { display: grid; grid-template-columns: .84fr 1.16fr; gap: 82px; align-items: center; }
        .portrait-placeholder {
            min-height: 640px; border-radius: 30px; overflow: hidden; position: relative;
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(53,43,37,.08)),
                radial-gradient(circle at 30% 22%, rgba(255,255,255,.70), transparent 24%),
                linear-gradient(135deg, #ddd0c4 0%, #efe7df 45%, #c8b19f 100%);
            border: 1px solid rgba(99,73,57,.10); box-shadow: var(--shadow);
        }
        .portrait-placeholder::before { content: ""; position: absolute; width: 280px; height: 430px; border-radius: 150px 150px 80px 80px; left: 50%; top: 15%; transform: translateX(-50%); background: rgba(255,255,255,.36); filter: blur(2px); }
        .portrait-placeholder::after { content: "PROSTOR ZA FOTOGRAFIJO"; position: absolute; left: 32px; bottom: 28px; color: rgba(45,39,40,.56); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
        .bio-copy .lead { margin-bottom: 28px; }
        .bio-copy p { color: #504a4d; }
        .bio-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
        .bio-highlight { border-top: 1px solid var(--line); padding-top: 14px; }
        .bio-highlight strong { font-size: 13px; display: block; }
        .bio-highlight span { font-size: 13px; color: #70686b; }

        .approach-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 90px; }
        .approach-side { position: sticky; top: 132px; align-self: start; }
        .approach-list { display: grid; gap: 12px; }
        .approach-item { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
        .approach-item strong { display: block; margin-bottom: 6px; }
        .approach-item p { color: #5d5659; font-size: 15px; }

        .group-panel { border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: #262326; color: white; box-shadow: var(--shadow); }
        .group-copy { padding: 58px; }
        .group-copy h2 { color: white; }
        .group-copy p, .group-copy li { color: rgba(255,255,255,.72); }
        .group-copy .eyebrow { color: #d6a986; }
        .group-copy ul { padding-left: 20px; }
        .group-note { background: linear-gradient(145deg, #c7ad99, #9e7b64); padding: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .group-note::before { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); right: -190px; bottom: -210px; box-shadow: 0 0 0 70px rgba(255,255,255,.05), 0 0 0 140px rgba(255,255,255,.025); pointer-events: none; }
        .group-photo { position: relative; z-index: 1; width: 100%; height: 270px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.18); }
        .group-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .group-note-content { position: relative; z-index: 2; padding: 42px 48px 48px; margin-top: auto; }
        .group-note blockquote { position: relative; margin: 0; font-family: Georgia, serif; color: white; font-size: 31px; line-height: 1.25; max-width: 410px; }
        .group-note p { position: relative; color: rgba(255,255,255,.78); margin-top: 16px; }

        .fit-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; }
        .fit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .fit-item { border: 1px solid var(--line); background: var(--white); border-radius: 16px; padding: 22px; display: flex; gap: 13px; color: #4e494b; }
        .check { width: 22px; height: 22px; border-radius: 50%; background: rgba(163,95,50,.11); color: var(--copper); display: grid; place-items: center; flex: 0 0 auto; margin-top: 2px; font-size: 12px; font-weight: 800; }
        .fit-note { margin-top: 18px; padding: 22px 24px; border: 1px solid rgba(163,95,50,.25); border-radius:14px; background: rgba(163,95,50,.055); color: #514a4d; }

        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; counter-reset: step; }
        .step { border: 1px solid var(--line); border-radius: 20px; padding: 30px; background: rgba(255,255,255,.68); position: relative; min-height: 280px; }
        .step::before { counter-increment: step; content: "0" counter(step); font-family: Georgia, serif; color: var(--taupe); font-size: 18px; display: block; margin-bottom: 36px; }
        .step h3 { font-family: inherit; font-size: 20px; font-weight: 760; }
        .step p { color: #5e575a; font-size: 15px; }

        .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
        .price-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 34px; position: relative; overflow: hidden; }
        .price-card.featured { border-color: rgba(163,95,50,.28); background: linear-gradient(145deg, #fffdfb, #f6eee7); }
        .price-card h3 { font-family: inherit; font-size: 19px; font-weight: 760; }
        .price { font-family: Georgia, serif; font-size: 46px; line-height: 1; margin: 22px 0 18px; letter-spacing: -.04em; }
        .price small { font-family: inherit; font-size: 13px; color: #70686b; letter-spacing: 0; }
        .price-card p { color: #5d5659; }
        .pricing-info { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
        .pricing-info ul { margin: 0; padding-left: 20px; color: #5b5558; }

        .faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 84px; align-items: start; }
        .faq-head { position: sticky; top: 132px; }
        .faq-list { border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item summary { list-style: none; cursor: pointer; padding: 23px 4px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; font-weight: 700; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; color: var(--copper); font-size: 23px; font-weight: 400; transition: .2s ease; }
        .faq-item[open] summary::after { transform: rotate(45deg); }
        .faq-answer { padding: 0 42px 24px 4px; color: #5a5457; }

        .contact-section { background: #242124; color: white; overflow: hidden; }
        .contact-section::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; right: -310px; top: -220px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 0 0 110px rgba(255,255,255,.02), 0 0 0 220px rgba(255,255,255,.015); }
        .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; position: relative; }
        .contact-section h2 { color: white; }
        .contact-section .lead { color: rgba(255,255,255,.70); }
        .contact-section .eyebrow { color: #d2a17c; }
        .contact-lines { margin-top: 32px; display: grid; gap: 10px; }
        .contact-line { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
        .contact-line span { color: rgba(255,255,255,.48); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
        .contact-line a { text-decoration: none; color: white; }
        .contact-line em { color: rgba(255,255,255,.55); }
        .language-list { margin-top: 26px; color: rgba(255,255,255,.58); font-size: 14px; }

        .contact-form { background: #fffdfb; color: var(--ink); border-radius: 24px; padding: 34px; box-shadow: 0 30px 70px rgba(0,0,0,.14); }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .field { display: grid; gap: 7px; }
        .field.full { grid-column: 1 / -1; }
        .field label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #6a6265; }
        .field input, .field textarea { width: 100%; border: 1px solid rgba(79,59,48,.16); background: #fff; border-radius: 12px; padding: 13px 14px; outline: none; color: var(--ink); transition: .2s ease; }
        .field input:focus, .field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(163,95,50,.08); }
        .field textarea { min-height: 145px; resize: vertical; }
        .field.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
        .form-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; }
        .form-note { font-size: 12px; color: #7b7376; max-width: 360px; }
        .notice { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
        .notice.success { background: #edf7ef; color: #315a3b; border: 1px solid #cfe9d4; }
        .notice.error { background: #fff1ef; color: #743e37; border: 1px solid #f0d3cf; }

        .footer { background: #1c1a1c; color: rgba(255,255,255,.58); padding: 30px 0; font-size: 12px; }
        .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
        .footer-brand { display: flex; align-items: center; gap: 13px; color: white; }
        .footer-brand img { width: 42px; height: 42px; object-fit: contain; }
        .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
        .footer-links a { text-decoration: none; }

        @media (max-width: 1120px) {
            :root { --header-h: 80px; }
            .nav { gap: 16px; }
            .nav a { font-size: 11px; }
            .brand { min-width: 196px; }
            .brand img { width: 190px; }
            .hero-grid { gap: 40px; }
            .cards { grid-template-columns: repeat(3, 1fr); }
            .cards .service-card:nth-child(4), .cards .service-card:nth-child(5) { grid-column: span 1; }
            .split { gap: 55px; }
        }

        @media (max-width: 900px) {
            .container { width: min(100% - 34px, var(--max)); }
            .menu-button { display: inline-flex; }
            .nav {
                position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
                display: grid; gap: 0; background: rgba(255,253,251,.98); border-bottom: 1px solid var(--line);
                padding: 10px 24px 22px; transform: translateY(-130%); opacity: 0; pointer-events: none;
                transition: transform .26s ease, opacity .2s ease;
            }
            .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
            .nav a { font-size: 13px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
            .nav a::after { display: none; }
            .nav-cta { margin-top: 10px; text-align: center; border-bottom: 1px solid var(--copper) !important; }
            .hero { min-height: auto; }
            .hero-grid { grid-template-columns: 1fr; padding: 44px 0 52px; }
            .hero-card { min-height: 380px; }
            .trust-grid { grid-template-columns: repeat(2, 1fr); }
            .trust-item:nth-child(2) { border-right: 0; }
            .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .cards { grid-template-columns: repeat(2, 1fr); }
            .detail-body { grid-template-columns: 1fr; padding-left: 28px; }
            .split, .approach-grid, .fit-grid, .faq-layout, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
            .portrait-placeholder { min-height: 440px; }
            .approach-side, .faq-head { position: static; }
            .group-panel { grid-template-columns: 1fr; }
            .group-note { min-height: 360px; }
            .steps { grid-template-columns: 1fr; }
            .step { min-height: auto; }
            .pricing-info { grid-template-columns: 1fr; gap: 20px; }
        }

        @media (max-width: 640px) {
            body { font-size: 15px; }
            .section { padding: 76px 0; }
            .section.compact { padding: 58px 0; }
            .brand { min-width: 0; }
            .brand img { width: 178px; }
            .hero-grid { padding-top: 28px; }
            h1 { font-size: clamp(38px, 11.5vw, 54px); }
            h2 { font-size: clamp(34px, 10vw, 46px); }
            .lead { font-size: 18px; }
            .hero-card { min-height: 340px; padding: 28px; border-radius: 25px; }
            .hero-card::before { font-size: 135px; left: 24px; }
            .hero-card-quote blockquote { font-size: 26px; }
            .hero-actions { display: grid; }
            .button { width: 100%; }
            .trust-grid { grid-template-columns: 1fr; }
            .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
            .trust-item:last-child { border-bottom: 0; }
            .cards { grid-template-columns: 1fr; }
            .service-card { min-height: 0; }
            .service-detail summary { padding: 20px; gap: 12px; }
            .detail-body { padding: 24px 20px 26px; }
            .portrait-placeholder { min-height: 360px; }
            .bio-highlights, .fit-list, .pricing-grid, .form-grid { grid-template-columns: 1fr; }
            .group-copy, .group-note-content { padding: 34px 28px; }
            .group-note blockquote { font-size: 28px; }
            .group-photo { height: 220px; }
            .price-card { padding: 28px; }
            .contact-form { padding: 24px 20px; }
            .form-foot { align-items: stretch; flex-direction: column; }
            .footer-row { align-items: flex-start; flex-direction: column; }
            .contact-line { grid-template-columns: 74px 1fr; }
        }

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

        /* Language dropdown - keeps the original public design compact. */
        .lang-switch { position: relative; margin-left: 2px; flex: 0 0 auto; }
        .lang-button {
            height: 42px; min-width: 72px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--ink);
            cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .05em;
        }
        .lang-button:hover { border-color: rgba(163,95,50,.35); }
        .lang-button .flag { font-size: 16px; line-height: 1; }
        .lang-button svg { width: 12px; height: 12px; transition: transform .2s ease; }
        .lang-switch.open .lang-button svg { transform: rotate(180deg); }
        .lang-menu {
            position: absolute; right: 0; top: calc(100% + 9px); width: 190px; padding: 7px; border: 1px solid var(--line);
            border-radius: 15px; background: rgba(255,253,251,.99); box-shadow: 0 18px 45px rgba(77,56,41,.16);
            opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .18s ease; z-index: 130;
        }
        .lang-switch.open .lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #413c3f; font-size: 13px; }
        .lang-menu a:hover, .lang-menu a.active { background: rgba(163,95,50,.08); color: var(--copper-dark); }
        .lang-menu .flag { width: 22px; text-align: center; font-size: 16px; }
        .lang-menu small { margin-left: auto; font-size: 10px; color: #8c8286; text-transform: uppercase; letter-spacing: .08em; }

        .portrait-placeholder.has-image { min-height: 640px; }
        .portrait-placeholder.has-image::before, .portrait-placeholder.has-image::after { display: none; }
        .portrait-placeholder.has-image img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; position: absolute; inset: 0; }
        .hero-card.has-image { padding: 0; background: #e9ddd3; }
        .hero-card.has-image::before, .hero-card.has-image::after { display: none; }
        .hero-card.has-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .hero-card.has-image .hero-card-photo-overlay { position: absolute; inset: auto 24px 24px 24px; z-index: 2; padding: 18px 20px; border-radius: 18px; color: #fff; background: rgba(34,31,32,.72); backdrop-filter: blur(8px); }
        .hero-card.has-image .hero-card-photo-overlay strong { display: block; font-family: Georgia, serif; font-size: 24px; font-weight: 400; line-height: 1.25; }
        .hero-card.has-image .hero-card-photo-overlay span { display: block; margin-top: 5px; font-size: 12px; color: rgba(255,255,255,.72); }
        .approach-list .approach-item p:last-child { margin-bottom: 0; }
        .process-note { max-width: 850px; margin: 24px auto 0; padding: 18px 22px; border: 1px solid rgba(163,95,50,.25); border-radius:14px; background: rgba(163,95,50,.055); color: #514a4d; }
        .price-cta { margin-top: 22px; text-align: center; font-weight: 700; color: var(--copper-dark); }
        .contact-line svg { width: 20px; height: 20px; color: #d2a17c; vertical-align: middle; margin-right: 8px; }
        .contact-inline-langs { color: rgba(255,255,255,.68); }

        @media (max-width: 1120px) {
            .lang-switch { margin-left: auto; }
        }
        @media (max-width: 900px) {
            .nav-wrap { gap: 12px; }
            .lang-switch { margin-left: auto; }
            .menu-button { margin-left: 0; }
            .lang-menu { right: 0; }
        }
        @media (max-width: 640px) {
            .lang-button { min-width: 62px; padding: 0 10px; }
            .lang-button .lang-name { display: none; }
            .portrait-placeholder.has-image, .portrait-placeholder.has-image img { min-height: 360px; }
        }

/* V4: kadar je kontaktni obrazec v administraciji izklopljen */
.contact-grid.no-form{grid-template-columns:minmax(0,780px);justify-content:start}
@media(max-width:760px){.contact-grid.no-form{grid-template-columns:1fr}}

/* V5 layout refinements */
.portrait-placeholder.has-image img{object-position:center center}

/* V6 refinements */
.hero::before{
    background:rgba(173,154,139,.16);
    border-color:rgba(173,154,139,.16);
    box-shadow:none;
}
.hero-symbol-card{
    min-height:515px;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    display:grid;
    place-items:center;
}
.hero-symbol-card::before,.hero-symbol-card::after{display:none!important}
.hero-symbol-circle{
    width:min(430px,92%);
    aspect-ratio:1;
    border-radius:50%;
    background:#c7ad99;
    display:grid;
    place-items:center;
    overflow:hidden;
    box-shadow:0 26px 70px rgba(77,56,41,.13);
}
.hero-symbol-circle img{
    width:66%;
    height:66%;
    object-fit:contain;
}
.hero-card.has-image .hero-card-photo-overlay{display:none}
.about-languages{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid var(--line);
    color:#413b3e!important;
}

.approach-wide{max-width:var(--max)}
.approach-wide>h2{margin-top:0;max-width:none}
.approach-item-single{
    width:100%;
    padding:36px 40px;
}
.approach-item-single p{
    font-size:16px;
    line-height:1.75;
    max-width:none;
}
.approach-item-single p+p{margin-top:18px}

.cards{grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{min-height:275px}

.service-topic-section{padding:38px 0}
.service-topic-section:first-of-type{padding-top:70px}
.topic-panel{
    display:grid;
    grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);
    border:1px solid var(--line);
    border-radius:30px;
    overflow:hidden;
    background:rgba(255,255,255,.78);
    box-shadow:0 18px 50px rgba(77,56,41,.06);
}
.topic-main{padding:54px 58px}
.topic-main h2{font-size:clamp(34px,4vw,50px);margin-top:10px}
.topic-main p,.topic-main li{color:#544e51}
.topic-main ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.topic-main li{position:relative;padding-left:23px}
.topic-main li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border:1px solid var(--copper);border-radius:50%}
.topic-aside{
    padding:54px 44px;
    background:linear-gradient(145deg,#eadfd5,#d7c3b3);
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid rgba(113,89,72,.08);
}
.topic-aside strong{font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400;line-height:1.25;color:#2d292b;margin-bottom:15px}
.topic-aside p{color:#5b5255;font-size:15px}

.contact-copy{font-size:16px;line-height:1.72;color:rgba(255,255,255,.62);max-width:680px}
.contact-copy+.contact-copy{margin-top:0}
.language-list{display:grid;gap:12px}
.language-list>strong:first-child{color:#fff}
.contact-language-flags{display:flex;flex-wrap:wrap;gap:9px 14px;color:rgba(255,255,255,.72)}
.contact-language-flags span{display:inline-flex;align-items:center;gap:6px}
.contact-mode{display:block;color:#fff;margin-top:5px}
.form-requirement{font-size:12px;color:#746c70;margin:12px 0 0}
.form-note{margin-top:8px}
.form-submit-row{margin-top:18px;display:flex;justify-content:flex-start}

@media(max-width:900px){
    .hero-symbol-card{min-height:380px}
    .hero-symbol-circle{width:min(360px,88%)}
    .cards{grid-template-columns:repeat(2,1fr)}
    .topic-panel{grid-template-columns:1fr}
    .topic-aside{border-left:0;border-top:1px solid rgba(113,89,72,.08);padding:34px 32px}
    .topic-main{padding:40px 34px}
}
@media(max-width:640px){
    .hero-symbol-card{min-height:310px}
    .hero-symbol-circle{width:min(290px,86%)}
    .cards{grid-template-columns:1fr}
    .approach-item-single{padding:26px 22px}
    .topic-main{padding:32px 24px}
    .topic-aside{padding:28px 24px}
    .service-topic-section{padding:24px 0}
    .contact-language-flags{display:grid;grid-template-columns:1fr 1fr}
    .form-submit-row .button{width:100%}
}

/* V7 visual refinements */
/* Modern navigation hover: soft animated capsule instead of a simple underline */
.nav a:not(.nav-cta){
    z-index:0;
    padding:10px 13px;
    border-radius:999px;
    transition:color .22s ease, transform .22s ease;
}
.nav a:not(.nav-cta)::before{
    content:"";
    position:absolute;
    inset:3px 0;
    z-index:-1;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(163,95,50,.12),rgba(198,174,153,.20));
    transform:scale(.82);
    opacity:0;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.nav a:not(.nav-cta)::after{display:none}
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta):focus-visible{
    color:var(--copper-dark);
    transform:translateY(-1px);
}
.nav a:not(.nav-cta):hover::before,
.nav a:not(.nav-cta):focus-visible::before{
    transform:scale(1);
    opacity:1;
}
.nav-cta{
    transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease!important;
}
.nav-cta:hover,.nav-cta:focus-visible{
    background:var(--copper)!important;
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(130,71,34,.16);
}

/* Hero: no decorative brown circle; instead an organic cluster of photo circles */
.hero::before{display:none!important}
.hero-photo-cluster{
    position:relative;
    min-height:500px;
    z-index:1;
}
.hero-photo{
    position:absolute;
    margin:0;
    border-radius:50%;
    overflow:hidden;
    background:#e9ddd3;
    border:7px solid rgba(255,253,251,.92);
    box-shadow:0 22px 55px rgba(71,51,39,.14);
}
.hero-photo img{width:100%;height:100%;display:block;object-fit:cover}
.hero-photo-1{width:330px;height:330px;right:58px;top:62px;z-index:3}
.hero-photo-2{width:172px;height:172px;right:0;top:2px;z-index:2}
.hero-photo-3{width:138px;height:138px;left:10px;bottom:30px;z-index:4}
.hero-photo-4{width:108px;height:108px;right:4px;bottom:14px;z-index:5}
.hero-photo-1::after,.hero-photo-2::after,.hero-photo-3::after,.hero-photo-4::after{
    content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(83,62,50,.07);pointer-events:none
}

/* About languages */
.about-languages{display:grid;gap:13px}
.about-languages>span{font-size:15px;color:#514b4e}
.about-language-flags{display:flex;flex-wrap:wrap;gap:9px 17px;color:#5c5558;font-size:14px}
.about-language-flags span{display:inline-flex;align-items:center;gap:6px}
.about-language-flags strong{color:#302c2f}

/* Individual service sections: one-column cards with consistent page background */
.service-topic-section{
    background:#f7f2ec!important;
    padding:18px 0;
}
.service-topic-section:first-of-type{padding-top:64px}
.service-topic-section:last-of-type{padding-bottom:70px}
.topic-panel{
    display:block;
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
    background:#fffdfb;
    box-shadow:0 15px 42px rgba(77,56,41,.055);
}
.topic-panel.topic-panel-tinted{
    background:#f2e8df;
}
.topic-main{padding:48px 54px}
.topic-heading{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:26px;
}
.topic-heading h2{margin:0;font-size:clamp(32px,3.5vw,48px)}
.topic-heading .eyebrow{margin-bottom:8px}
.topic-icon{
    width:68px;height:68px;flex:0 0 auto;border-radius:50%;
    display:grid;place-items:center;color:var(--copper);
    border:1px solid rgba(163,95,50,.26);
    background:rgba(255,255,255,.48);
}
.topic-icon svg{width:42px;height:42px}
.topic-main p,.topic-main li{color:#544e51}
.topic-main ul{margin:25px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 30px}
.topic-main li{position:relative;padding-left:23px}
.topic-main li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border:1px solid var(--copper);border-radius:50%}
.topic-note{
    margin-top:30px;
    padding:22px 24px;
    border:1px solid rgba(163,95,50,.25);
    background:rgba(255,255,255,.50);
    border-radius:14px;
}
.topic-note strong{display:block;font-size:15px;color:#302c2f;margin-bottom:5px}
.topic-note p{margin:0;font-size:14px;color:#5b5558}
.topic-note p+p{margin-top:10px}
.topic-cta strong{color:var(--copper-dark)}
.topic-subtitle{font-family:inherit;font-size:19px;font-weight:750;margin:30px 0 10px;color:#302c2f}
.group-topic-panel{box-shadow:0 15px 42px rgba(77,56,41,.055)}

@media(max-width:1120px){
    .hero-photo-1{width:300px;height:300px;right:38px}
    .hero-photo-2{width:150px;height:150px}
}
@media(max-width:900px){
    .nav a:not(.nav-cta){padding:14px 8px;border-radius:10px}
    .nav a:not(.nav-cta)::before{inset:5px 0;border-radius:10px}
    .hero-photo-cluster{min-height:430px;max-width:560px;width:100%;margin:0 auto}
    .hero-photo-1{width:300px;height:300px;right:70px;top:55px}
    .hero-photo-2{width:150px;height:150px;right:15px;top:0}
    .hero-photo-3{left:40px;bottom:25px}
    .hero-photo-4{right:38px;bottom:8px}
    .topic-main ul{grid-template-columns:1fr}
}
@media(max-width:640px){
    .hero-photo-cluster{min-height:340px}
    .hero-photo{border-width:5px}
    .hero-photo-1{width:235px;height:235px;right:32px;top:55px}
    .hero-photo-2{width:118px;height:118px;right:0;top:2px}
    .hero-photo-3{width:105px;height:105px;left:0;bottom:18px}
    .hero-photo-4{width:82px;height:82px;right:12px;bottom:0}
    .topic-main{padding:31px 23px}
    .topic-heading{align-items:flex-start;gap:14px}
    .topic-icon{width:56px;height:56px}
    .topic-icon svg{width:34px;height:34px}
    .topic-heading h2{font-size:31px}
    .about-language-flags{display:grid;grid-template-columns:1fr 1fr;gap:9px}
}

/* V8: alternating section rhythm, subtle topic cards and unified pricing */
.light-section{background:var(--cream-2)}
.dark-section{
    background:#272427;
    color:#f7f1ec;
}
.dark-section h1,.dark-section h2,.dark-section h3{color:#fffdfb}
.dark-section .eyebrow{color:#d7a681}
.dark-section .lead{color:rgba(255,255,255,.72)}
.dark-section p{color:rgba(255,255,255,.72)}

/* O meni starts the alternating dark/light sequence */
#o-meni .bio-copy p{color:rgba(255,255,255,.72)}
#o-meni .portrait-placeholder{
    border-color:rgba(255,255,255,.10);
    box-shadow:0 28px 70px rgba(0,0,0,.20);
}
#o-meni .about-languages{
    border-top-color:rgba(255,255,255,.12);
    color:rgba(255,255,255,.78)!important;
}
#o-meni .about-languages>span{color:rgba(255,255,255,.72)}
#o-meni .about-language-flags{color:rgba(255,255,255,.72)}
#o-meni .about-language-flags strong{color:#fff}

/* Moj pristop stays light and full-width */
#pristop{background:#fbf8f4}
#pristop .approach-item-single{background:#fffdfb}

/* Storitve is the next dark section; cards stay light for clarity */
.services-dark .services-intro h2{color:#fffdfb}
.services-dark .services-intro .lead{color:rgba(255,255,255,.70)}
.services-dark .service-card{
    background:#fffdfb;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 14px 38px rgba(0,0,0,.08);
}
.services-dark .service-card h3{color:#292629}
.services-dark .service-card p{color:#5f585b}
.services-dark .service-card:hover{box-shadow:0 20px 46px rgba(0,0,0,.16);border-color:rgba(210,161,124,.55)}

/* Detailed services: same section background, only an almost imperceptible alternating card tint */
.service-topic-section{background:#f7f2ec!important}
.topic-panel{background:#fffdfb}
.topic-panel.topic-panel-tinted{background:#fbf7f3}
.group-topic-panel{background:#fbf7f3}

/* Za koga: dark block with light content tiles */
#za-koga .fit-note{
    color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.055);
    border-left-color:#d7a681;
}
#za-koga .fit-item{background:#fffdfb;color:#4e494b;border-color:rgba(255,255,255,.08)}

/* Cenik: both cards identical at rest, same warm highlight only on hover */
.pricing-dark .center h2{color:#fffdfb}
.pricing-dark .center .lead{color:rgba(255,255,255,.70)}
.pricing-dark .price-card{
    background:#fffdfb;
    border-color:rgba(255,255,255,.10);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.pricing-dark .price-card:hover{
    transform:translateY(-4px);
    border-color:rgba(163,95,50,.30);
    background:linear-gradient(145deg,#fffdfb,#f6eee7);
    box-shadow:0 18px 44px rgba(0,0,0,.15);
}
.pricing-dark .pricing-info{border-top-color:rgba(255,255,255,.12)}
.pricing-dark .pricing-info>strong{color:#fff}
.pricing-dark .pricing-info ul{color:rgba(255,255,255,.72)}
.pricing-dark .price-cta{color:#e0b28f}

/* FAQ is light again */
#faq{background:#fffdfb}

@media(max-width:900px){
    .dark-section{background:#272427}
}
\n\n/* V9: all main content sections use the original light palette. */
#o-meni{
    background:var(--cream-2)!important;
    color:var(--ink)!important;
}
#o-meni h1,#o-meni h2,#o-meni h3{color:#201f20!important}
#o-meni .eyebrow{color:var(--copper)!important}
#o-meni .lead,#o-meni .bio-copy p{color:var(--ink-soft)!important}
#o-meni .portrait-placeholder{
    border-color:var(--line)!important;
    box-shadow:var(--shadow)!important;
}
#o-meni .about-languages{
    border-top-color:var(--line)!important;
    color:#514b4e!important;
}
#o-meni .about-languages>span{color:#514b4e!important}
#o-meni .about-language-flags{color:#5c5558!important}
#o-meni .about-language-flags strong{color:#302c2f!important}

/* Restore the light section rhythm used before the dark-section experiment. */
#pristop,#za-koga,#cenik{background:var(--cream)!important;color:var(--ink)!important}
#storitve,#potek,#faq{background:var(--white)!important;color:var(--ink)!important}
#storitve h1,#storitve h2,#storitve h3,
#za-koga h1,#za-koga h2,#za-koga h3,
#cenik h1,#cenik h2,#cenik h3{color:#201f20!important}
#storitve .lead,#za-koga .lead,#cenik .lead{color:var(--ink-soft)!important}
#storitve .eyebrow,#za-koga .eyebrow,#cenik .eyebrow{color:var(--copper)!important}

#za-koga .fit-note{
    color:#514a4d!important;
    background:rgba(163,95,50,.055)!important;
    border-left-color:var(--copper)!important;
}
#za-koga .fit-item{
    background:var(--white)!important;
    color:#4e494b!important;
    border-color:var(--line)!important;
}

/* Keep both price cards identical until hover. */
#cenik .price-card,#cenik .price-card.featured{
    background:var(--white)!important;
    border-color:var(--line)!important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
#cenik .price-card:hover,#cenik .price-card.featured:hover{
    transform:translateY(-4px);
    border-color:rgba(163,95,50,.30)!important;
    background:linear-gradient(145deg,#fffdfb,#f6eee7)!important;
    box-shadow:0 18px 44px rgba(77,56,41,.11);
}
#cenik .pricing-info{border-top-color:var(--line)!important}
#cenik .pricing-info>strong{color:#302c2f!important}
#cenik .pricing-info ul{color:#5d5659!important}
#cenik .price-cta{color:var(--copper-dark)!important}

/* V10: corrected light section rhythm and readable O meni/contact blocks */

/* O meni keeps the requested cream-2 background, but the copy sits in a clear card. */
#o-meni{
    background:var(--cream-2)!important;
}
#o-meni .bio-copy{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    padding:clamp(30px,4vw,50px);
    box-shadow:0 18px 52px rgba(77,56,41,.07);
}

/* Alternate the following main areas in the opposite order from V9. */
#pristop{
    background:var(--white)!important;
    color:var(--ink)!important;
}
#pristop .approach-item-single{
    background:var(--cream-2)!important;
    border-color:var(--line)!important;
}

#storitve,
.service-topic-section{
    background:var(--cream-2)!important;
    color:var(--ink)!important;
}

#za-koga{
    background:var(--white)!important;
    color:var(--ink)!important;
}

#potek{
    background:var(--cream-2)!important;
    color:var(--ink)!important;
}

#cenik{
    background:var(--white)!important;
    color:var(--ink)!important;
}

#faq{
    background:var(--cream-2)!important;
    color:var(--ink)!important;
}

/* Contact follows the same light visual system instead of being a special dark block. */
#kontakt.contact-section{
    background:var(--white)!important;
    color:var(--ink)!important;
    overflow:hidden;
}
#kontakt.contact-section::before{
    display:none!important;
}
#kontakt.contact-section h2{
    color:#201f20!important;
}
#kontakt.contact-section .eyebrow{
    color:var(--copper)!important;
}
#kontakt .contact-copy{
    color:var(--ink-soft)!important;
}
#kontakt .contact-line{
    border-bottom-color:var(--line)!important;
}
#kontakt .contact-line span{
    color:#756d70!important;
}
#kontakt .contact-line a{
    color:var(--ink)!important;
}
#kontakt .contact-line em{
    color:#8c8587!important;
}
#kontakt .contact-inline-langs,
#kontakt .contact-language-flags{
    color:#5c5558!important;
}
#kontakt .contact-mode{
    color:#302c2f!important;
}
#kontakt .contact-form{
    background:var(--cream-2)!important;
    color:var(--ink)!important;
    border:1px solid var(--line);
    box-shadow:0 18px 52px rgba(77,56,41,.08);
}
#kontakt .contact-line svg{
    color:var(--copper)!important;
}

@media(max-width:760px){
    #o-meni .bio-copy{
        padding:26px 22px;
        border-radius:20px;
    }
}

/* V11: navigation polish, about layout and subtle content cards */
.header{
    background:rgba(255,253,251,.76)!important;
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    backdrop-filter:blur(24px) saturate(145%);
    border-bottom:1px solid rgba(90,68,53,.075);
    box-shadow:0 8px 28px rgba(77,56,41,.025);
}

/* Cleaner menu hover: animated fine line + a soft glow, no capsule. */
.nav a:not(.nav-cta){
    padding:10px 3px;
    border-radius:0;
    transition:color .22s ease,transform .22s ease,letter-spacing .22s ease;
}
.nav a:not(.nav-cta)::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:26px;
    height:8px;
    border-radius:50%;
    background:rgba(163,95,50,.16);
    filter:blur(7px);
    opacity:0;
    transform:translateX(-50%) scale(.45);
    transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
    z-index:-1;
}
.nav a:not(.nav-cta)::after{
    display:block!important;
    content:"";
    position:absolute;
    left:50%;
    right:auto;
    bottom:2px;
    width:100%;
    height:1.5px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--copper) 28%,var(--copper) 72%,transparent);
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    opacity:.9;
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta):focus-visible{
    color:var(--copper-dark);
    transform:translateY(-1px);
    letter-spacing:.095em;
}
.nav a:not(.nav-cta):hover::before,
.nav a:not(.nav-cta):focus-visible::before{
    opacity:1;
    transform:translateX(-50%) scale(1);
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta):focus-visible::after{
    transform:translateX(-50%) scaleX(1);
}

/* O meni: heading belongs to the left column, above the portrait. */
#o-meni .about-split{align-items:start}
#o-meni .about-left{display:grid;gap:28px;align-self:start}
#o-meni .about-heading h2{margin-bottom:0;font-size:clamp(34px,4vw,52px)}
#o-meni .portrait-placeholder{min-height:560px}
#o-meni .bio-copy{align-self:start;margin-top:0}

/* Bold emphasis in Moj pristop remains inline inside paragraphs. */
#pristop .approach-item-single p strong{
    display:inline;
    margin:0;
}

/* Detailed topic tiles: only a barely perceptible alternating tint. */
.topic-panel.topic-panel-tinted,
.topic-panel.topic-panel-tinted.group-topic-panel,
.group-topic-panel{
    background:#fdfaf8!important;
}

/* Za koga: give the right-side tiles enough tone against the white section. */
#za-koga .fit-item{
    background:#f8f2ed!important;
    border-color:rgba(113,89,72,.13)!important;
    box-shadow:0 8px 24px rgba(77,56,41,.035);
}
#za-koga .fit-item:hover{
    background:#f4eae2!important;
    border-color:rgba(163,95,50,.20)!important;
}

/* Cenik: both cards use the warm hover treatment already at rest. */
#cenik .price-card,
#cenik .price-card.featured{
    background:linear-gradient(145deg,#fffdfb,#f6eee7)!important;
    border-color:rgba(163,95,50,.20)!important;
    box-shadow:0 10px 30px rgba(77,56,41,.055);
}
#cenik .price-card:hover,
#cenik .price-card.featured:hover{
    transform:translateY(-4px);
    border-color:rgba(163,95,50,.34)!important;
    background:linear-gradient(145deg,#fffaf6,#f1e4d9)!important;
    box-shadow:0 18px 44px rgba(77,56,41,.11);
}

/* Pomembne informacije: title and list are stacked and aligned left. */
#cenik .pricing-info{
    display:block!important;
    text-align:left;
    max-width:none;
}
#cenik .pricing-info>strong{
    display:block;
    margin-bottom:14px;
}
#cenik .pricing-info ul{
    margin:0;
    padding-left:20px;
}

@media(max-width:900px){
    .nav a:not(.nav-cta){padding:14px 4px;border-radius:0}
    .nav a:not(.nav-cta)::before{display:none}
    .nav a:not(.nav-cta)::after{bottom:7px}
    #o-meni .about-left{gap:22px}
    #o-meni .portrait-placeholder{min-height:500px}
}

/* V12: fixed nav hover, full-outline notes, inline emphasis, pricing + suitable card polish */

/* Hover can grow visually without changing the flex layout or moving neighbouring links. */
.nav a:not(.nav-cta){
    display:inline-block;
    transform-origin:center;
    transition:color .22s ease,transform .28s cubic-bezier(.2,.8,.2,1)!important;
}
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta):focus-visible{
    color:var(--copper-dark);
    transform:translateY(-2px) scale(1.075);
    letter-spacing:.085em; /* keep the original width so adjacent links stay fixed */
}

/* Notes that previously had only a left accent now have a complete, subtle outline. */
.fit-note,
.process-note,
.topic-note{
    border:1px solid rgba(163,95,50,.25)!important;
    border-radius:14px!important;
}
.topic-aside{
    border:1px solid rgba(113,89,72,.10);
}
@media(max-width:900px){
    .topic-aside{border:1px solid rgba(113,89,72,.10);}
}

/* Bold emphasis inside running copy must never force a new line by itself. */
.bio-copy p strong,
.approach-item p strong,
.topic-main p strong,
.topic-main li strong,
.topic-note p strong,
.fit-item strong,
.fit-note strong,
.process-note strong,
.price-card p strong,
.pricing-info li strong,
.faq-answer strong,
.contact-copy strong,
.service-card p strong{
    display:inline!important;
    margin:0!important;
}

/* Za koga: warmer beige at rest; hover lifts it back toward the previous lighter tone. */
#za-koga .fit-item{
    background:#f2e6dc!important;
    border-color:rgba(113,89,72,.15)!important;
    transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
#za-koga .fit-item:hover{
    background:#f8f2ed!important;
    border-color:rgba(163,95,50,.20)!important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(77,56,41,.045);
}

/* Cenik: solid warm surface at rest; gradient appears only on hover. */
#cenik .price-card,
#cenik .price-card.featured{
    background:#f6eee7!important;
    border-color:rgba(163,95,50,.20)!important;
}
#cenik .price-card:hover,
#cenik .price-card.featured:hover{
    background:linear-gradient(145deg,#fffaf6,#f1e4d9)!important;
    border-color:rgba(163,95,50,.34)!important;
}
#cenik .price-cta{
    text-align:left!important;
}


/* V13: cleaner outlines, darker group inclusion note, subtler suitability tiles */

/* Ensure note cards have one uniform outline on every side. */
.fit-note,
.process-note,
.topic-note{
    border:1px solid rgba(163,95,50,.24)!important;
    border-left-width:1px!important;
    border-radius:14px!important;
    box-shadow:none!important;
}

/* Group inclusion box: dark, elegant contrast with light text. */
.group-topic-panel .topic-note{
    background:#393235!important;
    border-color:#393235!important;
    color:#f7f1ec!important;
    box-shadow:0 12px 30px rgba(49,40,43,.10)!important;
}
.group-topic-panel .topic-note strong,
.group-topic-panel .topic-note p{
    color:#f7f1ec!important;
}
.group-topic-panel .topic-note .topic-cta strong{
    color:#e7bb99!important;
}

/* Za koga: cream-2 at rest, only fractionally darker on hover. */
#za-koga .fit-item{
    background:var(--cream-2)!important;
    border-color:rgba(113,89,72,.13)!important;
    box-shadow:0 7px 20px rgba(77,56,41,.025);
}
#za-koga .fit-item:hover{
    background:#f7f2ec!important;
    border-color:rgba(163,95,50,.17)!important;
    transform:translateY(-1px);
    box-shadow:0 9px 24px rgba(77,56,41,.035);
}

/* V14: all service detail note boxes use the same light cream treatment */
.topic-note,
.group-topic-panel .topic-note{
    background:var(--cream-2)!important;
    border:1px solid rgba(163,95,50,.24)!important;
    color:#544e51!important;
    box-shadow:none!important;
}
.topic-note strong,
.topic-note p,
.group-topic-panel .topic-note strong,
.group-topic-panel .topic-note p{
    color:#544e51!important;
}
.topic-note > strong,
.group-topic-panel .topic-note > strong{
    color:#302c2f!important;
}
.topic-note .topic-cta strong,
.group-topic-panel .topic-note .topic-cta strong{
    color:var(--copper-dark)!important;
}


/* V15: unified light note cards, fully clickable service tiles and neutral navigation */

/* All small informational cards inside the service topics use the same cream-2 surface. */
.topic-note,
.group-topic-panel .topic-note{
    background:var(--cream-2)!important;
    border:1px solid rgba(163,95,50,.20)!important;
    color:#544e51!important;
    box-shadow:none!important;
}
.topic-note strong,
.topic-note p,
.group-topic-panel .topic-note strong,
.group-topic-panel .topic-note p{
    color:#544e51!important;
}
.topic-note > strong,
.group-topic-panel .topic-note > strong{
    color:#302c2f!important;
}
.topic-note .topic-cta strong,
.group-topic-panel .topic-note .topic-cta strong{
    color:var(--copper-dark)!important;
}

/* Service overview: the whole tile is the link; there is no separate VEČ action. */
a.service-card{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    position:relative;
}
a.service-card:focus-visible{
    outline:2px solid rgba(110,105,108,.55);
    outline-offset:3px;
}
a.service-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 0 0 0 rgba(92,87,90,0);
    transition:box-shadow .24s ease;
}
a.service-card:hover::after,
a.service-card:focus-visible::after{
    box-shadow:inset 0 0 0 1px rgba(92,87,90,.10);
}

/* Main navigation: neutral graphite tones, including Kontakt. */
.nav a,
.nav a:not(.nav-cta){
    color:#666266!important;
}
.nav a::before,
.nav a:not(.nav-cta)::before{
    background:rgba(82,78,81,.14)!important;
}
.nav a::after,
.nav a:not(.nav-cta)::after{
    background:linear-gradient(90deg,transparent,#777277 28%,#777277 72%,transparent)!important;
}
.nav a:hover,
.nav a:focus-visible,
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta):focus-visible{
    color:#29272a!important;
}

/* Legacy CTA styling is intentionally neutralized: Kontakt behaves like every other menu link. */
.nav .nav-cta{
    border:0!important;
    color:#666266!important;
    padding:10px 3px!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.nav .nav-cta:hover,
.nav .nav-cta:focus-visible{
    color:#29272a!important;
    background:transparent!important;
    box-shadow:none!important;
}

@media(max-width:900px){
    .nav a,
    .nav .nav-cta{
        color:#555257!important;
        padding:14px 4px!important;
        border-radius:0!important;
    }
}

/* V16: refined 8-photo hero collage — balanced circles, no oversized/elliptical shapes */
.hero-photo-cluster{
    position:relative;
    width:min(100%,620px);
    min-height:510px;
    margin-left:auto;
    isolation:isolate;
}
.hero-photo-cluster::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:92px;
    top:72px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(221,205,192,.28) 0%,rgba(221,205,192,.11) 45%,rgba(221,205,192,0) 72%);
    filter:blur(2px);
    z-index:-1;
    pointer-events:none;
}
.hero-photo{
    position:absolute;
    margin:0;
    width:var(--size);
    height:var(--size);
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    background:#ece3dc;
    border:5px solid rgba(255,253,251,.96);
    box-shadow:0 14px 34px rgba(66,53,45,.12),0 2px 7px rgba(66,53,45,.06);
    transform:translateZ(0);
}
.hero-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.hero-photo::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(67,52,43,.05);
    pointer-events:none;
}

/* One dominant image, two medium anchors, five small supporting circles. */
.hero-photo-1{--size:286px;left:164px;top:112px;z-index:6}
.hero-photo-2{--size:180px;left:40px;top:42px;z-index:3}
.hero-photo-3{--size:158px;right:12px;top:34px;z-index:5}
.hero-photo-4{--size:126px;left:32px;bottom:24px;z-index:7}
.hero-photo-5{--size:114px;right:56px;bottom:32px;z-index:8}
.hero-photo-6{--size:94px;left:250px;top:8px;z-index:4}
.hero-photo-7{--size:84px;right:0;top:222px;z-index:4}
.hero-photo-8{--size:74px;left:156px;bottom:0;z-index:9}

/* Keep a slight organic overlap, but never distort the circles. */
.hero-photo-2,.hero-photo-3,.hero-photo-4,.hero-photo-5,.hero-photo-6,.hero-photo-7,.hero-photo-8{
    transition:transform .28s ease,box-shadow .28s ease;
}
@media(hover:hover){
    .hero-photo-cluster:hover .hero-photo:not(:hover){opacity:.96}
    .hero-photo:hover{
        transform:translateY(-4px) scale(1.035);
        box-shadow:0 20px 42px rgba(66,53,45,.16),0 3px 9px rgba(66,53,45,.08);
        z-index:20;
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:540px;min-height:470px}
    .hero-photo-1{--size:260px;left:142px;top:105px}
    .hero-photo-2{--size:160px;left:25px;top:42px}
    .hero-photo-3{--size:142px;right:8px;top:35px}
    .hero-photo-4{--size:112px;left:26px;bottom:30px}
    .hero-photo-5{--size:102px;right:44px;bottom:36px}
    .hero-photo-6{--size:84px;left:224px;top:10px}
    .hero-photo-7{--size:74px;right:0;top:210px}
    .hero-photo-8{--size:66px;left:142px;bottom:5px}
}

@media(max-width:900px){
    .hero-photo-cluster{width:min(100%,560px);min-height:455px;margin:0 auto}
    .hero-photo-1{--size:255px;left:50%;top:100px;transform:translateX(-50%)}
    .hero-photo-2{--size:150px;left:20px;top:38px}
    .hero-photo-3{--size:138px;right:20px;top:28px}
    .hero-photo-4{--size:108px;left:36px;bottom:30px}
    .hero-photo-5{--size:98px;right:42px;bottom:34px}
    .hero-photo-6{--size:82px;left:50%;top:6px;transform:translateX(-50%)}
    .hero-photo-7{--size:72px;right:2px;top:218px}
    .hero-photo-8{--size:64px;left:150px;bottom:4px}
    @media(hover:hover){
        .hero-photo-1:hover,.hero-photo-6:hover{transform:translateX(-50%) translateY(-4px) scale(1.035)}
    }
}

@media(max-width:640px){
    .hero-photo-cluster{width:100%;min-height:350px;max-width:390px}
    .hero-photo{border-width:4px}
    .hero-photo-cluster::before{width:260px;height:260px;right:50%;transform:translateX(50%);top:58px}
    .hero-photo-1{--size:205px;left:50%;top:78px;transform:translateX(-50%)}
    .hero-photo-2{--size:112px;left:4px;top:28px}
    .hero-photo-3{--size:104px;right:2px;top:24px}
    .hero-photo-4{--size:82px;left:15px;bottom:25px}
    .hero-photo-5{--size:78px;right:18px;bottom:28px}
    .hero-photo-6{--size:66px;left:50%;top:2px;transform:translateX(-50%)}
    .hero-photo-7{display:none}
    .hero-photo-8{display:none}
}

/* V19: refined hero collage — balanced eight-photo composition with fixed border thickness. */
.hero-photo-cluster{
    position:relative;
    width:min(100%,640px);
    min-height:560px;
    margin-left:auto;
    isolation:isolate;
    overflow:visible;
}
.hero-photo-cluster::before{
    content:"";
    position:absolute;
    width:390px;
    height:390px;
    left:51%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(221,205,192,.15) 0%,rgba(221,205,192,.05) 54%,rgba(221,205,192,0) 75%);
    pointer-events:none;
}

/* The figure is only the fixed positioning anchor. The visible frame grows on hover,
   so its white border remains the same physical thickness instead of being scaled. */
.hero-photo{
    position:absolute;
    width:var(--size);
    height:var(--size);
    left:var(--x);
    top:var(--y);
    transform:translate(-50%,-50%);
    margin:0;
    display:block !important;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    filter:none;
    transition:none;
    z-index:var(--z,3);
}
.hero-photo-frame{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%);
    display:block;
    overflow:hidden;
    border-radius:50%;
    border:6px solid rgba(255,255,255,.98);
    background:#fff;
    box-shadow:0 15px 34px rgba(72,57,46,.11),0 3px 10px rgba(72,57,46,.06);
    transition:
        width 1.05s cubic-bezier(.16,1,.30,1),
        height 1.05s cubic-bezier(.16,1,.30,1),
        box-shadow .95s cubic-bezier(.16,1,.30,1);
    will-change:width,height;
}
.hero-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:none;
    filter:none;
    transition:filter .9s ease;
}

/* One dominant centre image, seven deliberately varied satellites.
   The spacing is asymmetric but balanced and avoids the random/clustered look. */
.hero-photo-1{--size:300px;--hover-size:330px;--x:51%;--y:50%;--z:8}
.hero-photo-2{--size:142px;--hover-size:220px;--x:22%;--y:22%;--z:4}
.hero-photo-3{--size:112px;--hover-size:200px;--x:80%;--y:20%;--z:4}
.hero-photo-4{--size:88px; --hover-size:190px;--x:8%; --y:52%;--z:3}
.hero-photo-5{--size:104px;--hover-size:205px;--x:91%;--y:53%;--z:3}
.hero-photo-6{--size:124px;--hover-size:215px;--x:23%;--y:82%;--z:4}
.hero-photo-7{--size:96px; --hover-size:195px;--x:78%;--y:82%;--z:4}
.hero-photo-8{--size:76px; --hover-size:185px;--x:52%;--y:8%; --z:3}

@media(hover:hover) and (pointer:fine){
    .hero-photo:hover,
    .hero-photo-1:hover,
    .hero-photo-8:hover{
        transform:translate(-50%,-50%);
        z-index:100;
    }
    .hero-photo:hover .hero-photo-frame{
        width:var(--hover-size);
        height:var(--hover-size);
        box-shadow:0 28px 62px rgba(66,53,45,.20),0 8px 20px rgba(66,53,45,.10);
    }
    .hero-photo:hover img{
        filter:saturate(1.035) contrast(1.015);
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:min(100%,570px);min-height:510px}
    .hero-photo-1{--size:272px;--hover-size:310px;--x:51%;--y:51%}
    .hero-photo-2{--size:128px;--hover-size:205px;--x:21%;--y:22%}
    .hero-photo-3{--size:102px;--hover-size:188px;--x:81%;--y:20%}
    .hero-photo-4{--size:80px; --hover-size:178px;--x:7%; --y:53%}
    .hero-photo-5{--size:94px; --hover-size:190px;--x:92%;--y:53%}
    .hero-photo-6{--size:112px;--hover-size:198px;--x:23%;--y:82%}
    .hero-photo-7{--size:88px; --hover-size:182px;--x:79%;--y:82%}
    .hero-photo-8{--size:70px; --hover-size:170px;--x:52%;--y:8%}
}

@media(max-width:900px){
    .hero-photo-cluster{
        width:min(100%,520px);
        min-height:470px;
        margin:8px auto 0;
    }
    .hero-photo-1{--size:250px;--x:50%;--y:51%}
    .hero-photo-2{--size:116px;--x:20%;--y:22%}
    .hero-photo-3{--size:94px; --x:81%;--y:21%}
    .hero-photo-4{--size:74px; --x:7%; --y:53%}
    .hero-photo-5{--size:86px; --x:92%;--y:54%}
    .hero-photo-6{--size:104px;--x:22%;--y:82%}
    .hero-photo-7{--size:82px; --x:79%;--y:82%}
    .hero-photo-8{--size:64px; --x:51%;--y:8%}
}

/* Phone layout: all eight remain visible, but the composition is rebuilt for a narrow viewport
   instead of merely shrinking the desktop coordinates. */
@media(max-width:640px){
    .hero-photo-cluster{
        width:min(100%,360px);
        min-height:340px;
        margin:10px auto 0;
    }
    .hero-photo-cluster::before{
        width:225px;
        height:225px;
        left:50%;
        top:50%;
    }
    .hero-photo-frame{border-width:4px;box-shadow:0 9px 22px rgba(72,57,46,.09)}
    .hero-photo-1{--size:170px;--x:50%;--y:50%}
    .hero-photo-2{--size:84px; --x:15%;--y:21%}
    .hero-photo-3{--size:68px; --x:83%;--y:18%}
    .hero-photo-4{--size:56px; --x:7%; --y:49%}
    .hero-photo-5{--size:62px; --x:93%;--y:52%}
    .hero-photo-6{--size:76px; --x:19%;--y:82%}
    .hero-photo-7{--size:66px; --x:81%;--y:84%}
    .hero-photo-8{--size:50px; --x:53%;--y:7%}
}

@media(max-width:390px){
    .hero-photo-cluster{width:320px;min-height:310px}
    .hero-photo-1{--size:156px}
    .hero-photo-2{--size:76px}
    .hero-photo-3{--size:62px}
    .hero-photo-4{--size:50px}
    .hero-photo-5{--size:56px}
    .hero-photo-6{--size:68px}
    .hero-photo-7{--size:60px}
    .hero-photo-8{--size:46px}
}

/* V20: elegant 11-photo orbital hero collage.
   One dominant central portrait, ten deliberately varied satellites.
   No rectangular helper outlines; the white circular frame keeps a fixed border thickness. */
.hero-photo-cluster{
    position:relative;
    width:min(100%,680px);
    min-height:640px;
    margin-left:auto;
    isolation:isolate;
    overflow:visible;
}
.hero-photo-cluster::before{
    content:"";
    position:absolute;
    width:410px;
    height:410px;
    left:50%;
    top:52%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(221,205,192,.14) 0%,rgba(221,205,192,.05) 55%,rgba(221,205,192,0) 76%);
    pointer-events:none;
    z-index:0;
}
.hero-photo{
    position:absolute;
    width:var(--size)!important;
    height:var(--size)!important;
    left:var(--x)!important;
    top:var(--y)!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    border:0!important;
    outline:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    opacity:1!important;
    transition:none!important;
    z-index:var(--z,3)!important;
}
/* Kill the legacy rectangular pseudo-element that caused the faint square boxes. */
.hero-photo::before,
.hero-photo::after{
    content:none!important;
    display:none!important;
    box-shadow:none!important;
    border:0!important;
    outline:0!important;
}
.hero-photo-frame{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%);
    display:block;
    overflow:hidden;
    border-radius:50%;
    border:6px solid rgba(255,255,255,.99);
    outline:0;
    background:#fff;
    box-shadow:0 16px 36px rgba(72,57,46,.105),0 3px 10px rgba(72,57,46,.055);
    transition:
        width 1.05s cubic-bezier(.16,1,.30,1),
        height 1.05s cubic-bezier(.16,1,.30,1),
        box-shadow .95s cubic-bezier(.16,1,.30,1);
    will-change:width,height;
}
.hero-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    filter:none;
    transition:filter .9s ease;
}

/* Desktop composition inspired by an orbital / editorial bubble layout.
   It is deliberately asymmetric, but the visual mass is balanced around the centre. */
.hero-photo-1 {--size:300px;--hover-size:334px;--x:50%;--y:52%;--z:8}
.hero-photo-2 {--size:146px;--hover-size:222px;--x:18%;--y:25%;--z:4}
.hero-photo-3 {--size:88px; --hover-size:198px;--x:39%;--y:11%;--z:3}
.hero-photo-4 {--size:108px;--hover-size:205px;--x:68%;--y:13%;--z:4}
.hero-photo-5 {--size:132px;--hover-size:218px;--x:87%;--y:29%;--z:4}
.hero-photo-6 {--size:92px; --hover-size:198px;--x:10%;--y:52%;--z:3}
.hero-photo-7 {--size:150px;--hover-size:226px;--x:88%;--y:55%;--z:5}
.hero-photo-8 {--size:140px;--hover-size:220px;--x:17%;--y:79%;--z:4}
.hero-photo-9 {--size:136px;--hover-size:220px;--x:79%;--y:80%;--z:4}
.hero-photo-10{--size:96px; --hover-size:202px;--x:40%;--y:92%;--z:3}
.hero-photo-11{--size:78px; --hover-size:194px;--x:62%;--y:93%;--z:3}

@media(hover:hover) and (pointer:fine){
    .hero-photo:hover{
        z-index:200!important;
    }
    .hero-photo:hover .hero-photo-frame{
        width:var(--hover-size);
        height:var(--hover-size);
        box-shadow:0 30px 66px rgba(66,53,45,.19),0 9px 22px rgba(66,53,45,.09);
    }
    .hero-photo:hover img{
        filter:saturate(1.035) contrast(1.015);
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:min(100%,610px);min-height:575px}
    .hero-photo-1 {--size:274px;--hover-size:315px}
    .hero-photo-2 {--size:132px;--hover-size:210px}
    .hero-photo-3 {--size:80px; --hover-size:188px}
    .hero-photo-4 {--size:98px; --hover-size:194px}
    .hero-photo-5 {--size:120px;--hover-size:205px}
    .hero-photo-6 {--size:84px; --hover-size:188px}
    .hero-photo-7 {--size:136px;--hover-size:214px}
    .hero-photo-8 {--size:126px;--hover-size:208px}
    .hero-photo-9 {--size:122px;--hover-size:208px}
    .hero-photo-10{--size:86px; --hover-size:192px}
    .hero-photo-11{--size:70px; --hover-size:184px}
}

/* Tablet: keep the same visual idea, just tighten the orbit slightly. */
@media(max-width:900px){
    .hero-photo-cluster{
        width:min(100%,540px);
        min-height:520px;
        margin:10px auto 0;
    }
    .hero-photo-cluster::before{width:330px;height:330px}
    .hero-photo-1 {--size:244px;--x:50%;--y:52%}
    .hero-photo-2 {--size:116px;--x:17%;--y:25%}
    .hero-photo-3 {--size:70px; --x:39%;--y:10%}
    .hero-photo-4 {--size:86px; --x:68%;--y:12%}
    .hero-photo-5 {--size:104px;--x:87%;--y:29%}
    .hero-photo-6 {--size:74px; --x:9%; --y:52%}
    .hero-photo-7 {--size:118px;--x:89%;--y:56%}
    .hero-photo-8 {--size:110px;--x:17%;--y:80%}
    .hero-photo-9 {--size:106px;--x:79%;--y:81%}
    .hero-photo-10{--size:76px; --x:40%;--y:93%}
    .hero-photo-11{--size:62px; --x:62%;--y:94%}
}

/* Phone: all 11 photos stay visible. The layout is rebuilt for a narrow viewport,
   rather than simply shrinking the desktop coordinates. */
@media(max-width:640px){
    .hero-photo-cluster{
        width:min(100%,360px);
        min-height:390px;
        margin:14px auto 0;
    }
    .hero-photo-cluster::before{
        width:220px;
        height:220px;
        left:50%;
        top:52%;
    }
    .hero-photo-frame{
        border-width:4px;
        box-shadow:0 9px 22px rgba(72,57,46,.085),0 2px 6px rgba(72,57,46,.045);
    }
    .hero-photo-1 {--size:166px;--x:50%;--y:52%}
    .hero-photo-2 {--size:78px; --x:17%;--y:25%}
    .hero-photo-3 {--size:48px; --x:39%;--y:10%}
    .hero-photo-4 {--size:58px; --x:68%;--y:12%}
    .hero-photo-5 {--size:70px; --x:87%;--y:28%}
    .hero-photo-6 {--size:50px; --x:8%; --y:52%}
    .hero-photo-7 {--size:80px; --x:90%;--y:55%}
    .hero-photo-8 {--size:74px; --x:17%;--y:80%}
    .hero-photo-9 {--size:72px; --x:80%;--y:81%}
    .hero-photo-10{--size:52px; --x:39%;--y:93%}
    .hero-photo-11{--size:44px; --x:62%;--y:94%}
}

@media(max-width:390px){
    .hero-photo-cluster{width:320px;min-height:355px}
    .hero-photo-1 {--size:150px}
    .hero-photo-2 {--size:70px}
    .hero-photo-3 {--size:44px}
    .hero-photo-4 {--size:52px}
    .hero-photo-5 {--size:64px}
    .hero-photo-6 {--size:46px}
    .hero-photo-7 {--size:72px}
    .hero-photo-8 {--size:66px}
    .hero-photo-9 {--size:64px}
    .hero-photo-10{--size:48px}
    .hero-photo-11{--size:40px}
}

/* =========================================================
   V22 — refined 11-photo hero collage
   - same balanced composition as V21
   - slightly larger circles, especially the centre
   - half-width white border
   - hover grows the frame (not the border)
   - tighter vertical spacing on phones
   ========================================================= */

/* Keep navigation above the hero, also while a photo is enlarged. */
.header{
    z-index:1000!important;
}
.hero{
    position:relative;
    isolation:isolate;
}
.hero-grid{
    position:relative;
    z-index:1;
}

.hero-photo-cluster{
    position:relative!important;
    width:min(100%,740px)!important;
    min-height:0!important;
    aspect-ratio:1 / 1;
    margin:0 0 0 auto!important;
    overflow:visible!important;
    isolation:isolate;
    z-index:1;
}

.hero-photo-cluster::before{
    content:none!important;
    display:none!important;
}

.hero-photo{
    position:absolute!important;
    width:var(--size)!important;
    height:var(--size)!important;
    left:var(--x)!important;
    top:var(--y)!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
    border:0!important;
    outline:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    opacity:1!important;
    z-index:var(--z,2)!important;
}

.hero-photo::before,
.hero-photo::after{
    content:none!important;
    display:none!important;
}

/* The frame grows around its centre. Because its border is a fixed px value,
   the white ring does NOT get thicker during hover. */
.hero-photo-frame{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%)!important;
    display:block;
    overflow:hidden;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.99)!important;
    outline:0!important;
    background:#fff;
    box-shadow:0 14px 34px rgba(72,57,46,.09),0 2px 8px rgba(72,57,46,.04);
    transition:
        width 1.05s cubic-bezier(.16,1,.30,1),
        height 1.05s cubic-bezier(.16,1,.30,1),
        box-shadow .95s cubic-bezier(.16,1,.30,1);
    will-change:width,height;
}

.hero-photo img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    transform:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    transition:filter .9s ease, opacity 2.8s ease!important;
}

/* Soft ambient motion: clearer floating and more noticeable breathing fade. */
@keyframes heroBubbleFloatA{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0) rotate(0.001deg)}
    22%{transform:translate(-50%,-50%) translate3d(5px,-10px,0) rotate(0.001deg)}
    50%{transform:translate(-50%,-50%) translate3d(-7px,-18px,0) rotate(0.001deg)}
    78%{transform:translate(-50%,-50%) translate3d(4px,-9px,0) rotate(0.001deg)}
}
@keyframes heroBubbleFloatB{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0) rotate(0.001deg)}
    18%{transform:translate(-50%,-50%) translate3d(-6px,-8px,0) rotate(0.001deg)}
    52%{transform:translate(-50%,-50%) translate3d(8px,-16px,0) rotate(0.001deg)}
    82%{transform:translate(-50%,-50%) translate3d(-3px,-7px,0) rotate(0.001deg)}
}
@keyframes heroBubbleFloatC{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0) rotate(0.001deg)}
    26%{transform:translate(-50%,-50%) translate3d(7px,-7px,0) rotate(0.001deg)}
    58%{transform:translate(-50%,-50%) translate3d(-5px,-15px,0) rotate(0.001deg)}
    86%{transform:translate(-50%,-50%) translate3d(3px,-8px,0) rotate(0.001deg)}
}
@keyframes heroBubbleFade{
    0%,100%{opacity:1}
    32%{opacity:1}
    44%{opacity:.72}
    56%{opacity:.88}
    68%{opacity:1}
}
    42%{opacity:1}
    50%{opacity:.84}
    58%{opacity:1}
}


/* Same reference composition, but larger and more faithful to the sample:
   one dominant centre circle and a ring of varied satellites with more breathing room. */
.hero-photo-1 {--size:48.0%;--hover:114%;--x:49.5%;--y:52.0%;--z:8}
.hero-photo-2 {--size:26.5%;--hover:132%;--x:53.0%;--y:18.0%;--z:4}
.hero-photo-3 {--size:16.8%;--hover:188%;--x:84.0%;--y:18.5%;--z:3}
.hero-photo-4 {--size:22.8%;--hover:154%;--x:20.5%;--y:26.0%;--z:3}
.hero-photo-5 {--size:12.2%;--hover:220%;--x:39.0%;--y:15.5%;--z:2}
.hero-photo-6 {--size:23.8%;--hover:138%;--x:82.0%;--y:40.5%;--z:4}
.hero-photo-7 {--size:13.6%;--hover:194%;--x:10.0%;--y:50.5%;--z:2}
.hero-photo-8 {--size:26.5%;--hover:135%;--x:17.0%;--y:77.0%;--z:4}
.hero-photo-9 {--size:28.5%;--hover:127%;--x:80.0%;--y:75.0%;--z:4}
.hero-photo-10{--size:16.5%;--hover:184%;--x:39.0%;--y:90.0%;--z:3}
.hero-photo-11{--size:13.2%;--hover:208%;--x:61.0%;--y:86.0%;--z:2}

.hero-photo-1,.hero-photo-4,.hero-photo-8,.hero-photo-11{animation:heroBubbleFloatA 11s ease-in-out infinite}
.hero-photo-2,.hero-photo-6,.hero-photo-10{animation:heroBubbleFloatB 12.5s ease-in-out infinite -2.2s}
.hero-photo-3,.hero-photo-5,.hero-photo-7,.hero-photo-9{animation:heroBubbleFloatC 11.8s ease-in-out infinite -4.8s}
.hero-photo-2 img,.hero-photo-5 img,.hero-photo-8 img,.hero-photo-11 img{animation:heroBubbleFade 6.8s ease-in-out infinite}
.hero-photo-4 img,.hero-photo-7 img,.hero-photo-10 img{animation:heroBubbleFade 8.4s ease-in-out infinite -2.7s}
.hero-photo-3 img,.hero-photo-6 img,.hero-photo-9 img{animation:heroBubbleFade 9.4s ease-in-out infinite -5s}

/* Desktop hover: enlarge the circular frame itself around a fixed centre.
   The outer white border remains 3px the whole time. */
@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{
        z-index:50!important;
    }
    .hero-photo:hover .hero-photo-frame{
        width:var(--hover)!important;
        height:var(--hover)!important;
        box-shadow:0 28px 62px rgba(66,53,45,.16),0 8px 20px rgba(66,53,45,.07);
    }
    .hero-photo:hover img{
        filter:saturate(1.035) contrast(1.012);
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{
        width:min(100%,680px)!important;
    }
}

@media(max-width:900px){
    .hero-grid{
        gap:16px!important;
        padding-top:28px!important;
        padding-bottom:28px!important;
    }
    .hero-photo-cluster{
        width:min(100%,620px)!important;
        margin:0 auto!important;
    }
}

/* Phone: keep all 11 circles, reduce the empty vertical breathing room,
   and cap any hover-like state so nothing can escape the viewport. */
@media(max-width:640px){
    .hero-grid{
        gap:0!important;
        padding-top:34px!important;
        padding-bottom:2px!important;
    }
    .hero-photo-cluster{
        width:min(96vw,395px)!important;
        max-width:395px!important;
        margin:10px auto -12px!important;
        overflow:visible!important;
    }
    .hero-photo-frame{
        border-width:2px!important;
        box-shadow:0 8px 20px rgba(72,57,46,.075),0 2px 6px rgba(72,57,46,.03);
    }
    /* Even if a mobile browser emulates hover, keep growth subtle. */
    .hero-photo{--hover:106%}
}

@media(max-width:390px){
    .hero-grid{
        padding-top:28px!important;
        padding-bottom:0!important;
    }
    .hero-photo-cluster{
        width:min(96vw,360px)!important;
        margin:10px auto -12px!important;
    }
    .hero-photo-frame{
        border-width:2px!important;
    }
}

/* Touch devices: no enlargement at all; keep only the gentle ambient motion. */
@media (hover:none), (pointer:coarse){
    .hero-photo .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{
        width:100%!important;
        height:100%!important;
    }
    .hero-photo,
    .hero-photo:hover{
        z-index:var(--z,2)!important;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
    .hero-photo,
    .hero-photo img,
    .hero-photo-frame{
        animation:none!important;
        transition:none!important;
    }
}


/* =========================================================
   V25 — cleaner editorial 11-bubble layout
   - follows the supplied reference much more closely
   - larger overall scale
   - stronger floating / fading bubble effect
   - centre circle always grows slightly on hover
   ========================================================= */
.hero-photo-cluster{
    width:min(100%,780px)!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
    margin:0 0 0 auto!important;
}

.hero-photo{
    z-index:var(--z,2)!important;
    will-change:transform,opacity;
}

.hero-photo-frame{
    border:3px solid rgba(255,255,255,.98)!important;
    box-shadow:0 16px 38px rgba(72,57,46,.10),0 3px 10px rgba(72,57,46,.045)!important;
}

/* New reference-like layout: one dominant centre, two large top bubbles,
   one large bottom-left, one large bottom-middle, and smaller accents around. */
.hero-photo-1 {--size:52%;  --hover:109%; --x:50%; --y:52%; --z:8}
.hero-photo-2 {--size:25%;  --hover:124%; --x:37%; --y:16%; --z:4}
.hero-photo-3 {--size:24%;  --hover:124%; --x:70%; --y:18%; --z:4}
.hero-photo-4 {--size:15%;  --hover:145%; --x:13%; --y:30%; --z:3}
.hero-photo-5 {--size:16%;  --hover:145%; --x:91%; --y:28%; --z:3}
.hero-photo-6 {--size:19%;  --hover:132%; --x:82%; --y:51%; --z:4}
.hero-photo-7 {--size:27%;  --hover:122%; --x:16%; --y:72%; --z:4}
.hero-photo-8 {--size:25%;  --hover:124%; --x:39%; --y:87%; --z:4}
.hero-photo-9 {--size:17%;  --hover:138%; --x:74%; --y:84%; --z:3}
.hero-photo-10{--size:10%;  --hover:170%; --x:27%; --y:12%; --z:2}
.hero-photo-11{--size:10.5%;--hover:170%; --x:58%; --y:86%; --z:2}

/* More visible bobbing so they read as bubbles. */
@keyframes heroBubbleLiftA{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(4px,-8px,0)}
    50%{transform:translate(-50%,-50%) translate3d(-5px,-16px,0)}
    75%{transform:translate(-50%,-50%) translate3d(2px,-7px,0)}
}
@keyframes heroBubbleLiftB{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    20%{transform:translate(-50%,-50%) translate3d(-5px,-7px,0)}
    52%{transform:translate(-50%,-50%) translate3d(6px,-15px,0)}
    78%{transform:translate(-50%,-50%) translate3d(-2px,-8px,0)}
}
@keyframes heroBubbleLiftC{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    30%{transform:translate(-50%,-50%) translate3d(5px,-6px,0)}
    60%{transform:translate(-50%,-50%) translate3d(-4px,-14px,0)}
    82%{transform:translate(-50%,-50%) translate3d(3px,-6px,0)}
}
@keyframes heroBubbleOpacity{
    0%,100%{opacity:1}
    30%{opacity:1}
    42%{opacity:.72}
    54%{opacity:.90}
    68%{opacity:1}
}

.hero-photo-1,.hero-photo-6,.hero-photo-10{animation:heroBubbleLiftA 9.5s ease-in-out infinite!important}
.hero-photo-2,.hero-photo-5,.hero-photo-8,.hero-photo-11{animation:heroBubbleLiftB 10.8s ease-in-out infinite -2.4s!important}
.hero-photo-3,.hero-photo-4,.hero-photo-7,.hero-photo-9{animation:heroBubbleLiftC 10.2s ease-in-out infinite -4.1s!important}
.hero-photo-2 .hero-photo-frame,.hero-photo-5 .hero-photo-frame,.hero-photo-9 .hero-photo-frame{animation:heroBubbleOpacity 6.5s ease-in-out infinite!important}
.hero-photo-4 .hero-photo-frame,.hero-photo-8 .hero-photo-frame,.hero-photo-11 .hero-photo-frame{animation:heroBubbleOpacity 7.8s ease-in-out infinite -2.8s!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:60!important}
    .hero-photo:hover .hero-photo-frame{
        width:var(--hover)!important;
        height:var(--hover)!important;
        box-shadow:0 30px 68px rgba(66,53,45,.18),0 8px 20px rgba(66,53,45,.08)!important;
    }
    .hero-photo-1:hover .hero-photo-frame{
        width:112%!important;
        height:112%!important;
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:min(100%,710px)!important}
}

@media(max-width:900px){
    .hero-grid{padding-top:30px!important;padding-bottom:16px!important}
    .hero-photo-cluster{width:min(100%,620px)!important;margin:0 auto!important}
    .hero-photo-1 {--size:50%; --x:50%; --y:52%}
    .hero-photo-2 {--size:24%; --x:36%; --y:16%}
    .hero-photo-3 {--size:23%; --x:70%; --y:18%}
    .hero-photo-4 {--size:14%; --x:13%; --y:31%}
    .hero-photo-5 {--size:15%; --x:91%; --y:28%}
    .hero-photo-6 {--size:18%; --x:82%; --y:51%}
    .hero-photo-7 {--size:26%; --x:16%; --y:72%}
    .hero-photo-8 {--size:24%; --x:39%; --y:87%}
    .hero-photo-9 {--size:16%; --x:74%; --y:84%}
    .hero-photo-10{--size:9%;  --x:27%; --y:12%}
    .hero-photo-11{--size:10%; --x:58%; --y:86%}
}

@media(max-width:640px){
    .hero-grid{gap:0!important;padding-top:36px!important;padding-bottom:0!important}
    .hero-photo-cluster{width:min(95vw,410px)!important;max-width:410px!important;margin:12px auto -8px!important}
    .hero-photo-frame{border-width:2px!important}
    .hero-photo-1 {--size:49%; --x:50%; --y:51.5%}
    .hero-photo-2 {--size:23.5%; --x:37%; --y:16%}
    .hero-photo-3 {--size:22.5%; --x:70%; --y:18%}
    .hero-photo-4 {--size:14%; --x:13%; --y:31%}
    .hero-photo-5 {--size:14.5%; --x:91%; --y:28%}
    .hero-photo-6 {--size:17%; --x:82%; --y:51%}
    .hero-photo-7 {--size:25%; --x:16%; --y:72%}
    .hero-photo-8 {--size:23%; --x:39%; --y:87%}
    .hero-photo-9 {--size:15.5%; --x:74%; --y:84%}
    .hero-photo-10{--size:9%; --x:27%; --y:12%}
    .hero-photo-11{--size:9.5%; --x:58%; --y:86%}
}

@media(max-width:390px){
    .hero-grid{padding-top:30px!important;padding-bottom:0!important}
    .hero-photo-cluster{width:min(95vw,372px)!important;margin:10px auto -10px!important}
}

@media (hover:none), (pointer:coarse){
    .hero-photo .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{width:100%!important;height:100%!important}
}

@media (prefers-reduced-motion: reduce){
    .hero-photo,
    .hero-photo-frame{animation:none!important}
}


/* =========================================================
   V26 — exact reference-like 9-bubble composition
   - matches the provided silhouette much more closely
   - uses first 9 hero images in the hero composition
   - quicker/fuller fading and clearer bubble drift
   ========================================================= */
.hero-photo-cluster{
    width:min(100%,790px)!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
}

/* Match the reference composition more directly. */
.hero-photo-1 {--size:55%;  --hover:108%; --x:50%;   --y:52%;   --z:8}
.hero-photo-2 {--size:23.8%;--hover:124%; --x:38.2%; --y:15.2%; --z:4}
.hero-photo-3 {--size:24.2%;--hover:124%; --x:69.0%; --y:18.0%; --z:4}
.hero-photo-4 {--size:14.5%;--hover:145%; --x:13.6%; --y:31.0%; --z:3}
.hero-photo-5 {--size:14.0%;--hover:145%; --x:90.0%; --y:28.0%; --z:3}
.hero-photo-6 {--size:21.5%;--hover:132%; --x:81.6%; --y:51.5%; --z:4}
.hero-photo-7 {--size:28.8%;--hover:122%; --x:16.0%; --y:72.0%; --z:4}
.hero-photo-8 {--size:31.0%;--hover:120%; --x:39.0%; --y:86.2%; --z:4}
.hero-photo-9 {--size:18.0%;--hover:136%; --x:70.8%; --y:76.8%; --z:3}
.hero-photo-10,
.hero-photo-11{display:none!important}

@keyframes heroRefFloatA{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(5px,-8px,0)}
    50%{transform:translate(-50%,-50%) translate3d(-4px,-16px,0)}
    75%{transform:translate(-50%,-50%) translate3d(3px,-7px,0)}
}
@keyframes heroRefFloatB{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    22%{transform:translate(-50%,-50%) translate3d(-5px,-7px,0)}
    55%{transform:translate(-50%,-50%) translate3d(6px,-15px,0)}
    80%{transform:translate(-50%,-50%) translate3d(-2px,-6px,0)}
}
@keyframes heroRefFade{
    0%,100%{opacity:1}
    20%{opacity:1}
    32%{opacity:.68}
    44%{opacity:.9}
    58%{opacity:1}
}

.hero-photo-1,.hero-photo-3,.hero-photo-7{animation:heroRefFloatA 7.6s ease-in-out infinite!important}
.hero-photo-2,.hero-photo-5,.hero-photo-8{animation:heroRefFloatB 8.4s ease-in-out infinite -1.8s!important}
.hero-photo-4,.hero-photo-6,.hero-photo-9{animation:heroRefFloatA 8.8s ease-in-out infinite -3.4s!important}
.hero-photo-2 .hero-photo-frame,.hero-photo-5 .hero-photo-frame,.hero-photo-9 .hero-photo-frame{animation:heroRefFade 4.6s ease-in-out infinite!important}
.hero-photo-4 .hero-photo-frame,.hero-photo-6 .hero-photo-frame{animation:heroRefFade 5.4s ease-in-out infinite -1.8s!important}
.hero-photo-7 .hero-photo-frame{animation:heroRefFade 6s ease-in-out infinite -3.1s!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:80!important}
    .hero-photo:hover .hero-photo-frame{
        width:var(--hover)!important;
        height:var(--hover)!important;
        box-shadow:0 32px 72px rgba(66,53,45,.19),0 8px 20px rgba(66,53,45,.08)!important;
    }
    .hero-photo-1:hover .hero-photo-frame{
        width:108%!important;
        height:108%!important;
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:min(100%,720px)!important}
}

@media(max-width:900px){
    .hero-photo-cluster{width:min(100%,620px)!important;margin:0 auto!important}
    .hero-photo-1 {--size:53%}
    .hero-photo-2 {--size:23.5%}
    .hero-photo-3 {--size:24%}
    .hero-photo-4 {--size:14%}
    .hero-photo-5 {--size:13.5%}
    .hero-photo-6 {--size:21%}
    .hero-photo-7 {--size:28%}
    .hero-photo-8 {--size:30%}
    .hero-photo-9 {--size:17.5%}
}

@media(max-width:640px){
    .hero-grid{padding-top:34px!important;padding-bottom:0!important}
    .hero-photo-cluster{width:min(95vw,412px)!important;max-width:412px!important;margin:12px auto -10px!important}
    .hero-photo-frame{border-width:2px!important}
    .hero-photo-1 {--size:53%;  --x:50%;   --y:51.5%}
    .hero-photo-2 {--size:23.8%;--x:38.2%; --y:15.4%}
    .hero-photo-3 {--size:24.0%;--x:69.0%; --y:18.2%}
    .hero-photo-4 {--size:14.5%;--x:13.6%; --y:31.4%}
    .hero-photo-5 {--size:14.0%;--x:90.0%; --y:28.4%}
    .hero-photo-6 {--size:21.0%;--x:81.4%; --y:51.4%}
    .hero-photo-7 {--size:28.2%;--x:16.0%; --y:71.8%}
    .hero-photo-8 {--size:29.6%;--x:39.0%; --y:85.8%}
    .hero-photo-9 {--size:17.4%;--x:70.6%; --y:76.6%}
}

@media(max-width:390px){
    .hero-photo-cluster{width:min(95vw,370px)!important;margin:10px auto -10px!important}
}

@media (hover:none), (pointer:coarse){
    .hero-photo .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{width:100%!important;height:100%!important}
}


/* =========================================================
   V27 — reference-matched bubble composition
   ========================================================= */
.hero-photo-cluster{
    width:clamp(650px,52vw,820px)!important;
    max-width:none!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
    margin:0 0 0 auto!important;
    overflow:visible!important;
    position:relative!important;
}

/* Stop older animations from moving the positioned figure itself. */
.hero-photo{
    animation:none!important;
    transform:translate(-50%,-50%)!important;
    transition:none!important;
}

/* Exactly nine visible circles, matching the user's reference silhouette. */
.hero-photo-1 {--size:42.6%;--hover:108%;--x:54.3%;--y:53.9%;--z:8}
.hero-photo-2 {--size:28.0%;--hover:122%;--x:43.6%;--y:15.6%;--z:4}
.hero-photo-3 {--size:26.9%;--hover:122%;--x:73.2%;--y:22.3%;--z:4}
.hero-photo-4 {--size:15.2%;--hover:145%;--x:24.1%;--y:34.3%;--z:3}
.hero-photo-5 {--size:16.1%;--hover:145%;--x:97.0%;--y:31.9%;--z:3}
.hero-photo-6 {--size:25.7%;--hover:126%;--x:18.0%;--y:57.8%;--z:4}
.hero-photo-7 {--size:20.6%;--hover:132%;--x:88.2%;--y:50.6%;--z:4}
.hero-photo-8 {--size:24.8%;--hover:126%;--x:38.8%;--y:85.5%;--z:4}
.hero-photo-9 {--size:16.5%;--hover:140%;--x:75.6%;--y:77.3%;--z:3}
.hero-photo-10,
.hero-photo-11{display:none!important}

.hero-photo-frame{
    opacity:1;
    border-width:3px!important;
    transition:
        width .9s cubic-bezier(.16,1,.30,1),
        height .9s cubic-bezier(.16,1,.30,1),
        box-shadow .85s cubic-bezier(.16,1,.30,1),
        opacity 1.05s ease!important;
    will-change:transform,width,height,opacity;
}

/* Floating happens on the circular frame, so the absolute positions stay exact. */
@keyframes bubbleFloat1{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(5px,-7px,0)}
    50%{transform:translate(-50%,-50%) translate3d(-4px,-12px,0)}
    75%{transform:translate(-50%,-50%) translate3d(3px,-5px,0)}
}
@keyframes bubbleFloat2{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(-5px,-6px,0)}
    55%{transform:translate(-50%,-50%) translate3d(6px,-11px,0)}
    80%{transform:translate(-50%,-50%) translate3d(-2px,-5px,0)}
}
@keyframes bubbleFloat3{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    30%{transform:translate(-50%,-50%) translate3d(4px,-5px,0)}
    60%{transform:translate(-50%,-50%) translate3d(-5px,-10px,0)}
    85%{transform:translate(-50%,-50%) translate3d(2px,-4px,0)}
}
.hero-photo-1 .hero-photo-frame,
.hero-photo-4 .hero-photo-frame,
.hero-photo-8 .hero-photo-frame{animation:bubbleFloat1 7.2s ease-in-out infinite!important}
.hero-photo-2 .hero-photo-frame,
.hero-photo-6 .hero-photo-frame,
.hero-photo-9 .hero-photo-frame{animation:bubbleFloat2 8.1s ease-in-out infinite -1.7s!important}
.hero-photo-3 .hero-photo-frame,
.hero-photo-5 .hero-photo-frame,
.hero-photo-7 .hero-photo-frame{animation:bubbleFloat3 7.7s ease-in-out infinite -3.1s!important}

.hero-photo.is-fading .hero-photo-frame{opacity:.60!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:80!important}
    .hero-photo:hover .hero-photo-frame{
        animation-play-state:paused!important;
        width:var(--hover)!important;
        height:var(--hover)!important;
        opacity:1!important;
        box-shadow:0 30px 68px rgba(66,53,45,.18),0 8px 20px rgba(66,53,45,.08)!important;
    }
    .hero-photo-1:hover .hero-photo-frame{
        width:108%!important;
        height:108%!important;
    }
}

@media(max-width:1120px){
    .hero-photo-cluster{width:clamp(570px,55vw,700px)!important}
}

@media(max-width:900px){
    .hero-grid{padding-top:30px!important;padding-bottom:8px!important;gap:6px!important}
    .hero-photo-cluster{width:min(94vw,620px)!important;margin:12px auto -8px!important}
}

@media(max-width:640px){
    .hero-grid{padding-top:34px!important;padding-bottom:0!important;gap:0!important}
    .hero-photo-cluster{width:min(96vw,410px)!important;margin:12px auto -12px!important}
    .hero-photo-frame{border-width:2px!important}
    @keyframes bubbleFloat1{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-2px,-6px,0)}
    }
    @keyframes bubbleFloat2{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(3px,-5px,0)}
    }
    @keyframes bubbleFloat3{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-3px,-4px,0)}
    }
}

@media(max-width:390px){
    .hero-grid{padding-top:28px!important;padding-bottom:0!important}
    .hero-photo-cluster{width:min(96vw,370px)!important;margin:10px auto -12px!important}
}

@media (hover:none), (pointer:coarse){
    .hero-photo .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{
        width:100%!important;
        height:100%!important;
    }
}

@media (prefers-reduced-motion: reduce){
    .hero-photo-frame{animation:none!important;transition:none!important}
}


/* =========================================================
   V28 — geometry copied from the supplied 1212×1073 reference
   ========================================================= */
.hero-photo-cluster{
    width:clamp(700px,55vw,860px)!important;
    max-width:none!important;
    aspect-ratio:1212 / 1073!important;
    min-height:0!important;
    height:auto!important;
    margin:0 0 0 auto!important;
    overflow:visible!important;
    position:relative!important;
}

.hero-photo{
    animation:none!important;
    width:var(--size)!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    left:var(--x)!important;
    top:var(--y)!important;
    transform:translate(-50%,-50%)!important;
    transition:none!important;
}

/* Exact normalized positions/sizes from the user's reference image. */
.hero-photo-1 {--size:37.71%;--hover:110%;--x:48.31%;--y:54.24%;--z:8}
.hero-photo-2 {--size:24.83%;--hover:125%;--x:38.99%;--y:15.66%;--z:4}
.hero-photo-3 {--size:23.76%;--hover:125%;--x:65.18%;--y:22.37%;--z:4}
.hero-photo-4 {--size:13.53%;--hover:148%;--x:21.53%;--y:34.53%;--z:3}
.hero-photo-5 {--size:14.36%;--hover:148%;--x:86.47%;--y:32.06%;--z:3}
.hero-photo-6 {--size:22.94%;--hover:128%;--x:16.09%;--y:58.15%;--z:4}
.hero-photo-7 {--size:18.15%;--hover:134%;--x:78.63%;--y:50.89%;--z:4}
.hero-photo-8 {--size:22.11%;--hover:128%;--x:34.49%;--y:86.16%;--z:4}
.hero-photo-9 {--size:14.52%;--hover:145%;--x:67.49%;--y:77.82%;--z:3}
.hero-photo-10,
.hero-photo-11{display:none!important}

.hero-photo-frame{
    width:100%!important;
    height:100%!important;
    opacity:1;
    border-width:3px!important;
    transition:
        width .85s cubic-bezier(.16,1,.30,1),
        height .85s cubic-bezier(.16,1,.30,1),
        box-shadow .8s cubic-bezier(.16,1,.30,1),
        opacity .8s ease!important;
    will-change:transform,width,height,opacity;
}

/* Visible, gentle floating. Motion is on the frame, not on the positioned figure. */
@keyframes bubbleV28A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(3px,-4px,0)}
    50%{transform:translate(-50%,-50%) translate3d(-3px,-7px,0)}
    75%{transform:translate(-50%,-50%) translate3d(2px,-3px,0)}
}
@keyframes bubbleV28B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    25%{transform:translate(-50%,-50%) translate3d(-3px,-3px,0)}
    55%{transform:translate(-50%,-50%) translate3d(4px,-6px,0)}
    80%{transform:translate(-50%,-50%) translate3d(-2px,-2px,0)}
}
@keyframes bubbleV28C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
    30%{transform:translate(-50%,-50%) translate3d(3px,-3px,0)}
    60%{transform:translate(-50%,-50%) translate3d(-4px,-5px,0)}
    85%{transform:translate(-50%,-50%) translate3d(2px,-2px,0)}
}
.hero-photo-1 .hero-photo-frame,
.hero-photo-4 .hero-photo-frame,
.hero-photo-8 .hero-photo-frame{animation:bubbleV28A 6.2s ease-in-out infinite!important}
.hero-photo-2 .hero-photo-frame,
.hero-photo-6 .hero-photo-frame,
.hero-photo-9 .hero-photo-frame{animation:bubbleV28B 7.1s ease-in-out infinite -1.5s!important}
.hero-photo-3 .hero-photo-frame,
.hero-photo-5 .hero-photo-frame,
.hero-photo-7 .hero-photo-frame{animation:bubbleV28C 6.7s ease-in-out infinite -2.8s!important}

.hero-photo.is-fading .hero-photo-frame{opacity:.55!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:80!important}
    .hero-photo:hover .hero-photo-frame{
        animation-play-state:paused!important;
        width:var(--hover)!important;
        height:var(--hover)!important;
        opacity:1!important;
        box-shadow:0 30px 68px rgba(66,53,45,.18),0 8px 20px rgba(66,53,45,.08)!important;
    }
    .hero-photo-1:hover .hero-photo-frame{
        width:110%!important;
        height:110%!important;
    }
}

@media(max-width:1180px){
    .hero-photo-cluster{width:clamp(610px,58vw,760px)!important}
}

@media(max-width:900px){
    .hero-grid{padding-top:30px!important;padding-bottom:6px!important;gap:4px!important}
    .hero-photo-cluster{width:min(96vw,650px)!important;margin:12px auto -8px!important}
}

@media(max-width:640px){
    .hero-grid{padding-top:34px!important;padding-bottom:0!important;gap:0!important}
    .hero-photo-cluster{width:min(96vw,420px)!important;margin:12px auto -12px!important}
    .hero-photo-frame{border-width:2px!important}
    @keyframes bubbleV28A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-2px,-4px,0)}
    }
    @keyframes bubbleV28B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(2px,-4px,0)}
    }
    @keyframes bubbleV28C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-2px,-3px,0)}
    }
}

@media(max-width:390px){
    .hero-grid{padding-top:28px!important;padding-bottom:0!important}
    .hero-photo-cluster{width:min(96vw,372px)!important;margin:10px auto -12px!important}
}

@media (hover:none), (pointer:coarse){
    .hero-photo .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{
        width:100%!important;
        height:100%!important;
    }
}


/* =========================================================
   V29 — responsive hero/header refinements
   - prevent collage clipping on medium desktop widths
   - slightly reduce collage on large desktop
   - keep mobile CTAs inside the content width
   - keep hamburger on the far right
   ========================================================= */
@media (min-width:901px){
    .hero-grid{
        grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
        gap:52px!important;
    }
    .hero-copy{min-width:0!important}
    .hero-photo-cluster{
        width:100%!important;
        max-width:620px!important;
        justify-self:end!important;
        margin:0!important;
    }
}

@media (min-width:901px) and (max-width:1180px){
    .hero-grid{gap:38px!important}
    .hero-photo-cluster{max-width:540px!important}
}

@media (max-width:900px){
    .nav-wrap{width:100%!important}
    .menu-button{margin-left:auto!important;flex:0 0 auto!important}
    .lang-switch + .menu-button{margin-left:0!important}
    .hero-copy{min-width:0!important;width:100%!important;max-width:100%!important}
    .hero-photo-cluster{
        width:min(100%,600px)!important;
        max-width:600px!important;
        justify-self:center!important;
        margin:12px auto -4px!important;
    }
}

@media (max-width:640px){
    .hero-copy{overflow:visible!important}
    .hero-copy .eyebrow{
        display:flex!important;
        flex-wrap:wrap!important;
        max-width:100%!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }
    .hero-copy .eyebrow::before{flex:0 0 30px!important}
    .hero-copy .lead{
        width:100%!important;
        max-width:100%!important;
        overflow-wrap:break-word!important;
    }
    .hero-actions{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .hero-actions .button{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding-left:18px!important;
        padding-right:18px!important;
        white-space:normal!important;
        text-align:center!important;
    }
    .hero-photo-cluster{
        width:100%!important;
        max-width:390px!important;
        margin:14px auto -6px!important;
    }
}

@media (max-width:390px){
    .hero-actions .button{
        padding-left:14px!important;
        padding-right:14px!important;
        font-size:12px!important;
        letter-spacing:.065em!important;
    }
    .hero-photo-cluster{
        width:100%!important;
        max-width:350px!important;
        margin:12px auto -6px!important;
    }
}


/* =========================================================
   V30 — stronger ambient bubble motion
   ========================================================= */
@keyframes bubbleV30A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    20%{transform:translate(-50%,-50%) translate3d(5px,-4px,0) rotate(.35deg) scale(1.006)}
    48%{transform:translate(-50%,-50%) translate3d(-7px,-11px,0) rotate(-.5deg) scale(1.012)}
    74%{transform:translate(-50%,-50%) translate3d(4px,-7px,0) rotate(.2deg) scale(1.004)}
}
@keyframes bubbleV30B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    24%{transform:translate(-50%,-50%) translate3d(-6px,-3px,0) rotate(-.3deg) scale(1.004)}
    54%{transform:translate(-50%,-50%) translate3d(8px,-10px,0) rotate(.45deg) scale(1.012)}
    78%{transform:translate(-50%,-50%) translate3d(-3px,-6px,0) rotate(-.2deg) scale(1.006)}
}
@keyframes bubbleV30C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    18%{transform:translate(-50%,-50%) translate3d(4px,-2px,0) rotate(.25deg) scale(1.003)}
    47%{transform:translate(-50%,-50%) translate3d(-5px,-9px,0) rotate(-.35deg) scale(1.01)}
    72%{transform:translate(-50%,-50%) translate3d(6px,-6px,0) rotate(.25deg) scale(1.005)}
}

.hero-photo-1 .hero-photo-frame,
.hero-photo-4 .hero-photo-frame,
.hero-photo-8 .hero-photo-frame{animation:bubbleV30A 5.8s ease-in-out infinite!important}
.hero-photo-2 .hero-photo-frame,
.hero-photo-6 .hero-photo-frame,
.hero-photo-9 .hero-photo-frame{animation:bubbleV30B 6.4s ease-in-out infinite -1.1s!important}
.hero-photo-3 .hero-photo-frame,
.hero-photo-5 .hero-photo-frame,
.hero-photo-7 .hero-photo-frame{animation:bubbleV30C 6.0s ease-in-out infinite -2.2s!important}

.hero-photo.is-fading .hero-photo-frame{opacity:.42!important}

@media(max-width:640px){
    @keyframes bubbleV30A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-3px,-5px,0) scale(1.008)}
    }
    @keyframes bubbleV30B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(3px,-4px,0) scale(1.008)}
    }
    @keyframes bubbleV30C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-2px,-4px,0) scale(1.006)}
    }
}

@media (prefers-reduced-motion: reduce){
    .hero-photo.is-fading .hero-photo-frame{opacity:1!important}
}


/* =========================================================
   V31 — clearer floating, softer fading
   ========================================================= */
@keyframes bubbleV31A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    22%{transform:translate(-50%,-50%) translate3d(6px,-5px,0) rotate(.35deg) scale(1.006)}
    50%{transform:translate(-50%,-50%) translate3d(-8px,-14px,0) rotate(-.45deg) scale(1.013)}
    78%{transform:translate(-50%,-50%) translate3d(5px,-8px,0) rotate(.22deg) scale(1.006)}
}
@keyframes bubbleV31B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    24%{transform:translate(-50%,-50%) translate3d(-7px,-4px,0) rotate(-.28deg) scale(1.005)}
    56%{transform:translate(-50%,-50%) translate3d(9px,-12px,0) rotate(.42deg) scale(1.014)}
    80%{transform:translate(-50%,-50%) translate3d(-4px,-7px,0) rotate(-.18deg) scale(1.006)}
}
@keyframes bubbleV31C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    18%{transform:translate(-50%,-50%) translate3d(5px,-3px,0) rotate(.22deg) scale(1.004)}
    48%{transform:translate(-50%,-50%) translate3d(-6px,-10px,0) rotate(-.32deg) scale(1.011)}
    74%{transform:translate(-50%,-50%) translate3d(7px,-7px,0) rotate(.22deg) scale(1.005)}
}

.hero-photo-1 .hero-photo-frame,
.hero-photo-4 .hero-photo-frame,
.hero-photo-8 .hero-photo-frame{animation:bubbleV31A 6.8s ease-in-out infinite!important}
.hero-photo-2 .hero-photo-frame,
.hero-photo-6 .hero-photo-frame,
.hero-photo-9 .hero-photo-frame{animation:bubbleV31B 7.5s ease-in-out infinite -1.2s!important}
.hero-photo-3 .hero-photo-frame,
.hero-photo-5 .hero-photo-frame,
.hero-photo-7 .hero-photo-frame{animation:bubbleV31C 7.1s ease-in-out infinite -2.4s!important}

.hero-photo.is-fading .hero-photo-frame{opacity:.76!important}

@media(max-width:640px){
    @keyframes bubbleV31A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-4px,-6px,0) scale(1.008)}
    }
    @keyframes bubbleV31B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(4px,-5px,0) scale(1.008)}
    }
    @keyframes bubbleV31C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-3px,-5px,0) scale(1.006)}
    }
}


/* =========================================================
   V32 — more visible floating + 1/3 desktop hover growth
   ========================================================= */
@keyframes bubbleV32A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    18%{transform:translate(-50%,-50%) translate3d(9px,-6px,0) rotate(.45deg) scale(1.008)}
    43%{transform:translate(-50%,-50%) translate3d(-10px,-17px,0) rotate(-.55deg) scale(1.016)}
    68%{transform:translate(-50%,-50%) translate3d(8px,-12px,0) rotate(.35deg) scale(1.008)}
    86%{transform:translate(-50%,-50%) translate3d(-4px,-5px,0) rotate(-.18deg) scale(1.003)}
}
@keyframes bubbleV32B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    22%{transform:translate(-50%,-50%) translate3d(-10px,-7px,0) rotate(-.4deg) scale(1.007)}
    49%{transform:translate(-50%,-50%) translate3d(11px,-16px,0) rotate(.5deg) scale(1.015)}
    73%{transform:translate(-50%,-50%) translate3d(-7px,-11px,0) rotate(-.3deg) scale(1.008)}
    90%{transform:translate(-50%,-50%) translate3d(4px,-4px,0) rotate(.15deg) scale(1.002)}
}
@keyframes bubbleV32C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(1)}
    16%{transform:translate(-50%,-50%) translate3d(8px,-5px,0) rotate(.3deg) scale(1.005)}
    40%{transform:translate(-50%,-50%) translate3d(-8px,-14px,0) rotate(-.45deg) scale(1.013)}
    64%{transform:translate(-50%,-50%) translate3d(10px,-10px,0) rotate(.38deg) scale(1.009)}
    84%{transform:translate(-50%,-50%) translate3d(-5px,-6px,0) rotate(-.2deg) scale(1.004)}
}

.hero-photo-1 .hero-photo-frame,
.hero-photo-4 .hero-photo-frame,
.hero-photo-8 .hero-photo-frame{animation:bubbleV32A 7.8s ease-in-out infinite!important}
.hero-photo-2 .hero-photo-frame,
.hero-photo-6 .hero-photo-frame,
.hero-photo-9 .hero-photo-frame{animation:bubbleV32B 8.7s ease-in-out infinite -1.4s!important}
.hero-photo-3 .hero-photo-frame,
.hero-photo-5 .hero-photo-frame,
.hero-photo-7 .hero-photo-frame{animation:bubbleV32C 8.2s ease-in-out infinite -2.7s!important}

/* Keep fading subtle; movement should be the main ambient effect. */
.hero-photo.is-fading .hero-photo-frame{opacity:.78!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:100!important}
    .hero-photo:hover .hero-photo-frame,
    .hero-photo-1:hover .hero-photo-frame{
        animation-play-state:paused!important;
        width:133%!important;
        height:133%!important;
        opacity:1!important;
        box-shadow:0 34px 78px rgba(66,53,45,.20),0 10px 24px rgba(66,53,45,.09)!important;
    }
}

/* Mobile: slightly visible floating, but restrained so circles stay in bounds. */
@media(max-width:640px){
    @keyframes bubbleV32A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-5px,-7px,0) scale(1.007)}
    }
    @keyframes bubbleV32B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(5px,-6px,0) scale(1.007)}
    }
    @keyframes bubbleV32C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}
        50%{transform:translate(-50%,-50%) translate3d(-4px,-6px,0) scale(1.006)}
    }
}


/* =========================================================
   V33 — fix bubble motion to animate the circle containers,
   not the inner frame; keep all desktop circles larger on hover.
   ========================================================= */
@keyframes bubbleV33A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg)}
    18%{transform:translate(-50%,-50%) translate3d(10px,-6px,0) rotate(.45deg)}
    44%{transform:translate(-50%,-50%) translate3d(-12px,-18px,0) rotate(-.55deg)}
    69%{transform:translate(-50%,-50%) translate3d(8px,-11px,0) rotate(.28deg)}
    88%{transform:translate(-50%,-50%) translate3d(-5px,-4px,0) rotate(-.16deg)}
}
@keyframes bubbleV33B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg)}
    22%{transform:translate(-50%,-50%) translate3d(-11px,-7px,0) rotate(-.40deg)}
    50%{transform:translate(-50%,-50%) translate3d(12px,-16px,0) rotate(.48deg)}
    76%{transform:translate(-50%,-50%) translate3d(-7px,-10px,0) rotate(-.24deg)}
    92%{transform:translate(-50%,-50%) translate3d(4px,-4px,0) rotate(.14deg)}
}
@keyframes bubbleV33C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg)}
    16%{transform:translate(-50%,-50%) translate3d(8px,-4px,0) rotate(.28deg)}
    42%{transform:translate(-50%,-50%) translate3d(-9px,-15px,0) rotate(-.44deg)}
    66%{transform:translate(-50%,-50%) translate3d(10px,-9px,0) rotate(.34deg)}
    86%{transform:translate(-50%,-50%) translate3d(-5px,-5px,0) rotate(-.18deg)}
}

.hero-photo-1,.hero-photo-4,.hero-photo-8{animation:bubbleV33A 7.0s ease-in-out infinite!important}
.hero-photo-2,.hero-photo-6,.hero-photo-9{animation:bubbleV33B 7.8s ease-in-out infinite -1.2s!important}
.hero-photo-3,.hero-photo-5,.hero-photo-7{animation:bubbleV33C 7.3s ease-in-out infinite -2.2s!important}

/* Keep the inner frame steady; only use it for subtle opacity changes. */
.hero-photo .hero-photo-frame{animation:none!important}
.hero-photo.is-fading .hero-photo-frame{opacity:.80!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{z-index:100!important;animation-play-state:paused!important}
    .hero-photo:hover .hero-photo-frame{
        width:133%!important;
        height:133%!important;
        opacity:1!important;
        box-shadow:0 34px 78px rgba(66,53,45,.20),0 10px 24px rgba(66,53,45,.09)!important;
    }
    .hero-photo-1:hover .hero-photo-frame{
        width:133%!important;
        height:133%!important;
    }
}

@media(max-width:640px){
    @keyframes bubbleV33A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-5px,-6px,0)}
    }
    @keyframes bubbleV33B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(5px,-5px,0)}
    }
    @keyframes bubbleV33C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0)}
        50%{transform:translate(-50%,-50%) translate3d(-4px,-5px,0)}
    }
    .hero-photo:hover .hero-photo-frame{width:100%!important;height:100%!important}
}

@media (prefers-reduced-motion: reduce){
    .hero-photo{animation:none!important}
}


/* =========================================================
   V34 — explicit final override
   - clearly visible bubble motion on the circle containers
   - all visible circles enlarge on hover (desktop)
   ========================================================= */
.hero-photo{will-change:transform!important}
.hero-photo .hero-photo-frame{
    animation:none!important;
    transition:
        width .95s cubic-bezier(.16,1,.30,1),
        height .95s cubic-bezier(.16,1,.30,1),
        box-shadow .85s cubic-bezier(.16,1,.30,1),
        opacity .75s ease!important;
}

@keyframes bubbleV34A{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
    20%{transform:translate(-50%,-50%) translate3d(9px,-5px,0)}
    48%{transform:translate(-50%,-50%) translate3d(-12px,-16px,0)}
    74%{transform:translate(-50%,-50%) translate3d(7px,-9px,0)}
}
@keyframes bubbleV34B{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
    22%{transform:translate(-50%,-50%) translate3d(-10px,-4px,0)}
    52%{transform:translate(-50%,-50%) translate3d(13px,-14px,0)}
    80%{transform:translate(-50%,-50%) translate3d(-6px,-8px,0)}
}
@keyframes bubbleV34C{
    0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
    18%{transform:translate(-50%,-50%) translate3d(8px,-3px,0)}
    46%{transform:translate(-50%,-50%) translate3d(-9px,-13px,0)}
    72%{transform:translate(-50%,-50%) translate3d(11px,-7px,0)}
}

.hero-photo-1,.hero-photo-4,.hero-photo-8{animation:bubbleV34A 6.0s ease-in-out infinite!important}
.hero-photo-2,.hero-photo-6,.hero-photo-9{animation:bubbleV34B 6.8s ease-in-out infinite -1.1s!important}
.hero-photo-3,.hero-photo-5,.hero-photo-7{animation:bubbleV34C 6.4s ease-in-out infinite -2.1s!important}

.hero-photo.is-fading .hero-photo-frame{opacity:.84!important}

@media (hover:hover) and (pointer:fine){
    .hero-photo:hover{
        z-index:100!important;
        animation-play-state:paused!important;
    }
    .hero-photo:hover .hero-photo-frame{
        width:133%!important;
        height:133%!important;
        opacity:1!important;
        box-shadow:0 34px 78px rgba(66,53,45,.20),0 10px 24px rgba(66,53,45,.09)!important;
    }
}

@media(max-width:640px){
    @keyframes bubbleV34A{
        0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
        50%{transform:translate(-50%,-50%) translate3d(-5px,-6px,0)}
    }
    @keyframes bubbleV34B{
        0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
        50%{transform:translate(-50%,-50%) translate3d(5px,-5px,0)}
    }
    @keyframes bubbleV34C{
        0%,100%{transform:translate(-50%,-50%) translate3d(0px,0px,0)}
        50%{transform:translate(-50%,-50%) translate3d(-4px,-5px,0)}
    }
    .hero-photo:hover .hero-photo-frame{width:100%!important;height:100%!important}
}

@media (prefers-reduced-motion: reduce){
    .hero-photo{animation:none!important}
    .hero-photo.is-fading .hero-photo-frame{opacity:1!important}
}


/* =========================================================
   V35 — JS-driven bubble motion + stronger hover growth + dust burst
   ========================================================= */
.hero-photo{
    animation:none!important;
    will-change:transform,opacity!important;
}
.hero-photo .hero-photo-frame{
    width:var(--frame-size,100%)!important;
    height:var(--frame-size,100%)!important;
    transition:
        width .95s cubic-bezier(.16,1,.30,1),
        height .95s cubic-bezier(.16,1,.30,1),
        opacity .7s ease,
        box-shadow .85s cubic-bezier(.16,1,.30,1),
        filter .7s ease!important;
    animation:none!important;
}
.hero-photo.is-fading .hero-photo-frame{opacity:.82!important}
.hero-photo.is-hovered{z-index:120!important}
.hero-photo.is-hovered .hero-photo-frame{
    opacity:1!important;
    box-shadow:0 34px 78px rgba(66,53,45,.20),0 10px 24px rgba(66,53,45,.09)!important;
}
.hero-photo.is-bursting,
.hero-photo.is-returning{pointer-events:none!important}
.hero-photo.is-bursting .hero-photo-frame{
    opacity:0!important;
    filter:blur(2px)!important;
}
.hero-photo.is-returning .hero-photo-frame{
    animation:bubbleReappear .9s ease both!important;
}
@keyframes bubbleReappear{
    0%{opacity:0;filter:blur(4px)}
    35%{opacity:.8;filter:blur(1px)}
    100%{opacity:1;filter:blur(0)}
}
.hero-dust{
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    margin-left:-3px;
    margin-top:-3px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(190,170,145,.9) 60%, rgba(163,142,119,.7));
    opacity:0;
    pointer-events:none;
    transform:translate(0,0) scale(1);
    animation:bubbleDust var(--dur,1.15s) cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bubbleDust{
    0%{opacity:0;transform:translate(0,0) scale(.65)}
    8%{opacity:.95}
    100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.18)}
}
@media (hover:hover) and (pointer:fine){
    .hero-photo:hover .hero-photo-frame{opacity:1!important}
}
@media(max-width:640px){
    .hero-photo .hero-photo-frame{transition:width .8s cubic-bezier(.16,1,.30,1),height .8s cubic-bezier(.16,1,.30,1),opacity .6s ease,box-shadow .75s cubic-bezier(.16,1,.30,1)!important}
}
@media (prefers-reduced-motion: reduce){
    .hero-photo{animation:none!important}
    .hero-photo .hero-photo-frame{transition:opacity .3s ease!important}
    .hero-dust{display:none!important}
}


/* =========================================================
   V38 — organic slow floating + real image-coloured dust burst
   ========================================================= */
.hero-photo{
    animation:none!important;
    will-change:transform!important;
}
.hero-photo .hero-photo-frame{
    animation:none!important;
    width:var(--frame-size,100%)!important;
    height:var(--frame-size,100%)!important;
    transition:
        width .95s cubic-bezier(.16,1,.30,1),
        height .95s cubic-bezier(.16,1,.30,1),
        opacity .70s ease,
        box-shadow .85s cubic-bezier(.16,1,.30,1),
        filter .65s ease!important;
}
.hero-photo.is-fading .hero-photo-frame{opacity:.84!important}
.hero-photo.is-hovered{z-index:120!important}
.hero-photo.is-hovered .hero-photo-frame{
    opacity:1!important;
    box-shadow:0 34px 78px rgba(66,53,45,.20),0 10px 24px rgba(66,53,45,.09)!important;
}

/* On click the original disappears immediately; the canvas carries the visible disintegration. */
.hero-photo.is-bursting .hero-photo-frame{
    opacity:0!important;
    transition:none!important;
    filter:none!important;
}
.hero-photo.is-bursting,
.hero-photo.is-returning{pointer-events:none!important}
.hero-photo.is-returning .hero-photo-frame{
    animation:bubbleReappearV38 1.15s cubic-bezier(.16,1,.30,1) both!important;
}
@keyframes bubbleReappearV38{
    0%{opacity:0;filter:blur(4px);transform:translate(-50%,-50%) scale(.94)}
    45%{opacity:.78;filter:blur(1px);transform:translate(-50%,-50%) scale(1.015)}
    100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
}
.hero-dust-canvas{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
    z-index:150!important;
    max-width:none!important;
    max-height:none!important;
}

@media(max-width:640px){
    .hero-photo .hero-photo-frame{
        transition:width .82s cubic-bezier(.16,1,.30,1),height .82s cubic-bezier(.16,1,.30,1),opacity .6s ease,box-shadow .75s cubic-bezier(.16,1,.30,1)!important;
    }
}
@media (prefers-reduced-motion:reduce){
    .hero-photo{animation:none!important}
    .hero-dust-canvas{display:none!important}
}


/* =========================================================
   V43 — touch interaction fix + desktop anti-seam rendering
   Keeps V41 geometry unchanged.
   ========================================================= */
.hero-photo{
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
}
.hero-photo-frame{
    clip-path:circle(50% at 50% 50%)!important;
    -webkit-clip-path:circle(50% at 50% 50%)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
}
.hero-photo img{
    transform:scale(1.01)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
}
@media (hover:none), (pointer:coarse){
    .hero-photo.is-hovered .hero-photo-frame{
        opacity:1!important;
        box-shadow:0 24px 56px rgba(66,53,45,.16),0 6px 16px rgba(66,53,45,.07)!important;
    }
}

/* =========================================================
   V48 — random hero pools + content/style refinements
   ========================================================= */

/* About image */
#o-meni .portrait-placeholder,
#o-meni .portrait-placeholder.has-image{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
#o-meni .portrait-placeholder.has-image::before,
#o-meni .portrait-placeholder.has-image::after{
    display:none !important;
}
#o-meni .portrait-placeholder.has-image img{
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(72,57,46,.10);
}

/* Suitable section circles */
.fit-grid-circles{
    align-items:center;
}
.fit-list-circles{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    align-items:center;
}
.fit-list-circles .fit-circle{
    width:190px;
    min-height:190px;
    border-radius:50%;
    background: var(--cream-2);
    border:1px solid rgba(121,98,83,.14);
    box-shadow: 0 14px 34px rgba(74,59,49,.08);
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#4f494c;
    line-height:1.45;
}
.fit-list-circles .fit-circle span{
    display:block;
    font-size:14px;
}
.fit-list-circles .fit-circle strong{
    font-weight:800;
}
@media (max-width:900px){
    .fit-list-circles .fit-circle{
        width:168px;
        min-height:168px;
        padding:20px;
    }
}
@media (max-width:520px){
    .fit-list-circles{
        gap:12px;
    }
    .fit-list-circles .fit-circle{
        width:142px;
        min-height:142px;
        padding:16px;
    }
    .fit-list-circles .fit-circle span{font-size:13px;}
}

/* Process numbers */
.steps{
    counter-reset:none !important;
}
.step::before{display:none !important;content:none !important;}
.step-number{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background: var(--cream-2);
    border:1px solid rgba(121,98,83,.18);
    color: var(--copper-dark);
    font-weight:800;
    margin-bottom:22px;
}

/* Pricing */
#cenik .price-card,
#cenik .price-card.featured,
#cenik .price-card:hover,
#cenik .price-card.featured:hover{
    background: #f3ebe3 !important;
    border-color: rgba(121,98,83,.16) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
#cenik .price-card,
#cenik .price-card *{
    transition:none !important;
}
#cenik .pricing-info{
    align-items:start;
}
#cenik .pricing-info strong,
#cenik .pricing-info ul,
#cenik .price-cta{
    text-align:left !important;
    justify-content:flex-start;
}
#cenik .price-cta{
    margin-top:24px;
}
#cenik .price-cta .button{
    display:inline-flex;
}

/* FAQ */
.faq-item[open] summary::after{transform:rotate(45deg);}

/* Contact */
.language-list,
.language-list strong,
.contact-mode,
.contact-copy,
.contact-copy-wrap p,
.contact-copy-wrap .contact-copy,
#kontakt .contact-language-flags,
#kontakt .contact-language-flags span{
    color: rgba(255,255,255,.88) !important;
}
.form-note{
    max-width:none !important;
}

/* Footer */
.footer{
    background: #af998a !important;
    color: rgb(233, 227, 222) !important;
}
.footer-brand,
.footer-brand span,
.footer-links a{
    color: rgb(233, 227, 222) !important;
}


/* =========================================================
   V49 — final refinements
   ========================================================= */

/* Requested hero heading size */
h1{
    font-size:clamp(42px,5.2vw,60px)!important;
}

/* Suitable section — coordinated pastel circles */
.fit-list-circles .fit-circle:nth-child(1){background:#f3e3df;}
.fit-list-circles .fit-circle:nth-child(2){background:#e6eee5;}
.fit-list-circles .fit-circle:nth-child(3){background:#e5ebf2;}
.fit-list-circles .fit-circle:nth-child(4){background:#f3e9d8;}
.fit-list-circles .fit-circle:nth-child(5){background:#ece5f0;}
.fit-list-circles .fit-circle:nth-child(6){background:#e3efec;}
.fit-list-circles .fit-circle:nth-child(7){background:#eee7dc;}
.fit-list-circles .fit-circle:nth-child(8){background:#f0e2e7;}
.fit-list-circles .fit-circle{
    border-color:rgba(86,72,64,.11)!important;
    box-shadow:0 10px 28px rgba(72,57,46,.055)!important;
}

/* Process — number circle left of title */
.step-heading{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}
.step-heading .step-number{
    margin:0!important;
    flex:0 0 42px;
}
.step-heading h3{
    margin:0!important;
}

/* Contact — same readable dark text as the rest of the light section */
#kontakt .language-list,
#kontakt .language-list > strong,
#kontakt .contact-language-flags,
#kontakt .contact-language-flags span,
#kontakt .contact-mode{
    color:var(--ink-soft)!important;
    opacity:1!important;
}
#kontakt .language-list > strong:first-child,
#kontakt .contact-mode{
    color:var(--ink)!important;
}
#kontakt .contact-language-flags span{
    font-weight:500;
}

/* =========================================================
   V51 — unified random hero pool + tighter mobile spacing/menu
   ========================================================= */

@media (max-width:900px){
    /* Keep the mobile header content away from the viewport edge. */
    .nav-wrap{
        width:calc(100% - 24px)!important;
        margin-inline:auto!important;
    }
    .menu-button{
        margin-left:auto!important;
        margin-right:0!important;
    }
    .lang-switch + .menu-button{margin-left:0!important;}

    /* Mobile menu opens below the sticky header and expands downward. */
    .nav{
        inset:var(--header-h) 0 auto 0!important;
        margin:0!important;
        display:grid!important;
        gap:0!important;
        background:rgba(255,253,251,.985)!important;
        border-bottom:1px solid var(--line)!important;
        max-height:0!important;
        overflow:hidden!important;
        padding:0 24px!important;
        transform:none!important;
        opacity:0!important;
        pointer-events:none!important;
        transition:max-height .30s ease,padding .30s ease,opacity .16s ease!important;
        z-index:999!important;
    }
    .nav.open{
        max-height:calc(100vh - var(--header-h))!important;
        padding:10px 24px 22px!important;
        opacity:1!important;
        pointer-events:auto!important;
    }
    .nav a:last-child{
        border-bottom:0!important;
    }
}

@media (max-width:640px){
    /* All main sections: approximately half the previous vertical whitespace. */
    .section{
        padding-top:38px!important;
        padding-bottom:38px!important;
    }
    .section.compact{
        padding-top:29px!important;
        padding-bottom:29px!important;
    }

    /* Hero: top whitespace reduced much more aggressively, as requested. */
    .hero.section{
        padding-top:15px!important;
        padding-bottom:38px!important;
    }
    .hero-grid{
        padding-top:6px!important;
        padding-bottom:24px!important;
    }
    .hero-photo-cluster{
        margin-top:7px!important;
        margin-bottom:-6px!important;
    }

    /* Detailed service blocks also use half of their previous mobile spacing. */
    .service-topic-section{
        padding-top:12px!important;
        padding-bottom:12px!important;
    }
    .service-topic-section:first-of-type{
        padding-top:32px!important;
    }
    .service-topic-section:last-of-type{
        padding-bottom:35px!important;
    }
}

/* =========================================================
   V52 — smoother desktop floating + tighter mobile hero/menu spacing
   ========================================================= */

@media (min-width:641px) and (hover:hover) and (pointer:fine){
    /* The outer anchor stays fixed. Only the circular composited layer floats. */
    .hero-photo{
        transform:translate(-50%,-50%)!important;
        will-change:auto!important;
    }
    .hero-photo-frame{
        will-change:transform,width,height,opacity!important;
        transform-origin:50% 50%!important;
        backface-visibility:hidden!important;
        -webkit-backface-visibility:hidden!important;
        perspective:1000px;
        -webkit-perspective:1000px;
    }
    .hero-photo img{
        image-rendering:auto!important;
        backface-visibility:hidden!important;
        -webkit-backface-visibility:hidden!important;
    }
}

@media (max-width:640px){
    /* About 10px more air between the hero buttons and the image cluster. */
    .hero-photo-cluster{
        margin-top:17px!important;
        margin-bottom:-12px!important;
    }

    /* Roughly half the previous gap between the circles and the trust strip. */
    .hero.section{
        padding-bottom:18px!important;
    }
    .hero-grid{
        padding-bottom:12px!important;
    }

    /* Less empty space below the last mobile menu item. */
    .nav.open{
        padding-bottom:7px!important;
    }
    .nav a:last-child{
        padding-bottom:8px!important;
        margin-bottom:0!important;
    }
}


/* =========================================================
   V53 — desktop border shimmer fix
   The moving circle is rasterized as one clean composited layer.
   Avoid clip-path + physical border during sub-pixel movement.
   ========================================================= */
@media (min-width:641px) and (hover:hover) and (pointer:fine){
    .hero-photo-frame{
        border:0!important;
        border-width:0!important;
        clip-path:none!important;
        -webkit-clip-path:none!important;
        border-radius:50%!important;
        overflow:hidden!important;
        contain:paint!important;
        transform-style:flat!important;
        will-change:transform,opacity!important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.99),
            0 12px 30px rgba(72,57,46,.10)!important;
    }
    .hero-photo-frame img{
        border-radius:50%!important;
        transform:scale(1.006)!important;
        will-change:auto!important;
    }
    .hero-photo.is-hovered .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.99),
            0 34px 78px rgba(66,53,45,.20),
            0 10px 24px rgba(66,53,45,.09)!important;
    }
}

/* =========================================================
   V55 — preserve V53 smooth transform, remove image tile seams
   On desktop the visible photo is painted as the circular frame's
   background, so Chrome composites one small circular layer instead
   of a transformed clipped IMG layer. The IMG stays loaded invisibly
   for the dust-particle colour sampler.
   ========================================================= */
@media (min-width:641px) and (hover:hover) and (pointer:fine){
    .hero-photo-frame{
        contain:none!important;
        background-position:center center!important;
        background-size:cover!important;
        background-repeat:no-repeat!important;
        background-color:#eee7e1!important;
        backface-visibility:hidden!important;
        -webkit-backface-visibility:hidden!important;
        transform-style:flat!important;
        will-change:transform!important;
        isolation:isolate!important;
    }
    .hero-photo-frame img{
        opacity:0!important;
        visibility:hidden!important;
        transform:none!important;
        will-change:auto!important;
        pointer-events:none!important;
    }
}


/* =========================================================
   V56 — very slow desktop float + no hard moving rim
   Hard 1–3px circular rims can visibly alias on 1x desktop
   displays during sub-pixel transforms. Keep the photo edge
   clean and use only a very soft blurred depth shadow.
   ========================================================= */
@media (min-width:641px) and (hover:hover) and (pointer:fine){
    .hero-photo-frame,
    .hero-photo.is-hovered .hero-photo-frame,
    .hero-photo:hover .hero-photo-frame{
        border:0!important;
        outline:0!important;
        box-shadow:0 10px 28px rgba(72,57,46,.085)!important;
    }
    .hero-photo-frame{
        background-clip:padding-box!important;
    }
}

/* =========================================================
   V65 — static hero collage
   Disable all ambient movement. Interactive hover/tap/burst effects remain.
   ========================================================= */
.hero-photo{
    animation:none!important;
}
.hero-photo-frame{
    animation:none!important;
}


/* =========================================================
   V66 — static organic variation + browser-independent flags
   The collage remains completely static after layout. Each page load
   gets a very small position/size variation; a clicked photo returns
   with another small variation. No ambient movement is used.
   ========================================================= */
.hero-photo{
    left:calc(var(--x) + var(--jitter-x, 0%))!important;
    top:calc(var(--y) + var(--jitter-y, 0%))!important;
    transform:translate(-50%,-50%) scale(var(--jitter-scale,1))!important;
    animation:none!important;
    will-change:auto!important;
}
.hero-photo-frame{
    animation:none!important;
}

/* Real inline SVG flags: Windows/Chrome often renders flag emoji as
   regional-letter pairs (SI, RU, UA ...), so do not rely on emoji. */
.flag-icon{
    display:inline-block;
    width:22px;
    height:16px;
    flex:0 0 auto;
    vertical-align:-3px;
    border-radius:2px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(66,53,45,.12);
}
.lang-button .flag-icon{
    width:21px;
    height:15px;
    vertical-align:0;
}
.lang-menu .flag-icon{
    width:22px;
    height:16px;
}
.contact-language-flags span{
    gap:7px!important;
}
.contact-language-flags .flag-icon{
    width:23px;
    height:16px;
    vertical-align:0;
}

/* =========================================================
   V67 — correct Slovenian flag + language rows stay on one line
   ========================================================= */
.about-language-flags,
#kontakt .contact-language-flags{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    white-space:nowrap!important;
}
.about-language-flags{
    gap:8px 14px!important;
}
#kontakt .contact-language-flags{
    gap:8px 13px!important;
}
.about-language-flags span,
#kontakt .contact-language-flags span{
    flex:0 0 auto!important;
}
.about-language-flags .flag-icon{
    width:20px;
    height:14px;
    vertical-align:0;
}

@media(max-width:640px){
    .about-language-flags,
    #kontakt .contact-language-flags{
        gap:6px!important;
        font-size:11px!important;
        letter-spacing:-.15px;
    }
    .about-language-flags .flag-icon,
    #kontakt .contact-language-flags .flag-icon{
        width:17px!important;
        height:12px!important;
    }
    .about-language-flags span,
    #kontakt .contact-language-flags span{
        gap:4px!important;
    }
}


/* =========================================================
   V68 — language row lock
   Keep all language badges in one horizontal row on every viewport.
   ========================================================= */
.about-language-flags,
#kontakt .contact-language-flags{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    white-space:nowrap!important;
    max-width:100%!important;
}
.about-language-flags span,
#kontakt .contact-language-flags span{
    white-space:nowrap!important;
    min-width:0!important;
}


/* V70 — independent topic columns, pricing bullets and FAQ category headings */
@media (min-width:901px){
    .topic-bullet-columns{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:30px!important;
        margin-top:25px!important;
    }
    .topic-bullet-columns>ul{
        display:block!important;
        margin:0!important;
        padding:0!important;
        list-style:none!important;
    }
    .topic-bullet-columns>ul>li{
        margin:0!important;
    }
    .topic-bullet-columns>ul>li+li{
        margin-top:10px!important;
    }
    .topic-bullets-mobile{
        display:none!important;
    }
}
@media (max-width:900px){
    .topic-bullets-desktop{
        display:none!important;
    }
    .topic-bullets-mobile{
        display:block!important;
        margin:25px 0 0!important;
        padding:0!important;
        list-style:none!important;
    }
    .topic-bullets-mobile>li+li{
        margin-top:10px!important;
    }
}

/* Pricing notes use the same understated copper circle as topic lists. */
#cenik .pricing-info ul{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
    display:grid;
    gap:10px;
}
#cenik .pricing-info li{
    position:relative;
    padding-left:23px;
}
#cenik .pricing-info li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:7px;
    height:7px;
    border:1px solid var(--copper);
    border-radius:50%;
}

/* FAQ is grouped exactly as the content is structured. */
.faq-category-group{
    border-top:1px solid var(--line);
}
.faq-list>.faq-category-group:first-child{
    border-top:0;
}
.faq-category{
    margin:0;
    padding:25px 4px 10px;
    font-family:inherit;
    font-size:18px;
    font-weight:750;
    color:#302c2f;
}
.faq-category-group:first-child .faq-category{
    padding-top:16px;
}


/* V71 — process note paragraph spacing */
.process-note p{margin:0 0 .8em;}
.process-note p:last-child{margin-bottom:0;}


/* =========================================================
   V72 — contact data visibility and alignment
   ========================================================= */
#kontakt .contact-line{
    grid-template-columns:max-content minmax(0,1fr)!important;
    align-items:baseline!important;
    column-gap:28px!important;
}
#kontakt .contact-line > span{
    white-space:nowrap!important;
    line-height:1.45!important;
}
#kontakt .contact-line > div,
#kontakt .contact-line > div a{
    line-height:1.45!important;
}

/* When the form is disabled, the contact content uses the full container. */
#kontakt .contact-grid.no-form{
    grid-template-columns:minmax(0,1fr)!important;
    justify-content:stretch!important;
    width:100%!important;
}
#kontakt .contact-grid.no-form .contact-copy-wrap{
    width:100%!important;
    max-width:none!important;
}
#kontakt .contact-grid.no-form .contact-copy{
    max-width:none!important;
}

@media(max-width:760px){
    #kontakt .contact-line{
        column-gap:18px!important;
    }
}


/* =========================================================
   V73 — contact alignment + true full inner width without form
   ========================================================= */
/* Keep all contact values on one shared vertical line. */
#kontakt .contact-line{
    grid-template-columns:150px minmax(0,1fr)!important;
    align-items:baseline!important;
    column-gap:28px!important;
    width:100%!important;
}
#kontakt .contact-line > span{
    white-space:nowrap!important;
    line-height:1.45!important;
}
#kontakt .contact-line > div,
#kontakt .contact-line > div a{
    line-height:1.45!important;
    align-self:baseline!important;
}

/* With the form disabled, use the complete .container width — not the viewport. */
#kontakt .contact-grid.no-form{
    display:block!important;
    width:100%!important;
    max-width:none!important;
}
#kontakt .contact-grid.no-form .contact-copy-wrap,
#kontakt .contact-grid.no-form .contact-lines,
#kontakt .contact-grid.no-form .language-list{
    width:100%!important;
    max-width:none!important;
}
#kontakt .contact-grid.no-form .contact-copy{
    width:100%!important;
    max-width:none!important;
}

@media(max-width:760px){
    #kontakt .contact-line{
        grid-template-columns:132px minmax(0,1fr)!important;
        column-gap:16px!important;
    }
}
@media(max-width:430px){
    #kontakt .contact-line{
        grid-template-columns:118px minmax(0,1fr)!important;
        column-gap:12px!important;
    }
    #kontakt .contact-line > span{
        font-size:11px!important;
        letter-spacing:.07em!important;
    }
}

/* =========================================================
   V74 — no-form contact stays inside the normal page container
   ========================================================= */
/* .container and .contact-grid.no-form are the same element. Do not override
   the normal .container width with 100%, otherwise it spans the viewport. */
#kontakt .container.contact-grid.no-form{
    display:block!important;
    width:min(var(--max), calc(100% - 48px))!important;
    max-width:var(--max)!important;
    margin-inline:auto!important;
}
#kontakt .container.contact-grid.no-form .contact-copy-wrap,
#kontakt .container.contact-grid.no-form .contact-lines,
#kontakt .container.contact-grid.no-form .language-list{
    width:100%!important;
    max-width:none!important;
}
@media(max-width:760px){
    #kontakt .container.contact-grid.no-form{
        width:min(calc(100% - 34px), var(--max))!important;
    }
}


/* =========================================================
   V78 — mobile overflow fixes + touch hero + terms modal
   ========================================================= */

/* On touch devices an enlarged hero portrait must float over the CTA and
   the trust strip, not disappear underneath their stacking contexts. */
@media (max-width:640px), (hover:none), (pointer:coarse){
    .hero.section{
        position:relative!important;
        z-index:3!important;
        overflow:visible!important;
    }
    .hero-copy{
        z-index:2!important;
    }
    .hero-photo-cluster{
        position:relative!important;
        z-index:4!important;
        overflow:visible!important;
        isolation:auto!important;
    }
    .hero-photo.is-hovered{
        z-index:500!important;
    }
    .trust-strip{
        position:relative!important;
        z-index:1!important;
    }
}

/* The O meni image/card can never make the mobile layout wider than the viewport. */
@media(max-width:760px){
    #o-meni .about-split,
    #o-meni .about-left,
    #o-meni .portrait-placeholder,
    #o-meni .portrait-placeholder.has-image,
    #o-meni .bio-copy{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }
    #o-meni .portrait-placeholder,
    #o-meni .portrait-placeholder.has-image{
        overflow:hidden!important;
    }
    #o-meni .portrait-placeholder.has-image img{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        left:0!important;
        right:0!important;
        box-sizing:border-box!important;
    }
}

/* Za koga: circles remain true circles on phones. Longer statements get a
   slightly larger circle instead of stretching the shape vertically. */
@media(max-width:520px){
    #za-koga .fit-list-circles{
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        justify-content:center!important;
        gap:10px!important;
    }
    #za-koga .fit-list-circles .fit-circle{
        width:148px!important;
        height:auto!important;
        min-height:0!important;
        aspect-ratio:1 / 1!important;
        flex:0 0 148px!important;
        padding:14px!important;
        border-radius:50%!important;
        box-sizing:border-box!important;
    }
    #za-koga .fit-list-circles .fit-circle:nth-child(1),
    #za-koga .fit-list-circles .fit-circle:nth-child(6),
    #za-koga .fit-list-circles .fit-circle:nth-child(8){
        width:164px!important;
        flex-basis:164px!important;
    }
    #za-koga .fit-list-circles .fit-circle span{
        font-size:12.4px!important;
        line-height:1.34!important;
    }
}
@media(max-width:345px){
    #za-koga .fit-list-circles .fit-circle,
    #za-koga .fit-list-circles .fit-circle:nth-child(1),
    #za-koga .fit-list-circles .fit-circle:nth-child(6),
    #za-koga .fit-list-circles .fit-circle:nth-child(8){
        width:156px!important;
        flex-basis:156px!important;
    }
}

/* Contact: shorter label column and wrapping language badges on phones. */
@media(max-width:640px){
    #kontakt .contact-line{
        grid-template-columns:72px minmax(0,1fr)!important;
        column-gap:12px!important;
    }
    #kontakt .contact-line > div,
    #kontakt .contact-line > div a{
        min-width:0!important;
        overflow-wrap:anywhere!important;
        word-break:normal!important;
    }
    #kontakt .contact-language-flags{
        display:flex!important;
        flex-flow:row wrap!important;
        align-items:center!important;
        white-space:normal!important;
        gap:8px 12px!important;
        max-width:100%!important;
    }
    #kontakt .contact-language-flags span{
        flex:0 0 auto!important;
        white-space:nowrap!important;
        font-size:12px!important;
    }
}

/* Terms of use popup. */
.footer-terms-link{
    appearance:none;
    border:0;
    padding:0;
    margin:0;
    background:none;
    color:rgb(233,227,222)!important;
    font:inherit;
    cursor:pointer;
    text-decoration:none;
}
.footer-terms-link:hover,
.footer-terms-link:focus-visible{
    text-decoration:underline;
    text-underline-offset:3px;
}
.terms-modal[hidden]{display:none!important}
.terms-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    padding:24px;
}
.terms-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(31,27,28,.48);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}
.terms-modal-panel{
    position:relative;
    z-index:1;
    width:min(820px,100%);
    max-height:min(82vh,820px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(90,68,53,.15);
    border-radius:22px;
    background:#fffdfb;
    box-shadow:0 28px 90px rgba(44,34,29,.28);
    outline:0;
}
.terms-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 24px 18px;
    border-bottom:1px solid var(--line);
}
.terms-modal-head h2{
    margin:0;
    font-size:clamp(25px,4vw,34px);
}
.terms-modal-close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:#f7f1eb;
    color:var(--ink);
    font-size:27px;
    line-height:1;
    cursor:pointer;
}
.terms-modal-content{
    overflow:auto;
    padding:24px;
    color:var(--ink-soft);
    line-height:1.7;
    overflow-wrap:anywhere;
}
.terms-modal-content > :first-child{margin-top:0}
.terms-modal-content > :last-child{margin-bottom:0}
.terms-modal-content img,
.terms-modal-content iframe,
.terms-modal-content video,
.terms-modal-content table{
    max-width:100%;
}
body.terms-modal-open{overflow:hidden}
@media(max-width:640px){
    .terms-modal{padding:12px}
    .terms-modal-panel{max-height:88vh;border-radius:17px}
    .terms-modal-head{padding:17px 18px 14px}
    .terms-modal-content{padding:18px}
}


/* =========================================================
   V79 — mobile portrait/languages + precisely centered modal X
   ========================================================= */
@media(max-width:760px){
    /* Keep the O meni portrait comfortably inside the phone viewport. */
    #o-meni .portrait-placeholder,
    #o-meni .portrait-placeholder.has-image{
        width:80%!important;
        max-width:80%!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}

@media(max-width:640px){
    /* Two responsive columns ensure the contact languages wrap instead of
       extending beyond the right edge of narrow screens. */
    #kontakt .language-list{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }
    #kontakt .contact-language-flags{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        gap:9px 12px!important;
        white-space:normal!important;
    }
    #kontakt .contact-language-flags span{
        display:inline-flex!important;
        width:auto!important;
        max-width:100%!important;
        min-width:0!important;
        white-space:nowrap!important;
        overflow:visible!important;
    }
}
@media(max-width:340px){
    #kontakt .contact-language-flags{
        grid-template-columns:1fr!important;
    }
}

/* Draw the close symbol geometrically so it is exactly centered in the circle. */
.terms-modal-close{
    position:relative!important;
    display:block!important;
    padding:0!important;
    font-size:0!important;
    line-height:0!important;
}
.terms-modal-close::before,
.terms-modal-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:15px;
    height:1.7px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
}
.terms-modal-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.terms-modal-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* =========================================================
   V80 — O meni language badges wrap correctly on phones
   ========================================================= */
@media(max-width:640px){
    #o-meni .about-languages{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }
    #o-meni .about-language-flags{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        gap:9px 12px!important;
        white-space:normal!important;
        align-items:center!important;
    }
    #o-meni .about-language-flags span{
        display:inline-flex!important;
        width:auto!important;
        max-width:100%!important;
        min-width:0!important;
        white-space:nowrap!important;
        overflow:visible!important;
        flex:initial!important;
    }
}
@media(max-width:340px){
    #o-meni .about-language-flags{
        grid-template-columns:1fr!important;
    }
}

/* =========================================================
   V81 — robust wrapping for language badges in O meni
   Applies on every viewport so an old mobile breakpoint or browser
   viewport width can never keep the badges in a forced nowrap row.
   On desktop they still remain on one row whenever there is enough space.
   ========================================================= */
#o-meni .about-languages{
    min-width:0!important;
    max-width:100%!important;
}
#o-meni .about-language-flags{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
    column-gap:14px!important;
    row-gap:10px!important;
}
#o-meni .about-language-flags span{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:nowrap!important;
}
@media(max-width:640px){
    #o-meni .about-language-flags{
        column-gap:12px!important;
        row-gap:10px!important;
        font-size:12px!important;
        letter-spacing:0!important;
    }
}

/* =========================================================
   V82 — O meni mobile container alignment + portrait width
   ========================================================= */
@media(max-width:760px){
    /* .about-split is also the section .container. Keep the normal mobile
       container gutters instead of overriding it to the full viewport width. */
    #o-meni .container.about-split{
        width:min(calc(100% - 34px), var(--max))!important;
        max-width:var(--max)!important;
        margin-left:auto!important;
        margin-right:auto!important;
        min-width:0!important;
    }

    #o-meni .about-left,
    #o-meni .bio-copy{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    /* 90% keeps some breathing room without making the portrait look narrow. */
    #o-meni .portrait-placeholder,
    #o-meni .portrait-placeholder.has-image{
        width:90%!important;
        max-width:90%!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}

/* =========================================================
   V83 — justified long-form copy + centered mobile O meni / Moj pristop
   ========================================================= */
/* Long-form prose only: keep headings, buttons, labels and short badges untouched. */
.hero-copy .lead,
#o-meni .bio-copy p,
#pristop .approach-item p,
#storitve .services-intro .lead,
#storitve .service-card p,
.service-topic-section .topic-main > p,
.service-topic-section .topic-note p,
#za-koga .lead,
#za-koga .fit-note,
#potek .step p,
#potek .process-note p,
#cenik .center .lead,
#cenik .price-card p,
#cenik .pricing-info li,
#faq .faq-answer,
#kontakt .contact-copy,
.terms-modal-content p,
.terms-modal-content li{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

@media(max-width:760px){
    /* Center the O meni heading group on phones. */
    #o-meni .about-heading{
        text-align:center!important;
        width:100%!important;
    }
    #o-meni .about-heading .eyebrow{
        justify-content:center!important;
        text-align:center!important;
    }
    #o-meni .about-heading h2{
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    /* Moj pristop heading centered on phones as well. */
    #pristop .approach-wide > h2{
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}
/* Longer bullet/list copy follows the same alignment. */
.service-topic-section .topic-main li,
#o-meni .about-languages > span{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

/* =========================================================
   V84 — centered mobile FAQ / Contact headings
   ========================================================= */
@media(max-width:760px){
    #faq .faq-head,
    #kontakt .contact-copy-wrap{
        min-width:0;
    }

    #faq .faq-head{
        width:100%!important;
        text-align:center!important;
    }
    #faq .faq-head .eyebrow,
    #kontakt .contact-copy-wrap > .eyebrow{
        display:flex!important;
        width:100%!important;
        justify-content:center!important;
        text-align:center!important;
    }
    #faq .faq-head h2,
    #kontakt #kontakt-title{
        width:100%!important;
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}