:root{--brand:#ff6f3d;--brand-dark:#e55e2f;--ink:#222;--muted:#666;--bg:#fffdf9;--card:#ffffff;--shadow:0 10px 25px rgba(0,0,0,0.08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;touch-action:pan-y;}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:6px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px;color:var(--ink)}
.navlinks{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.navlinks a{font-weight:600;color:var(--ink);padding:8px 10px;border-radius:10px}
.call-btn{background:var(--brand);color:#fff;padding:8px 12px;border-radius:10px;font-weight:700}
.call-btn:hover{background:var(--brand-dark);text-decoration:none}
.section{padding:56px 0}
.card{background:var(--card);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.footer{padding:40px 0;border-top:1px solid #eee;color:var(--muted);font-size:14px}
.muted{color:var(--muted)}

h1{font-size:clamp(22px,4.5vw,40px)}
h2{font-size:clamp(18px,3.5vw,28px)}

/* Logo hero */
.logo-hero{background:#ffffff;border-bottom:1px solid #eee}
.logo-hero .logo-wrap{display:flex;justify-content:center;align-items:center;padding:32px 0}
.logo-hero .logo-img{max-width:315px;width:100%;height:auto;display:block}
@media(max-width:900px){ .logo-hero .logo-img{max-width:240px} }
@media(max-width:480px){ .logo-hero .logo-img{max-width:200px} }

/* Map sizing */
#findus iframe{height:420px}
@media(max-width:640px){ #findus iframe{height:260px} }

/* Gallery page grid */
.gallery-page{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.gallery-page img{width:100%;height:260px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
@media(max-width:640px){ .gallery-page{grid-template-columns:1fr} .gallery-page img{height:220px} }
@media(min-width:1000px){ .gallery-page{grid-template-columns:repeat(3,1fr)} .gallery-page img{height:260px} }


/* ==== Sidebar & Layout ==== */
.gallery-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}

/* Floating sidebar for desktop */
.sidebar {
  position: sticky;
  top: 100px; /* Distance from top of screen */
  align-self: start;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.sidebar:hover {
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.side-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.side-menu a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease;
}

.side-menu a:hover {
  background: rgba(255, 111, 61, 0.08);
}

.side-menu a.active {
  background: rgba(255, 111, 61, 0.12);
  outline: 2px solid #ff6f3d33;
}

.sidebar-toggle {
  display: none;
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* Mobile behavior */
@media (max-width: 900px) {
  .gallery-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .sidebar-toggle {
    display: block;
    margin-bottom: 8px;
  }
  .side-menu {
    display: none;
  }
  .side-menu.open {
    display: flex;
  }
}


/* Back to Top button (neutral gray) */
#backToTop{position:fixed;right:16px;bottom:16px;background:#e9e9e9;color:#333;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;
box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;font-size:18px}
#backToTop.show{display:flex}

/* Fade-in animation */
.fade-in{opacity:0;transform:translateY(6px);animation:fadeIn .5s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* Lightbox (white overlay) */
.lightbox-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.95);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox-overlay.show{display:flex}
.lightbox-inner{max-width:95vw;max-height:90vh}
.lightbox-inner img{max-width:100%;max-height:90vh;display:block;border-radius:12px;box-shadow:var(--shadow)}