/* ===== THEMES ===== */
[data-theme="light"] {
  --bg:         #F7F4EF;
  --bg-dark:    #111110;
  --bg-2:       #EEEAE3;
  --text:       #1A1A18;
  --text-m:     #6B6860;
  --text-l:     #A8A49D;
  --border:     #E2DDD6;
  --nav-text:   #F7F4EF;
  --nav-s-bg:   rgba(247,244,239,0.95);
  --nav-s-text: #1A1A18;
  --tile-dark:  #2a2826;
}
[data-theme="dark"] {
  --bg:         #000000;
  --bg-dark:    #000000;
  --bg-2:       #111111;
  --text:       #F7F4EF;
  --text-m:     #A8A49D;
  --text-l:     #6B6860;
  --border:     #222222;
  --nav-text:   #F7F4EF;
  --nav-s-bg:   rgba(0,0,0,0.95);
  --nav-s-text: #F7F4EF;
  --tile-dark:  #111111;
}

/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;font-size:16px;line-height:1.6;
  overflow-x:hidden;
  transition:background .4s,color .4s;
}
a{text-decoration:none;color:inherit;}

/* ===== NAV ===== */
nav{
  position:fixed;inset:0 0 auto;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:2rem 3rem;
  transition: padding .4s, color .4s;
  background: transparent;
  pointer-events: auto;
}
nav.s{ padding:1.2rem 3rem; }

:root { --n-clr: #1A1A18; }
:root[data-theme="dark"] { --n-clr: #ffffff; }

.nlogo{
  display:inline-block;
  width:58px;height:24px;            /* logo proporcija 223:93 ≈ 2.4 */
  background-color: var(--n-clr);    /* spalva paveldima iš nav (light/dark/video) */
  -webkit-mask:url(../qqlogo/qqlogo-berugs-header.svg) no-repeat center / contain;
          mask:url(../qqlogo/qqlogo-berugs-header.svg) no-repeat center / contain;
  transition: background-color .4s, opacity .3s;
  z-index: 1001;
}
/* Atidarius overlay meniu — paslepiam „QQ Rugs" logotipą */
body:has(.b-overlay.o) .nlogo,
body.b-open .nlogo{ opacity: 0; pointer-events: none; }
.nlinks{display:flex;gap:3rem;list-style:none;align-items:center;z-index: 1001;}
.nlinks a{
  font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color: var(--n-clr); opacity: 0.6; transition: all .4s;
}
.nlinks a:hover{ opacity: 1; color: var(--n-clr); }

.nright{display:flex;align-items:center;gap:2rem;z-index: 1001;}

.lang-toggle{
  display:flex;gap:.5rem;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color: var(--n-clr); opacity: .4;
  transition: opacity .3s;
}
.lang-toggle button{
  background:none;border:none;cursor:pointer;
  font-size:.6rem;color:inherit;font-family:'Inter',sans-serif;padding:0;
}
.lang-toggle button.active{ opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.theme-btn{
  background:none;border:none; opacity: 0.6;
  width:36px;height:36px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .3s;
  color: var(--n-clr);
}
.theme-btn:hover{ opacity: 1; background: rgba(255,255,255,0.05); }

.burger-btn{
  background:none;border:none;cursor:pointer;
  display:flex; align-items:center; gap: 12px;
  padding: 10px 0; z-index:1100; color: var(--n-clr);
}
.burger-label {
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
    color: inherit; transition: color .4s, opacity .3s;
}
.burger-lines { width: 28px; height: 8px; position: relative; }
.burger-lines span{
  display:block;width:100%;height:1px;background: currentColor;
  position:absolute;left:0;transition:transform .5s cubic-bezier(0.19, 1, 0.22, 1), background .4s;
}
.burger-lines span:first-child{top:0;}
.burger-lines span:last-child{bottom:0; transform: none; top: auto;}

/* Virš tamsaus hero (klasė nav--dark) tekstas baltas abiejose temose */
nav.nav--dark { --n-clr: #F7F4EF; }
/* Įskaitomumas virš spalvoto video — subtilus juodas šešėlis */
nav.nav--dark .nlogo,
nav.nav--dark .nlinks a,
nav.nav--dark .lang-toggle button,
nav.nav--dark .theme-btn,
nav.nav--dark .burger-btn,
nav.nav--dark .burger-label {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
nav.nav--dark .lang-toggle button {
  border-color: rgba(247, 244, 239, 0.7);
}

/* Desktop header — .nlinks ir .burger-btn visada matomi */
@media (min-width: 769px) {
  nav .nlinks,
  nav .burger-btn {
    opacity: 1; visibility: visible;
  }
}

.burger-btn.active { color: var(--text); }
.burger-btn.active .burger-lines span:first-child{transform: translateY(4px) rotate(45deg);}
.burger-btn.active .burger-lines span:last-child{transform: translateY(-3px) rotate(-45deg);}
.burger-btn.active .burger-label { opacity: 0; }

.b-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg);
  display:grid; grid-template-columns: 1fr 1fr;
  opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(0.19, 1, 0.22, 1);
}
.b-overlay.o{opacity:1;pointer-events:all;}

.b-close-overlay {
  position: absolute; top: 2rem; right: 3rem;
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1), opacity .3s;
  z-index: 2100;
}
.b-close-overlay:hover { opacity: 0.6; transform: rotate(90deg); }

.b-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 8%;
}
.b-right {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 8%;
}

.b-links{list-style:none;}
.b-links li{margin-bottom:1.2rem; overflow:hidden;}
.b-links a{
  position: relative;
  display:inline-block; font-family:'Playfair Display',serif; font-size:clamp(2rem, 5.5vw, 4rem);
  line-height: 1.15; color:var(--text); opacity: 0; transform: translateY(100%);
  transition: color .3s;
}
.b-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(0.65, 0, 0.35, 1);
}
.b-links a:hover::after { transform: scaleX(1); }

