/* ============== CROSS-BROWSER PATCH (append to your CSS) ============== */

   /* 0) namig brskalniku za svetlo/temno obrazce in native UI barve */
   :root {
     color-scheme: light dark;
   }

   /* 1) varnostni fallbacki za CSS var() barve na ključnih mestih */
   body {
     background-color: var(--color-background, #0A0E16);
     color: var(--color-text, #e0e4ec);
   }

   .logo {
     color: var(--color-text, #111);
   }

   .main-nav a {
     color: var(--color-text, #111);
   }

   .footer-divider {
     background-color: var(--color-border, rgba(0, 0, 0, .12));
   }

   /* 2) viewport enote: rešitev za iOS 100vh */
   .hero-scene {
     height: 100vh;
     /* fallback */
     height: 100svh;
     /* iOS 16+ / modern */
     height: 100dvh;
     /* Chromium/Safari/Firefox modern */
     min-height: 100vh;
   }

   /* 3) INSET fallback (Safari stari in nekateri Androidi) */
   .aurora-background,
   .frosted-glass-layer,
   .split-marquee-section::before {
     inset: 0;
     /* modern */
   }

   @supports not (inset: 0) {

     .aurora-background,
     .frosted-glass-layer {
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
     }

     .split-marquee-section::before {
       bottom: 0;
       left: 0;
       right: 0;
       height: 50%;
     }
   }

   /* 4) text-stroke / background-clip za WebKit */
   .marquee-text--outline {
     -webkit-text-stroke: 2px var(--text-outline-color, #fff);
     /* Firefox nima text-stroke -> outline ostane “nepoln”, to je pričakovano */
   }

   .animated-gradient-text {
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }

   /* 5) backdrop-filter (že imaš @supports; dodamo varne fallbacke) */
   @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
     .site-header {
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
     }

     .main-nav.offcanvas {
       -webkit-backdrop-filter: blur(15px);
       backdrop-filter: blur(15px);
     }
   }

   /* 6) background-attachment: fixed – iOS/Android težave */
   .image-section .grid-cell {
     background-attachment: scroll;
   }

   /* safe default */
   @supports (background-attachment: fixed) {
     .image-section .grid-cell {
       background-attachment: fixed;
     }
   }

   /* 7) scroll-driven animacije: guard + fallback */
   @supports not (animation-timeline: view()) {

     .portfolio-grid__cell--beats,
     .portfolio-grid__cell--visiter,
     .portfolio-grid__cell--luster {
       animation: none !important;
     }
   }

   @media (prefers-reduced-motion: reduce) {

     .portfolio-grid__cell--beats,
     .portfolio-grid__cell--visiter,
     .portfolio-grid__cell--luster {
       animation: none !important;
     }
   }

   /* 8) color-mix (še ni všesplošno): deterministični fallback */
   mark {
     /* fallbacki, če color-mix/oklab ni podprt */
     background: linear-gradient(to right, rgba(167, 139, 250, 0.6) 50%, transparent 50%);
     text-decoration-color: rgba(167, 139, 250, 0.2);
   }

   @supports (background: linear-gradient(to right, color-mix(in oklab, #000 50%, #fff 50%))) {
     mark {
       background: linear-gradient(to right,
           color-mix(in oklab, var(--aurora-3, #a78bfa) 60%, transparent) 50%,
           transparent 50%);
       text-decoration-color: color-mix(in oklab, var(--aurora-3, #a78bfa) 20%, transparent);
     }
   }



   /* 10) hover-only razširjanje harmonike (na dotik brez “skokov”) */
   @media (hover: hover) and (pointer: fine) {
     .accordion-gallery__item:hover {
       flex: 7 1 0;
     }
   }

   /* na dotik ohranimo enakomerno širino */
   @media (hover: none),
   (pointer: coarse) {
     .accordion-gallery__item {
       transition: none;
     }
   }

   /* 11) marquee/loop animacije – izklop na reduce-motion */
   @media (prefers-reduced-motion: reduce) {

     .marquee-track,
     .loop-slider .inner,
     .scroller-list {
       animation: none !important;
     }
   }

   /* 12) Safari rendering optimizacije */
   .scroller-list,
   .loop-slider .inner,
   .marquee-track {
     backface-visibility: hidden;
     transform: translateZ(0);
     will-change: transform;
   }

   /* 13) clip-path varnost: če ni podpore, odstrani izrez (vidno vse) */
   @supports not (clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)) {
     .marquee-text--solid {
       clip-path: none;
     }
   }

   /* 14) position: sticky – prisili z-index plastenje nad ozadji */
   .scroll-layout .scroll-figure,
   .scroll-layout .scroll-article {
     z-index: 0;
     /* baseline */
   }

   .frosted-glass-layer {
     z-index: 2;
   }

   .hero-text-wrapper {
     z-index: 10;
   }

   /* 15) tipkanje (typing) – varni fallbacki širine */
   .typing-animation,
   .typing-animation-2 {
     width: auto;
     /* fallback, če steps/width anim ni lepo podprta */
   }

   @media (prefers-reduced-motion: no-preference) {

     .typing-animation,
     .typing-animation-2 {
       width: 0;
     }

     /* vrni izvirno vedenje, kjer je podprto */
   }

   /* 16) polne delilne črte – 100vw hack: robustnejše centriranje */
   .footer-divider {
     left: 50%;
     transform: translateX(-50%);
   }

   /* 17) webkit filter blur stabilnost */
   .aurora-shape {
     -webkit-filter: blur(120px);
     filter: blur(120px);
   }

   /* 18) smooth scroll – izklop za reduce-motion */
   @media (prefers-reduced-motion: reduce) {
     html {
       scroll-behavior: auto;
     }
   }



   :root {
     --font-primary: 'Helvetica Neue', Arial, sans-serif;
     --font-heading: system-ui, -apple-system, sans-serif;
     --transition-speed: 0.4s;
     --font-size-base: 1rem;
     --line-height: 1.6;
     --aurora-1: #3b82f6;
     --aurora-2: #14b8a6;
     --aurora-3: #a78bfa;
     --font-serif: 'Playfair Display', serif;
     --gradient-border: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-1));
     --gradient-animation: gradient-flow 5s ease-in-out infinite;
     --text-outline-color: #FFFFFF;
   }

   html[data-theme="dark"] {
     --color-background: #0A0E16;
     --color-text: #e0e4ec;
     --color-text-heading: #fff;
     --color-text-muted: #bec7d4;
     --color-accent: #6ee5ff;
     --color-nav-bg: rgba(1, 1, 1, 0.75);
     --color-nav-bg-fallback: rgba(15, 15, 15, 0.95);
     --color-header-bg: rgba(0, 0, 0, 0.65);
     --color-header-bg-fallback: #000000;
     --color-border: #222631;
     --color-bg-3: #181922;
     --bs-body-bg: var(--color-background);
     --bs-body-color: var(--color-text);
     --bs-border-color: var(--color-border);
     --bs-secondary-color: var(--color-text-muted);
   }

   html[data-theme="light"] {
     --color-background: #FFFFFF;
     --color-text: #000000;
     --color-text-muted: #555555;
     --color-accent: #11c0e7;
     --color-nav-bg: rgba(255, 255, 255, 0.6);
     --color-nav-bg-fallback: rgba(245, 245, 245, 0.95);
     --color-header-bg: rgba(255, 255, 255, 0.65);
     --color-header-bg-fallback: #FFFFFF;
     --color-border: rgba(0, 0, 0, 0.1);
     --color-bg-3: #f6f7f9;
     --bs-body-bg: var(--color-background);
     --bs-body-color: var(--color-text);
     --bs-border-color: var(--color-border);
     --bs-secondary-color: var(--color-text-muted);
   }


   *,
   *::before,
   *::after {
     -webkit-box-sizing: border-box;
     /* Združljivost */
     -moz-box-sizing: border-box;
     /* Združljivost */
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }


   .content-wrapper {
     width: 100%;
     max-width: 2400px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }

   body {
     font-family: var(--font-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;

     transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
   }

   html {
     scroll-behavior: smooth;
   }

   .site-header {
     background-color: var(--color-header-bg-fallback);
     transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
     z-index: 1050;
   }

   .logo {
     color: var(--color-text);
     letter-spacing: -0.05em;
     transition: color var(--transition-speed) ease;
   }

   .logo:hover {
     color: var(--color-text);
   }

   .theme-toggle {
     background: none;
     border: none;
     cursor: pointer;
     position: relative;
     width: 36px;
     height: 36px;
     color: var(--color-text);
     transition: color var(--transition-speed) ease;
   }

   .theme-toggle svg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 24px;
     height: 24px;
     transition: opacity 0.3s ease, transform 0.4s ease;
   }

   .moon-icon-svg {
     opacity: 1;
     transform: translate(-50%, -50%) rotate(0deg);
   }

   .sun-icon-svg {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(-90deg);
   }

   html[data-theme="light"] .moon-icon-svg {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(90deg);
   }

   html[data-theme="light"] .sun-icon-svg {
     opacity: 1;
     transform: translate(-50%, -50%) rotate(0deg);
   }

   /* SPREMEMBA: Odstranjen padding, ker je dodan kot BS razred (p-2) */
   .menu-toggle {
     border: none;
     background: none;
   }

   .menu-toggle:focus {
     box-shadow: none;
   }

   .hamburger-icon {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 18px;
   }

   .hamburger-icon span {
     background-color: var(--color-text);
     transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
     display: block;
     width: 28px;
     height: 2px;
   }

   .menu-toggle.is-active .hamburger-icon span:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
   }

   .menu-toggle.is-active .hamburger-icon span:nth-child(2) {
     opacity: 0;
   }

   .menu-toggle.is-active .hamburger-icon span:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
   }

   .hero-title {
     font-size: clamp(3rem, 12vw, 9rem);
     font-weight: 500;
     line-height: 0.9;
     letter-spacing: -0.04em;
     text-transform: lowercase;
     color: var(--color-text);
   }

   .main-nav.offcanvas {
     background-color: var(--color-nav-bg-fallback);
     transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, background-color var(--transition-speed) ease;
     transform: none;
     opacity: 0;
     visibility: hidden;
     z-index: 1040;
   }

   .main-nav.offcanvas.show {
     opacity: 1;
     visibility: visible;
   }

   .main-nav .offcanvas-body {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding-left: 5%;
     padding-right: 5%;
   }

   .main-nav ul {
     list-style: none;
     padding-left: 0;
     width: 100%;
     max-width: 1200px;
   }

   .main-nav li {
     margin: 0.5rem 0;
   }

   .main-nav a {
     color: var(--color-text);
     text-decoration: none;
     font-size: clamp(2.5rem, 8vw, 6rem);
     font-weight: 500;
     line-height: 1.1;
     transition: opacity 0.3s ease;
     display: inline-block;
   }

   .main-nav a:hover,
   .main-nav a:focus {
     opacity: 0.6;
     color: var(--color-text);
     outline: none;
   }

   .main-nav a:focus-visible {
     outline: 2px solid var(--color-accent);
     outline-offset: 4px;
     opacity: 1;
   }

   .menu-divider {
     color: var(--color-text);
   }

   @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
     .site-header {
       background-color: var(--color-header-bg);
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
     }

     .main-nav.offcanvas {
       background-color: var(--color-nav-bg);
       -webkit-backdrop-filter: blur(15px);
       backdrop-filter: blur(15px);
     }
   }

   .scroller {
     overflow: hidden;
   }

   .scroller-inner {
     display: flex;
     flex-wrap: nowrap;
   }

   .scroller-list {
     display: flex;
     flex-shrink: 0;
     animation: infinite-scroll 40s linear infinite;
     will-change: transform;
     backface-visibility: hidden;
   }

   .scroller-list li {
     margin: 0 0.75rem;
   }

   .scroller:hover .scroller-list {
     animation-play-state: paused;
   }

   @keyframes infinite-scroll {
     from {
       transform: translate3d(0, 0, 0);
     }

     to {
       transform: translate3d(-100%, 0, 0);
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .scroller-list {
       animation: none;
     }
   }

   .scroller-img {
     height: 16rem;
     width: auto;
   }

   @media (min-width: 640px) {
     .scroller-img {
       height: 20rem;
     }
   }

   @media (min-width: 1024px) {
     .scroller-img {
       height: 28rem;
     }
   }

   .text-scroller-item>span {
     font-size: 3rem;
     font-weight: 700;
     white-space: nowrap;
   }

   .text-scroller-item>svg {
     height: 2.5rem;
     width: 2.5rem;
   }

   @media (min-width: 640px) {
     .text-scroller-item>span {
       font-size: 4.5rem;
     }

     .text-scroller-item>svg {
       height: 4rem;
       width: 4rem;
     }
   }

   @media (min-width: 768px) {
     .text-scroller-item>span {
       font-size: 6rem;
     }
   }

   @media (min-width: 1024px) {
     .text-scroller-item>span {
       font-size: 8rem;
     }

     .text-scroller-item>svg {
       height: 5rem;
       width: 5rem;
     }
   }

   .hero-scene {
     position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     background-color: var(--color-background);
   }

   .aurora-background {
     position: absolute;
     inset: 0;
     z-index: 1;
   }

   .aurora-shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     opacity: 0.6;
   }

   #aurora-1 {
     width: 500px;
     height: 500px;
     top: -10%;
     left: -10%;
     background: var(--aurora-1);
     animation: move-aurora-1 6s infinite alternate ease-in-out;
   }

   #aurora-2 {
     width: 400px;
     height: 400px;
     top: 30%;
     left: 40%;
     background: var(--aurora-2);
     animation: move-aurora-2 5s infinite alternate ease-in-out;
   }

   #aurora-3 {
     width: 450px;
     height: 450px;
     bottom: 20%;
     right: -5%;
     background: var(--aurora-3);
     animation: move-aurora-3 7s infinite alternate ease-in-out;
   }

   @keyframes move-aurora-1 {
     to {
       transform: translate(200px, 100px) scale(1.4);
     }
   }

   @keyframes move-aurora-2 {
     to {
       transform: translate(-150px, -250px) scale(1.7);
     }
   }

   @keyframes move-aurora-3 {
     to {
       transform: translate(150px, -180px) scale(2);
     }
   }

   .frosted-glass-layer {
     position: absolute;
     inset: 0;
     z-index: 2;
     background: hsla(0, 0%, 100%, 0.1);
     backdrop-filter: blur(80px);
   }

   html[data-theme="dark"] .frosted-glass-layer {
     background: rgba(26, 26, 26, 0.1);
   }

   .hero-text-wrapper {
     position: sticky;
     top: 0;
     width: 100%;
     height: 100vh;
     color: var(--color-text);
     z-index: 10;
     font-family: 'Inter', sans-serif;
   }

   .hero-text-wrapper .tagline {
     font-size: clamp(1.6rem, 6vw, 2.5rem);
     font-weight: 400;
     margin: 0;
     color: var(--color-text-heading);
   }

   .hero-text-wrapper h1 {
    font-family: var(--font-heading);
      font-size: clamp(4rem, 12vw, 9rem);
      font-weight: 900;
      line-height: 0.9;
      margin: 0;
      letter-spacing: -0.05em;
   }

   .animated-gradient-text {
     display: inline-block;
     padding-right: 0.1em;
     margin-right: 0.03em;
     background: var(--gradient-border);
     background-size: 200% 200%;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
     animation: var(--gradient-animation);
     line-height: 1.0;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }

   @media (max-width: 900px) {
     .hero-scene {
       height: auto;
       display: flex;
       flex-direction: column;
     }

     .hero-text-wrapper {
       position: relative;
       height: 80vh;
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .aurora-shape {
       animation: none;
     }

     .animated-gradient-text {
       animation: none;
     }
   }

   .info-section .section-motto {
     font-weight: 400;
     font-size: clamp(1.5rem, 4vw, 2.5rem);
   }

   .info-grid {
     width: 100vw;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     border-top: 1px solid var(--color-border);
     border-bottom: 1px solid var(--color-border);
     transition: border-color var(--transition-speed) ease;
   }

   .info-grid .grid-cell {
     padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
     min-height: 250px;
   }

   .info-grid .col-xl-4:not(:last-of-type),
   .info-grid .col-lg-6:not(:nth-child(2n)) {
     border-right: 1px solid var(--color-border);
     transition: border-color var(--transition-speed) ease;
   }

   .info-grid .row>.grid-cell:not(:last-child) {
     border-bottom: 1px solid var(--color-border);
   }

   @media (min-width: 768px) {

     .info-grid .row>.grid-cell:nth-child(1),
     .info-grid .row>.grid-cell:nth-child(2) {
       border-bottom: none;
     }

     .info-grid .row>.grid-cell:nth-child(1) {
       border-right: 1px solid var(--color-border);
     }

     .info-grid .row>.grid-cell:nth-child(3) {
       border-bottom: 1px solid var(--color-border);
       border-top: 1px solid var(--color-border);
     }
   }

   @media (min-width: 1200px) {
     .info-grid .row>.grid-cell:nth-child(2) {
       border-right: 1px solid var(--color-border);
     }

     .info-grid .row>.grid-cell:nth-child(3) {
       border-bottom: none;
     }
   }

   .bouncing-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     width: fit-content;
   }

   .bouncing-circle {
     width: clamp(4rem, 6vw, 6rem);
     height: clamp(4rem, 6vw, 6rem);
     border-radius: 9999px;
     animation: bounce 1s infinite;
   }

   .circle-accent-1 {
     background-color: var(--aurora-1);
   }

   .circle-neutral {
     background-color: transparent;
     border: 3px solid var(--color-text);
     transition: border-color var(--transition-speed) ease;
   }

   .circle-accent-2 {
     background-color: var(--aurora-2);
   }

   .bouncing-circle:nth-child(2) {
     animation-delay: 100ms;
   }

   .bouncing-circle:nth-child(3) {
     animation-delay: 200ms;
   }

   .bouncing-circle:nth-child(4) {
     animation-delay: 300ms;
   }

   @keyframes bounce {

     0%,
     100% {
       transform: translateY(-25%);
       animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
     }

     50% {
       transform: translateY(0);
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }

   .tag-item {
     border: 2px solid var(--color-text);
     color: var(--color-text);
     padding: 1rem 1.5rem;
     border-radius: 9999px;
     font-size: clamp(1rem, 2.5vw, 1.5rem);
     white-space: nowrap;
     transition: background-color 0.3s, color 0.3s, border-color var(--transition-speed) ease;
     cursor: pointer;
   }

   .tag-item:hover,
   .tag-item:focus-visible {
     background-color: var(--color-text);
     color: var(--color-background);
   }

   .text-cell h3 {
     font-size: 0.8rem;
     letter-spacing: 0.1em;
     color: var(--color-text-muted);
     transition: color var(--transition-speed) ease;
   }

   .text-cell p {
     line-height: 1.6;
     max-width: 60ch;
     font-size: clamp(1.2rem, 1vw, 1.5rem);
   }

   .text-cell a {
     color: var(--color-text);
     transition: color var(--transition-speed) ease;
   }

   .text-cell a:hover {
     opacity: 0.7;
   }

   .collab-subtitle {
     font-size: 0.8rem;
     letter-spacing: 0.1em;
     color: var(--color-text-muted);
   }

   .collab-headline {
     font-size: clamp(2.5rem, 9vw, 6.5rem);
     line-height: 1.1;
     letter-spacing: -0.02em;
   }

   @media (prefers-reduced-motion: reduce) {
     .bouncing-circle {
       animation: none;
     }

     .tag-item {
       transition: none;
     }
   }

   .small-text {
     line-height: clamp(1.8rem, 1.6vw, 1.8rem);
     font-size: clamp(1.2rem, 1vw, 1.5rem);
     padding: 1rem 0;
     color: var(--color-text);
     transition: color var(--transition-speed) ease;
   }

   .normal-text {
     line-height: clamp(2rem, 3vw, 3rem);
     font-size: clamp(1.45rem, 2vw, 2.4rem);
     padding: 1.5rem 0;
     color: var(--color-text);
     transition: color var(--transition-speed) ease;
   }

   @keyframes spinText {
     to {
       transform: rotate(360deg);
     }
   }

   /* === DODATNI STILI ZA PARALLAX SHOWCASE SEKCIJO === */
   .grid-container {
     position: relative;
     width: 100%;
   }

   .image-section {
     position: sticky;
     top: 0;
     height: 100vh;
   }

   .text-section {
     background-color: var(--color-background);
   }

   .image-section-1 {
     z-index: 11;
   }

   .text-section:nth-of-type(2) {
     z-index: 12;
   }

   .image-section-2 {
     z-index: 13;
   }

   .text-section:nth-of-type(4) {
     z-index: 14;
   }

   /* --- SLIKOVNE MREŽE --- */
   .grid-layout {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr 1fr;
     height: 100%;
   }

   .image-section .grid-layout {
     background-color: var(--color-background);
   }

   .image-section .grid-cell {
     background-attachment: fixed;
     background-size: cover;
     background-position: center center;
   }

   .image-section-1 .grid-cell {
     background-image: url('../../assets/img/vogue-magazine-cover-project-2048.webp');
   }

   .image-section-2 .grid-cell {
     background-image: url('../../assets/img/kick-flip-event-2048.webp');
   }

   .image-section .cell-1 {
     grid-column: 1 / 3;
   }

   .image-section .cell-2 {
     grid-column: 3 / 4;
   }

   .image-section .cell-3 {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }

   .image-section .cell-4 {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
   }

   .image-section .cell-5 {
     grid-column: 3 / 4;
     grid-row: 2 / 3;
   }

   /* --- SPODNJA ZRCALNA MREŽA --- */
   .mirrored-grid .grid-cell {
     border: 1px solid var(--color-border);
     padding: 1.5rem;
     transition: border-color var(--transition-speed) ease;
   }

   .m-cell-1 {
     grid-column: 1 / 2;
   }

   .m-cell-2 {
     grid-column: 2 / 4;
   }

   .m-cell-3 {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }

   .m-cell-4 {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
   }

   .m-cell-5 {
     grid-column: 3 / 4;
     grid-row: 2 / 3;
   }

   .m-cell-6 {
     grid-column: 1 / 4;
     grid-row: 3 / 4;
   }

   /* --- LOGOTIPI IN ANIMACIJA --- */
   .logo-svg {
     width: 50%;
     max-width: 150px;
     height: auto;
     color: var(--color-text);
     transition: color var(--transition-speed) ease;
   }

   .typing-animation,
   .typing-animation-2 {
     display: inline-block;
     font-family: monospace;
     font-size: clamp(1.5rem, 5vw, 4rem);
     font-weight: bold;
     letter-spacing: .15em;
     white-space: nowrap;
     overflow: hidden;
     border-right: .15em solid var(--aurora-2);
     width: 0;
   }

   @media (prefers-reduced-motion: no-preference) {
     .typing-animation {
       animation: typing 3.5s steps(12, end) infinite, blink-caret .75s step-end infinite;
     }

     .typing-animation-2 {
       animation: typing-2 3s steps(11, end) infinite, blink-caret .75s step-end infinite;
     }
   }

   @keyframes typing {
     from {
       width: 0
     }

     to {
       width: 12ch
     }
   }

   @keyframes typing-2 {
     from {
       width: 0
     }

     to {
       width: 11ch
     }
   }

   @keyframes blink-caret {

     from,
     to {
       border-color: transparent
     }

     50% {
       border-color: var(--aurora-2);
     }
   }

   /* --- ODZIVNOST --- */
   @media (max-width: 768px) {
     .mirrored-grid {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
     }

     .mirrored-grid .grid-cell {
       grid-column: 1 / -1 !important;
       grid-row: auto !important;
       min-height: 150px;
     }
	    /* === ZAČETEK POPRAVKA ZA MOBILNE NAPRAVE === */
    
        /* 1. Skrijemo mrežo, ki je bila uporabljena za parallax učinek */
        .image-section .grid-layout {
            display: none;
        }
    
        /* 2. Namesto tega sliko ozadja nastavimo neposredno na celotno sekcijo */
        .image-section {
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            /* background-attachment ostane 'scroll' (privzeto), kar deluje povsod. */
        }
    
        /* 3. Določimo ustrezne slike za vsako sekcijo */
        .image-section-1 {
            background-image: url('../../assets/img/vogue-magazine-cover-project-2048.webp');
        }
    
        .image-section-2 {
            background-image: url('../../assets/img/kick-flip-event-2048.webp');
        }
    
        /* === KONEC POPRAVKA ZA MOBILNE NAPRAVE === */
   }

   /* === KONEC PARALLAX SEKCIJA === */

   /* === DODATNI STILI ZA ASIMETRIČNO GRID SEKCIJO === */
   .portfolio-grid img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .portfolio-grid {
     display: grid;
     grid-template-columns: 1.5fr 2fr 1.5fr;
     grid-template-rows: 2fr 0.7fr 1.5fr 120px;
     gap: 1.5rem;
     min-height: 100vh;
     overflow: clip;
   }

   .portfolio-grid__cell {
     overflow: hidden;
   }

   .portfolio-grid__cell--beats {
     grid-area: 1 / 1 / 2 / 3;
   }

   .portfolio-grid__cell--visiter {
     grid-area: 1 / 3 / 3 / 4;
   }

   .portfolio-grid__cell--beats-caption {
     grid-area: 2 / 1 / 3 / 2;
   }

   .portfolio-grid__cell--work-caption {
     grid-area: 3 / 1 / 4 / 2;
   }

   .portfolio-grid__cell--luster {
     grid-area: 2 / 2 / 4 / 3;
   }

   .portfolio-grid__cell--visiter-caption {
     grid-area: 3 / 3 / 4 / 4;
   }

   .portfolio-grid__cell--luster-caption {
     grid-area: 4 / 2 / 5 / 4;
   }

   /* --- Animirano besedilo --- */
   .scrolling-words-box {
     height: clamp(1.7rem, 2.5vw, 2.2rem);
     margin: auto;
     overflow: hidden;
   }

   .scrolling-words-box ul {
     list-style: none;
     padding: 0;
     animation: scrollUp 6s infinite;
   }

   .scrolling-words-box ul li {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: clamp(1.7rem, 2.5vw, 2.2rem);
   }

   @keyframes scrollUp {

     15%,
     25% {
       transform: translateY(-20%);
     }

     40%,
     50% {
       transform: translateY(-40%);
     }

     65%,
     75% {
       transform: translateY(-60%);
     }

     90%,
     100% {
       transform: translateY(-80%);
     }
   }

   /* --- Stil vsebine znotraj celic --- */
   .portfolio-grid__caption {
     line-height: clamp(1.5rem, 2.3vw, 2rem);
     padding: 1rem 0;
   }

   .portfolio-grid__caption h3 {
     font-size: clamp(1.5rem, 2.3vw, 2rem);
     font-weight: 800;
     text-transform: uppercase;
   }

   .portfolio-grid__caption p {
     font-size: clamp(1rem, 1.8vw, 1.2rem);
     color: var(--color-text-muted);
   }

   .portfolio-grid__caption sup {
     font-size: 0.7em;
     vertical-align: super;
     margin-left: 0.2em;
   }

   /* --- Animacije ob drsenju (scroll-driven animations) --- */
   @keyframes slide-in-from-bottom-left {
     from {
       opacity: 0.7;
       transform: translate3d(-390px, 90px, 100px) scale(1.1);
     }

     to {
       opacity: 1;
       transform: translate3d(0, 0, 0) scale(1);
     }
   }

   @keyframes slide-in-from-top-right {
     from {
       opacity: 0.7;
       transform: translate3d(90px, -90px, -100px) scale(1.1);
     }

     to {
       opacity: 1;
       transform: translate3d(0, 0, 0) scale(1);
     }
   }

   @keyframes slide-in-from-bottom {
     from {
       opacity: 0.7;
       transform: translate3d(0, 190px, 0px) scale(1.05);
     }

     to {
       opacity: 1;
       transform: translate3d(0, 0, 0) scale(1);
     }
   }

   @media (prefers-reduced-motion: no-preference) {

     .portfolio-grid__cell--beats,
     .portfolio-grid__cell--visiter,
     .portfolio-grid__cell--luster {
       animation-timeline: view();
       animation-range: entry 0% cover 50%;
       animation-fill-mode: both;
     }

     .portfolio-grid__cell--beats {
       animation-name: slide-in-from-bottom-left;
     }

     .portfolio-grid__cell--visiter {
       animation-name: slide-in-from-top-right;
     }

     .portfolio-grid__cell--luster {
       animation-name: slide-in-from-bottom;
     }
   }

   /* --- Odzivnost --- */
   @media (max-width: 768px) {
     .portfolio-grid {
       display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: auto;
       gap: 1.5rem;
       min-height: auto;
     }

     .portfolio-grid__cell {
       min-height: 250px;
       grid-column: 1 / -1;
     }

     .portfolio-grid__caption {
       min-height: auto;
       padding: 1rem 0;
     }

     /* Natančen vrstni red elementov v mobilnem pogledu */
     .portfolio-grid__cell--work-caption {
       grid-row: 1;
     }

     .portfolio-grid__cell--beats {
       grid-row: 2;
     }

     .portfolio-grid__cell--beats-caption {
       grid-row: 3;
     }

     .portfolio-grid__cell--visiter {
       grid-row: 4;
     }

     .portfolio-grid__cell--visiter-caption {
       grid-row: 5;
     }

     .portfolio-grid__cell--luster {
       grid-row: 6;
     }

     .portfolio-grid__cell--luster-caption {
       grid-row: 7;
     }
   }

   /* === KONEC ASIMETRIČNA SEKCIJA STILOV === */

   /* === ZAČETEK HALF SPLIT SEKCIJA STILOV === */
   .rotator-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     --rotator-size: 25vw;
     --center-size: 10vw;
   }

   .rotator {
     position: relative;
     width: var(--rotator-size);
     height: var(--rotator-size);
     max-width: 40vh;
     display: flex;
     align-items: center;
     justify-content: center;
     user-select: none;
   }

   .rotator .center-logo {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     background: var(--gradient-border);
     border-radius: 50%;
     width: var(--center-size);
     height: var(--center-size);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .rotator .center-logo svg path {
     fill: var(--color-background);
     transition: fill var(--transition-speed) ease;
   }

   .rotator svg {
     display: block;
     width: 100%;
     height: 100%;
   }

   .rotator .circle-text {
    font-family: var(--font-primary);
      font-size: clamp(.78rem, .5vw, .4rem);
      letter-spacing: 0.14em;
      font-weight: 500;
      fill: var(--color-text);
      -webkit-animation: spinText 30s linear infinite;
      animation: spinText 30s linear infinite;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-transition: fill var(--transition-speed) ease;
      transition: fill var(--transition-speed) ease;
   }

   @media (max-width: 1199.98px) {
     .rotator-wrap {
       margin-top: 2rem;
       padding-bottom: 2rem;
       --rotator-size: 50vw;
       --center-size: 25vw;
     }
   }

   @media (prefers-reduced-motion: reduce) {

     .bouncing-circle,
     .circle-text {
       animation: none;
     }
   }

   /* === KONEC ROTATOR SEKCIJA STILOV === */

   /* === ZAČETEK HALF SPLIT SEKCIJA STILOV === */
   /* --- Mobilna postavitev (Mobile-first) --- */
   /* reset */
   .scroll-layout *,
   .scroll-layout *::before,
   .scroll-layout *::after {
     position: relative;
   }

   /* ===== MOBILE-FIRST (default < 700px) ===== */
   .scroll-layout>.scroll-section {
     display: block;
   }

   .scroll-layout .scroll-figure {
     width: 100%;
     height: 50vh;
     overflow: hidden;
   }

   .scroll-layout .scroll-figure img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }

   .scroll-layout .scroll-article {
     width: 100%;
     height: auto;
     padding: clamp(16px, 5vmin, 32px);
     margin-bottom: 0;
     background: var(--color-bg-3);
     color: var(--color-text);
   }

   .scroll-layout .scroll-article>div {
     display: flex;
     flex-direction: column;
     gap: clamp(12px, 3vmin, 24px);
   }

   @media screen and (min-width:700px) {
     .scroll-layout>.scroll-section {
       display: flex;
       flex-wrap: wrap;
     }

     .scroll-layout .scroll-figure {
       width: calc(50% + 1px);
       height: 100vh;
       margin: 0 auto 10vh 0;
       position: sticky;
       top: 0;
       overflow: hidden;
     }

     .scroll-layout .scroll-article {
       width: calc(50% + 1px);
       height: 100vh;
       margin: 0 0 10vh auto;
       position: sticky;
       top: 0;
       overflow: hidden;
     }

     .scroll-layout .scroll-figure:nth-of-type(1),
     .scroll-layout .scroll-article:nth-of-type(1) {
       margin: 0 0 10vh 0;
       width: 50%;
     }

     .scroll-layout .scroll-figure:nth-of-type(2n) {
       margin: 0 0 10vh auto;
     }

     .scroll-layout .scroll-article:nth-of-type(2n) {
       margin: 0 auto 10vh 0;
     }

     .scroll-layout .scroll-figure:last-of-type,
     .scroll-layout .scroll-article:last-of-type {
       margin-bottom: 0;
     }

     .scroll-layout .scroll-article::before {
       background: var(--aurora-2);
       z-index: 1;
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       width: 20vmin;
       height: 20vmin;
       transform: translate(calc(-50% + 1px), -50%) rotate(-45deg);
       clip-path: polygon(-15% -15%, 110% 0%, 0% 110%);
       border-radius: 1.5vmin 0 0 0;
     }

     .scroll-layout .scroll-article:nth-of-type(2n)::before {
       left: auto;
       right: 0;
       transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1);
     }

     .scroll-layout .scroll-article::after {
       content: '';
       position: absolute;
       top: 0;
       right: 75%;
       bottom: 0;
       left: 5vmin;
       backdrop-filter: invert(1);
       pointer-events: none;
     }

     .scroll-layout .scroll-article:nth-of-type(2n)::after {
       right: 5vmin;
       left: 75%;
     }

     /* slike znotraj sticky figure */
     .scroll-layout .scroll-figure img {
       min-width: 100%;
       min-height: 100%;
       object-fit: cover;
       object-position: center;
     }

     .scroll-layout .scroll-article>div {
       height: 100%;
       padding: 3vw;
       justify-content: space-between;

     }
   }

   /* Majhni Bootstrap-safe utilitiji (ne spreminjajo vedenja) */
   .m-0 {
     margin: 0 !important;
   }

   .mb-0 {
     margin-bottom: 0 !important;
   }

   /* === KONEC HALF SPLIT SEKCIJA STILOV === */

   /* === ZAČETEK COMPANY SLIDER SEKCIJA === */
   .loop-slider .inner {
     display: flex;
     width: fit-content;
     animation: loop 25s linear infinite;
   }

   .tag svg {
     width: 1.3em;
     height: 1.3em;
     fill: currentColor;
     color: var(--color-text-muted);
   }

   @keyframes loop {
     0% {
       transform: translateX(0);
     }

     100% {
       transform: translateX(-50%);
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .loop-slider .inner {
       animation: none;
     }
   }

   /* === KONEC COMPANY SLIDER SEKCIJA === */

   /* === ZAČETEK COLLAGE SEKCIJA  === */
   .collage {
     --collage-gap: clamp(.6rem, 1.2vw, 1.25rem);
     --collage-row: clamp(120px, 10vw, 240px);
   }

   .collage .collage__wrap {
     margin: 5vh 0;
   }

   .collage .collage__grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-auto-rows: var(--collage-row);
     gap: var(--collage-gap);
     position: relative;
   }

   .collage .collage__tile {
     overflow: hidden;
     position: relative;
     isolation: isolate;
   }

   .collage .collage__tile--photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     filter: contrast(1.05) saturate(.9);
   }

   /* Scroll-driven animacije */
   @supports (animation-timeline: view()) {
     .collage .collage__tile--photo {
       view-timeline-name: --photo;
       view-timeline-axis: block;
     }

     .collage .collage__tile--photo img {
       transform-origin: 50% 50%;
       will-change: transform;
       animation-name: collage-grow-hold;
       animation-timeline: --photo;
       animation-range: entry 10% exit 100%;
       animation-timing-function: linear;
       animation-fill-mode: both;
     }

     @keyframes collage-grow-hold {
       from {
         transform: scale(var(--zoom-min, 1));
       }

       to {
         transform: scale(var(--zoom-max, 1.14));
       }
     }

     .collage .collage__pos--a img {
       --zoom-max: 1.3;
     }

     .collage .collage__pos--b img {
       --zoom-max: 1.18;
     }

     .collage .collage__pos--c img {
       --zoom-max: 1.14;
     }
   }

   .collage .collage__tile--note {
     border: 2px solid var(--color-text);
     padding: clamp(1rem, 2.5vw, 1.5rem);
     min-height: calc(var(--collage-row) * 3 + var(--collage-gap) * 2);
     transition: border-color var(--transition-speed) ease;
   }

   .collage .collage__tile--note::after {
     content: '';
     position: absolute;
     top: 0;
     left: 55%;
     bottom: 0;
     right: 3vmin;
     backdrop-filter: invert(1);
     pointer-events: none;
   }

   .collage .collage__shape-svg {
     width: clamp(140px, 85%, 720px);
     height: auto;
     display: block;
   }

   .collage .collage__tile--sticker {
     border: 2px solid var(--aurora-2);
     background-color: var(--color-header-bg);
     padding: .25rem .5rem;
     letter-spacing: .06em;
     transform: rotate(-6deg);
     transition: background-color var(--transition-speed) ease;
   }

   /* Pozicioniranje elementov na mreži */
   .collage .collage__pos--a {
     grid-column: 1 / span 6;
     grid-row: 2 / span 4;
     transform: rotate(-2.5deg);
   }

   .collage .collage__pos--b {
     grid-column: 8 / span 6;
     grid-row: 1 / span 2;
     transform: rotate(1.6deg);
   }

   .collage .collage__pos--c {
     grid-column: 6 / span 7;
     grid-row: 5 / span 4;
     transform: rotate(-1.5deg);
   }

   .collage .collage__pos--note {
     grid-column: 2 / span 5;
     grid-row: 6 / span 4;
   }

   .collage .collage__pos--blob {
     grid-column: 7 / span 3;
     grid-row: 3 / span 2;
     color: var(--aurora-3);
   }

   .collage .collage__pos--ring {
     grid-column: 9 / span 3;
     grid-row: 8 / span 2;
     color: var(--aurora-2);
   }

   .collage .collage__pos--sticker {
     grid-column: 10 / span 3;
     grid-row: 2 / span 2;
   }

   /* Odzivnost mreže */
   @media (max-width: 900px) {
     .collage .collage__grid {
       grid-template-columns: repeat(6, 1fr);
     }

     .collage .collage__pos--a {
       grid-column: 1 / span 6;
       grid-row: 1 / span 4;
     }

     .collage .collage__pos--b {
       grid-column: 1 / span 4;
       grid-row: 5 / span 3;
     }

     .collage .collage__pos--note {
       grid-column: 3 / span 4;
       grid-row: 8 / span 3;
     }

     .collage .collage__pos--c {
       grid-column: 2 / span 5;
       grid-row: 11 / span 3;
     }

     .collage .collage__pos--blob {
       grid-column: 1 / span 2;
       grid-row: 8 / span 2;
     }

     .collage .collage__pos--ring {
       grid-column: 5 / span 2;
       grid-row: 4 / span 2;
     }

     .collage .collage__pos--sticker {
       grid-column: 5 / span 2;
       grid-row: 6 / span 1;
     }
   }

   @media (max-width: 520px) {
     .collage .collage__grid {
       grid-template-columns: repeat(4, 1fr);
       grid-auto-rows: 26vw;
     }

     .collage .collage__pos--a {
       grid-column: 1 / span 4;
       grid-row: 1 / span 5;
     }

     .collage .collage__pos--b {
       grid-column: 1 / span 3;
       grid-row: 6 / span 3;
     }

     .collage .collage__pos--note {
       grid-column: 1 / span 4;
       grid-row: 9 / span 3;
     }

     .collage .collage__pos--c {
       grid-column: 2 / span 3;
       grid-row: 12 / span 3;
     }

     .collage .collage__pos--blob {
       grid-column: 1 / span 2;
       grid-row: 12 / span 2;
     }

     .collage .collage__pos--ring {
       grid-column: 3 / span 2;
       grid-row: 5 / span 2;
     }

     .collage .collage__pos--sticker {
       grid-column: 4 / span 1;
       grid-row: 7 / span 1;
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .collage .collage__tile--photo img {
       animation: none !important;
     }
   }

   /* === KONEC COLLAGE SEKCIJA === */

   /* === ZAČETEK MARQUEE TEXT SEKCIJA STILI === */
   .split-marquee-section {
     position: relative;
     overflow: hidden;
     background-color: var(--color-background);
     padding: clamp(2rem, 5vw, 4rem) 0;
     display: grid;
     place-items: center;
   }

   .split-marquee-section::before {
     content: "";
     position: absolute;
     inset: auto 0 0 0;
     height: 50%;
     background-image: url('../img/bg-text-marquee-1200.webp');
     background-size: cover;
     background-position: center;
     z-index: 1;
   }

   /* wrapper za oba sloja besedila */
   .marquee-wrapper {
     position: relative;
     z-index: 2;
     display: grid
   }

   /* neskončni teksti (moraš PODVOJITI vsebino, zato sta v HTML dve kopiji) */
   .marquee-track {
     grid-area: 1/1;
     display: flex;
     width: fit-content;
     animation: marquee-scroll 20s linear infinite;
     font-size: clamp(4rem, 20vw, 15rem);
     line-height: 1;
     text-transform: uppercase;
     font-weight: 700;
     will-change: transform;
   }

   .marquee-chunk {
     padding: 0 1rem;
     white-space: nowrap
   }

   @keyframes marquee-scroll {
     from {
       transform: translateX(0)
     }

     to {
       transform: translateX(-50%)
     }
   }

   .marquee-text--outline {
     color: transparent;
     -webkit-text-stroke: 2px var(--text-outline-color);
     text-stroke: 2px var(--text-outline-color);
   }

   .marquee-text--solid {
     color: var(--color-text-heading);
     clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
   }

   /* WCAG – izklop animacije */
   @media (prefers-reduced-motion:reduce) {
     .marquee-track {
       animation: none
     }
   }

   /* === KONEC: MARQUEE TEXT SEKCIJA === */

     /* === ZAČETEK: HARMONIKA SEKCIJA === */
     .accordion-gallery {
       display: flex;
       flex-direction: row;
       width: 100%;
       height: 100vh;
       margin-top: 10vh;
     }
  
     .accordion-gallery__item {
       flex: 1;
       height: 100%;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       -webkit-transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
       transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
       overflow: hidden;
     }
  
     .accordion-gallery__item:hover {
       flex: 7;
     }
  
     /* Slike za prve tri elemente */
     .accordion-gallery__item--image-1 {
       background-image: url("../../assets/img/vogue-cover-2048.webp");
     }
  
     .accordion-gallery__item--image-2 {
       background-image: url("../../assets/img/mythic-car-2048.webp");
     }
  
     .accordion-gallery__item--image-3 {
       background-image: url("../../assets/img/krystal-media-2048.webp");
     }
  
     /* === 4. STILI ZA POSAMEZNE ELEMENTE === */
  
     /* -- Seznam projektov -- */
     .accordion-gallery__item--projects {
       padding: 2rem;
       display: flex;
       align-items: center;
       background-color: var(--color-background);
     }
  
     .accordion-gallery__project-list {
       width: 100%;
       max-width: 800px;
       margin: 0 auto;
     }
  
     .accordion-gallery__project-item {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 1rem;
       padding: 1.5rem 1rem;
       border-bottom: 1px solid var(--color-border);
       -webkit-transition: color 0.3s, background-color 0.3s;
       transition: color 0.3s;
       text-decoration: none;
       color: var(--color-text);
     }
  
     .accordion-gallery__project-item:first-child {
       border-top: 1px solid var(--color-border);
     }
  
     .accordion-gallery__project-title {
       font-size: clamp(1.5rem, 4vw, 2.5rem);
       font-weight: 500;
     }
  
     .accordion-gallery__project-detail {
       text-align: right;
       align-self: center;
       font-size: 0.9rem;
     }
  
     .accordion-gallery__project-arrow {
       grid-column: 3;
       font-size: 2rem;
       opacity: 0;
       -webkit-transform: translateX(-20px);
       transform: translateX(-20px);
       -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
       transition: opacity 0.4s, transform 0.4s;
     }
  
     .accordion-gallery__project-item:hover,
     .accordion-gallery__project-item--active {
       background-color: rgba(0, 0, 0, 0.1);
       color: var(--color-text);
     }
  
     .accordion-gallery__project-item:hover .accordion-gallery__project-arrow,
     .accordion-gallery__project-item--active .accordion-gallery__project-arrow {
       opacity: 1;
       -webkit-transform: translateX(0);
       transform: translateX(0);
     }
  
     /* -- Testimonial -- */
     .accordion-gallery__item--testimonial {
       padding: clamp(2rem, 8vw, 6rem);
       background-color: var(--color-background);
       display: flex;
       align-items: center;
     }
  
     .accordion-gallery__testimonial {
       position: relative;
       padding-left: 2rem;
     }
  
     .accordion-gallery__testimonial::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 3px;
       background-color: var(--color-text);
       /* Dodana barva za vidnost */
     }
  
     .accordion-gallery__testimonial-quote {
       font-size: clamp(1.2rem, 3vw, 2rem);
       line-height: 1.4;
       margin-bottom: 2rem;
     }
  
     .accordion-gallery__testimonial-cite {
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
       font-style: normal;
     }
  
     .accordion-gallery__cite-name {
       font-weight: 700;
     }
  
     .accordion-gallery__cite-title {
       font-size: 0.9rem;
       color: var(--text-muted);
     }
  
     .accordion-gallery__cite-link {
       text-decoration: underline;
       margin-top: 0.5rem;
       font-size: 0.9rem;
       color: var(--color-text);
     }
  
     .accordion-gallery__cite-link:hover {
       color: var(--color-text-muted);
     }
  
     /* === 5. ODZIVNOST === */
     @media (max-width: 768px) {
       .accordion-gallery {
         flex-direction: column;
         height: auto;
         /* Pomembno: omogoča, da se višina prilagodi vsebini */
         margin-top: 5vh;
         /* Malenkost manjši margin na vrhu v mobilnem načinu */
       }
  
       .accordion-gallery__item {
         flex: 1 0 auto;
         /* Spremenjeno: Odstranjeno !important in dodano flex-shrink: 0, flex-basis: auto */
         width: 100%;
         min-height: 300px;
         /* Lahko po potrebi prilagodiš to višino */
         margin-bottom: 20px;
         /* Dodan razmik med elementi v mobilnem pogledu */
       }
  
       .accordion-gallery__item:last-child {
         margin-bottom: 0;
         /* Zadnji element naj nima spodnjega razmika */
       }
  
       .accordion-gallery__item--image-1,
       .accordion-gallery__item--image-2,
       .accordion-gallery__item--image-3 {
         display: block;
         /* Poskrbimo, da se slika prikazuje */
         height: 300px;
         /* Ali poljubna višina, ki jo želiš, da se slika prikaže */
         /* Lahko dodaš tudi max-height, če želiš omejiti višino slik */
       }
  
       .accordion-gallery__item--projects {
         padding: 1.5rem;
         /* Zmanjšan padding v mobilnem načinu */
       }
  
       .accordion-gallery__project-list {
         padding: 1rem 0;
         /* Zmanjšan padding */
       }
  
       .accordion-gallery__project-item {
         padding: 1rem 0.5rem;
         /* Zmanjšan padding elementov */
         gap: 0.5rem;
       }
  
       .accordion-gallery__project-title {
         font-size: clamp(1.2rem, 5vw, 2rem);
         /* Prilagoditev velikosti pisave */
       }
  
       .accordion-gallery__project-detail {
         font-size: 0.8rem;
         /* Prilagoditev velikosti pisave */
       }
  
       .accordion-gallery__item--testimonial {
         padding: clamp(1.5rem, 6vw, 4rem);
         /* Zmanjšan padding testimoniala */
       }
  
       .accordion-gallery__testimonial-quote {
         font-size: clamp(1rem, 4vw, 1.5rem);
         /* Prilagoditev velikosti pisave */
         margin-bottom: 1.5rem;
       }
     }
  
     /* === 6. DOSTOPNOST (WCAG) === */
     @media (prefers-reduced-motion: reduce) {
  
       .accordion-gallery__item,
       .accordion-gallery__project-arrow {
         -webkit-transition: none;
         transition: none;
       }
     }
  
     /* Združljivost: Zamenjava :is() z naštevanjem selektorjev */
     a:focus-visible,
     button:focus-visible {
       outline: 3px solid var(--text-color);
       outline-offset: 4px;
     }
  
     /* === KONEC: HARMONIKA SEKCIJA === */

   /* === ZAČETEK FOOTER SEKCIJA STILOV === */
   .site-footer {
     width: 100%;
     background-color: var(--color-background);
     transition: background-color var(--transition-speed) ease;
   }

   @keyframes gradient-flow {
     0% {
       background-position: 100% 50%;
     }

     50% {
       background-position: 0% 50%;
     }

     100% {
       background-position: 100% 50%;
     }
   }

   .cta-wrapper {
     transition: transform 0.3s ease;
   }

   .cta-wrapper:hover {
     transform: scale(1.08);
   }

   .cta-button {
     padding: 1.2rem 3.5rem;
     font-weight: 900;
     letter-spacing: 0.12em;
     font-size: 1rem;
     color: var(--color-text-heading);
     border: 4px solid transparent;
     background: linear-gradient(var(--color-background), var(--color-background)) padding-box, var(--gradient-border) border-box;
     background-size: 200% 100%;
     animation: var(--gradient-animation);
     transition: color var(--transition-speed) ease;
   }

   .cta-button:hover {
     color: var(--color-text-heading);
   }

   .footer-divider {
     border: none;
     height: 1px;
     background-color: var(--color-border);
     transition: background-color var(--transition-speed) ease;
     width: 100vw;
     position: relative;
     left: 50%;
     margin-left: -50vw;
   }

   .footer-row {
     font-size: clamp(0.7rem, .7vw, 1.1rem);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--color-text-muted);
     transition: color var(--transition-speed) ease;
   }

   .footer-bottom-row .grid-item,
   .footer-top-row a {
     color: var(--color-text-muted);
     transition: color 0.3s;
   }

   .footer-bottom-row .grid-item:hover,
   .footer-top-row a:hover {
     color: var(--color-text-heading);
   }

   .footer-brand {
     font-weight: 900;
     line-height: 0.8;
     width: 100%;
     white-space: nowrap;
     font-size: clamp(2.5rem, 12vw, 15rem);
     color: var(--color-text-heading);
     transition: color var(--transition-speed) ease;
   }

   .brand-part-serif {
     font-family: var(--font-serif);
     font-style: italic;
     font-weight: 700;
   }

   @media (prefers-reduced-motion: reduce) {

     .cta-button,
     .cta-wrapper {
       animation: none;
       transition: none;
     }
   }

   /* === KONEC FOOTER SEKCIJA STILOV === */



   @keyframes highlight {
     to {
       background-position: 0;
     }
   }

   mark {
     animation: highlight linear forwards;
     /* CSS Scroll‑Timeline – animates while scrolling */
     animation-timeline: view(20% 20%);
     background: linear-gradient(to right,
         color-mix(in oklab, var(--aurora-3) 60%, transparent) 50%,
         transparent 50%);
     text-decoration-line: underline;
     text-decoration-color: color-mix(in oklab, var(--aurora-3) 20%, transparent);
     text-decoration-thickness: 0.16em;
     text-underline-offset: 0.22em;
     background-position: 100%;
     background-size: 200% 100%;
     border-radius: 0.125rem;
     padding-inline: 0.125rem;
     color: var(--color-text);
   }