html {
  scroll-behavior: smooth;
}

body{ margin: 0;  background: #f5f7fb; color: #111827; }
    .wrapper{ max-width: 1200px; margin: 0 auto; padding: 24px; }
   

body {font-family: "Roboto Mono", monospace; font-optical-sizing: auto; font-weight: normal; font-style: normal;}

   /* .controls{ margin-bottom: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; font-family: "Roboto Mono", monospace; }
    .controls button{ padding: .5rem 1rem; border-radius: 12px; border: 1px solid #e5e7eb; background: #111827; color: white; cursor: pointer; font-size: .95rem; transition: background .15s ease; font-family: "Roboto Mono", monospace; }
    .controls button:hover{ background: #374151; }
    .controls button.active{ background: #2563eb; } */

/* Common */
h1{font-size: clamp(28px, 4.2vw, 48px); line-height:1.1; margin:24px 0 8px;}
h2{font-size: clamp(18px, 1.8vw, 24px); margin:24px 0 12px;}



/* Footer */
.w3-small {
    font-size:2px !important
}


    /* === Pinterest-style masonry using CSS columns === */
    .grid{ column-gap: var(--gap); }
    /* Responsive column counts */
    @media (max-width: 479px){ .grid{ columns: 1; } }
    @media (min-width: 480px){ .grid{ columns: 2; } }
    @media (min-width: 768px){ .grid{ columns: 3; } }
    @media (min-width: 1100px){ .grid{ columns: 4; } }

    /* Column item (geometry stays fixed on hover) */
    .card{
      display: inline-block; /* allows flowing into columns */
      width: 100%;
      margin: 0 0 var(--gap);
      break-inside: avoid; /* keep card intact in a column */
      contain: layout paint; /* isolate layout/paint of inner */
    }

    /* Visual wrapper (we animate this, not .card) */
    .card-inner{
      background: #fff;
      border: 1px solid #e5e7eb;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(17,24,39,.06);
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
      opacity: 1; /* default visible, lazy-reveal will adjust */
    }

    .card:hover .card-inner{
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(17,24,39,.12);
    }

    /* Smooth hide/show for filtering */
    .card.is-hidden .card-inner{ opacity: 0; transform: translateY(0) scale(.98); }

    .thumb{ width: 100%; display: block; border: 4px solid white; height: auto; backface-visibility: hidden; transform: translateZ(0); }
    .content{ padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
    .title{ font-weight: 600; line-height: 1;font-size:.95rem;padding:0;}
    .caption{ color: #6b7280; line-height: 1.25; font-size:.85rem;padding:0;margin-top:-3px;}

 /* ===== Gallery base ===== */
    .gallery{
      display:grid;
      grid-template-columns:1fr; /* phones */
      gap:var(--gap);
    }
    .gallery img{ width:100%; height:auto; display:block; }

    /* Hero / wide always spans full width */
    .wide{
      grid-column:1 / -1;
      position:relative;   /* for overlay */
      overflow:hidden;
    }

    /* Overlay (default: sits over hero image) */
    .overlay{
      position:absolute;
      bottom:16px;
      left:16px;
      background:rgba(255,255,255,0.9);
      color:#000;
      padding:25px 32px;
      max-width:94%;
      box-shadow:0 8px 24px rgba(0,0,0,.08);
      z-index:2;
    }
    .overlay h2{ margin:0 0 .35rem; font-size:1.5rem; line-height:1.2; }
    .overlay p{ margin:0; font-size:1rem; line-height:1.55; }

    /* Last row: stacks on mobile, 2-up on ≥700px */
    .last-row{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:1fr;
      gap:var(--gap);
    }

    /* Hide utility */
    .hide-mobile{ display:block; }
    @media (max-width:699px){
      .hide-mobile{ display:none !important; }
    }

    /* Tablet */
    @media (min-width:700px){
      .gallery{ grid-template-columns:repeat(2,1fr); }
      .last-row{ grid-template-columns:repeat(2,1fr); }
      .overlay{ max-width:55%; }
    }

    /* Desktop */
    @media (min-width:1024px){
      .gallery{ grid-template-columns:repeat(3,1fr); }
    }

    /* When overlay is moved to end on mobile, render as normal card */
    .overlay--end{
      position:static !important;
      max-width:100% !important;
      left:auto; right:auto; bottom:auto;
      margin-top:1rem;
      background:#fff;
      box-shadow:0 8px 24px rgba(0,0,0,.08);
      border-radius:0;
      padding:25px 32px;
    }

    #overlay-end-slot{ margin-top:1rem; }

/* Responsive three-column clients grid (falls back to 1/2 columns on smaller screens) */
.clients{list-style:none; padding:0; margin:0 0 24px; display:grid; grid-template-columns: 1fr; gap:8px 16px;}
.clients li{border-bottom:1px dashed var(--border); padding:8px 0;}
@media (min-width:600px){
.clients{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (min-width:900px){
.clients{grid-template-columns: repeat(3, minmax(0,1fr));}
}