:root{
  --ink:#1f2421;
  --paper:#faf6ef;
  --paper-2:#f1ebdd;
  --himalaya:#0f3d52;
  --himalaya-2:#155873;
  --terracotta:#c1532a;
  --sage:#7c8a6e;
  --line: rgba(15,61,82,0.14);
  --max: 1180px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}
img{display:block;max-width:100%;}

/* ===== hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 24px 56px;
  background:
    radial-gradient(circle at 14% 18%, rgba(193,83,42,0.10), transparent 38%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="240" viewBox="0 0 600 240"><path d="M0 180 L60 130 L110 160 L170 90 L230 150 L300 60 L360 140 L420 100 L480 170 L540 110 L600 150" fill="none" stroke="%230f3d52" stroke-opacity="0.08" stroke-width="2"/><path d="M0 210 L70 165 L130 195 L190 120 L250 185 L320 95 L380 175 L440 130 L500 200 L560 145 L600 185" fill="none" stroke="%23c1532a" stroke-opacity="0.07" stroke-width="2"/></svg>');
  background-repeat:repeat-x;
  background-size:600px 240px;
  background-position:bottom;
  pointer-events:none;
}
.hero-inner{max-width:var(--max);margin:0 auto;position:relative;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--terracotta);}
.hero h1{
  font-size:clamp(34px,5vw,54px);
  line-height:1.05;
  max-width:760px;
  color:var(--himalaya);
}
.hero p{
  max-width:560px;
  margin-top:18px;
  font-size:16px;
  line-height:1.65;
  color:#4a5650;
}

/* ===== gallery grid ===== */
.gallery{
  max-width:var(--max);
  margin:0 auto;
  padding:56px 24px 80px;
}
.grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
}
figure.card{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
figure.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px -18px rgba(15,61,82,0.35);
  border-color:transparent;
}
.card-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--paper-2);
  cursor:zoom-in;
}
.card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
figure.card:hover .card-img img{transform:scale(1.06);}
.card-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,30,25,0.55));
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none; /* let clicks pass through to the <img> beneath it */
}
figure.card:hover .card-img::after{opacity:1;}
figcaption{padding:16px 18px 18px;}
figcaption h3{
  font-size:15.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
figcaption p{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.55;
  color:#6b7570;
}

/* the logo card needs contain not cover */
.card-logo .card-img{
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
}
.card-logo .card-img img{
  width:auto;height:auto;max-width:62%;max-height:62%;
  object-fit:contain;border-radius:50%;
}

/* =========================================================
   LIGHTBOX — rebuilt
   The image is the primary element. Everything else (nav
   buttons, close button, caption, counter) is sized and
   positioned relative to the image, not to a fixed white
   modal box, so there is no leftover empty space around
   small images.
   ========================================================= */

.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,0.85);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.lightbox-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease, visibility 0s linear 0s;
}

/* Row that holds prev-button / image-column / next-button as one
   centered group, so the arrows always sit right beside the image
   regardless of the image's own dimensions. */
.lightbox-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  max-width:calc(100vw - 24px);
}

/* Wraps the image + close button + counter + caption. Has no
   background of its own — the image supplies the visual bulk. */
.lightbox-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:90vw;
  opacity:0;
  transform:scale(0.92);
  transition:opacity .28s ease, transform .32s cubic-bezier(.2,.9,.25,1);
}
.lightbox-overlay.is-open .lightbox-content{
  opacity:1;
  transform:scale(1);
}

.lightbox-content img{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:85vh; /* image fills up to 85-90% of viewport height */
  border-radius:10px;
  box-shadow:0 25px 60px -15px rgba(0,0,0,0.6);
  transition:opacity .15s ease;
}

/* Counter overlaid on the image itself, top-left */
.lightbox-counter{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  padding:5px 11px;
  border-radius:20px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* Close button sits at the top-right corner of the image */
.lightbox-close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:2px solid rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close svg{width:16px;height:16px;}
.lightbox-close:hover,
.lightbox-close:focus-visible{
  background:var(--terracotta);
  transform:scale(1.08);
}

.lightbox-caption{
  color:#f5f2ea;
  text-align:center;
  margin-top:14px;
  max-width:640px;
  padding:0 8px;
}
.lightbox-caption h3{
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:600;
}
.lightbox-caption p{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.55;
  color:rgba(245,242,234,0.72);
}

/* Circular semi-transparent nav buttons, vertically centered
   against the stage (i.e. against the image). */
.lightbox-nav{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.lightbox-nav svg{width:20px;height:20px;}
.lightbox-nav:hover,
.lightbox-nav:focus-visible{
  background:var(--terracotta);
  border-color:var(--terracotta);
  transform:scale(1.08);
}
.lightbox-nav[disabled]{
  opacity:0;
  pointer-events:none;
}

/* Tablet: slightly tighter */
@media (max-width:820px){
  .lightbox-stage{gap:10px;}
  .lightbox-nav{width:42px;height:42px;}
}

/* Mobile: there's no room for arrows beside the image, so they
   move to float on top of the image itself. Swipe is the primary
   navigation method here; the buttons remain as a backup. */
@media (max-width:600px){
  .lightbox-overlay{padding:10px;}
  .lightbox-stage{position:relative;gap:0;}
  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:38px;
    height:38px;
    background:rgba(0,0,0,0.45);
    border-color:rgba(255,255,255,0.25);
  }
  .lightbox-nav:hover,
  .lightbox-nav:focus-visible{transform:translateY(-50%) scale(1.08);}
  .lightbox-prev{left:4px;}
  .lightbox-next{right:4px;}
  .lightbox-close{top:-12px;right:-4px;width:32px;height:32px;}
  .lightbox-content img{max-height:78vh;}
  .lightbox-caption h3{font-size:14.5px;}
  .lightbox-caption p{font-size:12.5px;}
}