:root {
      --bg: #0b0e13;
      --elev: #11161d;
      --text: #f1f1f1;
      --muted: #a7b0be;
      --gold: #d4af37;
      --gold-2:#b48a00;
      --ring: 1px solid rgba(212,175,55,.25);
      --shadow: 0 6px 24px rgba(0,0,0,.45);
      --container: min(1100px, 92vw);
      --radius: 14px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    .container{width:var(--container);margin-inline:auto}

    /* Top sticky bar */
    .topbar{
      position: sticky; top: 0; z-index: 40;
      backdrop-filter: blur(10px) saturate(120%);
      background: linear-gradient(to bottom, rgba(11,14,19,.92), rgba(11,14,19,.6));
      border-bottom: 1px solid rgba(212,175,55,.2);
    }
    .topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:700}
    .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#e6c766,#d4af37 40%,#b48a00);box-shadow:var(--shadow)}
    .brand .name b{color:var(--gold)}

    .hotline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:var(--ring);background:var(--elev);color:var(--text);text-decoration:none}
    .btn i{color:var(--gold)}
    .btn:hover{box-shadow:0 8px 20px rgba(212,175,55,.15)}
    .btn-call{background:linear-gradient(135deg,#e6c766,#d4af37 45%,#b48a00);color:#171717;border:none;font-weight:700}
    .btn-ghost{background:transparent}

    /* Intro */
    header.hero{ text-align:center; padding: 26px 0; }
    header.hero h1{font-size:clamp(1.6rem,1.2rem + 2.2vw,2.6rem); color:var(--gold);}
    header.hero p{color:var(--muted)}

    /* Section heading */
    .section-title{width:var(--container);margin: 8px auto 6px; padding: 0 4px; display:flex;align-items:center;justify-content:space-between}
    .section-title h2{font-size:1.2rem}

    /* Cars grid */
    .cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:14px;max-width:var(--container);margin:0 auto 28px;}
    .car-card{background: #161b22; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); text-align: center;}
    .car-card .media{aspect-ratio:16/10;background:#0b0e13}
    .car-card img{width:100%;height:100%;object-fit:cover}
    .car-card h3{padding:10px 12px;color:var(--gold);font-size:1.05rem}

    /* Contact */
    .contact{background:#0f141b;padding:22px 14px;border-top:1px solid rgba(212,175,55,.15);text-align: center;}
    .contact .wrap{display:grid;gap:12px;max-width:var(--container);margin-inline:auto}
    .contact h2{color:var(--gold)}
    .contact p{color:var(--muted)}
    .social{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
    .social a{color:var(--gold);font-size:1.4rem}

    footer{ text-align:center; padding:14px; color:var(--muted); border-top:1px solid rgba(255,255,255,.08)}

    @media (max-width:560px){
      .btn-text{display:none}
    }


/* Keep logo fixed at 30px height */
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* Brand container layout */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hide the text on small screens for compact layout */
.brand-text {
  display: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Show text next to logo on larger screens (tablet/desktop) */
@media (min-width: 600px) {
  .brand-text {
    display: inline-block;
  }
}


/* Car specs row under title */
.car-card .specs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 12px 12px;
}

/* Small pill badges for specs */
.badge {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--elev);
  border: var(--ring);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* Tabs / Pages nav */
.tabs{
  display:flex;
  gap:10px;
  padding: 8px 0 12px;
  border-top: 1px solid rgba(212,175,55,.12);
}

.tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--ring);
  background: transparent;
  color: var(--text);
  text-decoration:none;
  opacity: .85;
}

.tab i{ color: var(--gold); }
.tab:hover{ opacity: 1; box-shadow: 0 8px 20px rgba(212,175,55,.12); }

.tab.active{
  background: var(--elev);
  opacity: 1;
}

/* Restaurant gallery grid (re-uses your style language) */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  padding:14px;
  max-width:var(--container);
  margin:0 auto 28px;
}

.gallery-card{
  background:#161b22;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.gallery-card .media{ aspect-ratio:16/10; background:#0b0e13; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; }



/* Page tabs (text-style, centered) */
.page-tabs{
  display:flex;
  justify-content:center;
  gap:32px;
  margin: 14px auto 24px;
  position: relative;
}

/* Tab link */
.page-tab{
  position: relative;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  letter-spacing: 0.3px;
  padding-bottom: 6px;
  transition: color .25s ease;
}

/* Hover */
.page-tab:hover{
  color: var(--text);
}

/* Active underline */
.page-tab.active{
  color: var(--gold);
}

.page-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius:2px;
}



/* ===== Restaurant: Mosaic gallery (bigger, cooler) ===== */
.gallery-mosaic{
  width: var(--container);
  margin: 0 auto 34px;
  padding: 14px;
  display: grid;
  gap: 14px;

  /* 12-col editorial grid */
  grid-template-columns: repeat(12, 1fr);
}

/* Each image tile */
.shot{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: #0b0e13;

  /* reveal animation base */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

.shot.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.shot img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* subtle zoom on hover */
  transform: scale(1.01);
  transition: transform .45s ease;
}

.shot:hover img{
  transform: scale(1.08);
}

/* Layout sizes (desktop) */
.shot--hero{
  grid-column: 1 / span 8;
  grid-row: span 2;
  min-height: 420px; /* BIG */
}

.shot--tall{
  grid-column: 9 / span 4;
  grid-row: span 2;
  min-height: 420px; /* BIG */
}

/* Default tile size */
.gallery-mosaic .shot:not(.shot--hero):not(.shot--tall){
  grid-column: span 4;
  min-height: 240px;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .shot--hero{ grid-column: 1 / -1; min-height: 320px; }
  .shot--tall{ grid-column: 1 / -1; min-height: 320px; }
  .gallery-mosaic .shot:not(.shot--hero):not(.shot--tall){
    grid-column: 1 / -1;
    min-height: 260px;
  }
}


/* ===== Fade-in reveal (Cars) ===== */
.car-card{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

.car-card.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: slightly nicer hover */
.car-card img{
  transform: scale(1.01);
  transition: transform .45s ease;
}
.car-card:hover img{
  transform: scale(1.06);
}



/* ===== Restaurant Mosaic v2 (perfect for 8) ===== */
.restaurant-mosaic-8{
  width: var(--container);
  margin: 0 auto 28px;
  padding: 14px;

  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, 1fr);
}

/* tile base */
.restaurant-mosaic-8 .shot{
  display:block;
  overflow:hidden;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background:#0b0e13;

  /* smaller + consistent */
  height: 210px;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.restaurant-mosaic-8 .shot.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.restaurant-mosaic-8 .shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s ease;
}
.restaurant-mosaic-8 .shot:hover img{ transform: scale(1.07); }

/* --- ROW 1 (12 columns total) --- */
.restaurant-mosaic-8 .g1{ grid-column: 1 / span 6; }  /* big (half row) */
.restaurant-mosaic-8 .g2{ grid-column: 7 / span 3; }  /* small */
.restaurant-mosaic-8 .g3{ grid-column: 10 / span 3; } /* small */

/* --- ROW 2 --- */
.restaurant-mosaic-8 .g4{ grid-column: 1 / span 3; }  /* small */
.restaurant-mosaic-8 .g5{ grid-column: 4 / span 3; }  /* small */
.restaurant-mosaic-8 .g6{ grid-column: 7 / span 6; }  /* big (half row) */

/* --- ROW 3 --- */
.restaurant-mosaic-8 .g7{ grid-column: 1 / span 6; }  /* big */
.restaurant-mosaic-8 .g8{ grid-column: 7 / span 6; }  /* big */

/* make the big ones slightly taller but not huge */
.restaurant-mosaic-8 .g1,
.restaurant-mosaic-8 .g6,
.restaurant-mosaic-8 .g7,
.restaurant-mosaic-8 .g8{
  height: 240px; /* smaller than your earlier 320/420 */
}

/* Tablet */
@media (max-width: 900px){
  .restaurant-mosaic-8{
    grid-template-columns: repeat(2, 1fr);
  }
  .restaurant-mosaic-8 .shot{
    grid-column: auto !important;
    height: 240px;
  }
}

/* Mobile */
@media (max-width: 560px){
  .restaurant-mosaic-8{
    grid-template-columns: 1fr;
  }
  .restaurant-mosaic-8 .shot{
    height: 260px;
  }
}


.map-frame{
  width:80%;
  margin: 16px auto 30px;
}

.map-frame iframe{
  width:100%;
  height:200px;        /* smaller height as u asked */
  border:0;
  border-radius:18px;
  box-shadow: var(--shadow);
}



/* Galeria / Meny sub-tabs */
.subtabs{
  display:flex;
  gap:22px;
  align-items:baseline;
}

.subtab{
  background: none;
  border: none;
  padding: 0 0 6px;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

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

.subtab.active{
  color: var(--gold);
}

.subtab.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius:2px;
}

/* Show/hide panels */
.panel{ display:none; }
.panel.is-active{ display:block; }

/* Menu image */
.menu-wrap{
  width: var(--container);
  margin: 0 auto 28px;
  padding: 14px;
}

.menu-img{
  width: 100%;
  max-width: 900px;
  display:block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: var(--shadow);
  object-fit: contain;
}