:root {
   --jos-teal: #0f8f86;
   --jos-teal-dark: #0b736c;
   --jos-muted: #f4f7f7;
   --jos-footer: #1a1a1a;
   --text-dark: #1b2b2a;
   --jos-hero: #f2f7f7;
   --jos-soft: #f8f9fb;
   --jos-text: #374151;
   --font-heading: "Bricolage Grotesque", sans-serif;
   --font-body: "Manrope", sans-serif;
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   font-family: var(--font-body);
   color: var(--text-dark);
   overflow-x: hidden;
   font-size: 1rem;
   color: var(--text-dark);
   line-height: 24px;
   font-weight: normal;
}
figure {
   display: block;
   margin: 0;
   width: 100%;
}
img {
   max-width: 100%;
}
a {
   color: var(--jos-teal);
   text-decoration: none;
   outline: none;
}
input,
button {
   outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   line-height: normal;
}
p {
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--text-dark);
   margin: 0 0 15px;
   line-height: 24px;
   font-weight: normal;
}
section {
   scroll-margin-top: 80px;
}
.btn-jos {
   background: var(--jos-teal);
   color: #fff;
   font-size: 0.85rem;
   font-weight: 700;
   border-radius: .45rem;
   padding: .7rem 1.3rem;
}
.btn-jos:hover {
   background: var(--jos-teal-dark);
   color: #fff;
}
.btn-outline-jos {
   border: 1px solid #cfdcdb;
   background: #fff;
   font-size: 0.85rem;
   font-weight: 700;
   border-radius: .45rem;
   padding: .7rem 1.3rem;
}
.form-control {
   font-size: 0.8rem;
}
.navbar .nav-link {
   font-size: .9rem;
   font-weight: 500;
   color: #1b2b2a;
}
.navbar .nav-link:hover {
   color: var(--jos-teal);
}
.navbar .nav-link.active {
   font-weight: 700;
   color: var(--jos-teal);
}
.navbar .nav-item a.btn.btn-jos {
   padding: 0.375rem 0.75rem;
}
.eyebrow {
   color: var(--jos-teal);
   font-size: .75rem;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   padding: 0.3rem 0.7rem;
   background: #daf3f8;
   border-radius: 5px;
}
.lead {
   font-size: 1.05rem;
   font-weight: 300;
}
.hero {
   min-height: 610px;
   position: relative;
   background: url('../images/jos-clinic-hero1.jpg') 60% center/cover;
}
.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, .1) 100%);
}
.hero>.container {
   position: relative;
}
.hero h1 {
   font-size: 2.5rem;
   font-weight: 800;
}
.section-space {
   padding: 6rem 0;
}
.bg-jos-muted {
   background: var(--jos-muted);
}
.card-jos {
   border: 1px solid #e3eaea;
   border-radius: .45rem;
   background: #fff;
   padding: 2rem;
   height: 100%;
   transition: transform .2s, box-shadow .2s;
}
.card-jos:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}
.avatar {
   width: 112px;
   height: 112px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.icon-tile {
   width: 46px;
   height: 46px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: .45rem;
   background: #e2f3f1;
   color: var(--jos-teal);
   font-size: 1.3rem;
}
.milestone {
   position: absolute;
   right: -1rem;
   bottom: 2rem;
   background: var(--jos-teal);
   color: #fff;
   padding: 1.2rem 1.5rem;
   border-radius: .45rem;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}
.milestone strong {
   display: block;
   font-size: 2rem;
   line-height: 1;
}
.check-dot {
   width: 22px;
   height: 22px;
   flex: none;
   border-radius: 50%;
   background: #e2f3f1;
   color: var(--jos-teal);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: .8rem;
}
.date-tile {
   width: 58px;
   height: 58px;
   flex: none;
   border-radius: .45rem;
   background: #e2f3f1;
   color: var(--jos-teal);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: .7rem;
   font-weight: 800;
}
.date-tile b {
   font-size: 1.3rem;
   line-height: 1;
}
.membership-panel {
   background: var(--jos-teal);
   color: #fff;
   border-radius: .45rem;
   padding: 2.5rem;
   height: 100%;
}
.membership-panel .form-control {
   border: 0;
   padding: .8rem 1rem;
}
.btn-light-jos {
   background: #fff;
   color: var(--jos-teal);
   font-weight: 600;
   width: 100%;
   padding: .7rem;
}
.btn-light-jos:hover {
   border: 1px solid #fff;
}
footer {
   background: var(--jos-footer);
   color: #fff;
}
footer a,
.footer-muted {
   color: #9fb3b1;
   text-decoration: none;
}
footer a:hover {
   color: #fff;
}
/* about us */
.page-hero {
   background: var(--jos-hero);
   padding: 5rem 0;
}
.page-hero h1 {
   font-size: 2.4rem;
}
.page-hero p {
   font-size: 1rem;
   max-width: 760px;
   line-height: 1.7;
}
.page-hero.centxt h1,
.page-hero.centxt p {
   text-align: center;
   margin: 0 auto;
}
.section-pad {
   padding: 6rem 0;
}
.about-img {
   border-radius: 12px;
   box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .2);
   width: 100%;
   height: 450px;
   object-fit: cover;
}
.stat-card {
   background: var(--jos-soft);
   border-radius: 12px;
   padding: 1.5rem;
}
.stat-card .num {
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 1.5rem;
   color: var(--jos-teal);
}
.stat-card .label {
   font-size: .9rem;
   margin: 0;
}
.commitment {
   background: var(--jos-soft);
   padding: 6rem 0;
}
.pillar-num {
   flex: 0 0 48px;
   width: 48px;
   height: 48px;
   border-radius: 10px;
   background: var(--jos-teal);
   color: #fff;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-body);
}
/* Filter buttons */
.filter-btn {
   border: 1px solid #e5e7eb;
   background: #fff;
   color: var(--jos-text);
   font-size: .9rem;
   font-weight: 500;
   padding: .5rem 1rem;
   border-radius: 6px;
}
.filter-btn:hover {
   border-color: var(--jos-teal);
   color: var(--jos-teal);
}
.filter-btn.active {
   background: var(--jos-teal);
   border-color: var(--jos-teal);
   color: #fff;
}
/* Event cards */
.event-card {
   border: 1px solid #e9ecef;
   border-radius: 14px;
   overflow: hidden;
   height: 100%;
}
.event-card img {
   height: 192px;
   object-fit: cover;
   width: 100%;
}
.event-card .card-body {
   padding: 2rem;
}
.event-card h4 {
   font-size: 1.3rem;
   line-height: 1.35;
   margin-bottom: .75rem;
}
.event-card .desc {
   font-size: .95rem;
   line-height: 1.7;
}
.event-card .location {
   font-size: .9rem;
}
.event-card .location i,
.event-link i {
   color: var(--jos-teal);
}
.event-link {
   color: var(--jos-teal);
   font-weight: 600;
   font-size: .95rem;
   text-decoration: none;
}
.event-link i {
   font-size: .75rem;
   margin-left: .35rem;
}
.event-link:hover {
   text-decoration: underline;
}
.tag {
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   padding: .3rem .6rem;
   border-radius: 4px;
}
.tag-academic,
.tag-workshop {
   background: #e0f2f1;
   color: var(--jos-teal);
}
.tag-social {
   background: #e0ecff;
   color: #1d4ed8;
}
.event-date {
   font-size: .78rem;
   color: #6b7280;
}
/* Archives */
.archives {
   background: var(--jos-soft);
   padding: 5.5rem 0;
}
.archive-row {
   background: #fff;
   border: 1px solid #eef0f2;
   border-radius: 10px;
   padding: 1.5rem 1.5rem;
}
.archive-row h6 {
   font-family: var(--font-body);
   font-weight: 700;
   color: #111;
   font-size: 1rem;
   margin-bottom: .15rem;
}
.archive-row small {
   color: var(--jos-text);
   font-size: .9rem;
}
.archive-row .date {
   color: #6b7280;
   font-size: .9rem;
}
.archive-row a {
   color: var(--jos-teal);
   font-weight: 500;
   font-size: .9rem;
   text-decoration: none;
}
.archive-row a:hover {
   text-decoration: underline;
}
.members-hero {
   padding: 5rem 0;
}
.members-hero h1 {
   font-size: 2.5rem;
   margin-bottom: 1.5rem;
}
.members-hero .lead-text {
   font-size: 1.15rem;
   line-height: 1.7;
   max-width: 660px;
   margin-bottom: 2rem;
}
.login-card {
   background: var(--jos-soft);
   border: 1px solid #eef0f2;
   border-radius: 14px;
   padding: 2rem;
}
.login-card h5 {
   text-align: center;
   font-size: 1.3rem;
   margin-bottom: 1.5rem;
}
.login-card .form-label {
   font-size: .9rem;
   font-weight: 500;
   color: #111;
   margin-bottom: .4rem;
}
.login-card .form-control {
   padding: .8rem 1rem;
   border-color: #e5e7eb;
}
.login-card .form-control:focus {
   border-color: var(--jos-teal);
   box-shadow: 0 0 0 .2rem rgba(0, 130, 127, .15);
}
.login-card .forgot {
   font-size: .75rem;
   color: #6b7280;
   text-align: center;
   margin: 1rem 0 .75rem;
}
.login-card .reset-link {
   color: var(--jos-teal);
   text-decoration: none;
}
.login-card .reset-link:hover {
   text-decoration: underline;
}
/* Why join */
.why-join {
   background: var(--jos-soft);
   padding: 5.5rem 0;
}
.benefit-card {
   background: #fff;
   border: 1px solid #eef0f2;
   border-radius: 14px;
   padding: 2rem;
   height: 100%;
}
.benefit-icon {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   background: #e0f2f1;
   color: var(--jos-teal);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   margin-bottom: 1.5rem;
}
.benefit-card h4 {
   font-size: 1.3rem;
   margin-bottom: .9rem;
}
.benefit-card p {
   font-size: .95rem;
   line-height: 1.7;
}
.benefit-card ul {
   list-style: none;
   padding: 0;
   margin: 1.5rem 0 0;
   font-size: .92rem;
}
.benefit-card li {
   margin-bottom: .6rem;
}
.benefit-card li i {
   color: var(--jos-teal);
   opacity: .75;
   margin-right: .6rem;
}
.section-title {
   font-weight: 800;
   font-size: 1.5rem;
   margin-bottom: 2rem;
}
.form-label {
   font-size: .85rem;
   font-weight: 500;
   color: var(--jos-text);
   margin-bottom: .45rem;
}
.form-control,
.form-select {
   font-size: .9rem;
   padding: .8rem 1rem;
   border-color: #e5e7eb;
   border-radius: .4rem;
}
.form-control::placeholder {
   color: #9ca3af;
}
.form-control:focus,
.form-select:focus {
   border-color: var(--jos-teal);
   box-shadow: 0 0 0 .2rem rgba(15, 143, 134, .15);
}
.form-select {
   background-color: #efefef;
}
textarea.form-control {
   resize: vertical;
}
.btn-send {
   width: 100%;
}
/* Info cards */
.info-card {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   background: var(--jos-soft);
   border: 1px solid #eef0f3;
   border-radius: .75rem;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
}
.info-icon {
   flex: 0 0 48px;
   width: 48px;
   height: 48px;
   background: #fff;
   border-radius: .5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--jos-teal);
   font-size: 1.05rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.info-card h3 {
   font-size: 1.05rem;
   font-weight: 700;
   margin: 0 0 .15rem;
}
.info-card p {
   font-size: .85rem;
   color: var(--jos-text);
   margin: 0;
   line-height: 20px;
}
/* Map */
.map-card {
   position: relative;
   height: 256px;
   border: 1px solid #eef0f3;
   border-radius: .75rem;
   overflow: hidden;
   background: #fff;
   margin-top: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
}
.map-card iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
.map-pin {
   position: relative;
   z-index: 1;
   width: 42px;
   height: 56px;
   border-radius: 22px;
   background: var(--jos-teal);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   box-shadow: 0 6px 14px rgba(15, 143, 134, .35);
   pointer-events: none;
}
.filter-bar {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 4rem;
}
.filter-btn {
   background: #fff;
   border: 1px solid #e5e7eb;
   color: var(--jos-text);
   font-size: .85rem;
   font-weight: 500;
   padding: .5rem 1.5rem;
   border-radius: 50rem;
   transition: all .2s;
}
.filter-btn:hover {
   border-color: var(--jos-teal);
   color: var(--jos-teal);
}
.filter-btn.active {
   background: var(--jos-teal);
   border-color: var(--jos-teal);
   color: #fff;
}
.filter-btn:focus-visible {
   outline: 2px solid var(--jos-teal);
   outline-offset: 2px;
}
/* Gallery */
.gallery-item {
   display: block;
   border-radius: .75rem;
   overflow: hidden;
   background: #e3ecea;
   aspect-ratio: 4 / 3;
}
.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .4s ease;
}
.gallery-item:hover img {
   transform: scale(1.04);
}
.gallery-col.is-hidden {
   display: none;
}
.load-more {
   background: none;
   border: 0;
   color: var(--text-dark);
   font-weight: 500;
   font-size: 1rem;
   padding: .5rem 1rem;
}
.load-more:hover {
   color: var(--jos-teal);
}