:root {
      --c-bg: #dddddd;
      --c-text: #40004b;
      --c-accent: #a524e6;
      --c-muted: #8ba4b5;
      font-family: 'Inter', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
  :root{--ink:#0f0f11;--muted:#6c6c73;--line:#e9e9ef;--pill:#f6f6f9}
:root {
  --ink: #3D2C21;         /* A deep, warm brown instead of black */
  --primary-accent: #B56B45; /* A sophisticated terracotta/rust */
  --muted-text: #6e6658;  /* A soft, earthy gray */
  --background: #fdfaf6;   /* A warm, off-white */
  --line: #e9e4d8;        /* A soft line color */
  --pill: #f6f2ec;        /* A background for chips/pills */
}

body {
  color: var(--ink);
  background: var(--background);
  line-height: 1.6;
  font-family: "BPG Glaho Arial", sans-serif;
}


@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-sans-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/dejavu-sans-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/dejavu-sans-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/dejavu-sans-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/dejavu-sans-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/dejavu-sans-webfont.svg#dejavu_sansregular') format('svg'); /* Legacy iOS */
}


@font-face {
    font-family: 'Mikhako';
    src: url('../fonts/DM-Mikhako-Tsereteli.ttf') format('truetype')
  }

@font-face {
    font-family: 'Zviadi';
    src: url('../fonts/DM-Zviadi.ttf') format('truetype')
  }

@font-face {
    font-family: 'Revazi';
    src: url('../fonts/DM-Revaz-Moistsrapishvili.ttf') format('truetype')
  }

@font-face {
    font-family: 'Viktori';
    src: url('../fonts/DMViktorNozadze-Regular.ttf') format('truetype')
  }

@font-face {
    font-family: 'ALK Rex Bold';
    src: url('../fonts/alk-rex-bold-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/alk-rex-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/alk-rex-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/alk-rex-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/alk-rex-bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/alk-rex-bold-webfont.svg#alk_rexbold') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'BPG Glaho WEB Caps';
    src: url('../fonts/bpg-glaho-web-caps-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/bpg-glaho-web-caps-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/bpg-glaho-web-caps-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/bpg-glaho-web-caps-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/bpg-glaho-web-caps-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/bpg-glaho-web-caps-webfont.svg#bpg_glaho_web_capsregular') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'BPG Glaho Arial';
    src: url('../fonts/bpg-glaho-arial-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/bpg-glaho-arial-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/bpg-glaho-arial-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/bpg-glaho-arial-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/bpg-glaho-arial-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/bpg-glaho-arial-webfont.svg#bpg_glaho_arialregular') format('svg'); /* Legacy iOS */
}
main {
  overflow-x: hidden;
}
#site-nav {
  margin-top: 3rem;
}

    h1 {
      font-family: "Viktori", sans-serif;
      font-weight: 400;
    }
    h2 {
      font-family: "BPG Glaho Arial", sans-serif;
      font-weight: 400;      
    }

    header { 
      display: flex; justify-content: space-between; align-items: center; 
      padding: 1.5rem 2rem 3.5rem; 
      flex-direction: column;
    }
    .artHeader {
      flex-direction: row;
      padding: 0 2rem;
      height: 10vh;
    }
    .wrap {
      margin: 6rem 3rem;
    }
    .logo {
      font-size: 1.75rem;
      font-weight: 600;
      text-transform: lowercase;
      background: #73947fa1;
      padding: 1rem 7rem;
    }
    .mekosBorder {
      margin: 1rem;
      border: 1px #fff solid;
      width: calc(100% - 15px);
      height: calc(100% - 15px);
      position: absolute;
    }
    .logo span {
      color: var(--c-accent);
    }

    nav a {
      color: #fff;
      margin-left: 1.25rem;
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s ease;
    }
    nav a:hover { 
      color: #4b4b4b;
      background: #b3b9b1;
    }

    .intro-video {
      display: block;
      max-width: 100%;
      position: absolute;
      top: 0;
      z-index: -9;    
      height: 100vh;
      object-fit: cover;  
    }

    /* Hero 

89a16ed4
8ca570e3


    */
    .hero {
      position: absolute;
      right: 0;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 4rem 2rem;
      color: #ffffff;
      background: #73947fa1;
      margin-right: 0;
      width: 30%;
    }
    .lines {
      position: absolute;
      top: 0;
      width: 0.9rem;
    }
    .line1 {
      background: #f9cade;
      height: 5rem;
      left: 1rem;
    }
    .line2 {
      background: #d6e4be;
      height: 3rem;
      left: 2.2rem;
    }

    .line3 {
      background: #fae1a7;
      height: 6rem;
      left: 3.4rem;
    }
    .line4 {
      background: #bbd8ec;
      height: 1rem;
      left: 4.6rem;
    }
    .line5 {
      background: #dccce4;
      height: 4rem;
      left: 5.8rem;
    }            
    .line6 {
      background: #fed9b4;
      height: 2rem;
      left: 7rem;
    }     




    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
    .hero p {
      max-width: 32rem;
      margin: 0 auto 2rem;
      color: var(--c-muted);
    }
    .cta-btn {
      display: inline-block;
      padding: 0.9rem 2.2rem;
      border: 2px solid var(--c-accent);
      border-radius: 4rem;
      color: var(--c-accent);
      font-weight: 600;
      text-decoration: none;
      transition: background 0.25s ease, color 0.25s ease;
    }
    .cta-btn:hover { background: var(--c-accent); color: var(--c-bg); }

    /* Sections */

    /*h2 { font-size: 2rem; margin-bottom: 2rem; color: var(--c-accent); }*/
    .projects-grid { display: grid; gap: 2rem; }
    .project-card {
      background: #121212;
      border: 1px solid #1e1e1e;
      padding: 2rem;
      border-radius: 1rem;
      transition: transform 0.2s ease;
    }
    .project-card:hover { transform: translateY(-4px); }
    .project-card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
    .project-card p { color: var(--c-muted); font-size: 0.95rem; }
    .slider-wrap{
      position:relative;
      --slide-size: clamp(240px, 48vw, 540px);
    }
    .slider{
      
      --nav-clearance: clamp(32px, 8vw, 72px);
      --slider-pad: max(24px, calc((100vw - var(--slide-size)) / 2));
      --slider-gap: clamp(12px, 2.8vw, 28px);
      position:relative;
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:var(--slide-size);
      gap:var(--slider-gap);
      padding:0.5rem calc(var(--slider-pad) + var(--nav-clearance)) 32px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:calc(var(--slider-pad) + var(--nav-clearance));
      overscroll-behavior-inline:contain;
      scrollbar-width:none;
    }
    .slider::-webkit-scrollbar{display:none}
    .slide{
      scroll-snap-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:12px;
      transition:transform .28s ease, opacity .28s ease;
    }
    .slide.is-active{
      transform:translateY(5px);
      opacity:1;
    }
    .slide:not(.is-active){
      opacity:.78;
    }
