/* Jewelers' Row home page. Palette matched to /membership, /who_we_are and /our-history. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #17121f; color: #d4cde3; font: 20px/1.6 "Open Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
:root { --line: #43385a; --text-2: #d4cde3; --muted: #b3a9c9; --accent: #b9adf7; --btn: #ffffff; --btn-text: #2a2040; --sans: "Open Sans", Arial, sans-serif; --ease: cubic-bezier(.22, .8, .2, 1); }

/* ---------- Site header (same as /who_we_are) ---------- */
.site-header {
  position: relative; z-index: 1000; background: #000;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(16px, 4vw, 52px);
}
.site-logo img { display: block; width: 125px; height: auto; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  color: #fff; text-decoration: none; font: 400 18px/1 var(--sans); padding: 8px 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: #adadad; }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .site-logo img { width: 104px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #000; border-top: 1px solid var(--line); padding: 8px 16px 16px;
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid #1f1a28; font-size: 18px; }
}


/* ---------- Footer (same as /who_we_are) ---------- */
.site-footer {
  margin-top: 56px; padding: 36px 24px 28px; text-align: center; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 14px;
}
.site-footer p { margin: 0 0 10px; }
.foot-social { display: flex; align-items: center; justify-content: center; gap: 12px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); transition: background .2s, border-color .2s;
}
.foot-social a:hover { background: var(--btn); border-color: var(--btn); }
.foot-social a:hover svg { fill: var(--btn-text); }
.foot-social svg { width: 17px; height: 17px; fill: #fff; }


/* ---------- Home page content ---------- */
.jrh{--bg:#17121f;--card:#221b2e;--card2:#2c2340;--line:#43385a;--text:#fff;--muted:#d4cde3;--soft:#b3a9c9;--accent:#b9adf7;
  background:var(--bg);color:var(--text);font-family:"Open Sans",Arial,sans-serif;font-size:20px;line-height:1.6}
.jrh *{box-sizing:border-box}
.jrh h1,.jrh h2,.jrh h3{color:#fff;font-family:inherit;text-transform:none;letter-spacing:normal;margin:0}
.jrh p{margin:0}
.jrh a{color:#fff}
.jrh a:focus-visible{outline:4px solid #fff;outline-offset:4px}
.jrh-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.jrh-hero{background:linear-gradient(rgba(58,44,92,.70),rgba(23,18,31,1)),url("https://jrow.org/wp-content/uploads/2018/04/LwtjkPKJrnpgOWB-800x450-noPad.jpg") center/cover;
  text-align:center;padding:80px 20px 80px}
.jrh .jrh-logo{margin:0 auto 26px;line-height:0}
.jrh-logo img{display:block;width:min(520px,82vw);height:auto;margin:0 auto}
.jrh .jrh-hero h2{font-weight:300;font-size:clamp(22px,2.8vw,30px);line-height:1.4;color:var(--muted);max-width:820px;margin:0 auto}
.jrh-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}
.jrh-btn{display:inline-block;text-decoration:none;border-radius:12px;padding:16px 30px;font-size:21px;font-weight:700;border:3px solid #fff;transition:transform .15s}
.jrh-btn:hover{transform:translateY(-3px)}
.jrh-btn.solid{background:#fff;color:#2a2040!important}
.jrh-btn.ghost{background:transparent;color:#fff}

.jrh .jrh-h2{font-weight:400;line-height:1.25;font-size:clamp(28px,3.6vw,36px);margin:70px 0 24px}
.jrh-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jrh-card{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:3px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,border-color .15s}
.jrh-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.jrh-card img{width:100%;height:200px;object-fit:cover;display:block}
.jrh-card div{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.jrh-card h3{font-size:27px;font-weight:700;line-height:1.25}
.jrh-card p{color:var(--muted);flex:1}
.jrh-card p.tag{flex:none;color:var(--accent);font-weight:600;margin-top:-4px}
.jrh-cards{margin-top:56px}
.jrh-card .go{display:block;text-align:center;background:#fff;color:#2a2040;border-radius:12px;padding:14px;font-size:20px;font-weight:700;margin-top:8px}

.jrh-about{position:relative;margin-top:70px;background:var(--card);border:3px solid var(--line);border-radius:6px;padding:36px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.jrh-about h2{font-weight:400;font-size:clamp(26px,3.2vw,32px);margin-bottom:14px}
.jrh-about p{color:var(--muted)}
.jrh-about p+p{margin-top:14px}
.jrh-facts{list-style:none;margin:0;padding:0 0 0 32px;border-left:2px solid var(--line)}
.jrh-facts li{margin-bottom:18px;line-height:1.4}
.jrh-facts li:last-child{margin-bottom:0}
.jrh-facts span{display:block;font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--soft)}
.jrh-facts strong{font-size:22px;font-weight:600}

.jrh-join{position:relative;margin-top:110px;text-align:center;background:linear-gradient(135deg,#3a2c5c,#2c2340);border:3px solid var(--accent);border-radius:6px;padding:44px 24px}
.jrh-join h2{font-weight:400;font-size:clamp(26px,3.2vw,34px);margin-bottom:10px}
.jrh-join p{color:var(--muted);max-width:640px;margin:0 auto}
.jrh-join .jrh-btns{margin-top:24px}

.jrh-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jrh-link{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--card);border:3px solid var(--line);border-radius:14px;padding:18px 20px;font-size:21px;font-weight:600;transition:border-color .15s}
.jrh-link:hover{border-color:var(--accent)}
.jrh-link svg{flex:none;width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.jrh-social{margin-top:70px;border-top:1px solid var(--line);padding:56px 0 70px;text-align:center}
.jrh-social h2{font-weight:400;font-size:clamp(26px,3.2vw,32px);margin-bottom:8px}
.jrh-social p{color:var(--muted)}

/* Falling 3D diamonds behind the page */
.jrh{position:relative;z-index:0}
.jrh-hero,.jrh-wrap{position:relative;z-index:1}
.jrh-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.jrh-sky canvas{position:sticky;top:0;display:block;width:100%;height:100vh}

/* Cartoon diamond mascots that pop up as you scroll */
.jrh-buddy{position:absolute;z-index:-1;width:110px;top:-86px;transform:translateY(90px);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.jrh-buddy.in{transform:translateY(0)}
.jrh-buddy svg{display:block;width:100%;height:auto}
.jrh-buddy .arm{transform-origin:22px 46px}
.jrh-buddy.in .arm{animation:jrhWave 1.2s ease-in-out .6s 3}
@keyframes jrhWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
.jrh-buddy.l{left:48px}
.jrh-say{position:absolute;top:-6px;left:100%;white-space:nowrap;background:#fff;color:#2a2040;font-size:16px;font-weight:700;padding:6px 14px;border-radius:14px 14px 14px 4px;opacity:0;transform:scale(.6);transform-origin:left bottom;transition:opacity .3s .8s,transform .3s .8s}
.jrh-buddy.in .jrh-say{opacity:1;transform:scale(1)}

/* Cards and sections ease in as you scroll */
.jrh.js .jrh-rise{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.jrh.js .jrh-rise.in{opacity:1;transform:none}


@media (prefers-reduced-motion:reduce){
  .jrh-sky{display:none}
  .jrh-buddy.in .arm{animation:none}
  .jrh.js .jrh-rise{opacity:1;transform:none}
}

@media (max-width:900px){
  .jrh-cards,.jrh-about{grid-template-columns:1fr}
  .jrh-links{grid-template-columns:1fr 1fr}
  .jrh-about{padding:26px}
  .jrh-facts{border-left:0;border-top:2px solid var(--line);padding:24px 0 0}
  .jrh-hero{padding:56px 16px 56px}
  .jrh-wrap{padding:0 16px}
  .jrh-buddy{width:84px;top:-66px}
  .jrh-buddy.l{left:20px}
}
@media (max-width:520px){
  .jrh-links{grid-template-columns:1fr}
  .jrh-btn{width:100%}
}