:root{
  --header-h: 64px;
  --header-h-small: 50px;
  --max-w: 1100px;
  --navy: #00030d;
  --navy-light:#111522;
  --white:#ffffff;

  --tile: 420px;
  --tile-gap: 20px;
  --arrow-size: 52px;
  --arrow-offset: calc(var(--arrow-size)/2 + 4px);
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body{
  margin:0;
  font-family:"Times New Roman", Times, serif;
  line-height:1.6;
  font-size:18px;
  color:#000000;
  background:var(--white);
}

/* Header */
header{
  position:sticky; top:0; z-index:1000;
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid #ddd;
  transition:height .25s ease, box-shadow .25s ease;
}
header.shrink{
  height:var(--header-h-small);
  box-shadow:0 6px 12px rgba(0,0,0,.06);
}
.nav-wrap{
  max-width:var(--max-w);
  margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; gap:16px;
}
.logo a{
  font-family:'Agatho', serif;
  font-size:2.6rem;
  font-weight:400;
  letter-spacing:2px;
  text-decoration:none; color:var(--navy); text-transform:uppercase;
  transition:font-size .25s ease;
}
header.shrink .logo a{ font-size:2rem; }

nav ul{ display:flex; list-style:none; gap:18px; margin:0; padding:0; }
nav a{
  display:inline-block; padding:8px 10px; text-decoration:none; font-size:18px;
  color:#000000; border-radius:8px; transition:background .2s, color .2s, transform .2s;
}
nav a:hover{ background:#f2f2f2; }
nav a.active{ background:var(--navy); color:#fff; transform:translateY(-1px); }
.menu-btn{
  display:none; border:1px solid var(--navy); background:transparent; color:var(--navy);
  padding:8px 10px; border-radius:8px; cursor:pointer;
}

main{ max-width:var(--max-w); margin:0 auto; padding:16px; }
section{ min-height:80vh; padding:48px 8px; border-bottom:1px solid #eee;
  scroll-margin-top: calc(var(--header-h-small) + 12px); }
section h1{ margin-top:0; font-size:clamp(32px, 5vw, 48px); color:#000000; }
section h2{ font-size:1.75rem; font-weight:500; color:#000000; margin:2rem 0 .5rem; position:relative; display:inline-block; padding-bottom:.25rem; }
section h2::after{ content:""; position:absolute; left:0; bottom:0; width:50%; height:2px; background-color:var(--navy); }
.lead, .gallery-intro{ color:#000000; max-width:65ch; }
.gallery-intro{ margin:.5rem 0 1.25rem; font-size:1.05rem; }

/* ===== Horizontal Gallery ===== */
.gallery-wrap{ position:relative; overflow:visible; }
.gallery-scroller{
  display:flex; gap:var(--tile-gap); overflow-x:auto; padding:4px 0 12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.gallery-scroller::-webkit-scrollbar{ height:10px; }
.gallery-scroller::-webkit-scrollbar-thumb{ background:#d0d0d0; border-radius:10px; }
.gallery-scroller::-webkit-scrollbar-track{ background:transparent; }
.gallery-item{
  flex:0 0 var(--tile); scroll-snap-align:center; border:1px solid #e6e6e6;
  border-radius:12px; overflow:hidden; background:#fff; cursor: zoom-in;
  transition: transform .6s cubic-bezier(.2,.65,.3,1), box-shadow .2s, border-color .2s, opacity .6s;
  transform: scale(.90) translateY(12px); opacity:.80; will-change: transform, opacity;
}
.gallery-item:hover{ box-shadow:0 10px 18px rgba(0,0,0,.06); border-color:#ddd; }
.gallery-item.in-view{ transform: scale(1.03) translateY(0); opacity:1; }
.gallery-item img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; }
.gallery-caption{ padding:12px 14px; font-size:1rem; color:#000; border-top:1px solid #eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:var(--arrow-size); height:var(--arrow-size);
  border:none; border-radius:50%; background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; cursor:pointer; opacity:.3; transition:opacity .2s, background .2s, transform .2s; z-index:10;
}
.gallery-arrow:hover{ opacity:.9; background:rgba(0,0,0,0.65); transform:translateY(-50%) scale(1.04); }
#prev-btn{ left: calc(-1 * var(--arrow-offset)); }
#next-btn{ right: calc(-1 * var(--arrow-offset)); }
.gallery-arrow.is-hidden{ opacity:0 !important; pointer-events:none; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:2000; }
.lightbox.open{ display:flex; }
.lightbox-content{ position:relative; max-width:min(92vw, 1100px); max-height:85vh; background:#fff; border-radius:12px; overflow:hidden; }
.lightbox img{ display:block; max-width:100%; max-height:85vh; object-fit:contain; background:#000; }
.lightbox-caption{ padding:10px 14px; font-size:1rem; color:#000; border-top:1px solid #eee; }
.lightbox-close, .lightbox-prev, .lightbox-next{ position:absolute; top:10px; background:var(--navy); color:#fff; border:none; border-radius:8px; padding:8px 10px; cursor:pointer; font-size:0.95rem; }
.lightbox-close{ right:10px; }
.lightbox-prev{ left:10px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:10px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:var(--navy-light); }

/* Services */
.services-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; margin-top:1rem; }
.service-card{ border:1px solid #e6e6e6; border-radius:12px; padding:18px; background:#fff; transition:transform .2s, box-shadow .2s, border-color .2s; }
.service-card:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.06); border-color:#ddd; }
.service-card h3{ margin:.25rem 0 .25rem; font-size:1.25rem; font-weight:600; color:#000; }
.service-meta{ font-size:.95rem; color:#333; margin-bottom:.5rem; }
.service-card p{ margin:.25rem 0 .75rem; }
.service-list{ margin:.25rem 0 .75rem 1rem; }

/* Buttons */
.service-cta{ margin-top:1.25rem; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-size:1rem; border:1px solid #000; color:#000; background:#fff; transition:background .2s, color .2s, transform .2s; }
.btn:hover{ background:#f5f5f5; }
.btn-primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-primary:hover{ background:var(--navy-light); }

/* Footer */
footer{ text-align:center; color:#000000; padding:40px 16px 80px; line-height:1.7; }
footer a{ color:#000; text-decoration:underline; }
footer .sep{ margin:0 .5ch; opacity:.6; }

/* Forms */
.field input, .field textarea,
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="search"],
#contact-form input[type="url"],
#contact-form textarea{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:8px;
  font-family:"Times New Roman", Times, serif; font-size:16px;
}

/* Responsive */
@media (max-width:1200px){ :root{ --tile: 380px; } }
@media (max-width:980px){ :root{ --tile: 340px; } }
@media (max-width:720px){
  .menu-btn{ display:inline-block; }
  nav{ position:absolute; left:0; right:0; top:var(--header-h); background:var(--white); border-bottom:1px solid #ddd; display:none; }
  header.shrink nav{ top:var(--header-h-small); }
  nav.open{ display:block; }
  nav ul{ flex-direction:column; gap:6px; padding:10px; }
  nav a{ padding:10px 12px; }
  :root{ --tile: 86vw; }
  #prev-btn{ left: max(-8px, calc(-1 * var(--arrow-offset))); }
  #next-btn{ right: max(-8px, calc(-1 * var(--arrow-offset))); }
}
@media (max-width: 960px){ .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }