body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      margin:0;
      padding:0;
      color:#0b2a4a;
      background:#f7f9fc;
      line-height:1.55;
    }

    header{
      background:#fff;
      padding:0.75rem 2rem;
      border-bottom:1px solid #ddd;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .site-title strong{display:block; font-weight:700; line-height:1.1;}
    .site-title span{display:block; font-size:0.9rem; color:#3c5a74;}

    .menu{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      white-space:nowrap;
    }
    .menu a{
      text-decoration:none;
      color:#0b2a4a;
      font-weight:600;
      padding:6px 10px;
      border-radius:8px;
    }
    .menu a:hover{ background:#eef3fb; }
    .menu a[aria-current="page"]{ background:#0b2a4a; color:#fff; }

    main.home{
  max-width:1100px;
  margin:2.2rem auto;
  padding:0 2rem 2.5rem;
}

.home-title{
  font-size:2.4rem;
  line-height:1.15;
  margin:0 0 1rem 0;
}

.home-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:2rem;
  align-items:start;
}

.home-image{
  display:flex;
  flex-direction:column;
  gap:12px;           /* space between photos */
  align-items:flex-end; /* keeps the stack to the right */
}

.home-image .hero-image{
  width:100%;
  max-width:380px;    /* same size as before */
  height:auto;
  border-radius:12px;
  display:block;
}


@media (max-width: 900px){
  .home-grid{ grid-template-columns:1fr; }
  .home-image .hero-image{ margin-left:0; }
}


    h1{
      font-size:2.4rem;
      line-height:1.15;
      margin:0 0 0.75rem 0;
    }
    p{ margin:0 0 1rem 0; color:#3c5a74; }

    /* Footer */
    .footer{
      margin-top: 2.5rem;
      background:#fff;
      border-top:1px solid #ddd;
    }
    .footer-inner{
      max-width:1100px;
      margin:0 auto;
      padding:1.2rem 2rem;
      display:flex;
      gap:16px;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      color:#3c5a74;
      font-size:0.95rem;
    }
    .footer-links{ display:flex; gap:14px; flex-wrap:wrap; }
    .footer a{ color:#0b2a4a; text-decoration:none; font-weight:600; }
    .footer a:hover{ text-decoration:underline; }

/* Social icons in footer */
.footer .social{ display:flex; gap:12px; align-items:center; }

.footer .social a.soc{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
  transition: all .15s ease;
}

.footer .social a.soc:hover{
  transform: translateY(-1px);
  filter: brightness(0.95);
}

.footer .social a.soc svg{
  width:26px;
  height:26px;
  fill:#fff;
}

/* brand colours */
.footer .social a.fb{ background:#1877F2; border-color:#1877F2; }
.footer .social a.yt{ background:#FF0000; border-color:#FF0000; }
.footer .social a.ig{
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}


main{
  max-width:1100px;
  margin:2.2rem auto;
  padding:0 2rem 2.5rem;
  display:block;   /* was grid */
}

.hero-image-below{
  margin: 0.75rem 0 1.25rem 0;
  max-width: 420px;
  opacity: 0.95;
}

.inline-logo{
  display:block;
  max-width:260px;
  width:100%;
  height:auto;
  margin:14px auto 0;          /* centres it */
  padding:10px;                /* space inside border */
  border:2px solid #0b2a4a;     /* navy border */
  border-radius:12px;          /* optional */
  background:#fff;             /* optional: helps it pop */
}


  @media (max-width: 980px){ .top-banner{ padding:0 1rem; } }

  .banner-card{
    position:relative;
    background:#fff;
    border:1px solid #d9e3ef;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    min-height:230px;
  }

  .banner-left{
    width:380px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border-right:1px solid #d9e3ef;
  }

  .banner-left img{
    max-width:100%;
    max-height:170px;
    height:auto;
    width:auto;
    object-fit:contain;
  }

  .banner-right{
    position:relative;
    flex:1;
    min-width:0;
  }

  .banner-right img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: 65% 85%;   /* higher crop (shows more lower area) */
  }

  /* subtle overlay so the join looks deliberate */
  .banner-right::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 30%);
    pointer-events:none;
  }

  /* Mobile: stack logo on top of image */
  @media (max-width: 700px){
    .banner-card{ flex-direction:column; }
    .banner-left{
      width:auto;
      border-right:0;
      border-bottom:1px solid #d9e3ef;
    }
    .banner-card{ min-height:260px; }
    .banner-right{ min-height:170px; }
  }

.rya-logo{
  border:2px solid #0b2a4a;   /* same navy blue as site */
  border-radius:12px;
  background:#fff;
  padding:10px;              /* gives the border some breathing room */
}

.inline-logo.rya-logo{ border:2px solid #0b2a4a !important; }


.rya-badge{
  border:2px solid #0b2a4a;
  border-radius:12px;
  background:#fff;
  padding:10px;
  display:inline-flex;
}
.rya-badge img{
  display:block;
  max-height:170px;   /* keep consistent with your banner-left img sizing */
  width:auto;
  height:auto;
}

.club-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:12px 0 18px;
}

.club-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
}

.club-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}


/* Social icons: style both <a> and <span> */
.footer .social .soc{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
}

/* Instagram coming soon */
.footer .social .ig{
  opacity:0.45;
  cursor:not-allowed;
}

/* Find a club layout */
main{
  max-width:1100px;
  margin:2.2rem auto;
  padding:0 2rem 2.5rem;
}

.club-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:12px 0 18px;
}

@media (max-width: 900px){
  .club-grid{ grid-template-columns:1fr; }
}

.club-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
}

