/* Design Tokens */
:root{
  --bg:#0b0c0f; --surface:#12141a; --text:#dbe0ea; --muted:#98a2b3;
  --accent:#6ee7b7; --accent-2:#38bdf8; --ring:color-mix(in hsl,var(--accent),white 15%);
  --shadow:0 10px 30px rgba(0,0,0,.25); --radius:16px; --gap:1rem; --maxw:1200px; --navh:64px;
}
:root.light{
  --bg:#f6f8fb; --surface:#fff; --text:#0a1020; --muted:#606a78;
  --accent:#146ef5; --accent-2:#16a34a; --ring:color-mix(in hsl,var(--accent),white 30%);
  --shadow:0 10px 30px rgba(2,6,23,.1);
}
@media (prefers-color-scheme: light){ :root{ color-scheme: light dark; } }

/* Base */
*,*::before,*::after{box-sizing: content-box;}
html,body{ height:100% }
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji;
  background: radial-gradient(1200px 600px at 70% -10%, color-mix(in hsl, var(--accent), transparent 85%), transparent) no-repeat, var(--bg);
  color:var(--text); letter-spacing:.2px;
}
a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline }
img{max-width:100%;}
.container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto }

/* Header/Nav */
header{ position:fixed; top:0; left:0; right:0; z-index:90; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in hsl, var(--bg), transparent 30%); border-bottom:1px solid color-mix(in hsl,var(--text),transparent 92%) }
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--gap); padding:.75rem 0 }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.5px }
.brand .logo{ width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; box-shadow:var(--shadow) }
.brand .logo svg{ width:22px; height:22px; fill:#0b0c0f }
.menu{ display:flex; gap:1rem; justify-self:center }
.menu a{ color:var(--text); opacity:.85; font-weight:500; padding:.4rem .6rem; border-radius:10px }
.menu a:hover{ background:color-mix(in hsl,var(--text),transparent 93%); text-decoration:none }
.actions{ justify-self:end; display:flex; align-items:center; gap:.6rem }
.btn{ appearance:none; border:0; border-radius:999px; padding:.6rem 1rem; font-weight:600; cursor:pointer }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid color-mix(in hsl,var(--text),transparent 85%) }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0c0f; box-shadow:var(--shadow) }

/* Hero */
.hero{ padding:6rem 0 4rem; position:relative }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center }
.kicker{ font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.headline{ font-size:clamp(2rem,4vw + 1rem,4rem); line-height:1.1; margin:.4rem 0 1rem; font-weight:800 }
.sub{ font-size:1.1rem; color:var(--muted) }
.hero-card{
  /* background:linear-gradient(180deg,color-mix(in hsl,var(--surface),transparent 10%), color-mix(in hsl,var(--surface),black 6%)); */
  /* border:1px solid color-mix(in hsl,var(--text),transparent 90%); */
  /* border-radius:var(--radius); */
  /* padding:1rem; */
  box-shadow:var(--shadow);
  }
.hero-media{
  aspect-ratio:16/10;
  border-radius:calc(var(--radius) - 4px);
  background:repeating-conic-gradient(from 0deg, color-mix(in hsl, var(--accent), transparent 85%) 0 15deg, transparent 15deg 30deg);
  display: flex;
  place-items:center;
  overflow: visible;
  }
.hero-media svg{ opacity:.9 }
.cta{ display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap }

/* Sections / Cards */
.section{ padding:4rem 0 }
.section h2{ font-size:clamp(1.4rem, 1.2rem + 1.5vw, 2.2rem); margin:0 0 1rem }
.muted{ color:var(--muted) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.card{ background:var(--surface); border:1px solid color-mix(in hsl,var(--text),transparent 90%); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow) }
.chip{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; padding:.35rem .65rem; border-radius:999px; border:1px solid color-mix(in hsl,var(--text),transparent 85%) }
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:start }
.center{ text-align:center }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* Gallery */
.gallery{display:grid;grid-template-columns: repeat(8,1fr);/* gap: 0.8rem; */}
.gallery-item{position:relative;overflow:hidden;border-radius: 14px;border:1px solid color-mix(in hsl,var(--text),transparent 90%);background:var(--surface)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .6s cubic-bezier(.2,.7,.3,1);display:block;}
.gallery-item:hover img{ transform:scale(1.05) }
.gallery-item figcaption{position:absolute;inset:auto 0 0 0;padding: 0.6rem 0.8rem;background: linear-gradient(
180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));color:#fff;display:flex;flex-direction:column;gap: 1.2rem;font-size:.9rem}
.gallery-item figcaption strong{ font-weight:700 }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:100 }
.lightbox.open{ display:flex }
.lightbox figure{ margin:0; max-width:90vw; max-height:90vh; position:relative }
.lightbox img{ max-width:100%; max-height:90vh; cursor:zoom-in; transition:transform .25s ease; transform-origin:center }
.lightbox img.zoomed{ cursor:grab }
.lightbox .caption{ margin-top:.5rem; color:#fff; text-align:center; font-size:.95rem }
.lightbox .ctrl{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); border-radius:999px; padding:.5rem .7rem; cursor:pointer }
.lightbox .prev{ left:-3rem } .lightbox .next{ right:-3rem } .lightbox .close{ position:absolute; top:-2.5rem; right:-2.5rem }