#order {
      margin: 0 auto;
      max-width: 1100px;
    }
    .chooser{
      display:none;
      flex-direction:column;
      gap:12px;
      align-items:center;
      margin-top:12px;
    }
    .is-active .chooser{
      display:flex;
    }
    /* Footer */
    footer { 
      
      bottom: 0;
      text-align: center; padding: 2rem; color: var(--c-muted); font-size: 0.85rem; 
      width: 100%;
    }
    footer a { color: var(--c-accent); text-decoration: none; }
    .pageOne: {
      height: 100vh;
    }
    .videoLens{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;

      z-index: -8;
    }


    /* CSS */
    .button-52 {
      font-size: 16px;
      font-weight: 200;
      letter-spacing: 1px;
      padding: 13px 20px 13px;
      outline: 0;
      border: 1px solid #fff;
      cursor: pointer;
      position: relative;
      background-color: rgba(0, 0, 0, 0);
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    .button-52:after {
      content: "";
      background-color: #73947fa1;
      width: 100%;
      z-index: -1;
      position: absolute;
      height: 100%;
      top: 7px;
      left: 7px;
      transition: 0.2s;
    }

    .button-52:hover:after {
      top: 0px;
      left: 0px;
    }

    .heroArt {
      position:relative;
      width:100vw;
      height:90vh;
      margin:0;
      padding:0;
    }

    /* Art css */
    .hero-banner {
      width: 100%;
      height: 60%;
      object-fit: cover;

    }
    .art-hero-content {
      height: 40%;
      display: flex;
      flex-direction: column;
      align-content: center;
      flex-wrap: wrap;
      text-align: center;
      justify-content: space-between;
      margin-bottom: 25px;
    }

  .chip{border:1px solid var(--line);background:var(--pill);padding:8px 12px;border-radius:999px;cursor:pointer}
  .chip.on{border-color:#111}

  .chip-colors{
    width: 25px;
    height: 25px;
    border: solid 1px rgba(0,0,0,0.5);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 10px 5px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 7px -18px inset;
    border-radius:50%;
    cursor:pointer
  }
  .slider-controls{
    width: var(--slide-size);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
  }
    .navbtn{

      bottom:1rem;

      z-index:4;
      display:grid;
      place-items:center;
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid rgba(15,15,17,.12);
      background:rgba(220,220,220,.6);
      color:var(--ink,#111);
      cursor:pointer;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    }
    .navbtn:hover{
      transform:translateY(-10%) scale(1.05);
      box-shadow:0 22px 36px rgba(15,15,17,.2);
    }
    .navbtn:disabled{
      opacity:.45;
      cursor:not-allowed;
      box-shadow:none;
    }
    .navbtn svg{
      width:18px;
      height:18px;
    }
    .thumbs {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      margin-top: 10px;
    }
.onlyMob{
  display: none;
}
.onlyDesk{
  display: inline;
}
    /* Media Queries */
@media (max-width: 1200px) {
      .heroArt {
        height: 88vh;
      }
      .artHeader {
        height: 12vh;
      }
    }
    @media (max-width: 768px) {
      .button-52 {
        padding: 13px 50px 13px;
      }
      nav {
        display: flex;
        flex-direction: column;
      }
      nav a {
        margin: 0.4rem 0;
      }
      .logo {
            padding: 0.5rem 1rem 0;
      }
      .logo img {
        width: 30vw;
      }
      .hero {

        width: 85vw;
        color: #fff;
        padding: 3rem 0;
        bottom: 7rem;
      }
      section {

        max-width: 1100px;
        margin: 0 auto;
      }
      .hero h1 {
        font-size: 1.5rem;
      }
      .hero h2 {
        font-size: 1rem;
      }

    }
.socials{position:fixed;right:14px;bottom:16px;display:flex;gap:10px;z-index:30}
.socials a{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(6px);
  color:#111;text-decoration:none;transition:transform .2s ease, background .2s}
.socials a:hover{transform:translateY(-2px);background:#fff}
@media (max-width:640px){.socials{right:10px;bottom:10px}}







  .artHeader a{color:var(--ink);text-decoration:none;font-weight:800}
  nav{display:flex;gap:16px}
  h1{font-size:clamp(28px,4.8vw,60px);line-height:1.05;margin:14px 0}
  .lead{color:var(--muted)}
  .btn{appearance:none;border:1px solid var(--ink);background:#fff;color:var(--ink);
       padding:10px 16px;border-radius:999px;font-weight:600;cursor:pointer}
  .btn.primary{background:var(--ink);color:#fff}

  /* Slider base */

  .bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
  .tiny{font-size:.92rem;color:var(--muted)}

  .scene{position:relative;width:100%;aspect-ratio:1;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 16px 28px rgba(15,15,17,.12);transform:translateY(0) scale(1);transition:transform .32s ease, box-shadow .32s ease}
  .scene img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .32s ease}
  .scene .overlay{position:absolute;inset:0;pointer-events:none}
  .slide.is-active .scene{
    transform:translateY(-6px) scale(1.03);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
  .slide:not(.is-active) .scene{transform:scale(.97);box-shadow:0 12px 22px rgba(15,15,17,.12);}
  .palette{display:flex;gap:8px;flex-wrap:wrap}

  .slide .label{font-weight:700}

  /* Inspiration slider (same square cards) */
  .ref .slide .scene{background:#111}
  .tag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px;border-radius:999px;font-size:.8rem}
  /* Order section */
  .order{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
  .card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
  .pad{padding:14px}
  .preview{aspect-ratio:4/3;background:#f7f7fb;position:relative}
  .preview .base,.preview .overlay,.preview .ref{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .fields{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
  .f{grid-column:span 6;display:flex;flex-direction:column;gap:6px}
  .f.wide{grid-column:span 12}
  label{font-size:.9rem;color:var(--muted)}
  input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
  .actions{display:flex;gap:10px;align-items:center;margin-top:6px}
  .disclaimer{color:var(--muted);font-size:.9rem;margin-top:6px}
  @media (max-height:760px){
    .slider{--slide-size: clamp(220px, 90vw, 460px);}
  }
  @media (max-width:900px){
    .order{grid-template-columns:1fr}
  }

  .qr-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
  align-items:center;justify-content:center;z-index:1000}
.qr-modal.open{display:flex}
.qr-dialog{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 16px 18px;
  padding: 16px 16px 18px;
  max-width: 92%;
  text-align:center;
  box-shadow:0 24px 50px rgba(0,0,0,.25)}
.qr-close{position:absolute;top:8px;right:10px;border:0;background:transparent;
  font-size:22px;cursor:pointer;line-height:1}


@media (max-width:720px){
  .art-hero-content{
    flex-direction: row;
    width: 100%;
    justify-content: center;
    font-size: 13px;
  }
  .artHeader {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  nav {
    flex-direction: row;
  }
  .onlyMob{
    display: inline;
  }
  .onlyDesk{
    display: none;
  }
  .wrap{
    margin: 5rem 1rem;
    font-size: 12px;
  }
  .heroArt {
    height: 70vh;
  }
  .artHeader {
    height: 30vh;
  }
  .bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .thumbs {
    max-width: 90vw;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
  }
  #site-nav {
    flex-direction: column;
        gap: 0;
        margin-top: 0;
  }
  #site-nav a {
    font-size: 0.85rem;
  }
  footer {
    font-size: 10px;
  }
  .lines {
    width: 0.7rem;
  }
      .line1 {

      height: 3rem;
      left: 0.9rem;
    }
    .line2 {

      height: 2rem;
      left: 1.8rem;
    }

    .line3 {

      height: 4rem;
      left: 2.7rem;
    }
    .line4 {
      height: 1rem;
      left: 3.6rem;
    }
    .line5 {

      height: 3rem;
      left: 4.5rem;
    }            
    .line6 {

      height: 2rem;
      left: 5.4rem;
    }  
}