:root {
      --bg: #f4f6f8;
      --card: #ffffff;
      --muted: #5b6675;
      --text: #141824;
      --border: #e2e8f0;
      --accent: #2563eb;
  }

  * {
      box-sizing: border-box
  }

  html,
  body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial
  }

  a {
      color: inherit;
      text-decoration: none
  }

  img {
      max-width: 100%;
      display: block
  }

  .container {
      width: min(1200px, 92%);
      margin: 0 auto
  }

  /* Brand header */
  .brand-header {
      padding: 12px 0;
      text-align: center
  }

  .brand-header img {
      width: 120px;
      height: auto;
      display: block;
      margin: 0 auto 6px
  }

  .brand-header h1 {
      margin: 0;
      font-size: 1.3rem
  }

  /* Top nav */
  .main-nav {
      border-bottom: 1px solid var(--border);
      border-top: 1px solid var(--border);
      background: #fff
  }

  .main-nav .inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 8px 0
  }

  .main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap
  }

  .main-nav a {
      padding: .4rem .7rem;
      border-radius: 10px;
      color: var(--muted)
  }

  .main-nav a:hover {
      background: #eaeaea;
      color: var(--text)
  }

  .actions {
      display: flex;
      gap: .5rem;
      align-items: center
  }

  .icon-btn {
      height: 34px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      display: grid;
      place-items: center;
      padding: 0 10px;
      color: var(--text);
      cursor: pointer
  }

  .icon-btn:hover {
      background: #f0f0f0
  }

  /* Page header */
  .page-hero {
      padding: 24px 0 8px
  }

  .page-hero h2 {
      font-size: clamp(28px, 5vw, 40px);
      margin: 0 0 8px
  }

  .lead {
      color: var(--muted);
      margin: 0 0 14px
  }

  /* Regular tile grid */
  .tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 8px;
      padding: 10px 0 28px
  }

  figure.tile {
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      background: var(--card);
      cursor: pointer
  }

  .tile img {
      width: 100%;
      height: 290px;
      object-fit: cover
  }

  /* Lightbox slideshow */
  .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      display: none;
      place-items: center;
      z-index: 50
  }

  .lightbox.open {
      display: grid
  }

  /* Modal container */
  .lightbox-inner {
      display: grid;
      grid-template-rows: 1fr auto;
      /* stage first, bar at bottom */
      max-width: min(1000px, 92%);
      max-height: 94svh;
      overflow: hidden;
      position: relative;
  }

  /* Stage area */
  .stage {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
      background: #000;
      /* dark backdrop */
  }

  .track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform .5s ease;
  }

  .slide {
      flex: 0 0 100%;
      /* each slide takes 100% width */
      height: 100%;
      display: flex;
      align-items: center;
      /* vertical centering */
      justify-content: center;
      /* horizontal centering */
      background: #000;
      /* backdrop for each slide */
  }

  .slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* no cropping */
      margin: auto;
      /* extra safety for centering */
      pointer-events: none;
      /* disables right-click + drag */
      user-select: none;
      /* prevents text-like selection */
  }

  .lb-bar {
      border-top: 1px solid var(--border);
      background: rgba(255, 255, 255, .92);
  }



  #caption {
      display: none;
  }

  .btn {
      background: #f5f5f5;
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer
  }

  .navbtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, .85);
      border: 1px solid var(--border);
      width: 42px;
      height: 42px;
      font-size: 20px;
      /* bigger arrow */
      color: #000;
      /* solid black arrow */
      font-weight: bold;
      /* thicker */
      border-radius: 10px;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 3
  }

  .navbtn.prev {
      left: 10px
  }

  .navbtn.next {
      right: 10px
  }

  footer {
      border-top: 1px solid var(--border);
      padding: 18px 0;
      color: var(--muted)
  }

  .foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
  }

  /*contaact page image*/

  #contact-page {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* form left, image right on desktop */
  gap: 40px;
  align-items: start;
}

/* Make sure image fills its column */
#contact-page .image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

/* Switch to single column on narrow screens */
@media (max-width: 900px) {
  #contact-page {
    grid-template-columns: 1fr;   /* one column only */
  }
  #contact-page .image {
    margin-top: 20px;             /* space below form */
    text-align: center;           /* optional: center image */
  }
  #contact-page .image img {
    max-width: 600px;             /* prevent it from being too wide */
    margin: 0 auto;               /* center */
  }
}