.b-secondary { margin-top: 2.2rem; opacity: 0; }
.b-secondary:first-child { margin-top: 0; }
.b-sec-label { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-l); margin-bottom: 8px; display: block; }
.b-sec-links { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; }
.b-sec-links li { position: relative; }
.b-sec-links li + li::before {
  content: '·';
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-l);
}
.b-sec-links a {
  position: relative;
  display: inline-block;
  font-size: 1rem; color: var(--text); transition: color .3s;
}
.b-sec-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(0.65, 0, 0.35, 1);
}
.b-sec-links a:hover::after { transform: scaleX(1); }

/* Overlay soc. tinklu ikonos (Sekite mus) */
.b-sec-links.b-social { gap: 1rem; }
.b-social a { padding: 4px; display: inline-flex; }
.b-social a::after { display: none; }
.b-social li + li::before { display: none; }
.b-social svg { display: block; width: 26px; height: 26px; transition: opacity .3s ease; }
.b-social a:hover svg { opacity: 0.6; }

/* Overlay kalbos/temos mygtukai (desktop + mobile) */
.b-lang-row, .b-theme-row {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.2rem;
}
.b-lang-btn, .b-theme-btn-text {
  position: relative;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--text-l); padding: 0;
  transition: color .3s;
}
.b-lang-btn::after, .b-theme-btn-text::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(0.65, 0, 0.35, 1);
}
.b-lang-btn.active, .b-theme-btn-text.active { color: var(--text); }
.b-lang-btn.active::after, .b-theme-btn-text.active::after { transform: scaleX(1); }
.b-lang-btn:hover, .b-theme-btn-text:hover { color: var(--text); }
.b-lang-btn:hover::after, .b-theme-btn-text:hover::after { transform: scaleX(1); }
.b-lang-sep, .b-theme-sep { font-size: 0.95rem; color: var(--text-l); }

