/* ===== Your base styles (kept) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap');
body{ font-family:"Cormorant", serif; }
/* Hide horizontal overflow globally */
html,body{ width:100%; overflow-x:hidden; }

/* ===== NAVBAR (fixed) ===== */
.navbar{
  background:#fff;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1050;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.nav-link{
  font-weight:500;
  letter-spacing:.04em;
  color:#182024;
  opacity:.9;
}
.nav-link:hover,
.nav-link.active{ color:#0b0f12; opacity:1; }

/* evenly spaced center nav (desktop) */
@media (min-width: 992px){
  .main-nav{ gap:3.5rem; }
}

/* icon links */
.nav-icon-link{ color:#212529; opacity:.9; text-decoration:none; }
.nav-icon-link:hover{ opacity:1; }

/* CTA (desktop) */
.enquire-btn{
  border:1.5px solid #212529;
  transition:all .15s ease;
}
.enquire-btn:hover{ background:#212529; color:#fff; }

/* Offcanvas width */
.offcanvas{ width:290px; z-index:1060; }
.offcanvas .nav-link{ font-size:1rem; }

/* Improve hamburger visibility on light bg */
.navbar-light .navbar-toggler-icon{ filter:invert(0); }

/* Demo: space below fixed header (you can keep this) */
body{ padding-top:76px; }

/* ===== NEW: Desktop hover dropdown (smooth fade/slide) ===== */
.navbar .dropdown-menu{
  border:0;
  border-radius:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:.5rem 0;
}

/* Only enable hover behavior on desktop */
@media (min-width: 992px){
  .navbar .dropdown-hover .dropdown-menu{
    display:block;                 /* keep in flow so transition works */
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events:none;
    margin-top:.25rem;
  }
  .navbar .dropdown-hover:hover > .dropdown-menu,
  .navbar .dropdown-hover:focus-within > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition-delay:0s;
    pointer-events:auto;
  }
}

/* Dropdown items look */
.dropdown-item{
  font-weight:500;
  padding:.5rem 1rem;
}
.dropdown-item:hover{ background:#f6f7f8; }

    /* Demo page padding (real padding is set dynamically by JS) */
    body { padding-top: 76px; }
  :root{
    --ink:#111418;
    --muted:#6b7280;
    --chip-bg:#ffffff;
    --chip-bd:#e9eef3;
    --chip-shadow: 0 2px 10px rgba(17,20,24,.04);
    --peach:#403838;
    --peach-600:#403838;
  }

  body{ color:var(--ink); background:linear-gradient(#f7f7f7,#fafafa); }

  /* Section head */
  .eyebrow{
    width:36px; height:6px; border-radius:8px; background:var(--peach);
    margin-inline:auto; margin-bottom:.6rem;
  }
  .works-title{
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-weight:500;
    letter-spacing:.01em;
  }

  /* Chip row */
  .chip-row{
    display:flex; gap:.75rem; align-items:center;
    flex-wrap:wrap;
    padding:.5rem 0;
  }
  /* On very small screens we prefer horizontal scroll for better tap targets */
  @media (max-width: 575.98px){
    .chip-row{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding-bottom:.25rem;
    }
    .chip{ scroll-snap-align:start; }
  }

  /* Chip (filter button) */
  .chip{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    min-height:46px; padding:.55rem 1.05rem;
    background:var(--chip-bg); border:1px solid var(--chip-bd);
    border-radius:12px; box-shadow:var(--chip-shadow);
    color:var(--ink); font-weight:600; white-space:nowrap;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
    text-decoration:none;
  }
  .chip:hover{ transform:translateY(-1px); }

  /* Active underline */
  .chip.active::after{
    content:"";
    position:absolute; left:10px; right:10px; bottom:-1px;
    height:3px; border-radius:3px; background:var(--peach);
  }
  .chip.active{ color:#000; }

  /* Optional: use filled style for active on very small screens */
  @media (max-width: 420px){
    .chip.active{ background:#fff3ef; border-color:#ffe4dc; }
  }
    :root{
    --ink:#111418;
    --muted:#6b7280;
    --peach:#403838;
  }
  body{ color:var(--ink); background:#fff; }

  /* Intro block (left column) */
  .intro-mark{
    width:36px;height:6px;border-radius:8px;background:var(--peach);
    margin-bottom:1rem;
  }
  .intro-title{
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-weight:600; line-height:1.25;
  }

  /* Masonry wrapper */
  .masonry{
    column-count:2;          /* two columns on desktop */
    column-gap:2rem;
  }
  /* One column on mobile */
  @media (max-width: 767.98px){
    .masonry{ column-count:1; column-gap:0; }
  }

  /* Individual item */
  .work{
    break-inside: avoid;     /* keep whole block in a column */
    margin-bottom:2rem;
  }
  .work small{
    display:block; color:var(--muted);
    letter-spacing:.02em; margin-bottom:.5rem;
    font-size:.85rem;
  }
  .work-figure{
    position:relative; display:block; overflow:hidden;
    border-radius:.5rem; background:#f7f7f7;
  }
  .work-figure img{
    display:block; width:100%; height:auto; transition: transform .35s ease;
  }
  .work-figure:hover img{ transform:scale(1.02); }

  .work-caption{
    font-size:.92rem; margin-top:.4rem;
  }