:root{
    --bg:#0e1f16; --bg-2:#10261c; --ink:#e9f3ec; --muted:#cfe6d7;
    --accent:#3fb27f; --accent-2:#2b8aa6; --ink-2:#dfe8e3;
    --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 18px; --maxw: 1200px;
  }
  html,body{margin:0;background:#0b1712;color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
  img{max-width:100%;height:auto;display:block}
  a{color:var(--muted);text-decoration:none}
  a:hover{color:#fff}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .btn{display:inline-block;padding:.9rem 1.4rem;border-radius:999px;background:var(--accent);color:#042;font-weight:700;letter-spacing:.02em}
  .btn:hover{filter:brightness(1.05)}
  .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff}
  .grid{display:grid;gap:22px}
  .two{grid-template-columns:1.1fr .9fr}
  @media (max-width:900px){.two{grid-template-columns:1fr}}
  .h1{font-size:clamp(38px,6vw,64px);line-height:1.07;letter-spacing:.01em;margin:.1em 0 .4em}
  .h2{font-size:clamp(26px,4.5vw,36px);line-height:1.12;margin:0 0 .6em}
  .lead{font-size:clamp(16px,2.3vw,20px);color:var(--ink-2)}
  section{padding:clamp(54px,7vw,96px) 0}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom, rgba(11,23,18,.9), rgba(11,23,18,.4) 60%, transparent)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  .brand img{width:60px;height:auto;border-radius:50%}
  .brand .name{font-weight:800;letter-spacing:.02em}
  .links{display:flex;gap:22px;flex-wrap:wrap}
  .links a{opacity:.9}
  .links a:hover{opacity:1}

  /* Hero */
  .hero{position:relative;min-height:64vh;background:#0c1a14;border-bottom:1px solid rgba(255,255,255,.06)}
  .hero .bg{
    position:absolute;inset:0;background-position:center;background-size:cover;
    filter:brightness(.78) saturate(1.05);
  }
  .hero .veil{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 60%, rgba(0,0,0,.0), rgba(0,0,0,.55))}
  .hero .content{position:relative;padding:10vh 0 8vh}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap}

  /* Category cards */
  .cards{grid-template-columns:repeat(4,1fr)}
  @media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.cards{grid-template-columns:1fr}}
  .card{
    position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
    background:#0f2018;isolation:isolate
  }
  .card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background:#0f2018;
  isolation:isolate;

  /* Make the whole card square */
  aspect-ratio: 1 / 1;  /* square */
}
.card .photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  transition: transform .25s ease;
}
  .card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08));z-index:0}
  .card:hover .photo{transform:scale(1.06)}
  .card .label{position:relative;z-index:1;padding:18px;font-size:22px;font-weight:800;letter-spacing:.05em;text-align:center}

  /* Panels / notes */
  .panel{background:linear-gradient(180deg, #0d1c15, #0c1914);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
  .list{margin:0;padding-left:18px}
  .note{font-size:.95rem;color:var(--muted)}

  /* COA callout */
  .coa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;background:#0e1c16}

  /* Footer */
  footer{background:var(--bg-2);border-top:1px solid rgba(255,255,255,.07)}
  .footer-grid{display:grid;gap:24px;grid-template-columns:1.2fr 1fr 1fr}
  @media (max-width:860px){.footer-grid{grid-template-columns:1fr}}

  /* Age gate */
  #age{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);z-index:999}
  #age .box{background:#111;color:#fff;padding:26px;border-radius:14px;max-width:520px;text-align:center;box-shadow:var(--shadow)}
  #age .box h3{margin:.2em 0 .4em}
  #age .box .actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
  #age .box button{padding:.8rem 1.2rem;border-radius:999px;border:none;cursor:pointer;font-weight:700}
  #age .box .ok{background:var(--accent);color:#042}
  #age .box .no{background:#333;color:#fff}

  .spacer{height:16px}

  /* Modals */
.modal{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(0,0,0,.72); z-index: 9999;
}
.modal[open], .modal.show{ display: grid; }

.modal__box{
  background: linear-gradient(180deg,#0d1c15,#0c1914);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink); width: min(720px, 92vw);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: 22px 20px 18px;
  outline: none; /* focus handled by tabindex */
}
.modal__content{ margin-top: 8px; max-height: 65vh; overflow:auto; }
.modal__close{
  position: absolute; right: 14px; top: 10px;
  background: transparent; color: var(--ink);
  border: 1px solid rgba(255,255,255,.18);
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  font-size: 20px; line-height: 1;
}
.modal__close:hover{ background: rgba(255,255,255,.08); }

/* Modal Background */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.6);
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 15px;
  border-radius: 8px;
  width: 80%;
  max-width: 700px;
  text-align: center;
}

/* Close Button */
.close {
  color: #333;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: #000;
}.ourgrow .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.ourgrow .gallery img {
  width: 100%;
  height: 250px;   /* fixed height for even sizing */
  object-fit: cover; /* crops but keeps proportions */
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.ourgrow .gallery img:hover {
  transform: scale(1.03);
}