/* ===== HERO ===== */
.hero{
  position:relative;height:100svh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#111;
}
.hbg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(1.0);
  transition:transform 10s ease;
}
.hero:hover .hbg{transform:scale(1.03);}
/* Video rodom pilnu ryškumu + truputį sodrumo/kontrasto „pop“ efektui */
video.hbg{filter:brightness(1) contrast(1.04) saturate(1.06);}
.hov{
  position:absolute;inset:0;
  background:
    /* Subtilus patamsinimas iš apačios į viršų */
    linear-gradient(to top,
      rgba(17,17,16,.45) 0%,
      rgba(17,17,16,.22) 25%,
      rgba(17,17,16,0)  60%),
    /* Švelni vinjetė tik už centrinio teksto — kraštai/viršus lieka ryškūs */
    radial-gradient(ellipse 85% 62% at 50% 50%,
      rgba(17,17,16,.34) 0%,
      rgba(17,17,16,.14) 55%,
      rgba(17,17,16,0) 100%);
  z-index:1;
}
.hcont{
  position:relative;z-index:2;text-align:center;
  color:#F7F4EF;padding:0 2rem;
  /* Teksto šešėlis — leidžia naudoti mažiau tamsos, bet išlaikyti skaitomumą */
  text-shadow:0 2px 18px rgba(0,0,0,.5);
  opacity:0;transform:translateY(28px);
  animation:fup 1.2s cubic-bezier(0,0,.2,1) .4s forwards;
}
.hey{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,239,.78);margin-bottom:1.8rem;}
.ht{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.1rem,5.25vw,4.9rem);
  font-weight:400;line-height:1.06;letter-spacing:-.01em;
  margin-bottom:2.2rem;
}
.ht-lt-pre{display:none;}
[data-lang="lt"] .ht-lt-pre{display:inline;font-style:normal;}
.ht em{font-style:italic;}
.hsub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.78);margin-bottom:3.5rem;}
@media(max-width:768px){
  /* Mobile: tris dalis sudedam vieną po kita, separatorius slepiam */
  .hsub .hsub-sep{display:none;}
  .hsub span[data-en]{display:block;line-height:2.1;}
}
.hcta{
  display:inline-block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:#F7F4EF;border-bottom:1px solid rgba(247,244,239,.28);
  padding-bottom:3px;transition:border-color .25s;
}
.hcta:hover{border-color:rgba(247,244,239,.85);}
.hscroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:0;animation:fin 1s ease 1.9s forwards;
}
.hscroll span{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.25);}
.sline{width:1px;height:44px;background:rgba(247,244,239,.12);position:relative;overflow:hidden;}
.sline::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:rgba(247,244,239,.65);animation:sa 2.2s ease-in-out infinite;}

/* ===== HORIZONTAL CAROUSEL ===== */
.work-section {
    padding: 100px 0;
    background: var(--bg);
}

.work-header {
    padding: 0 3rem 3rem;
}

.work-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 5.25vw, 4.9rem);
    text-transform: uppercase;
    font-weight: 400;
}

/* Klikuojama sekcijos antraštė — subtilus underline hover */
.section-h-link {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.section-h-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-h-link:hover::after {
    transform: scaleX(1);
}

.work-timeline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 1.4rem 3rem 0;
}
.work-tl-dot {
    height: 2px;
    width: 24px;
    background: var(--border);
    border-radius: 2px;
    transition: background 0.3s, width 0.3s;
    cursor: pointer;
}
.work-tl-dot.active {
    background: var(--text);
    width: 40px;
}
@media (max-width: 768px) {
    .work-timeline { display: none; }
}

.gallery-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-left: 3rem;
}

.carousel-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
}

.nav-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    color: black;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    mix-blend-mode: difference;
    opacity: 0;
    transition: background 0.3s ease;
}

#prevBtn { transform: translateX(-40px); }
#nextBtn { transform: translateX(40px); }

.nav-btn:hover { background: #f0f0f0; }

.gallery-container {
    display: flex;
    gap: 20px;
    width: max-content;
}

.project-item {
    position: relative;
    width: 600px;
    height: 800px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-dark);
    display: block;
    cursor: none;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.80);
    transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-item:hover .project-img {
    filter: brightness(1);
    transform: scale(1.05);
}

.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    color: white;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.project-info h2 {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    margin: 0;
}

.project-info .category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.item-number-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 0.7rem;
    color: white;
    opacity: 0.5;
}

/* CTA matomas tik mobiliam (žr. media query) — desktop'e affordance per hover/kursorių */
.project-cta, .mac-cta { display: none; }

.project-item:hover .project-info { opacity: 0.2; }

/* Custom Cursor */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

#custom-cursor svg { width: 30px; height: 30px; fill: black; }

