:root {
     --bg: #0c3d28;
     --bg2: #0c3d28;
     --bg3: #161820;
     --gold: #c9a84c;
     --gold-light: #e8c97a;
     --gold-dim: rgba(201, 168, 76, 0.15);
     --gold-line: rgba(201, 168, 76, 0.35);
     --cream: #f0e8d6;
     --muted: #ffffff;
     --text: #ffffff;
     --accent: #3a6b5e;
     --accent2: #2d5248;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     background: var(--bg);
     color: var(--text);
     overflow-x: hidden;
 }

 /* ── NOISE OVERLAY ── */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
     opacity: 0.03;
     pointer-events: none;
     z-index: 9999;
 }

 /* ── HERO ── */
 .hero {
     position: relative;
     /* min-height: 100vh; */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 30px 20px;
     overflow: hidden;
     background: #0c3d28;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(201, 168, 76, 0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 80% 80%, rgba(58, 107, 94, 0.1) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 10% 60%, rgba(201, 168, 76, 0.05) 0%, transparent 60%);
 }

 /* Geometric arc */
 .hero-arc {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 600px;
     height: 600px;
     border: 1px solid var(--gold-line);
     border-radius: 50%;
     opacity: 0.2;
     animation: rotate 60s linear infinite;
 }

 .hero-arc::before {
     content: '';
     position: absolute;
     inset: 20px;
     border: 1px solid var(--gold-line);
     border-radius: 50%;
     opacity: 0.5;
 }

 .hero-arc::after {
     content: '';
     position: absolute;
     inset: 50px;
     border: 1px dashed var(--gold-line);
     border-radius: 50%;
     opacity: 0.3;
 }

 @keyframes rotate {
     to {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 .hero-eyebrow {

     font-size: 11px;
     letter-spacing: 0.35em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 8px;
     opacity: 1;
     animation: fadeUp 1s ease 0.2s forwards;
 }

 .hero h1 {
     font-size: clamp(42px, 7vw, 90px);
     font-weight: 300;
     line-height: 0.8;
     margin-bottom: 8px;
     animation: fadeUp 1s ease 0.4s forwards;
     color: var(--white-color);
     text-transform: capitalize;
     font-family: 'Cormorant Garamond', serif;
 }

 .hero h1 em {
     font-style: italic;
     color: var(--gold-light);
 }

 .hero-subtitle {
     font-style: italic;
     color: var(--muted);
     margin-top: 18px;
     margin-bottom: 20px;
     max-width: 600px;
     opacity: 1;
     animation: fadeUp 1s ease 0.6s forwards;
 }

 .hero-line {
     width: 80px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     margin: 0 auto 20px;
     opacity: 1;
     animation: fadeUp 1s ease 0.8s forwards;
 }

 .hero-intro {
     max-width: 680px;
     font-size: 15px;
     color: var(--text);
     line-height: 2;
     opacity: 1;
     animation: fadeUp 1s ease 1s forwards;
 }

 .scroll-hint {
     position: absolute;
     bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     opacity: 1;
     animation: fadeUp 1s ease 1.4s forwards;
 }

 .scroll-hint span {

     color: var(--muted);
     text-transform: uppercase;
 }

 .scroll-dot {
     width: 1px;
     height: 40px;
     background: linear-gradient(to bottom, var(--gold), transparent);
     animation: pulse 2s ease infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 0.3
     }

     50% {
         opacity: 1
     }
 }

 /* ── SECTION SHARED ── */
 section {
     position: relative;
 }

 .section-inner {
     margin: 0 auto;
     padding: 10px 40px;
 }

 .bothheadingwrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .section-tag {
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 0px;
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .section-tag::before {
     content: '';
     display: block;
     width: 32px;
     height: 1px;
     background: var(--gold);
 }

 .section-title {
     color: var(--cream);
     line-height: 0.9;
     margin-bottom: 8px;
     font-family: 'Cormorant Garamond', serif;
     font-weight: 200;
 }

 .section-title em {
     font-style: italic;
     color: var(--gold-light);
 }

 /* ── INTRO STATEMENT ── */
 .statement-section {
     background: var(--bg);
 }

 .statement-section .section-inner {
     display: grid;
     grid-template-columns: 1fr 3fr;
     gap: 30px;
     align-items: start;
 }

 .statement-left {
     padding-top: 8px;
 }

 .statement-body p {
     color: var(--text);
 }

 .statement-body p:last-child {
     margin-bottom: 0;
 }

 .pull-quote {
     border-left: 2px solid var(--gold);
     padding: 10px 20px;
     margin: 5px 0 10px;
     background: var(--gold-dim);
     border-radius: 0 4px 4px 0;
 }

 .pull-quote p {

     font-style: italic;
     color: var(--cream) !important;
     font-family: 'Cormorant Garamond', serif;
 }

 /* ── COMMUNITY GRID ── */
 .community-section {
     background: var(--bg2);
 }

 .roles-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
     margin-top: 20px;
 }

 section.invitation-section .learning-one_image {
     margin: 0 0 20px 0;
 }

 .role-card {
     background: var(--bg3);
     padding: 14px 26px;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, background 0.3s ease;
     cursor: default;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(201, 169, 78, 0.2);
     border-radius: 20px;
 }

 .role-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, var(--gold), transparent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
 }

 .role-card:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.05);
 }

 .role-card:hover::before {
     transform: scaleX(1);
 }

 .role-number {

     font-size: 56px;
     font-weight: 300;
     color: var(--gold-dim);
     line-height: 1;
     margin-bottom: 12px;
     transition: color 0.3s ease;
 }

 .role-card:hover .role-number {
     color: rgba(201, 168, 76, 0.3);
 }

 .role-title {

     font-size: 13px;
     letter-spacing: 0.15em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 6px;
 }

 .role-desc {
     font-size: 14px;
     line-height: 1.9;
     color: var(--muted);
     transition: color 0.3s ease;
 }

 .role-card:hover .role-desc {
     color: var(--text);
 }

 /* ── BALANCE SECTION ── */
 .balance-section {
     background: var(--bg);
 }

 .balance-section .section-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     align-items: center;
 }

 .learning-one_image {
     margin-left: 0;
 }

 .balance-visual {
     position: relative;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .balance-ring {
     position: absolute;
     border-radius: 50%;
     border: 1px solid var(--gold-line);
 }

 .balance-ring:nth-child(1) {
     width: 360px;
     height: 360px;
     animation: rotate 40s linear infinite;
 }

 .balance-ring:nth-child(2) {
     width: 260px;
     height: 260px;
     animation: rotate 30s linear infinite reverse;
     border-style: dashed;
 }

 .balance-ring:nth-child(3) {
     width: 160px;
     height: 160px;
     animation: rotate 20s linear infinite;
     border-color: rgba(201, 168, 76, 0.5);
 }

 .balance-center {
     position: relative;
     z-index: 2;
     text-align: center;
 }

 .balance-center-text {

     font-size: 13px;
     font-style: italic;
     color: var(--gold);
     letter-spacing: 0.1em;
     line-height: 1.6;
 }

 .balance-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .balance-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .balance-list li::before {
     content: '◆';
     color: var(--gold);
     font-size: 8px;
     margin-top: 7px;
     flex-shrink: 0;
     padding-right: 10px;
 }

 /* ── INVITATION ── */
 .invitation-section {
     background: var(--bg2);
     position: relative;
     overflow: hidden;
 }

 .invitation-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
 }

 .invitation-body {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 80px;
     align-items: start;
 }

 .invite-roles {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 5px;
     margin-top: 12px;
 }

 .invite-role-pill {
     border: 1px solid var(--gold-line);
     padding: 10px 6px;
     font-size: 13px;
     color: var(--muted);
     letter-spacing: 0.05em;
     font-size: 14px;
     text-align: center;
     transition: all 0.3s ease;
     font-family: var(--font-family-Lexend);
 }

 .invite-role-pill:hover {
     border-color: var(--gold);
     color: var(--gold);
     background: var(--gold-dim);
 }

 .invite-opportunities {
     margin-top: 0;
 }

 .invite-opp-title {

     font-size: 11px;
     letter-spacing: 0.3em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 24px;
 }

 .opp-list {
     list-style: none;
     display: flex;
     gap: 14px;
     width: 100%;
     flex-wrap: wrap;
 }

 .opp-list>li:nth-child(3),
 .opp-list>li:nth-child(5),
 .opp-list>li:first-child {
     width: 30%;
 }

 .opp-list>li {
     width: 60%;
 }

 .opp-list li {
     font-size: 14px;
     color: var(--muted);
     padding-left: 20px;
     position: relative;
     transition: color 0.2s ease;
 }

 .opp-list li::before {
     content: '—';
     position: absolute;
     left: 0;
     color: var(--gold);
 }

 .opp-list li:hover {
     color: var(--text);
 }

 .contact-block {
     margin-top: 40px;
     padding: 8px 32px;
     border: 1px solid var(--gold-line);
     background: var(--gold-dim);
 }

 .contact-label {
     font-size: 10px;
     letter-spacing: 0.35em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 1px;
 }

 .contact-email {

     font-size: 20px;
     color: var(--cream);
     font-style: italic;
     font-family: 'Cormorant Garamond', serif;
 }

 /* ── EXPECTATIONS ── */
 .expectations-section {
     background: var(--bg);
 }

 .expectations-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 22px;
     margin-top: 20px;
 }

 .expect-item {
     padding: 10px 20px;
     border-bottom: 1px solid var(--gold-line);
     position: relative;
 }

 .expect-item::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--gold);
     transition: width 0.4s ease;
 }

 .expect-item:hover::after {
     width: 100%;
 }

 .expect-icon {
     font-size: 22px;
     margin-bottom: 16px;
     display: block;
 }

 .expect-text {
     font-size: 14px;
     color: var(--text);
     line-height: 1.8;
 }

 /* ── CURRENT FACULTY ── */
 .faculty-section {
     background: var(--bg2);
 }

 .faculty-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 30px;
 }

 .faculty-card {
     padding: 6px 28px;
     position: relative;
     overflow: hidden;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(201, 169, 78, 0.2);
 }

 .faculty-card:hover {
     border-color: var(--gold-line);
 }

 .faculty-avatar {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: var(--gold-dim);
     border: 1px solid var(--gold-line);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
 }

 .faculty-avatar svg {
     opacity: 0.4;
 }

 .faculty-placeholder {

     font-size: 20px;
     font-style: italic;
     color: var(--cream);
     margin-bottom: 6px;
 }

 .faculty-role {

     font-size: 10px;
     letter-spacing: 0.25em;
     color: var(--gold);
     text-transform: uppercase;
 }

 .faculty-note {
     margin-top: 16px;
     font-size: 12px;
     color: var(--muted);
     font-style: italic;
 }

 /* ── CLOSING ── */
 .closing-section {
     background: var(--bg);
     text-align: center;
     position: relative;
     overflow: hidden;
     padding: 0px 0px 30px;
 }

 .closing-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
 }

 .closing-quote {
     font-size: clamp(24px, 4vw, 46px);
     font-weight: 300;
     font-style: italic;
     color: var(--cream);
     max-width: 800px;
     margin: 0 auto 5px;
     line-height: 1.4;
 }

 .closing-quote em {
     color: var(--gold-light);
     font-style: normal;
 }

 .closing-line {
     width: 60px;
     height: 1px;
     background: var(--gold);
     margin: 10px auto 0;
 }

 .closing-sub {

     font-size: 11px;
     letter-spacing: 0.35em;
     color: var(--muted);
     text-transform: uppercase;
 }



 /* ── ANIMATIONS ── */
 @keyframes fadeUp {
     from {
         opacity: 1;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .reveal {
     opacity: 1;
     transform: unset;
     transition: opacity 0.8s ease, transform 0.8s ease;
     font-family: 'Cormorant Garamond', serif;
 }

 .reveal.visible {
     opacity: 1;
     transform: none;
 }

 p.reveal {
     padding-top: 10px;
 }


 /* ── DIVIDER ── */
 .ornament-divider {
     text-align: center;
     padding: 12px 0;
     color: var(--gold);
     font-size: 18px;
     opacity: 0.4;
     letter-spacing: 0.6em;
 }

 .outline {
     position: absolute;
     right: 0;
     top: 0;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {

     .statement-section .section-inner,
     .balance-section .section-inner,
     .invitation-body {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .balance-ring:nth-child(1) {
         width: 240px;
         height: 240px;
     }

     .balance-ring:nth-child(2) {
         width: 170px;
         height: 170px;
     }

     .balance-ring:nth-child(3) {
         width: 100px;
         height: 100px;
     }

     .section-inner {
         padding: 10px 15px;
     }

     .invite-roles {
         grid-template-columns: repeat(2, 1fr);
     }

     .faculty-grid {
         grid-template-columns: repeat(2, 1fr);
         margin: 20px 0 0 0;
     }

     .hero {
         position: relative;
         min-height: auto;
         padding: 30px 15px;
     }

     .scroll-hint {
         bottom: 6px;
         left: 42%;
     }

     .section-title {
         margin-bottom: 0px;
         padding-bottom: 5px;
     }

     .roles-grid {
         display: grid;
         grid-template-columns: repeat(1, 1fr);
         gap: 15px;
         margin-top: 20px;
     }

     .role-card {
         padding: 30px 15px;
     }

     section.balance-section .balance-visual.reveal {
         order: 2;
     }

     section.balance-section .reveal {
         order: 1;
     }

     section.balance-section .section-inner {
         gap: 20px;
     }

     section.balance-section {
         padding: 30px 0 10px;
     }

     .learning-one_image {
         border-radius: 20px;
         border: 6px solid var(--white-color);
     }

     section.expectations-section h2.section-title.reveal {
         margin-bottom: 30px;
     }

     section.expectations-section .expectations-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
     }

     section.expectations-section .expect-item.reveal:last-child {
         grid-column-start: 1;
         grid-column-end: 3;
     }

     section.faculty-section {
         padding: 0 0 30px;
     }

     .closing-quote {
         margin: 0 auto 10px;
     }

     .closing-line {
         margin: 0 auto 0;
     }

     .opp-list>li:nth-child(3),
     .opp-list>li:nth-child(5),
     .opp-list>li:first-child {
         width: 100%;
     }

     .opp-list>li {
         width: 100%;
     }

     .outline {
         display: none;
     }

     .bothheadingwrap {
         display: flex;
         align-items: self-start;
         flex-direction: column;
         justify-content: space-between;
         gap: 15px;
     }
      .hero-eyebrow {
         font-size: 11px !important;
     }


 }

 @media (max-width: 767px) {
     .faculty-grid {
         grid-template-columns: repeat(1, 1fr);
     }

     .opp-list>li:nth-child(3),
     .opp-list>li:nth-child(5),
     .opp-list>li:first-child {
         width: 100%;
     }

     .opp-list>li {
         width: 100%;
     }

     .outline {
         display: none;
     }

     .hero-eyebrow {
         font-size: 11px;
     }

 }

 section.faculty-section {
     padding: 10px 0 30px 0;
 }

 .btn-1 {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     background: #016b41;
     color: #ffffff;
     text-decoration: none;
     font-family: var(--font-body);
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     padding: 1.1rem 2rem;
     border-radius: 0rem;
     transition: all var(--transition);
     box-shadow: 0 4px 20px rgba(201, 168, 76, 0.25);
     margin-top: 10px;
 }

 .btn-1:hover {
     background: #ffffff;
     color: #016b41;
 }

 .learning-one_image .Join-img {
     position: relative;
     width: 100%;
     display: block;
     height: 250px;
     object-fit: cover;
 }