:root {
     --ink: #16150f;
     --soft: #f6f5f0;
     --edge: clamp(22px, 6vw, 92px);
     --serif: "Playfair Display", serif;
     /* Novi font za naslove i slogane */
     --sans: "Montserrat", sans-serif;
     /* Visoko čitljiv, premium font za tekst */
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 section[id] {
     scroll-margin-top: var(--nav-h, 90px)
 }

 body {
     margin: 0;
     font-family: var(--sans);
     color: var(--ink);
     line-height: 1.55
 }

 body.locked,
 body.is-loading {
     overflow: hidden
 }

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

 button {
     font: inherit
 }

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

 section {
     padding: 90px 0
 }

 /* #contact je poslednja sekcija na strani - bez ovoga, kad je stranica vec
    skrolovana do kraja, nema vise sadrzaja ispod nje da se doskroluje do
    vrha (ispod nav-a), pa klik na "Kontakt" ostaje "kratak" i sekcija se
    zaustavi niz dole nego sto treba. min-height:100vh garantuje da uvek
    ima dovoljno prostora da se doskroluje, bez obzira na visinu ekrana. */
 #contact {
     min-height: 100vh;
     display: flex;
     align-items: center
 }

 h1,
 h2 {
     font-family: var(--serif);
     font-weight: 440;
     margin: 0
 }

 h2 {
     font-size: clamp(2.1rem, 4vw, 4rem);
     line-height: 1.1
 }

 small {
     text-transform: uppercase;
     letter-spacing: .15em;
     color: #666
 }

 .copy-block {
     display: block;
     margin-top: 10px
 }

 .copy-highlight {
     display: block;
     margin-bottom: 10px;
     font-weight: 500
 }

 .films-link,
 .izk-link {
     margin-top: 22px
 }

 .films-link a,
 .izk-link a {
     color: var(--ink);
     font-weight: 600;
     text-decoration: underline;
     text-underline-offset: 4px
 }

 .site-loader {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #050505;
     opacity: 1;
     visibility: visible;
     transition: opacity .55s ease, visibility .55s ease
 }

 .site-loader.leaving {
     opacity: 0;
     visibility: hidden;
     pointer-events: none
 }

 .site-loader__content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     padding: 24px;
     text-align: center
 }

 .site-loader__line {
     position: relative;
     font-family: var(--sans);
     font-weight: 300;
     line-height: 1.2;
     letter-spacing: .025em;
     white-space: nowrap
 }

 .site-loader__brand {
     font-size: clamp(.88rem, 1.15vw, 1.02rem);
     color: #151515
 }

 .site-loader__brand::after {
     content: attr(data-text);
     position: absolute;
     inset: 0;
     color: #ececec;
     clip-path: inset(0 100% 0 0);
     animation: loader-reveal-horizontal .9s cubic-bezier(.22, .61, .36, 1) .15s forwards
 }

 .site-loader__name {
     font-size: clamp(.72rem, .85vw, .82rem);
     color: #d7d7d7;
     opacity: 0;
     transform: translateY(3px);
     animation: loader-name-fade .34s ease-out 1.12s forwards
 }

 @keyframes loader-reveal-horizontal {
     to {
         clip-path: inset(0 0 0 0)
     }
 }

 @keyframes loader-name-fade {
     to {
         opacity: 1;
         transform: none
     }
 }

 .nav {
     position: fixed;
     inset: 0 0 auto;
     z-index: 7000;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px var(--edge);
     color: #fff;
     text-shadow: 0 1px 8px #000;
     transition: .3s
 }

 .nav.scrolled {
     background: #fffffff2;
     color: var(--ink);
     text-shadow: none;
     box-shadow: 0 1px 0 #ddd
 }

 .desktop-nav {
     display: flex;
     gap: clamp(10px, -33.6px + 4.3vw, 28px)
 }

 /* Fluidno smanjivanje: izmedju 1024px (gde .desktop-nav nestaje, vidi
    media query ispod) i ~1400px, font se glatko smanjuje umesto da se
    linkovi lome u dva reda. Iznad 1400px ostaje pun razmak/velicina. */
 .desktop-nav a {
     font-size: clamp(.72rem, .175rem + .85vw, .95rem);
     white-space: nowrap
 }

 .menu-open {
     display: none;
     border: 0;
     background: transparent;
     color: inherit;
     font-size: 1.65rem
 }

 .overlay {
     position: fixed;
     inset: 0;
     z-index: 8000;
     display: none
 }

 .overlay.open {
     display: block
 }

 .overlay-bg {
     position: absolute;
     inset: 0;
     background: #000c;
     backdrop-filter: blur(10px)
 }

 .overlay-dialog {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .overlay-close {
     position: fixed;
     top: 18px;
     right: 20px;
     width: 48px;
     height: 48px;
     background: #0004;
     color: #fff;
     border: 1px solid #ffffff88;
     font-size: 2rem
 }

 .overlay-links {
     display: flex;
     flex-direction: column;
     gap: 14px;
     align-items: center
 }

 .overlay-links a {
     font: 440 clamp(1.45rem, 5vw, 2rem) var(--serif);
     color: #fff
 }

 .hero {
     height: 100svh;
     min-height: 560px;
     position: relative;
     overflow: hidden;
     background: #111
 }

 .hero-bg,
 .hero-bg img,
 .hero-shade,
 .slogans {
     position: absolute;
     inset: 0
 }

 .hero-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transition: opacity 1.1s
 }

 .hero-bg img.active {
     opacity: 1
 }

 .hero-shade {
     background: linear-gradient(#0009, #0004, #000a)
 }

 .slogans {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: var(--edge)
 }

 .slogans h1 {
     position: absolute;
     max-width: 36ch;
     color: #fff;
     font-size: clamp(1.9rem, 5.2vw, 4.1rem);
     line-height: 1.15;
     opacity: 0;
     transform: translateY(10px);
     transition: .65s
 }

 .slogans h1.active {
     opacity: 1;
     transform: none
 }

 .slogans em {
     color: #e8d9ab
 }

 .scroll-cue {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     color: #fff;
     font-size: .78rem
 }

 .scroll-cue i {
     position: relative;
     width: 1px;
     height: 28px;
     overflow: hidden;
     background: #ffffff47
 }

 .scroll-cue i:after {
     content: "";
     position: absolute;
     inset: -100% 0 auto;
     height: 100%;
     background: #e8d9ab;
     animation: cue 1.8s ease-in-out infinite
 }

 @keyframes cue {

     60%,
     100% {
         top: 100%
     }
 }

 .split {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(42px, 7vw, 100px)
 }

 .soft {
     background: var(--soft)
 }

 .lead {
     font: 440 clamp(1.35rem, 2.5vw, 2.1rem) var(--serif)
 }

 .gallery {
     columns: 5;
     column-gap: 6px
 }

 .gallery button {
     width: 100%;
     display: block;
     margin: 0 0 6px;
     padding: 0;
     border: 0
 }

 .gallery img {
     width: 100%;
     display: block
 }

 /* Slaba ali namerna zastita od direktnog preuzimanja fotografija:
    desni klik / "Save As", drag-na-desktop i mobilni long-press meni
    (Save Image / Copy) su onemoguceni na svim prikazanim fotografijama
    (galerije, hero, lightbox). contextmenu prevencija je u JS-u (ne moze
    se uraditi cisto CSS-om), ovo pokriva selekciju/drag/iOS callout. */
 .gallery img,
 .hero-bg img,
 .lightbox img {
     -webkit-user-select: none;
     user-select: none;
     -webkit-user-drag: none;
     user-drag: none;
     -webkit-touch-callout: none
 }

 .start {
     font: 1.3rem var(--serif)
 }

 .panel {
     padding: 35px;
     border: 1px solid #ddd;
     background: #fff
 }

 .panel label {
     display: block;
     margin-top: 14px
 }

 .panel input {
     width: 100%;
     padding: 9px;
     border: 0;
     border-bottom: 1px solid #ccc
 }

 .panel input[type=checkbox] {
     width: auto
 }

 .crew-config {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin: 22px 0 4px
 }

 .hours-field>label {
     display: block;
     margin: 0 0 10px
 }

 .hours-picker {
     display: flex;
     flex-wrap: wrap;
     gap: 8px
 }

 .hours-btn {
     appearance: none;
     cursor: pointer;
     min-width: 52px;
     padding: 10px 14px;
     border: 1px solid #d8d6cc;
     border-radius: 999px;
     background: #fff;
     color: var(--ink);
     font: 500 .9rem var(--sans);
     transition: background .15s ease, color .15s ease, border-color .15s ease
 }

 .hours-btn:hover {
     border-color: var(--ink)
 }

 .hours-btn:focus-visible {
     outline: 1px solid var(--ink);
     outline-offset: 2px
 }

 .hours-btn.is-active {
     background: var(--ink);
     border-color: var(--ink);
     color: #fff
 }

 .field-group label {
     display: block;
     margin: 0 0 7px;
     font-size: .88rem;
     color: #666
 }

 .field-group select {
     width: 100%;
     min-height: 44px;
     padding: 10px 38px 10px 12px;
     border: 1px solid #d8d6cc;
     border-radius: 6px;
     background: #fff;
     color: var(--ink);
     font: 400 .95rem var(--sans)
 }

 .crew-hours {
     margin: 14px 0 4px;
     padding: 16px;
     background: #f8f7f3;
     border: 1px solid #e4e2d9;
     border-radius: 6px
 }

 .crew-hours__head {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 16px
 }

 .crew-hours__head label {
     margin: 0;
     font-weight: 500
 }

 .crew-hours__head output {
     font-size: .92rem
 }

 .crew-hint {
     display: block;
     margin-top: 7px;
     text-transform: none;
     letter-spacing: 0;
     color: #777;
     font-size: .76rem
 }

 .panel .crew-hours input[type=range] {
     padding: 0
 }

 .total {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     margin: 24px 0;
     padding: 18px 20px;
     background: #eeede7;
     border: 1px solid #e1dfd6;
     color: var(--ink);
     border-radius: 8px;
     transition: border-color .35s ease, box-shadow .35s ease
 }

 .total__copy {
     display: flex;
     flex-direction: column;
     gap: 3px
 }

 .total span {
     font-family: var(--sans);
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.3
 }

 .total__copy small {
     font-size: .76rem;
     font-weight: 400;
     line-height: 1.35;
     letter-spacing: 0;
     text-transform: none;
     color: #747268;
     transition: opacity .3s ease
 }

 .total strong {
     font-family: var(--serif);
     font-size: .95rem;
     font-weight: 400;
     line-height: 1.3;
     text-align: right;
     white-space: nowrap;
     transition: color .42s ease, opacity .42s ease, transform .42s ease
 }

 .total--concealed strong {
     color: #eeede7;
     opacity: 0;
     transform: translateY(3px);
     user-select: none
 }

 .total.is-revealed {
     border-color: #d0cdc1;
     box-shadow: 0 8px 24px rgba(22, 21, 15, .06)
 }

 .total.is-revealed strong {
     color: var(--ink);
     opacity: 1;
     transform: translateY(0);
     user-select: text
 }

 .total.is-revealed .total__copy small {
     opacity: 0
 }

 form {
     display: grid;
     gap: 8px
 }

 form button {
     padding: 14px
 }

 .contacts {
     display: flex;
     flex-direction: column
 }

 .contacts a {
     font: 440 clamp(1.4rem, 3vw, 2.2rem) var(--serif);
     padding: 8px 0;
     border-bottom: 1px solid #ddd
 }

 .lightbox {
     position: fixed;
     inset: 0;
     z-index: 9000;
     display: none;
     align-items: center;
     justify-content: center;
     background: #000f
 }

 .lightbox.open {
     display: flex
 }

 .lightbox img {
     max-width: calc(100vw - 110px);
     max-height: calc(100svh - 90px);
     cursor: pointer
 }

 .lightbox button {
     position: absolute;
     background: #0007;
     color: #fff;
     border: 0;
     font-size: 2rem
 }

 .lightbox #lbClose {
     top: 16px;
     right: 16px
 }

 .lightbox #lbPrev {
     left: 10px
 }

 .lightbox #lbNext {
     right: 10px
 }

 .lightbox #lbCount {
     position: absolute;
     bottom: 15px;
     color: #fff
 }

 @media(max-width:1024px) {
     .desktop-nav {
         display: none
     }

     .menu-open {
         display: block
     }

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

     /* Mobilno: i Weddings ide tekst pa galerija (kao Studio28), da se na spoju
        sekcija ne nadovezuju dve galerije jedna na drugu. */
     #weddings .split>#weddingGallery {
         order: 2
     }

     .gallery {
         columns: 3
     }
 }

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

 @media(max-width:480px) {
     .brand {
         max-width: calc(100vw - 75px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
     }

     .gallery {
         columns: 2
     }

     .total {
         padding: 16px;
         gap: 12px;
         align-items: flex-start
     }

     .total span {
         font-size: .95rem
     }

     .total strong {
         font-size: .9rem
     }

     .total__copy small {
         max-width: 24ch
     }
 }

 @media(min-width:1025px) {
     .overlay {
         display: none !important
     }
 }

 /* Instagram in-app browser compatibility */
 .hero {
     min-height: 100vh;
     min-height: 100svh
 }

 body.instagram-browser .site-loader {
     display: none !important
 }

 .instagram-notice {
     position: fixed;
     inset: 0;
     z-index: 9990;
     display: none;
     align-items: flex-end;
     justify-content: center;
     padding: 18px
 }

 .instagram-notice.is-visible {
     display: flex
 }

 .instagram-notice__backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .66);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px)
 }

 .instagram-notice__card {
     position: relative;
     width: min(100%, 480px);
     padding: 25px 24px 21px;
     background: #f6f5f0;
     color: var(--ink);
     border: 1px solid rgba(255, 255, 255, .22);
     border-radius: 12px;
     box-shadow: 0 24px 70px rgba(0, 0, 0, .36)
 }

 .instagram-notice__close {
     position: absolute;
     top: 10px;
     right: 12px;
     width: 38px;
     height: 38px;
     padding: 0;
     border: 0;
     background: transparent;
     color: var(--ink);
     font-size: 1.65rem;
     line-height: 1;
     cursor: pointer
 }

 .instagram-notice__eyebrow {
     display: block;
     margin-bottom: 9px;
     color: #77746c;
     font-size: .68rem;
     font-weight: 500;
     letter-spacing: .14em;
     text-transform: uppercase
 }

 .instagram-notice h2 {
     max-width: 13ch;
     margin: 0;
     font-size: clamp(1.55rem, 7vw, 2.15rem);
     line-height: 1.08
 }

 .instagram-notice p {
     max-width: 40ch;
     margin: 14px 0 19px;
     color: #55524b;
     font-size: .91rem;
     line-height: 1.55
 }

 .instagram-notice__actions {
     display: flex;
     gap: 9px
 }

 .instagram-notice__actions button {
     min-height: 44px;
     padding: 10px 16px;
     border-radius: 6px;
     cursor: pointer
 }

 .instagram-notice__primary {
     border: 1px solid #16150f;
     background: #16150f;
     color: #fff
 }

 .instagram-notice__secondary {
     border: 1px solid #cbc8bd;
     background: transparent;
     color: var(--ink)
 }

 #copySiteStatus {
     display: block;
     min-height: 1.1em;
     margin-top: 9px;
     color: #666;
     font-size: .72rem;
     letter-spacing: 0;
     text-transform: none
 }

 #selectedDatePreview {
     display: block;
     margin-top: 6px;
     color: #666;
     font-size: .8rem;
     font-weight: 400;
     letter-spacing: 0;
     line-height: 1.35;
     text-transform: none
 }

 @media(min-width:700px) {
     .instagram-notice {
         align-items: center
     }
 }

 @media(max-width:390px) {
     .instagram-notice__actions {
         flex-direction: column
     }

     .instagram-notice__actions button {
         width: 100%
     }
 }

 /* Header language switcher */
 .nav {
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
     gap: 8px;
     padding-top: 11px;
     padding-bottom: 13px
 }

 .language-switcher {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 5px;
     width: 100%;
     white-space: nowrap;
     letter-spacing: .04em
 }

 .lang-btn {
     appearance: none;
     border: 0;
     background: transparent;
     padding: 2px 0;
     color: inherit;
     font: inherit;
     font-size: .72rem;
     letter-spacing: .08em;
     cursor: pointer;
     opacity: .48
 }

 .lang-btn.active {
     opacity: 1;
     text-decoration: underline;
     text-underline-offset: 4px
 }

 .language-switcher>span {
     opacity: .35;
     font-size: .72rem
 }

 .nav-main-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 28px;
     width: 100%;
     min-width: 0
 }

 .brand {
     min-width: 0;
     white-space: nowrap
 }

 .hero-service {
     position: absolute;
     left: 0;
     right: 0;
     top: calc(50% + clamp(88px, 13vw, 145px));
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     color: #fff;
     font-size: clamp(.66rem, 1vw, .82rem);
     font-weight: 400;
     letter-spacing: .18em;
     line-height: 1.5;
     text-transform: uppercase;
     text-shadow: 0 1px 8px #000;
     pointer-events: none
 }

 .hero-service span:last-child {
     font-size: .88em;
     opacity: .8
 }

 .booking-status {
     display: inline-flex !important;
     align-items: center;
     margin: 18px 0 2px !important;
     padding: 8px 12px;
     border: 1px solid #d8d5c9;
     border-radius: 999px;
     background: #fff;
     font-size: .8rem;
     letter-spacing: .03em
 }

 .booking-status:before {
     content: '✓';
     margin-right: 7px
 }

 .panel textarea {
     width: 100%;
     min-height: 140px;
     padding: 12px;
     border: 1px solid #d8d6cc;
     border-radius: 6px;
     background: #fff;
     color: var(--ink);
     font: 400 .95rem var(--sans);
     line-height: 1.5;
     resize: vertical
 }

 .panel textarea:focus {
     outline: 1px solid var(--ink);
     outline-offset: 2px
 }

 .wishes-field {
     margin-top: 18px
 }

 .wishes-meta {
     display: flex;
     justify-content: space-between;
     gap: 16px;
     margin-top: 6px
 }

 .wishes-meta small {
     font-size: .72rem;
     line-height: 1.35;
     letter-spacing: 0;
     text-transform: none;
     color: #777
 }

 #wishesCounter {
     flex: 0 0 auto;
     font-variant-numeric: tabular-nums
 }

 .form-select {
     margin-top: 16px
 }

 .quote-status {
     display: flex;
     flex-direction: column;
     gap: 3px;
     margin-top: 16px;
     padding: 13px 15px;
     border: 1px solid #cfd8cc;
     border-radius: 6px;
     background: #f4f7f2;
     font-size: .84rem
 }

 .quote-status[hidden] {
     display: none
 }

 .quote-status span {
     color: #666
 }

 @media(max-width:1024px) {
     .nav-main-row {
         gap: 14px
     }

     .brand {
         max-width: calc(100vw - 82px);
         overflow: hidden;
         text-overflow: ellipsis
     }
 }

 @media(max-width:700px) {
     .nav {
         gap: 6px;
         padding-top: 9px;
         padding-bottom: 10px
     }

     .lang-btn,
     .language-switcher>span {
         font-size: .64rem
     }

     .brand {
         font-size: .78rem
     }

     .hero-service {
         top: calc(50% + 105px);
         padding: 0 18px;
         text-align: center;
         letter-spacing: .13em
     }
 }

 /* FIX: lightbox navigation controls */
 .lightbox #lbImage {
     position: relative;
     z-index: 1
 }

 .lightbox button {
     z-index: 10;
     width: 56px;
     height: 56px;
     padding: 0;
     display: grid;
     place-items: center;
     cursor: pointer;
     line-height: 1;
     touch-action: manipulation
 }

 .lightbox #lbPrev,
 .lightbox #lbNext {
     top: 50%;
     transform: translateY(-50%)
 }

 .lightbox #lbClose {
     z-index: 11
 }

 .lightbox #lbCount {
     z-index: 10;
     pointer-events: none
 }

 /* Responsive paired fields */
 .form-row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 18px
 }

 .form-row>label {
     min-width: 0
 }

 .panel input:focus,
 .field-group select:focus {
     outline: 1px solid var(--ink);
     outline-offset: 2px
 }

 #quoteBtn:disabled {
     opacity: .55;
     cursor: not-allowed
 }

 @media(max-width:640px) {
     .form-row {
         grid-template-columns: 1fr;
         gap: 8px
     }
 }

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

     *,
     *::before,
     *::after {
         animation-duration: .01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .01ms !important
     }
 }