/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 100px 3rem;
    background: var(--bg);
    transition: background .4s, color .4s;
}
.about-container {
    max-width: 1440px;
    margin: 0 auto;
}
.about-section .about-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 5.25vw, 4.9rem);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 1.2rem;
    transition: color .4s;
}
.about-sub {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-m);
    margin-bottom: 3rem;
    transition: color .4s;
}
.about-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.about-item {
    position: relative;
    height: 800px;
    overflow: hidden;
    background: var(--bg-dark);
    cursor: none;
}
.about-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
    transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.about-item:hover img {
    filter: brightness(1);
    transform: scale(1.05);
}
.about-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    color: white;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.about-item-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
}
.about-item-info .role {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
    margin: 0;
}
.about-item-info .desc {
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.75;
    margin-top: 10px;
    max-width: 320px;
    min-height: calc(0.85rem * 1.5 * 2); /* 2 eilutes — kad visi .role butu vienodame auksti */
}
.about-item:hover .about-item-info { opacity: 0.2; }

/* ===== ORDER SECTION ===== */
.order-section {
    padding: 100px 3rem;
    background: var(--bg);
    transition: background .4s, color .4s;
}
.order-container {
    max-width: 1440px;
    margin: 0 auto;
}
.order-header { margin-bottom: 3rem; }
.order-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 5.25vw, 4.9rem);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 1.2rem;
    transition: color .4s;
}
.order-header-sub {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-m);
    transition: color .4s;
}
.order-nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: end;
}
.order-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.5rem, 5.5vw, 5.5rem);
    font-weight: 400;
    line-height: 0.9;
    text-align: center;
    color: var(--text-l);
    cursor: pointer;
    transition: color .3s;
    user-select: none;
}
.order-num.active { color: var(--text); }
.order-num:hover:not(.active) { color: var(--text-m); }

.order-timeline {
    position: relative;
    height: 30px;
    margin: 10px 0;
}
.order-timeline .bar {
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px solid var(--border);
    transition: border-color .4s;
}
.order-timeline .ticks {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.order-timeline .tick {
    display: flex;
    justify-content: center;
    align-items: center;
}
.order-timeline .tick .d {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-l);
    transition: background .3s, width .3s, height .3s, box-shadow .3s;
}
.order-timeline .tick.active .d { width: 12px; height: 12px; background: var(--text); }

.order-titles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: center;
    margin-bottom: 66px;
}
.order-title-item { cursor: pointer; }
.order-title-item .t {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-l);
    transition: color .3s;
}
.order-title-item.active .t { color: var(--text); }
.order-title-item:hover:not(.active) .t { color: var(--text-m); }

.order-panel {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    min-height: 480px;
    background: #1a1a18;
    transition: background .4s;
}
[data-theme="light"] .order-panel { background: var(--bg); }
.order-panel-img {
    width: 100%;
    min-height: 480px;
    background: #111110;
    position: relative;
    overflow: hidden;
}
.order-panel-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.order-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
    color: #F7F4EF;
    transition: color .4s;
}
[data-theme="light"] .order-panel-copy { color: var(--text); }
.panel-step-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247,244,239,.4);
    transition: color .4s;
}
[data-theme="light"] .panel-step-label { color: var(--text-l); }
.panel-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1;
    color: #F7F4EF;
    margin: 0;
    transition: color .4s;
}
[data-theme="light"] .panel-title { color: var(--text); }
.order-panel hr {
    border: none;
    border-top: 1px solid rgba(247,244,239,.12);
    margin: 4px 0;
    transition: border-color .4s;
}
[data-theme="light"] .order-panel hr { border-color: var(--border); }
.panel-desc {
    font-size: 0.88rem;
    line-height: 1.75;
    color: rgba(247,244,239,.65);
    margin: 0;
    transition: color .4s;
}
[data-theme="light"] .panel-desc { color: var(--text-m); }
.panel-cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #F7F4EF;
    border-bottom: 1px solid rgba(247,244,239,.3);
    padding-bottom: 3px;
    transition: border-color .25s, color .4s;
    text-decoration: none;
}
[data-theme="light"] .panel-cta { color: var(--text); border-bottom-color: var(--border); }
.panel-cta:hover { border-bottom-color: rgba(247,244,239,.85); }
[data-theme="light"] .panel-cta:hover { border-bottom-color: var(--text); }

