:root {
      --gold: #c8a24a;
      --deep-navy: #1c2a39;
      --cream: #faf7f2;
      --sage: #9bb59f;
      --rose: #d9a5b3;
      --ink: #253144;
      --muted: #6c7787;
      --white: #ffffff;
    }

    .card {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 18px;
}
.grid {
    display: grid;
    gap: 24px;
}

    body { font-family: "Open Sans", sans-serif; background-color: var(--cream); color: var(--ink); }
    h1, h2, h3 { color: var(--deep-navy); font-family: "Playfair Display", serif; }

    .btn-primary { background-color: var(--gold); border-color: var(--gold); }
    .btn-primary:hover { background-color: #b58e3e; border-color: #b58e3e; }

    .navbar { background-color: var(--white) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05);         background: linear-gradient(180deg, rgb(201 152 62 / 96%), rgb(28 42 57 / 14%));}

    .divider span { display: inline-block; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; margin-right: 6px; }

    /* Gallery thumbs: horizontal scroll strip (mobile-first) */
    .thumb-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem .25rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .thumb-strip::-webkit-scrollbar { height: 8px; }
    .thumb-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
    .thumb { flex: 0 0 auto; scroll-snap-align: start; border: 0; background: transparent; padding: 0; }
    .thumb img { width: 116px; height: 76px; object-fit: cover; border-radius: .5rem; }
    .thumb.active img, .thumb:focus-visible img { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* Larger thumbs on md+ */
    @media (min-width: 768px) {
      .thumb img { width: 140px; height: 90px; }
      #notMobile {
        display: block;
      }
      #mobileApp {
        display: none;
      }
    }

    @media (max-width: 768px) {
      #gMap {
        width:100%
      }
      h2 {
        text-align: center;
      }
      iframe {
          width: 100%;
      }
      #notMobile {
        display: none;
      }
      #mobileApp {
        display: block;
      }
      .fw-bold {
        text-align: center !important;
        padding-top: 25px;
        padding-bottom: 25px;
      }
      #instaQRCode {
        background-position-x: center;
        width: 100% !important;
      }
      #omBead {
        background-position-x: 65px !important;
      }

      /* App shell */
      .app{
        position:fixed; inset:0; display:grid; grid-template-rows:auto 1fr auto;
        background: var(--cream);
      }

      .py-55 {
        padding-top: 0 !important;
      }

      .app-header{
        position:sticky; top:0; z-index:10;
        display:flex; align-items:center; justify-content:space-between;
        padding: calc(10px + var(--safe-top)) 16px 10px;
        background: linear-gradient(180deg, rgb(201 152 62 / 96%), rgb(28 42 57 / 14%));
        color:var(--white); backdrop-filter:saturate(180%) blur(8px);
        border-bottom:1px solid rgba(255,255,255,.08);
      }

      #outlookLogo {
        width: -webkit-fill-available !important;
        background-size: 225px !important;
        height: 175px !important;
      }
      .app-title{font-weight:800; letter-spacing:.3px}
      .app-actions{display:none; gap:10px}
      .icon-btn{appearance:none; border:0; background:rgba(255,255,255,.08); color:#fff; width:36px; height:36px; display:grid; place-items:center; border-radius:12px}
      .icon-btn:active{transform:translateY(1px)}

      /* Content area behaves like a native scroll view */
      .app-content{ position:relative; overflow:auto; -webkit-overflow-scrolling:touch; padding:16px; }

      /* Cards */
      .card{ background:var(--white); border:1px solid rgba(0,0,0,.06); border-radius:16px; box-shadow:var(--shadow); padding:16px; }
      .grid{ display:grid; gap:12px }
      @media(min-width:720px){ .grid.cols-2{ grid-template-columns:1fr 1fr } }

      .hero{
        background: radial-gradient(1000px 300px at 50% -220px, rgba(200,162,74,.18), transparent 70%), var(--white);
        border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:18px; box-shadow:var(--shadow);
      }
      .hero h1{ margin:0 0 6px; font-size:1.35rem }
      .badge{ display:inline-flex; gap:8px; align-items:center; font-weight:700; padding:6px 10px; border-radius:999px; background:rgba(200,162,74,.15); border:1px dashed rgba(200,162,74,.5); color:var(--navy) }

      /* Tab bar like native iOS/Android */
      .tabbar{
        position:sticky; bottom:0; z-index:10; padding-bottom:calc(6px + var(--safe-bottom));
        background:rgba(255,255,255,.92); backdrop-filter: blur(8px);
        border-top:1px solid rgba(0,0,0,.08);
      }
      .tabs{ display:grid; grid-template-columns:repeat(5,1fr); max-width:900px; margin:0 auto; }
      .tab{ appearance:none; background:none; border:0; padding:10px 8px; display:grid; place-items:center; gap:4px; color:var(--muted); font-size:.8rem }
      .tab svg{ width:22px; height:22px; opacity:.9 }
      .tab.active{ color:var(--navy); font-weight:700 }
      .tab.active .dot{ background:var(--gold) }
      .dot{ width:6px; height:6px; border-radius:999px; background:transparent; border:1px solid rgba(0,0,0,.1) }

      /* Desktop breakpoint: look like a normal website */
      @media(min-width:992px){
        .app{ position:relative; min-height:100vh; }
        .app-header{ border-radius:0; }
        .tabbar{ position:sticky; }
        .app-content{ padding:32px; }
      }
      #formBtn {
        width: 100% !important;
      }
      /* Buttons */
      .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.08); background:var(--gold); color:#fff; font-weight:800;}
      .btn.outline{ background:var(--white); color:var(--navy) }

      /* Install toast */
      .toast{ position:fixed; left:0; right:0; bottom:calc(76px + var(--safe-bottom)); display:none; place-items:center; z-index:20 }
      .toast > div{ background:var(--navy); color:#fff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow) }
      .toast.show{ display:grid }
    }

    .carousel-caption h5 { font-family: "Playfair Display", serif; }

    #outlookLogo {
        background-image: url(../images/omLogo.png);
        width: 150px;
        height: 125px;
        background-size: 175px;
        background-repeat: no-repeat;
        background-position-y: -25px;
        background-position-x: center;
    }
    #instaQRCode {
      background-image: url(../images/instaQR.png);
      width: 200px;
      height: 200px;
      background-size: 175px;
      background-repeat: no-repeat;
      background-position-y: 0;
    }
    #omBead {
      background-image: url(../images/om11.png);
      width: 300px;
      height: 200px;
      background-size: 175px;
      background-repeat: no-repeat;
      background-position-y: 0;
      background-position-x: 85px;
    }
    .h1Style {
      font-size: 26px !important;
    }
    .paraBold {
      font-weight: 700 !important;
    }
    .alignHeading {
      text-align: center;
    }
    .py-55 {
      padding-top: 125px;
      padding-bottom: 50px;
    }

    .carousel-fade .carousel-item {
      height: 500px;
    }

    /* Form feedback + animation */