.club-card > div{ padding:12px 12px 14px; }
.club-card h3{ margin:0 0 6px; }
.club-card p{ margin:0 0 8px; color:#3c5a74; }
.club-card .meta a{ font-weight:700; text-decoration:none; color:#0b2a4a; }
.club-card .meta a:hover{ text-decoration:underline; }

.club-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.page-banner{
  width:100%;
  height:220px;          /* try 180–280 */
  object-fit:cover;
  object-position:70% 50%; /* nudges crop right; tweak 60–90% */
  display:block;
  border-bottom:1px solid #ddd;
}

.wave{
  margin:16px 0 0;
  padding:12px;
  background:#f7f9fc;
  border:1px solid #d9e3ef;
  border-radius:12px;
  overflow:auto;
}

.site-title{ text-decoration:none; color:inherit; display:block; }
.site-title:hover{ text-decoration:none; }

.partner-logos{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
  max-width:520px;   /* tweak if you want it bigger/smaller */
}

.partner-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #d9e3ef;
  border-radius:12px;
  padding:12px;
  min-height:110px;
  text-decoration:none;
}

.partner-logo img{
  max-width:100%;
  max-height:72px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.partner-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:2px solid #0b2a4a;
  border-radius:12px;
  padding:12px;
  min-height:110px;
  text-decoration:none;
}


.partner-logo:hover{
  box-shadow:0 4px 10px rgba(11,42,74,0.15);
}

.pay-grid{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.pay-card{
  flex:1 1 0;
  background:#fff;
  border:1px solid #d9e3ef;
  border-radius:12px;
  padding:18px;
}

/* Stack on smaller screens */
@media (max-width: 820px){
  .pay-grid{ flex-direction:column; }
}

.results-years{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.year-chip{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #1a3d66;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:#1a3d66;
  background:#fff;
}

.year-chip:hover{
  background:#f0f6ff;
}

.year-chip[aria-disabled="true"]{
  opacity:0.55;
  pointer-events:none;
}

.results-list{ display:grid; gap:10px; margin-top:14px; }
.results-item{
  display:block;
  padding:12px 14px;
  background:#fff;
  border:1px solid #d9e3ef;
  border-radius:12px;
  text-decoration:none;
  color:#0b2a4a;
}
.results-item:hover{ background:#f7f9fc; }

/* governance page layout */
.grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:1.25rem;
  align-items:start;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  padding:1rem;
}

.photo{
  width:100%;
  border-radius:12px;
  border:1px solid #ddd;
  display:block;
}
.caption{
  margin-top:0.6rem;
  font-size:0.9rem;
  color:#3c5a74;
}


/* Button rows */
.btnrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Buttons (anchors styled as buttons) */
a.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:1px solid #0b2a4a;
  background:#0b2a4a;
  color:#fff;
  line-height:1;
}

a.btn:hover{ opacity:0.9; }

/* Secondary button variant */
a.btn.secondary{
  background:#fff;
  color:#0b2a4a;
}
a.btn.secondary:hover{ background:#eef3fb; }

.year-chip:hover{ background:#eef3fb; }
.year-chip[aria-disabled="true"]{ opacity:0.55; pointer-events:none; }

.entry-qr{
  margin-top:10px;
  display:flex;
  gap:12px;
  align-items:center;
}
.entry-qr img{
  width:92px;
  height:92px;
  border:1px solid #d9e3ef;
  border-radius:10px;
  background:#fff;
  padding:6px;
}

.actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.actions .btnrow{
  margin-top:auto;          /* pushes buttons to the bottom */
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.notice-box{
  border:2px solid #0b2a4a;   /* your dark blue */
  background:#f1f6fb;         /* very pale blue */
  padding:14px 16px;
  border-radius:12px;
  margin:14px 0 18px;
}
.notice-box p{ margin:0 0 10px; }
.notice-box p:last-child{ margin-bottom:0; }