/* ===== QQ SUKURKIME SECTION ===== */
.qq-hero-create {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    overflow: hidden;
    background: #000;
}
.qq-hero-create .hero-bg {
    position: absolute;
    inset: -10%;
    background-color: #1a1a1a;
    background-image: url('../foto-qq/ka-nors-grazaus.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(1) contrast(1);
    will-change: transform;
}
/* Mobile: lengvesnė / kitokia kadruotė nuotrauka */
@media (max-width: 768px) {
    .qq-hero-create .hero-bg {
        background-image: url('../foto-qq/ka-nors-grazaus-mobile.webp');
    }
    /* Antraštė + „Taip noriu" pritvirtinti ant centrinės mėlynos nuotraukos srities */
    .qq-hero-create {
        justify-content: flex-start;
    }
    .qq-content-wrap {
        margin-top: calc(46vh + 32px);
    }
}
.qq-hero-create .grain {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    mix-blend-mode: overlay;
}
.qq-hero-create::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    pointer-events: none;
}
.qq-content-wrap {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 0 1.5rem;
}
.qq-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    color: #FFFFFF;
}
.qq-line-mask {
    overflow: hidden;
    padding: 1rem 3rem;
    margin: -1rem -3rem;
    display: block;
}
.qq-line {
    display: block;
    white-space: nowrap;
    transform: translateY(115%);
    will-change: transform;
    cursor: pointer;
    transition: color 0.4s ease;
    position: relative;
}
.qq-line:hover { color: rgba(255,255,255,0.8); }
.qq-hero-title .italic { font-style: italic; font-weight: 400; }
.qq-cta-main {
    display: inline-block;
    background: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    font-weight: 400;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0.8rem 0;
    opacity: 0;
    transform: translateY(30px);
    z-index: 10;
    font-family: 'Inter', sans-serif;
}
.qq-cta-main::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.qq-cta-main:hover::after { transform: scaleX(1); transform-origin: left; }

/* ===== FOOTER ===== */
footer {
    background: var(--bg);
    padding: 48px;
    border-top: 1px solid var(--border);
    transition: background .4s, color .4s;
}
.footer-container { width: 100%; }
.footer-grid {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 18px;
    transition: border-color .4s;
}
.footer-col { padding: 24px; flex: 0 0 auto; }
.footer-col--adresas { margin-left: 0; }
.footer-col--follow { margin-left: auto; }
.footer-col--logo {
    display: flex;
    align-items: flex-start;
    padding-top: calc(24px + 0.9rem + 1.4rem - 20px);
    margin-right: 0;
}
.footer-col-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-l);
    margin-bottom: 1.4rem;
    transition: color .4s;
}
.footer-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-col-content a,
.footer-col-content p {
    font-size: 0.82rem;
    color: var(--text-m);
    text-decoration: none;
    line-height: 1.7;
    transition: color .3s;
    margin: 0;
}
.footer-col-content a:hover { color: var(--text); }
.footer-f-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    transition: color .4s;
}
.footer-social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.footer-social a {
    font-size: 0.82rem;
    color: var(--text-m);
    text-decoration: none;
    transition: color .3s;
}
.footer-social a:hover { color: var(--text); }
.footer-social-sep {
    color: var(--text-l);
    font-size: 0.82rem;
    margin: 0 4px;
    transition: color .4s;
}
.footer-qq-logo { display: block; transition: filter .4s; filter: brightness(0); margin-left: -19px; /* antspaudo vidinis tarpas (~18.9px) — sulygiuoja matoma „Q_Q" su header ašimi */ }
[data-theme="dark"] .footer-qq-logo { filter: invert(1) brightness(0.659); }

.footer-bottom {
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.75rem, 4vw, 3.75rem);
    font-weight: 400;
    line-height: 0.9;
    color: var(--text);
    letter-spacing: -.02em;
    transition: color .4s;
}
.footer-copy {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-l);
    transition: color .4s;
}

