@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

:root[data-theme="dark"]{--bg:#121212;--bg-rgb:18,18,18;--ink:#f5f5f7;--muted:#a1a1a6;--panel:#1c1c1e;--line:#2a2a2c;--brand:#0a84ff;--ring:rgba(10,132,255,.45); --invert-val: 1;}
:root[data-theme="light"]{--bg:#f5f5f7;--bg-rgb:245,245,247;--ink:#1d1d1f;--muted:#555;--panel:#fff;--line:#e5e5e7;--brand:#0071e3;--ring:rgba(0,113,227,.45); --invert-val: 0;}
*{box-sizing:border-box}html,body{height:100%}html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 17px; line-height: 1.7; transition: background-color 0.3s ease, color 0.3s ease;}
a{color:inherit}img{max-width:100%;display:block}.wrap{max-width:1200px;margin:0 auto;padding:clamp(24px, 5vw, 64px)}
.site-header{position:sticky;top:0;z-index:1000;background:color-mix(in oklab, var(--bg) 70%, transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-top: 16px; padding-bottom: 16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700}.brand img{width:96px;height:96px}
.nav{display:flex;gap:24px;align-items:center}
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav a{text-decoration:none;opacity:.86}.nav a:hover{opacity:1}
.mobile-nav-toggle { display: none; }

/* Responsive navigation */
@media (max-width: 768px) {
  .site-header .bar{gap:12px}
  .nav-links { display: none; }
  .nav a{font-size:14px}
  .brand span{display:none}
  .brand img { width: 48px; height: 48px; }

  .mobile-nav-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .mobile-nav-toggle img {
    width: 28px;
    height: 28px;
    filter: invert(var(--invert-val, 0));
  }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--bg-rgb), 0.85);
    backdrop-filter: saturate(1.5) blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 120px;
    gap: 32px;
    z-index: 1001;
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-links a, .nav-links .btn {
    font-size: 24px;
  }
  .nav .mobile-nav-toggle {
    z-index: 1002;
  }
}

@media (max-width: 480px) {
  .site-header .bar {
    justify-content: space-between;
  }
  .nav{gap:8px}
  .nav-links { display: none; } /* Ensure it's hidden by default */
  .mobile-nav-toggle { display: block; } /* Ensure it's shown */
  .btn{padding:10px 16px;font-size:14px}
}
h1, h2, h3, h4 { font-family: 'DM Serif Display', serif; line-height: 1.2; margin: 0; }
h1{font-size:clamp(48px,7vw,84px);line-height:1.05;margin:0}h2{font-size:clamp(36px,5vw,64px);line-height:1.12;margin:0 0 16px}h3{font-size:clamp(24px,3.5vw,32px);line-height:1.2;margin:0 0 12px}
.lede{font-size:clamp(18px,2.2vw,24px);color:var(--muted);margin:16px 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;font-weight:600}
.btn--brand{background:var(--ink);color:var(--bg)}
.hero-wrap{position:relative;height:90vh;overflow:hidden}
.hero{position:relative;top:0;left:0;width:100%;height:100%;z-index:-1;background:#000;display:flex;align-items:center;justify-content:center;transition:transform 0.6s ease}
.hero::before{content:'';position:absolute;inset:0;background:#000;z-index:1}
.hero .hero-video-container{position:relative;width:100%;height:100%;border-radius:0;overflow:hidden;z-index:2}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease;transform:scale(1.1)}
.hero-slide.is-active{opacity:1;animation:kenburns 8s ease-out forwards}

.hero-content{position:absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:10;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:0 clamp(16px,3vw,24px)}
.hero-copy{background:radial-gradient(ellipse at center, color-mix(in oklab, var(--bg) 60%, transparent) 0%, color-mix(in oklab, var(--bg) 40%, transparent) 50%, transparent 100%);backdrop-filter:blur(15px);border-radius:24px;padding:clamp(24px,4vw,48px);border:1px solid color-mix(in oklab, var(--line) 20%, transparent);max-width:600px;text-align:center}
.hero-copy .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}

/* Responsive hero copy */
@media (max-width: 768px) {
  .hero-copy{
    max-width:90%;
    padding:clamp(20px,5vw,32px);
    border-radius:20px;
  }
  .hero-copy h1{
    font-size:clamp(28px,8vw,48px);
  }
  .hero-copy .lede{
    font-size:clamp(16px,4vw,18px);
  }
}

@media (max-width: 480px) {
  .hero-copy{
    max-width:95%;
    padding:clamp(16px,6vw,24px);
    border-radius:16px;
  }
  .hero-copy .cta{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .hero-copy .cta .btn{
    width:100%;
    max-width:200px;
  }
}
.hero-triggers {
    display: none;
}
.swap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:0 clamp(16px,3vw,24px)}
.swap .wrap{max-width:900px;background:radial-gradient(ellipse at center, color-mix(in oklab, var(--bg) 60%, transparent) 0%, color-mix(in oklab, var(--bg) 40%, transparent) 50%, transparent 100%);backdrop-filter:blur(15px);border-radius:24px;padding:clamp(24px,4vw,48px);border:1px solid color-mix(in oklab, var(--line) 20%, transparent)}

/* Responsive swap sections */
@media (max-width: 768px) {
  .swap .wrap{
    max-width:90%;
    padding:clamp(20px,5vw,32px);
    border-radius:20px;
  }
}

@media (max-width: 480px) {
  .swap .wrap{
    max-width:95%;
    padding:clamp(16px,6vw,24px);
    border-radius:16px;
  }
}
.page-content {
  background: var(--bg);
  position: relative;
  z-index: 5;
}

.section-header {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}