/* Footer */
footer{ border-top:1px solid color-mix(in hsl,var(--text),transparent 90%); padding:2rem 0; color:var(--muted) }

/* Legal / Consent */
.legal h3{ margin-top:1.5rem }
.consent{ position:fixed; inset:auto 0 0 0; display:flex; gap:.8rem; align-items:center; justify-content:center; padding:1rem 1.25rem; background:color-mix(in hsl,var(--bg), white 5%); border-top:2px solid color-mix(in hsl,var(--accent), transparent 20%); box-shadow:0 -8px 24px rgba(0,0,0,.35); z-index:100 }
.consent small{ color:var(--text); font-size:.95rem }

/* Responsive */
@media (max-width:900px){
  .hero-grid, .split{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(6,1fr) }
}

/* Smooth scrolling */
html{ scroll-behavior:smooth }
/* Active nav link */
.menu a.active{ background: color-mix(in hsl, var(--text), transparent 90%); color: var(--accent); text-decoration: none; }
/* Back-to-top button */
.to-top{ position:fixed; right:1rem; bottom:1rem; z-index:85; width:52px; height:52px; border-radius:999px; border:1.5px solid color-mix(in hsl,var(--text),transparent 75%); background:var(--surface); color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.35); cursor:pointer; opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; display:grid; place-items:center; }
.to-top.show{ opacity:1; transform:translateY(0); background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0c0f; }
.to-top svg{ width:20px; height:20px }
.to-top:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* Contact form */
form{ display:grid; gap:.8rem; }
input, textarea{
  width:100%; padding:.8rem 1rem; border-radius:12px;
  border:1px solid color-mix(in hsl,var(--text),transparent 85%);
  background: color-mix(in hsl,var(--surface), transparent 0%); color:var(--text); outline:none;
}
input:focus, textarea:focus{
  border-color: var(--ring); box-shadow:0 0 0 4px color-mix(in hsl,var(--ring), transparent 70%);
}
.form-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }


/* === Final Mobile Hamburger & CTA behaviour === */

/* Desktop: show inline menu, hide burger */
@media (min-width: 769px){
  .nav-toggle{ display:none !important; }
  #mainMenu{
    display:flex !important;
    position:static !important;
    box-shadow:none !important;
    padding:0 !important;
    gap:1rem !important;
    flex-direction:row !important;
  }
}

/* Mobile: hide inline menu, show burger; dropdown under header */
@media (max-width: 768px){
  #mainMenu{ display:none !important; } /* keep hidden unless opened */
  #mainMenu.mobile-open{
    display:flex !important;
    position:absolute; left:0; right:0; top:100%;
    background: var(--surface);
    border-bottom:1px solid color-mix(in hsl, var(--text), transparent 88%);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    padding:.5rem;
    gap:.25rem;
    flex-direction:column;
    z-index:95;
  }
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }

  /* Actions area wraps nicely; primary CTA never gets cut off */
  .actions{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .actions .btn-primary{ flex:1 1 100%; }
  header .container{ overflow:visible; }
}



/* --- Scroll to Top button --- */
#scrollUp{
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  outline: none;
  cursor: pointer;
  display: none; /* initially hidden */
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  background: var(--brand, #0ea5e9);
  color: #fff;
  z-index: 999;
}
#scrollUp.show{ display: inline-flex; }
#scrollUp:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion:no-preference){
  #scrollUp{ transition: transform .2s ease, opacity .2s ease; }
  #scrollUp.show{ opacity: 1; transform: translateY(0); }
}


/* --- Hybrid Gallery: Desktop grid, Mobile swipe --- */
.gallery-item .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

/* Mobile: turn gallery into horizontal carousel with scroll-snap */
@media (max-width: 768px) {
  .gallery {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 8px 8px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .gallery::-webkit-scrollbar {
    height: 6px;
  }
  .gallery-item {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: center;
  }
  .gallery-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }
  .gallery-controls button {
    border: 1px solid var(--border-color, #ddd);
    background: var(--card-bg, rgba(0,0,0,0.04));
    padding: 6px 10px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
  }
}

/* Desktop: hide controls */
@media (min-width: 769px) {
  .gallery-controls { display: none; }
}