/* ===== MODAL ===== */
.overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(17,17,16,.6);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.overlay.o{opacity:1;pointer-events:all;}
.modal{
  background:var(--bg);width:100%;max-width:520px;
  padding:3rem;position:relative;
  transform:translateY(24px);
  transition:transform .4s cubic-bezier(0,0,.2,1),background .4s;
  max-height:90vh;overflow-y:auto;
}
.overlay.o .modal{transform:none;}
.mx{position:absolute;top:1.2rem;right:1.2rem;background:none;border:none;font-size:1rem;color:var(--text-l);cursor:pointer;padding:.4rem;transition:color .2s;}
.mx:hover{color:var(--text);}
.mlbl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-l);margin-bottom:.8rem;}
.mttl{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:400;line-height:1.2;margin-bottom:.6rem;}
.mttl em{font-style:italic;}
.msub{font-size:.82rem;color:var(--text-m);margin-bottom:2.5rem;line-height:1.6;}
.fr{margin-bottom:1.4rem;}
.fl{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m);margin-bottom:.5rem;}
.fi,.fta,.fse{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid var(--border);
  padding:.5rem 0;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:300;
  color:var(--text);outline:none;transition:border-color .2s,color .4s;
  -webkit-appearance:none;appearance:none;
}
.fi:focus,.fta:focus,.fse:focus{border-color:var(--text);}
.fta{resize:none;height:72px;}
.fbtn{
  width:100%;background:var(--text);color:var(--bg);
  border:none;padding:1rem;margin-top:.8rem;
  font-family:'Inter',sans-serif;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s,background .4s,color .4s;
}
.fbtn:hover{opacity:.8;}
.fr-filter-group{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem;}
.f-filter{
  background:transparent;border:1px solid var(--text);color:var(--text);
  font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1rem;cursor:pointer;opacity:.7;
  transition:background .25s ease,color .25s ease,opacity .25s ease;
}
.f-filter:hover{opacity:1;}
.f-filter.active{background:var(--text);color:var(--bg);opacity:1;}
.succ{display:none;text-align:center;padding:3rem 0;}
.sico{font-size:1.8rem;margin-bottom:1rem;color:var(--text-m);}
.sttl{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:400;margin-bottom:.5rem;}
.ssub{font-size:.82rem;color:var(--text-m);}
@keyframes fup{to{opacity:1;transform:none;}}
@keyframes fin{to{opacity:1;}}
@keyframes sa{0%,100%{top:-100%;}50%{top:100%;}}