.shake { animation: shake .35s linear; }
@keyframes shake {
  0%{transform:translateX(0)} 20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)} 60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)} 100%{transform:translateX(0)}
}
.fade-in { animation: fadein .35s ease-out; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }



.oh-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.oh-modal.is-open { display: block; }

.oh-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.75);
}

.oh-dialog {
  position: relative;
  max-width: 800px;
  width: min(92vw, 800px);
  max-height: 90vh;              /* 👈 keeps modal on screen */
  margin: 5vh auto;
  background: #fffdf7;           /* cream */
  border-radius: 16px;
  display: flex;
  flex-direction: column;        /* 👈 enables scroll section */
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,0.4);
}

.oh-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(26,42,58,0.12);
  font-size: 26px;
  cursor: pointer;
  color: #1a2a3a;
}

/* 🔽 Scrollable area */
.oh-content {
  padding: 20px;
  overflow-y: auto;              /* 👈 scrolling happens here */
  flex: 1;
}

.oh-flyer-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fixed footer */
.oh-actions {
  padding: 14px 18px;
  border-top: 1px solid rgba(201,179,126,0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fffdf7;
}

.oh-btn {
  background: #1a2a3a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

.oh-dontshow {
  font-size: 14px;
  color: #1a2a3a;
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 520px) {
  .oh-actions {
    flex-direction: column;
    gap: 12px;
  }
  .oh-btn { width: 100%; text-align: center; }
}


.director-section{
    background:#fffdf7; /* cream */
    padding:72px 20px;
  }

  .director-container{
    max-width:1100px;
    margin:0 auto;
  }

  .director-heading{
    font-family: "Georgia", serif;
    font-size:36px;
    color:#1a2a3a; /* navy */
    margin:0 0 28px;
    text-align:center;
  }

  .director-grid{
    display:grid;
    grid-template-columns: 420px 1fr;
    gap:38px;
    align-items:center;
  }

  /* Photo framing */
  .director-photo-wrap{
    text-align:center;
  }

  .director-caption{
    margin-top:14px;
    color:#1a2a3a;
    font-size:16px;
    line-height:1.4;
  }

  .director-content{
    text-align:left;
  }

  .director-text{
    font-size:17px;
    line-height:1.75;
    color:#2c3e50;
    margin:0 0 16px;
  }

  .director-quote{
    margin:22px 0 0;
    padding:14px 16px;
    border-left:4px solid #c9b37e; /* gold */
    background: rgba(201,179,126,0.10);
    border-radius:12px;
    color:#6a5a2a;
    font-style:italic;
    font-size:17px;
    line-height:1.6;
  }

  .director-cta{
    margin-top:18px;
  }

  .director-btn{
    display:inline-block;
    background:#1a2a3a; /* navy */
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    border-radius:12px;
    font-weight:600;
  }

  .director-btn:hover{
    opacity:0.92;
  }

  /* Responsive */
  @media (max-width: 980px){
    .director-grid{
      grid-template-columns: 360px 1fr;
    }
  }

  @media (max-width: 780px){
    .director-grid{
      grid-template-columns: 1fr;
      gap:26px;
    }
    .director-content{
      text-align:left;
    }
    .director-heading{
      font-size:30px;
    }
    .director-frame--circle{
      width:240px;
      height:240px;
    }
    .director-frame--oval{
      width:220px;
      height:300px;
    }
  }


  .director-frame{
    position:relative;
    margin:0 auto;
    background:#fff;
    border:2px solid rgba(201,179,126,0.75); /* gold */
    box-shadow:0 18px 45px rgba(0,0,0,0.18);
    padding:10px; /* mat */
    overflow:hidden;
  }

  /* 🔵 Circular portrait */
  .director-frame--circle{
    width:400px;
    height:500px;
    border-radius:50%;
  }

  /* 🟠 Oval portrait (classic alternative) */
  .director-frame--oval{
    width:280px;
    height:360px;
    border-radius:50% / 60%;
  }

  .director-frame::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(201,179,126,0.45);
    border-radius:inherit;
    pointer-events:none;
  }

  .director-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    display:block;
  }

  .director-credentials{
    margin:22px 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:14px 24px;
    color:#1a2a3a;
    font-size:15px;
  }

  .director-credentials li::before{
    content:"●";
    color:#c9b37e; /* gold bead */
    margin-right:8px;
  }