.tiles{border:none; padding: clamp(48px, 8vw, 96px) 0;}
.tiles:first-child {
  padding-top: 0;
}
.tiles .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media (max-width:1100px){.tiles .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.tiles .grid{grid-template-columns:1fr}}
.tile{border-radius:0;border:none;overflow:hidden;background:transparent;display:grid;grid-template-rows:auto auto}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover; border-radius: 4px;}
.tile .t{padding:16px 0}.tile .t p{margin:6px 0 0;color:var(--muted); font-size: 16px;}

.highlights .tile img {
  aspect-ratio: 4/3;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
}
.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content{
  position:relative;
  background:var(--panel);
  border-radius:24px;
  max-width:90vw;
  max-height:90vh;
  overflow:hidden;
  border:1px solid var(--line);
  display:grid;
  grid-template-rows:auto 1fr;
}
.modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
}
.close-btn{
  background:none;
  border:none;
  color:var(--ink);
  font-size:24px;
  cursor:pointer;
  padding:4px;
  border-radius:50%;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-btn:hover{
  background:var(--line);
}
.modal-body{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:0;
  min-height:0;
}
.image-container{
  position:relative;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:400px;
}
#modal-image, #modal-video{
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:12px;
}
#modal-video{
  background:#000;
}
.nav-buttons{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 20px;
  pointer-events:none;
}
.nav-btn{
  background:rgba(0,0,0,0.7);
  border:none;
  color:white;
  font-size:24px;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.nav-btn:hover{
  background:rgba(0,0,0,0.9);
}
.nav-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}
.image-counter{
  position:absolute;
  bottom:16px;
  right:16px;
  background:rgba(0,0,0,0.7);
  color:white;
  padding:4px 8px;
  border-radius:12px;
  font-size:12px;
}
.modal-info{
  padding:24px;
  border-left:1px solid var(--line);
  overflow-y:auto;
}
.modal-info h3{
  margin:0 0 12px;
  font-size:20px;
}
.modal-info p{
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.5;
}
.modal-tag{
  background:var(--brand);
  color:var(--bg);
  padding:4px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
}
.modal-features{
  margin:16px 0;
}
.modal-features h4{
  margin:0 0 8px;
  font-size:16px;
  color:var(--ink);
}
.modal-features ul{
  margin:0;
  padding-left:20px;
}
.modal-features li{
  margin:4px 0;
  color:var(--muted);
  font-size:14px;
}

/* Mobile modal */
@media (max-width: 768px) {
  .modal-content{
    max-width:95vw;
    max-height:95vh;
  }
  .modal-body{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
  }
  .image-container{
    min-height:300px;
  }
  #modal-image, #modal-video{
    max-height:40vh;
  }
  .modal-info{
    border-left:none;
    border-top:1px solid var(--line);
    padding:16px;
  }
  .nav-buttons{
    padding:0 12px;
  }
  .nav-btn{
    width:36px;
    height:36px;
    font-size:20px;
  }
}

/* Page-specific overrides */
.about-hero{
  padding:60px 0 40px;
  border-bottom:1px solid var(--line);
  text-align:center;
}

.contact main {
  padding-top: 0;
}

.contact form{display:grid;gap:16px;max-width:640px;margin: 24px auto 0;}
.contact label{display:grid;gap:8px}
.contact input,.contact textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--ink);font:inherit; font-size: 16px;}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--ring);outline-offset:2px}

.show-head{border-bottom:1px solid var(--line);background:var(--bg)}
.show-head .wrap{display:flex;align-items:end;justify-content:space-between;gap:16px}

.shots .grid{
  grid-template-columns:repeat(2,1fr);
  gap: clamp(24px, 5vw, 64px);
}

.controls{display:flex;gap:10px;flex-wrap:wrap}.controls .btn.active{background:var(--brand);color:var(--bg)}

/* Mobile filters */
@media (max-width: 768px) {
  .show-head .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .controls{
    width:100%;
    gap:8px;
  }
  .controls .btn{
    font-size:14px;
    padding:8px 16px;
  }
}

@media (max-width: 480px) {
  .shots .grid {
    grid-template-columns: 1fr;
  }
  .show-head .wrap{
    gap:16px;
  }
  .controls{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    gap:6px;
  }
  .controls .btn{
    flex-shrink:0;
    font-size:13px;
    padding:6px 12px;
  }
  .controls::-webkit-scrollbar{ height:3px; }
  .controls::-webkit-scrollbar-track{ background:transparent; }
  .controls::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
}

.process-section {
  padding: clamp(48px, 8vw, 96px) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 48px;
  text-align: left;
}

.process-step {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}

.process-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  display: inline-block;
  margin-bottom: 16px;
}

.footer{background:var(--bg);border-top:1px solid var(--line);color:var(--muted);padding:0}
.footer .wrap{padding:clamp(48px, 8vw, 96px)}
.footer .grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:24px;align-items:start}
.footer strong{color:var(--ink);font-size:18px;margin-bottom:8px;display:block}
.footer small{display:block;margin:4px 0;opacity:.8}
.footer-nav{display:flex;flex-direction:column;gap:8px}
.footer-nav a{color:var(--muted);text-decoration:none;opacity:.8;font-size:14px;transition:all .2s}
.footer-nav a:hover{opacity:1;color:var(--brand)}
.footer-contact{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-contact a{color:var(--ink);text-decoration:none;font-weight:500;transition:color .2s}
.footer-contact a:hover{color:var(--brand)}
@media (max-width:900px){
  .footer .grid{grid-template-columns:1fr;text-align:center;gap:32px}
  .footer-nav{align-items:center}
  .footer-contact{align-items:center}
}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}