/* ==========================================================================
   MOBILE-FIRST COLLAPSE (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Užklausos modalo antraštė: mažesnis dydis, be italic */
    .mttl { font-size: 1.4rem; }
    .mttl em { font-style: normal; }
    /* Hero viršuje (nav--dark) NEbaltinam meniu — paliekam tą pačią spalvą kaip visur */
    nav.nav--dark { --n-clr: #1A1A18; }
    :root[data-theme="dark"] nav.nav--dark { --n-clr: #ffffff; }
    nav.nav--dark .nlogo,
    nav.nav--dark .nlinks a,
    nav.nav--dark .lang-toggle button,
    nav.nav--dark .theme-btn,
    nav.nav--dark .burger-btn,
    nav.nav--dark .burger-label { text-shadow: none; }
    /* Mobile header: frosted glass + auto-hide on scroll down */
    nav {
        padding: 0.8rem 1.5rem; /* siauresnis: 1.4rem → 1rem → 0.8rem (-43% nuo originalo) */
        background: rgba(247, 244, 239, 0.72);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        backdrop-filter: saturate(140%) blur(14px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: transform .35s cubic-bezier(.4,0,.2,1), padding .4s, background .3s, border-color .3s;
        will-change: transform;
    }
    [data-theme="dark"] nav {
        background: rgba(20, 18, 14, 0.72);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
    .nlogo { width: 38px; height: 16px; }
    /* Auto-hide išjungtas — nav visada matomas mobile'e */
    /* nav.nav-hidden { transform: translateY(-100%); } */
    .nlinks { display: none; }
    .lang-toggle { display: none; }
    .theme-btn { display: none; }

    /* Menu overlay mobile — vienas stulpelis, links viršuje, secondary apačioje */
    .b-overlay {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    .b-close-overlay { top: 1.4rem; right: 1.5rem; padding: 0.6rem; }
    .b-left {
        justify-content: flex-start;
        padding: 6rem 1.5rem 2rem;
    }
    .b-right {
        justify-content: flex-end;
        padding: 0 1.5rem calc(5rem + env(safe-area-inset-bottom, 0px));
        gap: 0;
    }
    .b-right .b-secondary { margin-top: 8px; }
    .b-right .b-secondary:first-child { margin-top: 0; }
    .b-links a { font-size: clamp(2rem, 9vw, 3rem); }
    .b-links li { margin-bottom: 0.8rem; }

    .b-mobile-controls { margin-top: 1rem; }

    /* Mobile: VERTIKALUS stack — viena kortelė žemyn po kitos, kvadratinė. */
    .gallery-viewport {
        overflow: visible !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .gallery-viewport::-webkit-scrollbar { display: none; }
    .gallery-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding: 0 1.5rem 2rem 1.5rem;
        transform: none !important;
    }
    /* Nuotrauka — su fade-in kai parsisiunčia */
    .project-img {
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .project-img.loaded,
    .project-img[data-loaded="1"] {
        opacity: 1;
    }
    .carousel-nav { display: none; }
    #custom-cursor { display: none !important; }
    .project-item {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        cursor: pointer;
        flex: none;
        background: var(--bg-dark);
        contain: layout paint;
    }
    .work-header { padding: 0 1.5rem 2rem; }
    .work-header h2,
    .about-section .about-header h2,
    .order-header h2 { font-weight: 300; font-size: 1.75rem; }
    .project-img {
        /* mobile: + šiltas atspalvis (sepia) ir sodrumas, kad foto neatrodytų šaltos */
        filter: brightness(0.85) sepia(0.12) saturate(1.15);
        transition: none; /* mobile'e nereikia hover efektų — skroliavimas sklandesnis */
    }
    .project-info h2 { font-weight: 300; font-size: 1.5rem; }
    .project-item:hover .project-info { opacity: 1; }

    /* Variantas A: „Daugiau →" affordance po pavadinimu (tik mobile) — projektai + Apie */
    /* Subtilus stilius: be pabraukimo, mažesnis ryškumas (Variantas 1) */
    .project-cta, .mac-cta {
        display: inline-block;
        margin-top: 0.6rem;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: #fff;
        text-decoration: none;
        opacity: 0.6;
    }

    /* ==========================================================================
       ABOUT CAROUSEL (Variant 5 Style)
       ========================================================================== */
    .about-gallery { display: none !important; }
    .about-section h2 { font-weight: 300; }
    .mobile-about-carousel {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1rem;
        width: 100vw;
        margin-left: -1.5rem;
        /* Peek'inimas: 15vw iš abiejų pusių rodo šoninių kortelių kraštus */
        padding: 0 15vw 2rem 15vw;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-about-carousel::-webkit-scrollbar { display: none; }
    .mac-title { font-weight: 300; }

    .mac-item {
        position: relative;
        flex: 0 0 70vw;
        width: 70vw;
        height: 100vw;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        overflow: hidden;
        background: #111;
        color: #fff;
        display: block;
        text-decoration: none;
    }
    .mac-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
        filter: brightness(0.7) sepia(0.12) saturate(1.15);
    }
    .mac-item:hover .mac-bg { transform: scale(1.05); }
    .mac-info {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 6rem 1.5rem 1.5rem 1.5rem;
        z-index: 2;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, transparent 100%);
    }
    .mac-num {
        display: block;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.25rem, 5vw, 4.9rem);
        line-height: 1;
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }
    .mac-role {
        display: block;
        font-family: 'Playfair Display', serif;
        font-size: 1.6rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        opacity: 1;
        margin-bottom: 0.4rem;
    }
    .mac-title {
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        opacity: 0.7;
        margin-bottom: 0.8rem;
        line-height: 1.1;
    }
    .mac-desc {
        font-size: clamp(0.875rem, 3vw, 1rem);
        line-height: 1.6;
        opacity: 0.8;
        font-family: 'Inter', sans-serif;
    }

    .work-section { padding: 40px 0; }
    .about-section { padding: 40px 1.5rem; }
    .order-section { padding: 40px 1.5rem; }
    .order-panel { grid-template-columns: 1fr; }
    .order-panel-img { min-height: 260px; }
    .order-panel-copy { padding: 32px 24px; }
    .order-num { font-size: 3rem; }

    footer { padding: 40px 1.5rem 32px; }
    .footer-grid { flex-direction: column; gap: 2rem; padding-bottom: 40px; }
    .footer-col { order: 1; padding: 0; }
    .footer-col--adresas { margin-left: 0; }
    .footer-col--follow { margin-left: 0; }
    .footer-col--logo { margin-left: 0; padding-top: 0; order: -1; }
    /* Mobile: header scrollinant pasislenka i 48px (3rem) — footer „Q_Q" deriname prie to */
    .footer-qq-logo { margin-left: 5px; }
    .footer-logo { font-size: clamp(2.8rem, 14vw, 5rem); }

    /* ==========================================================================
       TIMELINE VARIANT 5: FULL CONTENT HORIZONTAL CAROUSEL (Active)
       ========================================================================== */
    .timeline-variant-5 .order-nums,
    .timeline-variant-5 .order-timeline,
    .timeline-variant-5 .order-titles,
    .timeline-variant-5 ~ .order-panel {
        display: none !important;
    }
    .timeline-variant-5 .mobile-order-carousel {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.5rem;
        width: 100vw;
        margin-left: -1.5rem;
        padding: 0 1.5rem 2rem 1.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .timeline-variant-5 .mobile-order-carousel::-webkit-scrollbar { display: none; }
    .moc-item {
        position: relative;
        flex: 0 0 70vw;
        width: 70vw;
        height: 100vw;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        overflow: hidden;
        background: #111;
        color: #fff;
    }
    .moc-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }
    .moc-item:hover .moc-bg { transform: scale(1.05); }
    .moc-info {
        position: absolute;
        top: 52%;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.5rem;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 55%, transparent 100%);
    }
    .moc-num {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        z-index: 2;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.25rem, 5vw, 4.9rem);
        line-height: 1;
        opacity: 0.5;
        text-shadow: 0 2px 12px rgba(0,0,0,.5);
    }
    .moc-title {
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.8rem;
        line-height: 1.1;
        opacity: 0.7;
    }
    .moc-desc {
        font-size: clamp(0.875rem, 3vw, 1rem);
        line-height: 1.6;
        opacity: 0.8;
        font-family: 'Inter', sans-serif;
    }
}

@media (max-width: 480px) {
    .ht { font-size: 2.25rem; }
    .about-item, .project-item { width: 90vw; }
    .qq-line { white-space: normal; }
    /* Mobile: content blokas idealiai centruotas ekrane (natūralus flex center) */
    .qq-content-wrap { transform: none; }
    .qq-hero-title { margin-bottom: 0; }
    /* Mobile CTA: baltas tekstas, pabrauktas, su rodykle */
    .qq-cta-main {
        margin-top: 1.5rem;
        background: none;
        color: #fff;
        padding: 14px 0;
        letter-spacing: 0.15em;
        text-transform: none;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .qq-cta-main span { text-decoration: underline; text-underline-offset: 5px; }
    .qq-cta-main::after {
        content: '→';
        display: inline;
        position: static;
        width: auto;
        height: auto;
        background: none;
        transform: none;
        font-size: 1.1em;
        line-height: 1;
    }
}

/* ─── KITI PROJEKTAI juosta (auto: _related_inject.js) ─── */
.proj-related { background: var(--bg); padding: 4.5rem 3rem 5rem; border-top: 1px solid var(--border); transition: background .4s, border-color .4s; }
.proj-related-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.2rem; }
.proj-related-head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.6rem,3vw,2.8rem); font-weight: 400; letter-spacing: -.015em; color: var(--text); margin: 0; transition: color .4s; }
.proj-related-head h2 em { font-style: italic; }
.proj-related-nav { display: flex; gap: .6rem; }
.prl-arrow { width: 42px; height: 42px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s, border-color .3s; }
.prl-arrow:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.proj-related-track { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .4rem; }
.proj-related-track::-webkit-scrollbar { display: none; }
.prl-card { flex: 0 0 auto; width: 230px; scroll-snap-align: start; text-decoration: none; color: var(--text); }
.prl-card { display: block; }
.prl-img { display: block; position: relative; width: 230px; height: 290px; overflow: hidden; border-radius: 2px; background: var(--border); }
.prl-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82); transition: transform .9s cubic-bezier(.25,.46,.45,.94), filter .6s; }
.prl-card:hover .prl-img img { transform: scale(1.05); filter: brightness(1); }
.prl-title { display: block; margin-top: .85rem; font-size: .85rem; letter-spacing: .02em; color: var(--text); transition: color .4s; }
.prl-cat { display: block; margin-top: .25rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-l); transition: color .4s; }
@media (max-width: 768px) {
  .proj-related { padding: 3rem 1.5rem 3.5rem; }
  .proj-related-nav { display: none; }
  .prl-card, .prl-img { width: 160px; }
  .prl-img { height: 210px; }
}