/*
Theme Name: Galleria Metropolia Child
Theme URI: http://cmsmasters.net/galleria-metropolia-child/
Author: cmsmasters
Author URI: http://cmsmasters.net/
Description: Galleria Metropolia Child Theme
Template: galleria-metropolia
Version: 1.0.0
License:
License URI:
Text Domain: galleria-metropolia-child
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* ============================================================
   OUR STORY PAGE — Mithila Museum Child Theme
   Fonts: Prata (headings), Muli (body) — loaded by parent theme
   Colors follow parent theme defaults
   ============================================================ */

/* ---------- Reset & Base ---------- */
.our-story-page {
    font-family: 'Muli', Arial, sans-serif;
    color: #797979;
    background: #fafafa;
    /* Break out of content_wrap's fixed 980px container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
}

.our-story-page p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 0px;
}

.our-story-page strong { color: #16202f; font-weight: 700; }
.our-story-page em    { font-style: italic; }

/* ---------- Container ---------- */
.story-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* .story-container--narrow {
    max-width: 820px;
} */

/* ---------- Shared Section ---------- */
.story-section {
    padding: 90px 0;
}

.story-section__eyebrow-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 14px;
}

.story-section__eyebrow-label--light {
    color: rgba(255,255,255,0.4);
    text-align: center;
}
#fourth-tradition {
	text-align:left;
}

.story-section__heading {
    font-family: 'Prata', Georgia, serif;
    font-size: 32px;
    line-height: 44px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 28px;
}

.story-section__heading--centered { text-align: center; }

/* ---------- Shared Image ---------- */
.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-img--tall {
    min-height: 480px;
}

/* ============================================================
   HERO
   ============================================================ */
.story-hero {
    background-color: #16202f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
}

/* Dark gradient overlay so text stays legible over the photo */
.story-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(16, 22, 35, 0.88) 0%,
        rgba(16, 22, 35, 0.72) 55%,
        rgba(16, 22, 35, 0.45) 100%
    );
    z-index: 0;
}

/* Subtle diagonal texture on top of overlay */
.story-hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.015) 0px,
        rgba(255,255,255,0.015) 1px,
        transparent 1px,
        transparent 14px
    );
}

.story-hero .story-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.story-hero__inner {
    max-width: 620px;
}

.story-hero__eyebrow {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 22px;
}

.story-hero__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 72px;
    line-height: 1.05;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 32px;
}

.story-hero__rule {
    width: 56px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    margin: 0 0 30px 0;
}

.story-hero__lead {
    font-size: 18px;
    line-height: 31px;
    color: rgba(255,255,255,0.7);
    max-width: 500px;
    margin: 0;
}

/* Animated scroll caret */
.story-hero__scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.story-hero__scroll span {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 1px solid rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    transform: rotate(45deg);
    animation: story-scroll-bounce 1.6s infinite;
}

@keyframes story-scroll-bounce {
    0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.6; }
    50%       { transform: rotate(45deg) translateY(6px); opacity: 1; }
}

/* ============================================================
   OPENING — image left, text right
   ============================================================ */
.story-section--opening {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.story-opening__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.story-opening__image-wrap {
    position: relative;
}

.story-opening__image-wrap .story-img {
    height: 520px;
    object-fit: cover;
}

.story-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: rgba(16,22,35,0.72);
    font-size: 13px;
    line-height: 20px;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.5px;
}

.story-img-caption span {
    color: rgba(255,255,255,0.45);
    font-size: 9px;
    margin-right: 8px;
}

.story-opening__large-text {
    font-size: 18px;
    line-height: 31px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

/* ============================================================
   WHY THIS MUSEUM
   ============================================================ */
.story-section--gap {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
}

/* ============================================================
   RESILIENCE — text left, image right
   ============================================================ */
.story-section--resilience {
    background: #ffffff;
}

.story-resilience__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.story-resilience__image-wrap {
    position: relative;
}

.story-resilience__image-wrap .story-img {
    height: 500px;
    object-fit: cover;
}

.story-resilience__image-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(16,22,35,0.8);
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 14px;
}

/* ============================================================
   TRADITIONS (dark section)
   ============================================================ */
.story-section--traditions {
    background: #16202f;
    color: rgba(255,255,255,0.75);
}

.story-section--traditions .story-section__heading { color: #ffffff; }
.story-section--traditions p                       { color: rgba(255,255,255,0.72); }

.story-traditions__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    font-size: 17px;
    line-height: 30px;
}

.story-traditions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 56px;
}

.story-tradition-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    overflow: hidden;
}

/* Image placeholder inside tradition card */
.story-tradition-item__img-placeholder {
    width: 100%;
    height: 200px;
    background: rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.story-tradition-item__img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.03) 8px,
        rgba(255,255,255,0.03) 9px
    );
}

.story-placeholder__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    position: relative;
    z-index: 1;
}

.story-tradition-item__body {
    padding: 28px 28px 32px;
}

.story-tradition-item__name {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 12px;
}

.story-tradition-item p {
    font-size: 15px;
    line-height: 25px;
    color: rgba(255,255,255,0.58);
    margin: 0;
}

.story-traditions__conclusion {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 30px;
}

.story-traditions__conclusion em {
    color: #ffffff;
    font-style: italic;
}

/* ============================================================
   PULLQUOTE
   ============================================================ */
.story-section--question {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
    padding: 100px 0;
}

.story-question__block {
    position: relative;
    padding-left: 36px;
    border-left: 3px solid #16202f;
}

.story-question__mark {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 90px;
    line-height: 1;
    color: #d8dadc;
    position: absolute;
    top: -24px;
    left: -18px;
    pointer-events: none;
}

.story-question__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 44px;
    color: #16202f;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    padding-left: 52px;
}

/* ============================================================
   OUR ANSWER — two columns each with image + text
   ============================================================ */
.story-section--answer {
    background: #ffffff;
}

.story-answer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.story-answer__img-wrap {
    margin-bottom: 32px;
    overflow: hidden;
}

.story-answer__img-wrap .story-img {
    height: 340px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.story-answer__img-wrap:hover .story-img {
    transform: scale(1.03);
}

/* ============================================================
   PILLARS
   ============================================================ */
.story-section--pillars {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.story-pillars__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 50px;
}

.story-pillar {
    background: #ffffff;
    padding: 44px 28px 40px;
    border: 1px solid #d8dadc;
    text-align: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.story-pillar:hover {
    border-color: #16202f;
    box-shadow: 0 4px 24px rgba(22,32,47,0.08);
}

.story-pillar__img-placeholder {
    width: 60px;
    height: 60px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-pillar__title {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 14px;
}

.story-pillar p {
    font-size: 15px;
    line-height: 24px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .story-hero__title                             { font-size: 54px; }
    .story-opening__grid                           { grid-template-columns: 1fr; gap: 40px; }
    .story-opening__image-wrap .story-img          { height: 380px; }
    .story-resilience__grid                        { grid-template-columns: 1fr; gap: 40px; }
    .story-resilience__image-wrap .story-img       { height: 360px; }
    .story-traditions__grid                        { grid-template-columns: 1fr 1fr; }
    .story-pillars__grid                           { grid-template-columns: 1fr 1fr; }
    .story-answer__grid                            { grid-template-columns: 1fr; gap: 60px; }
    .story-answer__img-wrap .story-img             { height: 280px; }
}

@media (max-width: 768px) {
    .story-section                                 { padding: 64px 0; }
    .story-container                               { padding: 0 24px; }
    .story-hero                                    { padding: 100px 0 90px; min-height: 420px; }
    .story-hero__title                             { font-size: 42px; }
    .story-hero__lead                              { font-size: 16px; }
    .story-traditions__grid                        { grid-template-columns: 1fr; }
    .story-pillars__grid                           { grid-template-columns: 1fr 1fr; }
    .story-question__text                          { font-size: 21px; line-height: 36px; }
    .story-section__heading                        { font-size: 27px; line-height: 38px; }
}

@media (max-width: 540px) {
    .story-hero__title                             { font-size: 32px; }
    .story-hero__lead                              { font-size: 15px; }
    .story-pillars__grid                           { grid-template-columns: 1fr; }
    .story-question__text                          { font-size: 18px; line-height: 30px; }
    .story-tradition-item__img-placeholder         { height: 160px; }
}

/* ============================================================
   MISSION PAGE
   Reuses all .story-* base utilities from Our Story above.
   Only mission-specific overrides and new components below.
   ============================================================ */

/* ---------- Hero override — shift bg position for variety ---------- */
.mission-hero {
    background-position: center 30%;
    min-height: 580px;
}

/* ============================================================
   MISSION STATEMENT — text left, tall image right
   ============================================================ */
.mission-statement {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.mission-statement__grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

.mission-statement__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.mission-statement__image-wrap {
    position: relative;
}

.mission-statement__img {
    height: 540px;
    object-fit: cover;
}

.mission-statement__img-tag {
    position: absolute;
    bottom: 24px;
    left: -20px;
    background: #16202f;
    color: rgba(255,255,255,0.85);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mission-statement__img-tag-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    font-weight: normal;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0;
    line-height: 1;
}

/* ============================================================
   COMMITTED TO — intro header band
   ============================================================ */
.mission-committed {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
    padding: 72px 0 0;
}

.mission-committed__header {
    border-left: 3px solid #16202f;
    padding-left: 28px;
    max-width: 560px;
}

/* ============================================================
   COMMITMENT ROWS — alternating image / text
   ============================================================ */
.mission-commitment {
    padding: 80px 0;
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.mission-commitment--alt {
    background: #ffffff;
}

.mission-commitment__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.mission-commitment__grid--reversed {
    direction: rtl;
}

.mission-commitment__grid--reversed > * {
    direction: ltr;
}

.mission-commitment__content {
    position: relative;
    padding-top: 20px;
}

.mission-commitment__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 64px;
    line-height: 1;
    color: #f0f1f2;
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: none;
    user-select: none;
}

.mission-commitment__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 28px;
    line-height: 40px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 20px;
    position: relative;
}

.mission-commitment__image-wrap {
    position: relative;
    overflow: hidden;
}

.mission-commitment__img {
    height: 480px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mission-commitment__image-wrap:hover .mission-commitment__img {
    transform: scale(1.04);
}

/* ============================================================
   COMMITMENT GRID — remaining items (03–06)
   ============================================================ */
.mission-commitment-grid-section {
    background: #ffffff;
    border-top: 1px solid #d8dadc;
    padding-top: 0;
    padding-bottom: 90px;
}

.mission-commitment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-top: 0;
}

.mission-grid-item {
    background: #fafafa;
    border: 1px solid #d8dadc;
    padding: 44px 40px 44px;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mission-grid-item:hover {
    border-color: #16202f;
    box-shadow: 0 4px 24px rgba(22,32,47,0.07);
}

.mission-grid-item__img-placeholder {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-grid-item__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 48px;
    line-height: 1;
    color: #ebebec;
    position: absolute;
    top: 24px;
    right: 28px;
    user-select: none;
}

.mission-grid-item__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 30px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 14px;
}

.mission-grid-item p {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   VISION BANNER — full bleed photo + dark overlay
   ============================================================ */
.mission-vision-banner {
    background-color: #16202f;
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}

.mission-vision-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(16,22,35,0.92) 0%,
        rgba(16,22,35,0.78) 50%,
        rgba(16,22,35,0.55) 100%
    );
    z-index: 0;
}

.mission-vision-banner .story-container {
    position: relative;
    z-index: 1;
}

.mission-vision-banner__inner {
    max-width: 680px;
}

.mission-vision-banner__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 28px;
}

.mission-vision-banner__text {
    font-size: 16px;
    line-height: 28px;
    color: rgba(255,255,255,0.68);
    margin-bottom: 18px;
}

/* ============================================================
   HOME SECTION — image left, content + trio right
   ============================================================ */
.mission-home {
    background: #ffffff;
    border-top: 1px solid #d8dadc;
}

.mission-home__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.mission-home__image-wrap {
    position: relative;
}

.mission-home__img {
    height: 560px;
    object-fit: cover;
}

.mission-home__content {
    padding-top: 10px;
}

.mission-home__trio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 36px;
    border-top: 1px solid #d8dadc;
}

.mission-home__trio-item {
    padding: 22px 0;
    border-bottom: 1px solid #d8dadc;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 16px;
}

.mission-home__trio-icon {
    font-size: 8px;
    color: #16202f;
}

.mission-home__trio-item h5 {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #16202f;
    margin: 0;
}

.mission-home__trio-item p {
    font-size: 14px;
    line-height: 20px;
    color: #797979;
    margin: 0;
    font-style: italic;
}

/* Closing pullquote — blue override for mission page only */
.mission-page .story-section--question {
    background: #0f3460;
    border-color: transparent;
}

.mission-page .story-section--question .story-question__block {
    border-left-color: rgba(255,255,255,0.3);
}

.mission-page .story-section--question .story-question__mark {
    color: rgba(255,255,255,0.12);
}

.mission-page .story-section--question .story-question__text {
    color: #ffffff;
}

/* ============================================================
   MISSION RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .mission-statement__grid                          { grid-template-columns: 1fr; gap: 48px; }
    .mission-statement__img                           { height: 380px; }
    .mission-statement__img-tag                       { left: 0; }
    .mission-commitment__grid                         { grid-template-columns: 1fr; gap: 40px; }
    .mission-commitment__grid--reversed               { direction: ltr; }
    .mission-commitment__img                          { height: 360px; }
    .mission-home__grid                               { grid-template-columns: 1fr; gap: 48px; }
    .mission-home__img                                { height: 380px; }
    .mission-vision-banner__title                     { font-size: 30px; line-height: 42px; }
}

@media (max-width: 768px) {
    .mission-commitment-grid                          { grid-template-columns: 1fr; }
    .mission-home__trio-item                          { grid-template-columns: auto 1fr; }
    .mission-home__trio-item p                        { grid-column: 2; }
    .mission-vision-banner                            { padding: 80px 0; }
    .mission-commitment__title                        { font-size: 24px; line-height: 34px; }
    .mission-vision-banner__title                     { font-size: 26px; line-height: 36px; }
}

@media (max-width: 540px) {
    .mission-statement__img                           { height: 280px; }
    .mission-grid-item                                { padding: 32px 24px; }
    .mission-commitment__num                          { font-size: 48px; }
}

/* ============================================================
   VISION PAGE
   Reuses all .story-* base utilities. Vision-specific below.
   ============================================================ */

/* ---------- Hero ---------- */
.vision-hero {
    background-position: center 40%;
    min-height: 600px;
}

/* ============================================================
   CORE BELIEF — text left, tall image right
   ============================================================ */
.vision-belief {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.vision-belief__grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 80px;
    align-items: center;
}

.vision-belief__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.vision-belief__image-wrap {
    position: relative;
}

.vision-belief__img {
    height: 560px;
    object-fit: cover;
    display: block;
    width: 100%;
}

.vision-belief__img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 32px 30px;
    background: linear-gradient(to top, rgba(16,22,35,0.82) 0%, transparent 100%);
}

.vision-belief__img-quote {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 26px;
    color: rgba(255,255,255,0.88);
    font-style: italic;
    margin: 0;
}

/* ============================================================
   WHAT WE IMAGINE — intro + 3-column image cards
   ============================================================ */
.vision-imagine {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.vision-imagine__intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
    font-size: 17px;
    line-height: 30px;
    color: #4c4c4c;
}

.vision-imagine__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.vision-imagine-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.vision-imagine-card:hover {
    border-color: #16202f;
    box-shadow: 0 8px 32px rgba(22,32,47,0.1);
}

.vision-imagine-card__img-wrap {
    position: relative;
    overflow: hidden;
}

.vision-imagine-card__img {
    height: 260px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.vision-imagine-card:hover .vision-imagine-card__img {
    transform: scale(1.05);
}

.vision-imagine-card__num {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    font-weight: normal;
    color: #ffffff;
    background: rgba(16,22,35,0.7);
    padding: 4px 10px;
    letter-spacing: 1px;
}

.vision-imagine-card__body {
    padding: 30px 28px 36px;
}

.vision-imagine-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 30px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 12px;
}

.vision-imagine-card__body p {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   LONG-TERM VISION — image left, text + pillars right
   ============================================================ */
.vision-longterm {
    background: #ffffff;
    border-top: 1px solid #d8dadc;
}

.vision-longterm__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.vision-longterm__image-wrap {
    position: relative;
    overflow: hidden;
}

.vision-longterm__img {
    height: 560px;
    object-fit: cover;
    display: block;
    width: 100%;
}

.vision-longterm__tag {
    position: absolute;
    bottom: 24px;
    right: -1px;
    background: #16202f;
    padding: 10px 20px;
}

.vision-longterm__tag span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}

.vision-longterm__pillars {
    margin-top: 40px;
    border-top: 1px solid #d8dadc;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vision-longterm__pillar {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #d8dadc;
}

.vision-longterm__pillar-icon {
    font-size: 8px;
    color: #16202f;
    margin-top: 6px;
    flex-shrink: 0;
}

.vision-longterm__pillar h5 {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 4px;
}

.vision-longterm__pillar p {
    font-size: 14px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   CLOSING BANNER — full bleed photo, centred text
   ============================================================ */
.vision-closing {
    background-color: #16202f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0 120px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.vision-closing__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(16,22,35,0.75) 0%,
        rgba(16,22,35,0.88) 100%
    );
    z-index: 0;
}

.vision-closing .story-container {
    position: relative;
    z-index: 1;
}

.vision-closing__inner {
    max-width: 760px;
    margin: 0 auto;
}

.vision-closing__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 48px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 20px;
}

.vision-closing__subtitle {
    font-family: 'Prata', Georgia, serif;
    font-size: 28px;
    line-height: 40px;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.vision-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    margin: 0 auto 28px;
}

.vision-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

/* ============================================================
   VISION RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .vision-belief__grid                             { grid-template-columns: 1fr; gap: 48px; }
    .vision-belief__img                              { height: 420px; }
    .vision-longterm__grid                           { grid-template-columns: 1fr; gap: 48px; }
    .vision-longterm__img                            { height: 380px; }
    .vision-imagine__grid                            { grid-template-columns: 1fr 1fr; }
    .vision-closing__title                           { font-size: 36px; }
    .vision-closing__subtitle                        { font-size: 22px; line-height: 34px; }
}

@media (max-width: 768px) {
    .vision-imagine__grid                            { grid-template-columns: 1fr; }
    .vision-believe__lead                            { font-size: 17px; }
    .vision-closing__title                           { font-size: 28px; }
    .vision-closing__subtitle                        { font-size: 18px; line-height: 28px; }
    .vision-closing                                  { padding: 90px 0; }
}

@media (max-width: 540px) {
    .vision-belief__img                              { height: 300px; }
    .vision-longterm__img                            { height: 280px; }
    .vision-imagine-card__img                        { height: 200px; }
    .vision-closing__title                           { font-size: 24px; }
}

/* ============================================================
   MUSEUM CONCEPT PAGE
   Reuses all .story-* base utilities. Concept-specific below.
   ============================================================ */

/* ---------- Hero ---------- */
.concept-hero {
    background-position: center 50%;
    min-height: 580px;
}

/* ============================================================
   OPENING — text left, image right
   ============================================================ */
.concept-opening {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.concept-opening__grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 80px;
    align-items: center;
}

.concept-opening__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.concept-opening__image-wrap {
    position: relative;
}

.concept-opening__img {
    height: 560px;
    object-fit: cover;
    display: block;
    width: 100%;
}

.concept-opening__img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 24px 22px;
    background: linear-gradient(to top, rgba(16,22,35,0.85) 0%, transparent 100%);
}

.concept-opening__img-label {
    display: block;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 6px;
}

.concept-opening__img-caption p {
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    line-height: 24px;
    color: rgba(255,255,255,0.82);
    font-style: italic;
    margin: 0;
}

/* ============================================================
   FIVE PILLARS INTRO BAND — dark
   ============================================================ */
.concept-pillars-intro {
    background: #16202f;
    padding: 80px 0;
    text-align: center;
}

.concept-pillars-intro__inner {
    max-width: 680px;
    margin: 0 auto;
}

.concept-pillars-intro__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 48px;
    line-height: 1.1;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 20px;
}

.concept-pillars-intro__text {
    font-size: 17px;
    line-height: 30px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 48px;
}

.concept-pillars-intro__nums {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.concept-pillars-intro__nums span {
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 14px;
}

.concept-pillars-intro__nums span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,0.2);
}

/* ============================================================
   PILLAR ROWS — alternating full-width image + text panels
   ============================================================ */
.concept-pillar {
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.concept-pillar--light  { background: #fafafa; }
.concept-pillar--white  { background: #ffffff; }

.concept-pillar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.concept-pillar__grid--reversed {
    direction: rtl;
}

.concept-pillar__grid--reversed > * {
    direction: ltr;
}

.concept-pillar__image-wrap {
    position: relative;
    overflow: hidden;
}

.concept-pillar__img {
    height: 520px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}

.concept-pillar__image-wrap:hover .concept-pillar__img {
    transform: scale(1.04);
}

.concept-pillar__img-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    background: #16202f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept-pillar__img-badge--right {
    left: auto;
    right: 24px;
}

.concept-pillar__img-badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    font-weight: normal;
}

.concept-pillar__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 48px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 6px;
}

.concept-pillar__rule {
    width: 44px;
    height: 2px;
    background: #16202f;
    margin-bottom: 28px;
}

.concept-pillar__tags {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.concept-pillar__tags li {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 5px 12px;
    transition: background 0.2s, border-color 0.2s;
}

.concept-pillar__tags li:hover {
    background: #16202f;
    color: #ffffff;
    border-color: #16202f;
}

/* ============================================================
   PILLARS 03–05 — dark grid
   ============================================================ */
.concept-pillars-grid-section {
    background: #16202f;
    padding-top: 0;
    padding-bottom: 0;
}

.concept-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.concept-grid-pillar {
    padding: 56px 44px 60px;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
    transition: background 0.3s ease;
}

.concept-grid-pillar:last-child {
    border-right: none;
}

.concept-grid-pillar:hover {
    background: rgba(255,255,255,0.04);
}

.concept-grid-pillar__img-placeholder {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    opacity: 0.7;
}

.concept-grid-pillar__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: rgba(255,255,255,0.06);
    position: absolute;
    top: 32px;
    right: 28px;
    user-select: none;
}

.concept-grid-pillar__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 16px;
}

.concept-grid-pillar p {
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.58);
    margin-bottom: 14px;
}

.concept-grid-pillar p:last-of-type {
    margin-bottom: 0;
}

.concept-grid-pillar__tags {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.concept-grid-pillar__tags li {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 4px 10px;
    transition: color 0.2s, border-color 0.2s;
}

.concept-grid-pillar__tags li:hover {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.35);
}

/* ============================================================
   CLOSING BANNER — full bleed, centered
   ============================================================ */
.concept-closing {
    background-color: #16202f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0 120px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.concept-closing__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 35, 0.87);
    z-index: 0;
}

.concept-closing .story-container {
    position: relative;
    z-index: 1;
}

.concept-closing__inner {
    max-width: 820px;
    margin: 0 auto;
}

.concept-closing__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 52px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 40px;
}

.concept-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 36px;
}

.concept-closing__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.concept-closing__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.concept-closing__sep {
    font-size: 7px !important;
    color: rgba(255,255,255,0.2) !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   CONCEPT RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .concept-opening__grid                           { grid-template-columns: 1fr; gap: 48px; }
    .concept-opening__img                            { height: 420px; }
    .concept-pillar__grid                            { grid-template-columns: 1fr; gap: 48px; }
    .concept-pillar__grid--reversed                  { direction: ltr; }
    .concept-pillar__img                             { height: 380px; }
    .concept-pillars-grid                            { grid-template-columns: 1fr 1fr; }
    .concept-pillars-grid .concept-grid-pillar:nth-child(2) { border-right: none; }
    .concept-pillars-grid .concept-grid-pillar:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .concept-closing__title                          { font-size: 38px; }
    .concept-pillars-intro__title                    { font-size: 36px; }
}

@media (max-width: 768px) {
    .concept-pillars-grid                            { grid-template-columns: 1fr; }
    .concept-grid-pillar                             { border-right: none; border-top: 1px solid rgba(255,255,255,0.08); }
    .concept-grid-pillar:first-child                 { border-top: none; }
    .concept-pillar__title                           { font-size: 28px; line-height: 38px; }
    .concept-closing__title                          { font-size: 28px; }
    .concept-pillars-intro__title                    { font-size: 30px; }
    .concept-pillars-intro__nums                     { gap: 18px; }
}

@media (max-width: 540px) {
    .concept-opening__img                            { height: 300px; }
    .concept-pillar__img                             { height: 280px; }
    .concept-grid-pillar                             { padding: 40px 28px; }
    .concept-closing__title                          { font-size: 24px; }
    .concept-closing                                 { padding: 90px 0; }
}

/* ============================================================
   WHAT WE AIM TO PRESERVE PAGE
   ============================================================ */

/* ---------- Hero ---------- */
.preserve-hero {
    background-position: center 35%;
    min-height: 580px;
}

/* ============================================================
   INTRO — text left, numbered index right
   ============================================================ */
.preserve-intro {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.preserve-intro__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    align-items: start;
}

.preserve-intro__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.preserve-intro__index {
    background: #fafafa;
    border: 1px solid #d8dadc;
    padding: 36px 32px;
    position: sticky;
    top: 100px;
}

.preserve-intro__index-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d8dadc;
}

.preserve-intro__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: preserve-counter;
}

.preserve-intro__list li {
    counter-increment: preserve-counter;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #efefef;
    font-size: 14px;
    line-height: 20px;
    color: #4c4c4c;
}

.preserve-intro__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.preserve-intro__list li::before {
    content: counter(preserve-counter, decimal-leading-zero);
    font-family: 'Prata', Georgia, serif;
    font-size: 12px;
    color: #d8dadc;
    flex-shrink: 0;
}

/* ============================================================
   PRESERVE ITEM ROWS — alternating image / text
   ============================================================ */
.preserve-item {
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.preserve-item--light { background: #fafafa; }
.preserve-item--white { background: #ffffff; }

.preserve-item__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.preserve-item__grid--reversed {
    direction: rtl;
}

.preserve-item__grid--reversed > * {
    direction: ltr;
}

.preserve-item__image-wrap {
    position: relative;
    overflow: hidden;
}

.preserve-item__img {
    height: 520px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}

.preserve-item__image-wrap:hover .preserve-item__img {
    transform: scale(1.04);
}

.preserve-item__badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    background: #16202f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preserve-item__badge--right {
    left: auto;
    right: 0;
}

.preserve-item__badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    color: rgba(255,255,255,0.65);
    font-weight: normal;
}

.preserve-item__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 48px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 6px;
}

.preserve-item__rule {
    width: 44px;
    height: 2px;
    background: #16202f;
    margin-bottom: 28px;
}

.preserve-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.preserve-item__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 5px 12px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.preserve-item__tags span:hover {
    background: #16202f;
    border-color: #16202f;
    color: #ffffff;
}

/* ============================================================
   ITEMS 03–05 — dark 3-column grid
   ============================================================ */
.preserve-dark-grid {
    background: #16202f;
    padding: 80px 0 90px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.preserve-dark-grid__header {
    text-align: center;
    margin-bottom: 56px;
}

.preserve-dark-grid__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 48px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 0;
}

.preserve-dark-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.preserve-dark-card {
    padding: 48px 40px 52px;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
    transition: background 0.3s ease;
}

.preserve-dark-card:last-child {
    border-right: none;
}

.preserve-dark-card:hover {
    background: rgba(255,255,255,0.04);
}

.preserve-dark-card__icon {
    margin-bottom: 24px;
    width: 40px;
    height: 40px;
}

.preserve-dark-card__num {
    position: absolute;
    top: 28px;
    right: 24px;
    font-family: 'Prata', Georgia, serif;
    font-size: 52px;
    line-height: 1;
    color: rgba(255,255,255,0.05);
    user-select: none;
}

.preserve-dark-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 16px;
}

.preserve-dark-card p {
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.58);
    margin-bottom: 12px;
}

.preserve-dark-card p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   ITEMS 06–07 — side-by-side cards with image + text
   ============================================================ */
.preserve-split {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.preserve-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.preserve-split-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.preserve-split-card:hover {
    border-color: #16202f;
    box-shadow: 0 8px 32px rgba(22,32,47,0.09);
}

.preserve-split-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.preserve-split-card__img {
    height: 280px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.preserve-split-card:hover .preserve-split-card__img {
    transform: scale(1.04);
}

.preserve-split-card__num-overlay {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Prata', Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: rgba(255,255,255,0.22);
    user-select: none;
}

.preserve-split-card__body {
    padding: 36px 36px 44px;
}

.preserve-split-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 34px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 16px;
}

.preserve-split-card__body p {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin-bottom: 14px;
}

.preserve-split-card__body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   CLOSING STATEMENT — light section, centred serif quote
   ============================================================ */
.preserve-closing {
    background: #16202f;
    padding: 100px 0 90px;
    text-align: center;
}

.preserve-closing__inner {
    position: relative;
}

.preserve-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 100px;
    line-height: 1;
    color: rgba(255,255,255,0.08);
    display: block;
    margin-bottom: -20px;
    user-select: none;
}

.preserve-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 28px;
    line-height: 46px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 44px;
}

.preserve-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 28px;
}

.preserve-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* ============================================================
   PRESERVE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .preserve-intro__grid                            { grid-template-columns: 1fr; gap: 48px; }
    .preserve-intro__index                           { position: static; }
    .preserve-item__grid                             { grid-template-columns: 1fr; gap: 48px; }
    .preserve-item__grid--reversed                   { direction: ltr; }
    .preserve-item__img                              { height: 380px; }
    .preserve-dark-grid__items                       { grid-template-columns: 1fr 1fr; }
    .preserve-dark-card:nth-child(2)                 { border-right: none; }
    .preserve-dark-card:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .preserve-split__grid                            { grid-template-columns: 1fr; gap: 2px; }
    .preserve-closing__text                          { font-size: 22px; line-height: 36px; }
}

@media (max-width: 768px) {
    .preserve-dark-grid__items                       { grid-template-columns: 1fr; }
    .preserve-dark-card                              { border-right: none; border-top: 1px solid rgba(255,255,255,0.08); }
    .preserve-dark-card:first-child                  { border-top: none; }
    .preserve-item__title                            { font-size: 28px; line-height: 38px; }
    .preserve-closing__text                          { font-size: 18px; line-height: 30px; }
    .preserve-dark-grid__title                       { font-size: 28px; }
}

@media (max-width: 540px) {
    .preserve-item__img                              { height: 280px; }
    .preserve-split-card__img                        { height: 220px; }
    .preserve-dark-card                              { padding: 36px 28px; }
    .preserve-closing__text                          { font-size: 17px; line-height: 28px; }
    .preserve-closing                                { padding: 80px 0; }
}

/* ============================================================
   FUTURE EXHIBITIONS PAGE
   ============================================================ */

/* ---------- Hero ---------- */
.exhibit-hero {
    background-position: center 45%;
    min-height: 600px;
}

/* ============================================================
   INTRO — text left, numbered direction list right
   ============================================================ */
.exhibit-intro {
    background: #ffffff;
    padding: 90px 0;
    border-bottom: 1px solid #d8dadc;
}

.exhibit-intro__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 80px;
    align-items: center;
}

.exhibit-intro__directions {
    border-top: 1px solid #d8dadc;
}

.exhibit-direction-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #d8dadc;
    transition: padding-left 0.2s ease;
}

.exhibit-direction-item:hover {
    padding-left: 6px;
}

.exhibit-direction-item__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    color: #d8dadc;
    flex-shrink: 0;
    width: 28px;
}

.exhibit-direction-item__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #16202f;
}

/* ============================================================
   EXHIBITION TYPE ROWS — alternating full-panel layouts
   ============================================================ */
.exhibit-type {
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.exhibit-type--light { background: #fafafa; }
.exhibit-type--white { background: #ffffff; }

.exhibit-type__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.exhibit-type__grid--reversed {
    direction: rtl;
}

.exhibit-type__grid--reversed > * {
    direction: ltr;
}

.exhibit-type__image-wrap {
    position: relative;
    overflow: hidden;
}

.exhibit-type__img {
    height: 540px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}

.exhibit-type__image-wrap:hover .exhibit-type__img {
    transform: scale(1.04);
}

.exhibit-type__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #16202f;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.exhibit-type__badge--right {
    left: auto;
    right: 0;
}

.exhibit-type__badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    color: rgba(255,255,255,0.35);
    font-weight: normal;
    line-height: 1;
}

.exhibit-type__badge-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.exhibit-type__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 48px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 6px;
}

.exhibit-type__rule {
    width: 44px;
    height: 2px;
    background: #16202f;
    margin-bottom: 28px;
}

/* Exhibition concept list */
.exhibit-concepts {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #d8dadc;
}

.exhibit-concepts__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 16px;
}

.exhibit-concepts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exhibit-concepts__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #efefef;
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    line-height: 22px;
    color: #16202f;
    font-style: italic;
    font-weight: normal;
    transition: padding-left 0.2s ease;
}

.exhibit-concepts__list li:last-child {
    border-bottom: none;
}

.exhibit-concepts__list li:hover {
    padding-left: 4px;
}

.exhibit-concepts__arrow {
    color: #d8dadc;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

.exhibit-concepts__list li:hover .exhibit-concepts__arrow {
    color: #16202f;
    transform: translateX(3px);
}

/* Artist-centered emphasis block */
.exhibit-artist__emphasis {
    margin-top: 28px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: #fafafa;
    border-left: 3px solid #16202f;
}

.exhibit-artist__emphasis-icon {
    font-size: 8px;
    color: #16202f;
    margin-top: 6px;
    flex-shrink: 0;
}

.exhibit-artist__emphasis p {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    line-height: 26px;
    color: #16202f;
    font-style: italic;
    margin: 0;
}

/* ============================================================
   TYPE 03 — THEMATIC (dark full-width)
   ============================================================ */
.exhibit-thematic {
    background: #16202f;
    padding: 90px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.exhibit-thematic__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 60px;
}

.exhibit-thematic__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 52px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 18px;
}

.exhibit-thematic__intro {
    font-size: 16px;
    line-height: 28px;
    color: rgba(255,255,255,0.62);
    margin: 0;
}

.exhibit-thematic__themes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.exhibit-theme-tag {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0 0 28px;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.exhibit-theme-tag:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}

.exhibit-theme-tag__img-placeholder {
    width: 100%;
    height: 120px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 20px;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255,255,255,0.02) 6px,
        rgba(255,255,255,0.02) 7px
    );
}

.exhibit-theme-tag span {
    display: block;
    padding: 0 20px;
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    line-height: 24px;
    color: rgba(255,255,255,0.78);
    font-weight: normal;
}

/* ============================================================
   TYPE 04 — COMPARATIVE DIALOGUE CARDS
   ============================================================ */
.exhibit-comparative {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.exhibit-comparative__header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 48px;
}

.exhibit-comparative__intro {
    font-size: 16px;
    line-height: 28px;
    color: #797979;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid #d8dadc;
}

.exhibit-comparative__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.exhibit-dialogue-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.exhibit-dialogue-card:hover {
    border-color: #16202f;
    box-shadow: 0 6px 28px rgba(22,32,47,0.09);
}

.exhibit-dialogue-card__img-placeholder {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.exhibit-dialogue-card__img-placeholder--dark {
    background: #16202f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.exhibit-dialogue-placeholder__icon {
    font-size: 20px;
    color: rgba(255,255,255,0.2);
}

.exhibit-dialogue-card__img {
    height: 200px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.exhibit-dialogue-card:hover .exhibit-dialogue-card__img {
    transform: scale(1.06);
}

.exhibit-dialogue-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.35);
    transition: background 0.3s ease;
}

.exhibit-dialogue-card:hover .exhibit-dialogue-card__overlay {
    background: rgba(16,22,35,0.15);
}

.exhibit-dialogue-card__region {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(16,22,35,0.55);
    padding: 4px 10px;
    z-index: 1;
}

.exhibit-dialogue-card__body {
    padding: 24px 22px 28px;
}

.exhibit-dialogue-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 26px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 8px;
}

.exhibit-dialogue-card__body p {
    font-size: 13px;
    line-height: 20px;
    color: #797979;
    margin: 0;
    font-style: italic;
}

/* ============================================================
   TYPE 05 — CONTEMPORARY & EXPERIMENTAL (full-bleed photo)
   ============================================================ */
.exhibit-experimental {
    background-color: #16202f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.exhibit-experimental__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(16,22,35,0.95) 0%,
        rgba(16,22,35,0.82) 60%,
        rgba(16,22,35,0.55) 100%
    );
    z-index: 0;
}

.exhibit-experimental .story-container {
    position: relative;
    z-index: 1;
}

.exhibit-experimental__inner {
    max-width: 800px;
}

.exhibit-experimental__header {
    margin-bottom: 48px;
}

.exhibit-experimental__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 52px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 18px;
}

.exhibit-experimental__intro {
    font-size: 16px;
    line-height: 28px;
    color: rgba(255,255,255,0.62);
    margin: 0;
    max-width: 560px;
}

.exhibit-experimental__formats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exhibit-format-pill {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 18px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: default;
}

.exhibit-format-pill:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
}

/* ============================================================
   CLOSING STATEMENT
   ============================================================ */
.exhibit-closing {
    background: #16202f;
    padding: 100px 0 90px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.exhibit-closing__inner {
    position: relative;
}

.exhibit-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 100px;
    line-height: 1;
    color: rgba(255,255,255,0.06);
    display: block;
    margin-bottom: -20px;
    user-select: none;
}

.exhibit-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 30px;
    line-height: 48px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 44px;
}

.exhibit-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 28px;
}

.exhibit-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin: 0;
}

/* ============================================================
   EXHIBITIONS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .exhibit-intro__grid                            { grid-template-columns: 1fr; gap: 48px; }
    .exhibit-type__grid                             { grid-template-columns: 1fr; gap: 48px; }
    .exhibit-type__grid--reversed                   { direction: ltr; }
    .exhibit-type__img                              { height: 380px; }
    .exhibit-thematic__themes                       { grid-template-columns: repeat(2, 1fr); }
    .exhibit-comparative__header-grid               { grid-template-columns: 1fr; gap: 24px; }
    .exhibit-comparative__grid                      { grid-template-columns: 1fr 1fr; }
    .exhibit-experimental__title                    { font-size: 32px; line-height: 42px; }
    .exhibit-closing__text                          { font-size: 24px; line-height: 38px; }
}

@media (max-width: 768px) {
    .exhibit-thematic__themes                       { grid-template-columns: 1fr 1fr; }
    .exhibit-comparative__grid                      { grid-template-columns: 1fr 1fr; }
    .exhibit-type__title                            { font-size: 28px; line-height: 38px; }
    .exhibit-thematic__title                        { font-size: 30px; line-height: 40px; }
    .exhibit-experimental__title                    { font-size: 26px; line-height: 36px; }
    .exhibit-closing__text                          { font-size: 20px; line-height: 32px; }
}

@media (max-width: 540px) {
    .exhibit-type__img                              { height: 280px; }
    .exhibit-thematic__themes                       { grid-template-columns: 1fr; }
    .exhibit-comparative__grid                      { grid-template-columns: 1fr; }
    .exhibit-theme-tag__img-placeholder             { height: 80px; }
    .exhibit-dialogue-card__img-placeholder         { height: 160px; }
    .exhibit-dialogue-card__img                     { height: 160px; }
    .exhibit-closing__text                          { font-size: 18px; line-height: 28px; }
    .exhibit-closing                                { padding: 80px 0; }
}

/* ============================================================
   WORKSHOPS PAGE
   ============================================================ */

/* ---------- Hero ---------- */
.workshop-hero {
    background-position: center 40%;
    min-height: 580px;
}

/* ============================================================
   INTRO — text left, audiences + modes right
   ============================================================ */
.workshop-intro {
    background: #ffffff;
    border-bottom: 1px solid #d8dadc;
}

.workshop-intro__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 80px;
    align-items: start;
}

.workshop-intro__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.workshop-intro__audiences {
    padding: 36px 32px;
    background: #fafafa;
    border: 1px solid #d8dadc;
    position: sticky;
    top: 100px;
}

.workshop-intro__audiences-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d8dadc;
}

.workshop-audience-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.workshop-audience-pill {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 5px 12px;
    transition: background 0.2s, color 0.2s;
}

.workshop-audience-pill:hover {
    background: #16202f;
    color: #ffffff;
    border-color: #16202f;
}

.workshop-intro__modes {
    border-top: 1px solid #d8dadc;
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.workshop-mode {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workshop-mode__icon {
    font-size: 7px;
    color: #16202f;
    flex-shrink: 0;
}

.workshop-mode span:last-child {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4c4c4c;
}

/* ============================================================
   WORKSHOP TYPE ROWS — alternating split panels
   ============================================================ */
.workshop-type {
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.workshop-type--light { background: #fafafa; }
.workshop-type--white { background: #ffffff; }

.workshop-type__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.workshop-type__grid--reversed {
    direction: rtl;
}

.workshop-type__grid--reversed > * {
    direction: ltr;
}

.workshop-type__image-wrap {
    position: relative;
    overflow: hidden;
}

.workshop-type__img {
    height: 520px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}

.workshop-type__image-wrap:hover .workshop-type__img {
    transform: scale(1.04);
}

.workshop-type__num-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #16202f;
    color: rgba(255,255,255,0.5);
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    font-weight: normal;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workshop-type__num-badge--right {
    left: auto;
    right: 0;
}

.workshop-type__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 6px;
}

.workshop-type__rule {
    width: 44px;
    height: 2px;
    background: #16202f;
    margin-bottom: 28px;
}

/* Focus items list */
.workshop-type__focus-items {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #d8dadc;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.workshop-focus-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
    font-size: 14px;
    color: #4c4c4c;
    transition: padding-left 0.2s ease;
}

.workshop-focus-item:last-child { border-bottom: none; }

.workshop-focus-item:hover { padding-left: 4px; }

.workshop-focus-item__dot {
    width: 5px;
    height: 5px;
    background: #16202f;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Symbol themes chips */
.workshop-symbol-themes {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workshop-symbol-themes span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 6px 14px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.workshop-symbol-themes span:hover {
    background: #16202f;
    color: #ffffff;
    border-color: #16202f;
}

/* ============================================================
   TYPES 03 & 04 — Side-by-side image cards
   ============================================================ */
.workshop-card-pair {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.workshop-card-pair__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.workshop-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.workshop-card:hover {
    border-color: #16202f;
    box-shadow: 0 8px 32px rgba(22,32,47,0.09);
}

.workshop-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.workshop-card__img {
    height: 300px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.workshop-card:hover .workshop-card__img {
    transform: scale(1.05);
}

.workshop-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.2);
    transition: background 0.3s ease;
}

.workshop-card:hover .workshop-card__overlay {
    background: rgba(16,22,35,0.08);
}

.workshop-card__num {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Prata', Georgia, serif;
    font-size: 52px;
    line-height: 1;
    color: rgba(255,255,255,0.25);
    user-select: none;
}

.workshop-card__body {
    padding: 36px 36px 44px;
}

.workshop-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 34px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 16px;
}

.workshop-card__body p {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin-bottom: 14px;
}

.workshop-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.workshop-card__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 4px 10px;
}

.workshop-card__emphasis {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 20px;
    background: #fafafa;
    border-left: 3px solid #16202f;
}

.workshop-card__emphasis-icon {
    font-size: 7px;
    color: #16202f;
    margin-top: 5px;
    flex-shrink: 0;
}

.workshop-card__emphasis p {
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    line-height: 24px;
    color: #16202f;
    font-style: italic;
    margin: 0 !important;
}

/* ============================================================
   TYPE 05 — COMPARATIVE AAPI (dark)
   ============================================================ */
.workshop-aapi {
    background: #16202f;
    padding: 90px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.workshop-aapi__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
    align-items: center;
}

.workshop-aapi__content p {
    color: rgba(255,255,255,0.68);
}

.workshop-aapi__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 48px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 24px;
}

.workshop-aapi__traditions {
    margin-top: 36px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.workshop-aapi-tradition {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.workshop-aapi-tradition:last-child { border-bottom: none; }

.workshop-aapi-tradition__num {
    font-size: 7px;
    color: rgba(255,255,255,0.3);
    margin-top: 6px;
    flex-shrink: 0;
}

.workshop-aapi-tradition h5 {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 4px;
}

.workshop-aapi-tradition p {
    font-size: 14px;
    line-height: 22px;
    color: rgba(255,255,255,0.55) !important;
    margin: 0;
}

.workshop-aapi__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.workshop-aapi__placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.workshop-aapi__placeholder-label {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.3);
    font-style: italic;
    margin: 0;
}

/* ============================================================
   TYPE 06 — YOUTH & INNOVATION LABS (light)
   ============================================================ */
.workshop-youth {
    background: #fafafa;
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.workshop-youth__header {
    max-width: 720px;
    margin-bottom: 56px;
}

.workshop-youth__formats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.workshop-youth-format {
    background: #ffffff;
    border: 1px solid #d8dadc;
    padding: 36px 28px 40px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.workshop-youth-format:hover {
    border-color: #16202f;
    box-shadow: 0 6px 24px rgba(22,32,47,0.08);
    transform: translateY(-3px);
}

.workshop-youth-format__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 20px;
}

.workshop-youth-format__title {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 10px;
}

.workshop-youth-format p {
    font-size: 14px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   CLOSING BANNER
   ============================================================ */
.workshop-closing {
    background-color: #16202f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0 110px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.workshop-closing__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.88);
    z-index: 0;
}

.workshop-closing .story-container {
    position: relative;
    z-index: 1;
}

.workshop-closing__inner {
    max-width: 760px;
    margin: 0 auto;
}

.workshop-closing__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 52px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 40px;
}

.workshop-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 28px;
}

.workshop-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin: 0;
}

/* ============================================================
   WORKSHOPS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .workshop-intro__grid                           { grid-template-columns: 1fr; gap: 48px; }
    .workshop-intro__audiences                      { position: static; }
    .workshop-type__grid                            { grid-template-columns: 1fr; gap: 48px; }
    .workshop-type__grid--reversed                  { direction: ltr; }
    .workshop-type__img                             { height: 380px; }
    .workshop-card-pair__grid                       { grid-template-columns: 1fr; gap: 2px; }
    .workshop-aapi__grid                            { grid-template-columns: 1fr; gap: 48px; }
    .workshop-aapi__placeholder                     { display: none; }
    .workshop-youth__formats                        { grid-template-columns: repeat(2, 1fr); }
    .workshop-closing__title                        { font-size: 38px; }
}

@media (max-width: 768px) {
    .workshop-intro__modes                          { grid-template-columns: 1fr 1fr; }
    .workshop-type__title                           { font-size: 26px; line-height: 36px; }
    .workshop-youth__formats                        { grid-template-columns: repeat(2, 1fr); }
    .workshop-aapi__title                           { font-size: 28px; line-height: 38px; }
    .workshop-closing__title                        { font-size: 28px; line-height: 38px; }
}

@media (max-width: 540px) {
    .workshop-type__img                             { height: 280px; }
    .workshop-card__img                             { height: 220px; }
    .workshop-youth__formats                        { grid-template-columns: 1fr; }
    .workshop-youth-format                          { padding: 28px 22px; }
    .workshop-closing__title                        { font-size: 24px; }
    .workshop-closing                               { padding: 90px 0; }
}

/* ============================================================
   PROJECTS PAGE
   ============================================================ */

/* ---------- Hero ---------- */
.projects-hero {
    background-position: center 40%;
    min-height: 560px;
}

/* ============================================================
   INTRO — text left, numbered index right
   ============================================================ */
.projects-intro {
    background: #ffffff;
    border-bottom: 1px solid #d8dadc;
}

.projects-intro__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    align-items: start;
}

.projects-intro__lead {
    font-size: 19px;
    line-height: 32px;
    color: #4c4c4c;
    margin-bottom: 20px;
}

.projects-intro__index {
    background: #fafafa;
    border: 1px solid #d8dadc;
    padding: 32px 28px;
    position: sticky;
    top: 100px;
}

.projects-intro__index-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d8dadc;
}

.projects-intro__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.projects-intro__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #efefef;
    font-size: 14px;
    color: #4c4c4c;
    transition: padding-left 0.2s ease;
}

.projects-intro__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.projects-intro__list li:hover { padding-left: 4px; }

.projects-intro__list-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 12px;
    color: #d8dadc;
    flex-shrink: 0;
    min-width: 24px;
}

/* ============================================================
   FEATURED PROJECT ROWS — alternating split panels
   ============================================================ */
.projects-featured {
    padding: 90px 0;
    border-top: 1px solid #d8dadc;
}

.projects-featured--light { background: #fafafa; }
.projects-featured--white { background: #ffffff; }

.projects-featured__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.projects-featured__grid--reversed {
    direction: rtl;
}

.projects-featured__grid--reversed > * {
    direction: ltr;
}

.projects-featured__image-wrap {
    position: relative;
    overflow: hidden;
}

.projects-featured__img {
    height: 540px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}

.projects-featured__image-wrap:hover .projects-featured__img {
    transform: scale(1.04);
}

.projects-featured__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #16202f;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.projects-featured__badge--right {
    left: auto;
    right: 0;
}

.projects-featured__badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    color: rgba(255,255,255,0.3);
    font-weight: normal;
    line-height: 1;
}

.projects-featured__badge-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.projects-featured__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 6px;
}

.projects-featured__rule {
    width: 44px;
    height: 2px;
    background: #16202f;
    margin-bottom: 28px;
}

/* Archive output items */
.projects-featured__outputs {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #d8dadc;
}

.projects-featured__outputs-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #787b80;
    margin-bottom: 14px;
}

.projects-featured__output-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.projects-output-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #efefef;
    font-size: 14px;
    color: #4c4c4c;
    transition: padding-left 0.2s ease;
}

.projects-output-item:last-child { border-bottom: none; }
.projects-output-item:hover      { padding-left: 4px; }

.projects-output-item__dot {
    width: 5px;
    height: 5px;
    background: #16202f;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Artist support 2x2 mini-grid */
.projects-featured__support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 32px;
}

.projects-support-item {
    background: #fafafa;
    border: 1px solid #d8dadc;
    padding: 22px 18px 24px;
    transition: border-color 0.2s ease;
}

.projects-support-item:hover {
    border-color: #16202f;
}

.projects-support-item__icon {
    display: block;
    font-size: 10px;
    color: #16202f;
    margin-bottom: 10px;
}

.projects-support-item h5 {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 6px;
}

.projects-support-item p {
    font-size: 13px;
    line-height: 20px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   PROJECTS 03–05 — DARK 3-COLUMN GRID
   ============================================================ */
.projects-dark-grid {
    background: #16202f;
    padding: 90px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.projects-dark-grid__header {
    text-align: center;
    margin-bottom: 60px;
}

.projects-dark-grid__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 50px;
    color: #ffffff;
    font-weight: normal;
    margin: 0;
}

.projects-dark-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.projects-dark-card {
    padding: 48px 40px 52px;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
    transition: background 0.3s ease;
}

.projects-dark-card:last-child { border-right: none; }
.projects-dark-card:hover      { background: rgba(255,255,255,0.04); }

.projects-dark-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 24px;
}

.projects-dark-card__num {
    position: absolute;
    top: 28px;
    right: 24px;
    font-family: 'Prata', Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: rgba(255,255,255,0.05);
    user-select: none;
}

.projects-dark-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 16px;
}

.projects-dark-card p {
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.58);
    margin-bottom: 12px;
}

.projects-dark-card p:last-of-type { margin-bottom: 0; }

.projects-dark-card__tags {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.projects-dark-card__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 4px 10px;
    transition: color 0.2s, border-color 0.2s;
}

.projects-dark-card__tags span:hover {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.35);
}

/* ============================================================
   PROJECTS 06 & 07 — SPLIT IMAGE CARDS
   ============================================================ */
.projects-split {
    background: #fafafa;
    border-top: 1px solid #d8dadc;
}

.projects-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.projects-split-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.projects-split-card:hover {
    border-color: #16202f;
    box-shadow: 0 8px 32px rgba(22,32,47,0.09);
}

.projects-split-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.projects-split-card__img {
    height: 300px;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.projects-split-card:hover .projects-split-card__img {
    transform: scale(1.05);
}

.projects-split-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.2);
    transition: background 0.3s ease;
}

.projects-split-card:hover .projects-split-card__overlay {
    background: rgba(16,22,35,0.06);
}

.projects-split-card__num {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Prata', Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: rgba(255,255,255,0.22);
    user-select: none;
}

.projects-split-card__body {
    padding: 36px 36px 44px;
}

.projects-split-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 34px;
    color: #16202f;
    font-weight: normal;
    margin-bottom: 16px;
}

.projects-split-card__body p {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin-bottom: 12px;
}

.projects-split-card__body p:last-of-type { margin-bottom: 0; }

.projects-split-card__themes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.projects-split-card__themes span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 4px 10px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.projects-split-card__themes span:hover {
    background: #16202f;
    color: #ffffff;
    border-color: #16202f;
}

/* ============================================================
   CLOSING — dark, centred quote + project tags row
   ============================================================ */
.projects-closing {
    background: #16202f;
    padding: 100px 0 90px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.projects-closing__inner { position: relative; }

.projects-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 100px;
    line-height: 1;
    color: rgba(255,255,255,0.06);
    display: block;
    margin-bottom: -18px;
    user-select: none;
}

.projects-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 44px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 44px;
}

.projects-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 32px;
}

.projects-closing__areas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.projects-closing__areas span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.projects-closing__sep {
    font-size: 6px !important;
    color: rgba(255,255,255,0.15) !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   PROJECTS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .projects-intro__grid                           { grid-template-columns: 1fr; gap: 48px; }
    .projects-intro__index                          { position: static; }
    .projects-featured__grid                        { grid-template-columns: 1fr; gap: 48px; }
    .projects-featured__grid--reversed              { direction: ltr; }
    .projects-featured__img                         { height: 380px; }
    .projects-dark-grid__items                      { grid-template-columns: 1fr 1fr; }
    .projects-dark-card:nth-child(2)                { border-right: none; }
    .projects-dark-card:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .projects-split__grid                           { grid-template-columns: 1fr; gap: 2px; }
    .projects-closing__text                         { font-size: 21px; line-height: 36px; }
    .projects-dark-grid__title                      { font-size: 30px; }
}

@media (max-width: 768px) {
    .projects-dark-grid__items                      { grid-template-columns: 1fr; }
    .projects-dark-card                             { border-right: none; border-top: 1px solid rgba(255,255,255,0.08); }
    .projects-dark-card:first-child                 { border-top: none; }
    .projects-featured__title                       { font-size: 26px; line-height: 36px; }
    .projects-featured__support-grid                { grid-template-columns: 1fr; }
    .projects-closing__text                         { font-size: 18px; line-height: 30px; }
    .projects-closing__areas                        { gap: 8px; }
}

@media (max-width: 540px) {
    .projects-featured__img                         { height: 280px; }
    .projects-split-card__img                       { height: 220px; }
    .projects-dark-card                             { padding: 36px 28px; }
    .projects-closing__text                         { font-size: 16px; line-height: 28px; }
    .projects-closing                               { padding: 80px 0; }
}

/* ============================================================
   PROJECTS PAGE (NEW .pj-* CLASSES)
   ============================================================ */

/* ---- Intro section ---- */
.pj-intro {
    padding: 96px 0 80px;
    background: #fafafa;
}

.pj-intro__wrap {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.pj-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.pj-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.pj-intro__index {
    flex: 0 0 300px;
    min-width: 0;
    padding-top: 8px;
}

.pj-intro__index-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 20px;
}

.pj-intro__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #d8dadc;
}

.pj-intro__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #d8dadc;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #16202f;
}

.pj-intro__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: #797979;
    flex-shrink: 0;
    width: 22px;
}

/* ---- Row sections (alternating image/text) ---- */
.pj-row {
    padding: 96px 0;
}

.pj-row--light { background: #fafafa; }
.pj-row--white { background: #ffffff; }

.pj-row__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.pj-row__img-col,
.pj-row__text-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.pj-row__img-wrap {
    position: relative;
}

.pj-row__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.pj-row__badge {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #16202f;
    padding: 16px 20px;
    gap: 4px;
}

.pj-row__badge--bl { bottom: 0; left: 0; }
.pj-row__badge--br { bottom: 0; right: 0; }

.pj-row__badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    color: #ffffff;
    line-height: 1;
}

.pj-row__badge-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.pj-row__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    margin-bottom: 20px;
}

.pj-row__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

/* Output list (Project 01 — Archive) */
.pj-output-list {
    margin-top: 28px;
    border-top: 1px solid #d8dadc;
    padding-top: 24px;
}

.pj-output-list__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 14px;
}

.pj-output-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pj-output-list ul li {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #797979;
    padding: 6px 14px;
    border: 1px solid #d8dadc;
}

/* Support grid (Project 02 — Artists) */
.pj-support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.pj-support-item {
    padding: 20px;
    background: #fafafa;
    border-left: 2px solid #d8dadc;
}

.pj-support-item__dot {
    font-size: 8px;
    color: #797979;
    display: block;
    margin-bottom: 8px;
}

.pj-support-item h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    color: #16202f;
    margin: 0 0 6px;
}

.pj-support-item p {
    font-size: 13px;
    line-height: 20px;
    color: #797979;
    margin: 0;
}

/* ---- Dark section (Projects 03–05) ---- */
.pj-dark {
    background: #16202f;
    padding: 96px 0;
}

.pj-dark__header {
    text-align: center;
    margin-bottom: 64px;
}

.pj-dark__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 0;
}

.pj-dark__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.pj-dark-card {
    padding: 48px 40px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pj-dark-card:last-child {
    border-right: none;
}

.pj-dark-card__icon {
    margin-bottom: 24px;
    opacity: 0.7;
}

.pj-dark-card__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.pj-dark-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
    margin-bottom: 16px;
}

.pj-dark-card p {
    font-size: 14px;
    line-height: 24px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
}

.pj-dark-card p:last-of-type { margin-bottom: 20px; }

.pj-dark-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.pj-dark-card__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Tag rows (Projects 06–07) */
.pj-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.pj-tag-row span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    padding: 7px 14px;
    border: 1px solid #d8dadc;
}

/* ---- Closing section ---- */
.pj-closing {
    background: #16202f;
    padding: 100px 0;
    text-align: center;
}

.pj-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.12);
    margin-bottom: 32px;
}

.pj-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.pj-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 32px;
}

.pj-closing__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pj-closing__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.pj-sep {
    font-size: 6px !important;
    color: rgba(255,255,255,0.15) !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   PROJECTS (.pj-*) RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pj-intro__wrap          { flex-direction: column; gap: 48px; }
    .pj-intro__index         { flex: none; width: 100%; }
    .pj-row__wrap            { flex-direction: column; gap: 48px; }
    .pj-row__img-col,
    .pj-row__text-col        { flex: none; width: 100%; }
    .pj-row__img             { height: 380px; }
    .pj-dark__grid           { grid-template-columns: 1fr 1fr; }
    .pj-dark-card:nth-child(2) { border-right: none; }
    .pj-dark-card:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
    }
    .pj-row__title           { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .pj-dark__grid           { grid-template-columns: 1fr; }
    .pj-dark-card            { border-right: none; }
    .pj-support-grid         { grid-template-columns: 1fr; }
    .pj-closing__text        { font-size: 20px; line-height: 34px; }
    .pj-dark__title          { font-size: 28px; line-height: 40px; }
    .pj-row                  { padding: 64px 0; }
    .pj-dark                 { padding: 64px 0; }
}

@media (max-width: 540px) {
    .pj-row__img             { height: 280px; }
    .pj-dark-card            { padding: 36px 24px; }
    .pj-closing__text        { font-size: 18px; line-height: 30px; }
    .pj-closing              { padding: 80px 0; }
    .pj-closing__mark        { font-size: 72px; }
}

/* ============================================================
   INNOVATION CENTER PAGE (.ic-*)
   ============================================================ */

/* ---- Intro ---- */
.ic-intro {
    padding: 96px 0 80px;
    background: #ffffff;
}

.ic-intro__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.ic-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.ic-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.ic-intro__image-wrap {
    flex: 0 0 420px;
    min-width: 0;
    position: relative;
}

.ic-intro__img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.ic-intro__image-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #16202f;
    color: rgba(255,255,255,0.7);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 20px;
}

/* ---- Contemporary Relevance (dark) ---- */
.ic-relevance {
    background: #16202f;
    padding: 96px 0;
}

.ic-relevance__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}

.ic-relevance__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 0 0 20px;
}

.ic-relevance__intro {
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.ic-relevance__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.ic-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 14px 22px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.8);
    transition: background 0.2s, border-color 0.2s;
}

.ic-pill:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.22);
}

.ic-pill__dot {
    font-size: 6px;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

/* ---- Collaborative Platform + AAPI (two-column) ---- */
.ic-collab {
    padding: 0;
    background: #fafafa;
}

.ic-collab__wrap {
    display: flex;
    min-height: 600px;
}

.ic-collab__card {
    flex: 0 0 50%;
    min-width: 0;
}

.ic-collab__card--image {
    position: relative;
    overflow: hidden;
}

.ic-collab__img {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
    display: block;
}

.ic-collab__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16,22,35,0.92) 40%, rgba(16,22,35,0.45) 100%);
}

.ic-collab__img-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 48px;
}

.ic-collab__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.ic-collab__num--dark {
    color: #797979;
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.ic-collab__img-title {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 34px;
    color: #ffffff;
    margin-bottom: 14px;
}

.ic-collab__img-body p {
    font-size: 13px;
    line-height: 22px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
}

.ic-collab__people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.ic-collab__people span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.12);
}

.ic-collab__card--text {
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.ic-collab__text-title {
    font-family: 'Prata', Georgia, serif;
    font-size: 28px;
    line-height: 40px;
    color: #16202f;
    margin-bottom: 20px;
}

.ic-collab__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

.ic-collab__card--text p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

/* Traditions in dialogue */
.ic-traditions {
    margin-top: 28px;
    border-top: 1px solid #d8dadc;
    padding-top: 24px;
}

.ic-traditions__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 16px;
}

.ic-traditions__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-tradition-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 13px;
    color: #16202f;
    letter-spacing: 0.3px;
}

.ic-tradition-item__mark {
    font-size: 8px;
    color: #797979;
    flex-shrink: 0;
}

/* ---- Younger Generations (dark) ---- */
.ic-youth {
    background: #16202f;
    padding: 96px 0;
}

.ic-youth__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.ic-youth__text-col {
    flex: 1 1 0;
    min-width: 0;
}

.ic-youth__img-col {
    flex: 0 0 420px;
    min-width: 0;
}

.ic-youth__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.ic-youth__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin-bottom: 20px;
}

.ic-youth__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 24px;
}

.ic-youth__text-col p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
}

.ic-youth__programs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 36px;
}

.ic-youth__program-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px;
    border-right: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.ic-youth__program-item:last-child {
    border-right: none;
}

.ic-youth__program-icon {
    opacity: 0.6;
}

.ic-youth__program-item span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

/* ---- Future-Building (light) ---- */
.ic-future {
    background: #fafafa;
    padding: 96px 0;
}

.ic-future__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.ic-future__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 0 0 20px;
}

.ic-future__intro {
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0;
}

.ic-future__questions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.ic-question-card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 3px solid #16202f;
}

.ic-question-card__icon {
    opacity: 0.4;
}

.ic-question-card p {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 28px;
    color: #16202f;
    margin: 0;
    font-style: italic;
}

/* ---- Closing (photo + overlay) ---- */
.ic-closing {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    text-align: center;
}

.ic-closing__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.82);
}

.ic-closing__inner {
    position: relative;
    z-index: 1;
}

.ic-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.1);
    margin-bottom: 36px;
    display: block;
}

.ic-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.ic-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 24px;
}

.ic-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

/* ============================================================
   INNOVATION CENTER RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ic-intro__wrap          { flex-direction: column; gap: 48px; }
    .ic-intro__image-wrap    { flex: none; width: 100%; }
    .ic-intro__img           { height: 380px; }
    .ic-collab__wrap         { flex-direction: column; }
    .ic-collab__card         { flex: none; width: 100%; }
    .ic-collab__img          { min-height: 480px; }
    .ic-collab__card--text   { padding: 56px 40px; }
    .ic-youth__wrap          { flex-direction: column; gap: 48px; }
    .ic-youth__img-col       { flex: none; width: 100%; }
    .ic-youth__img           { height: 380px; }
    .ic-youth__programs      { grid-template-columns: repeat(3, 1fr); }
    .ic-future__questions    { grid-template-columns: 1fr; }
    .ic-relevance__title     { font-size: 28px; line-height: 40px; }
    .ic-youth__title         { font-size: 28px; line-height: 40px; }
    .ic-future__title        { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .ic-youth__programs      { grid-template-columns: repeat(2, 1fr); }
    .ic-collab__card--text   { padding: 40px 28px; }
    .ic-closing__text        { font-size: 20px; line-height: 34px; }
    .ic-collab__img-body     { padding: 32px 28px; }
    .ic-question-card        { padding: 28px 24px; }
}

@media (max-width: 540px) {
    .ic-youth__programs      { grid-template-columns: 1fr 1fr; }
    .ic-closing__text        { font-size: 17px; line-height: 30px; }
    .ic-closing              { padding: 80px 0; }
    .ic-closing__mark        { font-size: 72px; }
    .ic-relevance__grid      { gap: 8px; }
    .ic-pill                 { padding: 10px 16px; }
}

/* ============================================================
   MITHILA CULTURE PAGE (.mc-*)
   ============================================================ */

/* ---- Origins ---- */
.mc-origins {
    padding: 96px 0 80px;
    background: #ffffff;
}

.mc-origins__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.mc-origins__text {
    flex: 1 1 0;
    min-width: 0;
}

.mc-origins__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.mc-origins__geo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #d8dadc;
}

.mc-geo-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mc-geo-item__icon {
    flex-shrink: 0;
    font-size: 8px;
    color: #16202f;
    margin-top: 5px;
}

.mc-geo-item h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    color: #16202f;
    margin: 0 0 4px;
}

.mc-geo-item p {
    font-size: 13px;
    line-height: 20px;
    color: #797979;
    margin: 0;
}

.mc-origins__img-wrap {
    flex: 0 0 420px;
    min-width: 0;
    position: relative;
}

.mc-origins__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.mc-origins__img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16,22,35,0.82);
    padding: 14px 20px;
    text-align: center;
}

.mc-origins__img-caption span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* ---- Living System of Memory (dark) ---- */
.mc-memory {
    background: #16202f;
    padding: 96px 0;
}

.mc-memory__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 64px;
}

.mc-memory__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #ffffff;
    margin: 0 0 20px;
}

.mc-memory__intro {
    font-size: 15px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.mc-memory__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.mc-memory-card {
    padding: 40px 32px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.mc-memory-card:last-child {
    border-right: none;
}

.mc-memory-card__icon {
    margin-bottom: 20px;
    opacity: 0.75;
}

.mc-memory-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin-bottom: 12px;
}

.mc-memory-card p {
    font-size: 13px;
    line-height: 22px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

/* ---- The Shift / Not Frozen ---- */
.mc-shift {
    padding: 96px 0;
    background: #fafafa;
}

.mc-shift__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.mc-shift__img-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.mc-shift__text-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.mc-shift__img-wrap {
    position: relative;
}

.mc-shift__img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.mc-shift__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16,22,35,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 18px 24px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.mc-shift__arrow {
    color: rgba(255,255,255,0.25);
    font-size: 14px;
}

.mc-shift__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin-bottom: 20px;
}

.mc-shift__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

.mc-shift__text-col > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

/* Timeline */
.mc-shift__timeline {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #d8dadc;
    display: flex;
    flex-direction: column;
}

.mc-shift__timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mc-shift__timeline-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #d8dadc;
    background: #ffffff;
    margin-top: 5px;
}

.mc-shift__timeline-dot--active {
    border-color: #16202f;
    background: #16202f;
}

.mc-shift__timeline-item h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    color: #16202f;
    margin: 0 0 4px;
}

.mc-shift__timeline-item p {
    font-size: 13px;
    line-height: 20px;
    color: #797979;
    margin: 0;
}

.mc-shift__timeline-connector {
    width: 2px;
    height: 28px;
    background: #d8dadc;
    margin-left: 4px;
}

/* ---- Cultural World ---- */
.mc-world {
    padding: 96px 0;
    background: #ffffff;
}

.mc-world__wrap {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.mc-world__text {
    flex: 0 0 360px;
    min-width: 0;
}

.mc-world__elements {
    flex: 1 1 0;
    min-width: 0;
}

.mc-world__elements-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 20px;
}

.mc-world__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid #d8dadc;
    border-left: 1px solid #d8dadc;
}

.mc-world-element {
    padding: 24px 28px;
    border-right: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
}

.mc-world-element__num {
    display: block;
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: #d8dadc;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.mc-world-element h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    color: #16202f;
    margin: 0 0 6px;
}

.mc-world-element p {
    font-size: 12px;
    line-height: 19px;
    color: #797979;
    margin: 0;
}

/* ---- Gallery strip ---- */
.mc-gallery {
    height: 320px;
}

.mc-gallery__strip {
    display: flex;
    height: 100%;
}

.mc-gallery__panel {
    flex: 1 1 0;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: flex 0.4s ease;
}

.mc-gallery__panel:hover {
    flex: 1.6 1 0;
}

.mc-gallery__panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.48);
    transition: background 0.3s;
}

.mc-gallery__panel:hover .mc-gallery__panel-overlay {
    background: rgba(16,22,35,0.28);
}

.mc-gallery__panel-label {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

/* ---- Closing ---- */
.mc-closing {
    background: #16202f;
    padding: 100px 0;
    text-align: center;
}

.mc-closing__inner {
    position: relative;
}

.mc-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.08);
    margin-bottom: 36px;
    display: block;
}

.mc-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 38px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.mc-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 24px;
}

.mc-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* ============================================================
   MITHILA CULTURE RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .mc-memory__grid         { grid-template-columns: repeat(3, 1fr); }
    .mc-memory-card:nth-child(3) { border-right: none; }
    .mc-memory-card:nth-child(4),
    .mc-memory-card:nth-child(5) {
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .mc-memory-card:nth-child(5) { border-right: none; }
}

@media (max-width: 1024px) {
    .mc-origins__wrap        { flex-direction: column; gap: 48px; }
    .mc-origins__img-wrap    { flex: none; width: 100%; }
    .mc-origins__img         { height: 380px; }
    .mc-shift__wrap          { flex-direction: column; gap: 48px; }
    .mc-shift__img-col,
    .mc-shift__text-col      { flex: none; width: 100%; }
    .mc-shift__img           { height: 380px; }
    .mc-world__wrap          { flex-direction: column; gap: 48px; }
    .mc-world__text          { flex: none; width: 100%; }
    .mc-shift__title         { font-size: 28px; line-height: 40px; }
    .mc-memory__title        { font-size: 30px; line-height: 44px; }
}

@media (max-width: 768px) {
    .mc-memory__grid         { grid-template-columns: 1fr 1fr; }
    .mc-memory-card          { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .mc-memory-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
    .mc-world__grid          { grid-template-columns: 1fr; }
    .mc-gallery              { height: 220px; }
    .mc-closing__text        { font-size: 18px; line-height: 32px; }
}

@media (max-width: 540px) {
    .mc-memory__grid         { grid-template-columns: 1fr; }
    .mc-memory-card          { border-right: none; }
    .mc-memory-card:nth-child(odd) { border-right: none; }
    .mc-gallery              { height: auto; }
    .mc-gallery__strip       { flex-direction: column; }
    .mc-gallery__panel       { height: 180px; flex: none; }
    .mc-closing__text        { font-size: 16px; line-height: 28px; }
    .mc-closing              { padding: 80px 0; }
    .mc-closing__mark        { font-size: 72px; }
}

/* ============================================================
   TIMELINE PAGE (.tl-*)
   ============================================================ */

/* ---- Intro ---- */
.tl-intro {
    padding: 80px 0 0;
    background: #ffffff;
    text-align: center;
}

.tl-intro__heading {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #16202f;
    margin: 12px 0 20px;
}

.tl-intro__lead {
    font-size: 16px;
    line-height: 28px;
    color: #797979;
    margin: 0;
}

/* Chapter pills row */
.tl-intro__chapters {
    margin-top: 56px;
    background: #fafafa;
    border-top: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
    padding: 0;
}

.tl-chapters-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-chapter-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 32px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
}

.tl-chapter-pill__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    color: #d8dadc;
    letter-spacing: 0;
}

.tl-chapter-pill__connector {
    flex: 1;
    height: 1px;
    background: #d8dadc;
    min-width: 24px;
    max-width: 60px;
}

/* ---- Timeline Body ---- */
.tl-body {
    background: #ffffff;
    padding: 96px 0 80px;
}

.tl-spine-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Central vertical spine */
.tl-spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 80px;
    width: 1px;
    background: #d8dadc;
    transform: translateX(-50%);
    z-index: 0;
}

/* ---- Era rows ---- */
.tl-era {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}

/* Era left: card on left, node on right */
.tl-era--left {
    flex-direction: row;
}

.tl-era--left .tl-era__card {
    flex: 0 0 calc(50% - 48px);
    margin-right: 48px;
}

.tl-era--left .tl-era__node {
    flex: 0 0 calc(50% - 0px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 28px;
    padding-left: 48px;
}

/* Era right: node on left, card on right */
.tl-era--right {
    flex-direction: row;
}

.tl-era--right .tl-era__node {
    flex: 0 0 calc(50% - 0px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 28px;
    padding-right: 48px;
    text-align: right;
}

.tl-era--right .tl-era__card {
    flex: 0 0 calc(50% - 48px);
    margin-left: 48px;
}

/* Node dot and era label */
.tl-era__node-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #16202f;
    position: relative;
    flex-shrink: 0;
}

.tl-era__node-dot--active {
    background: #16202f;
}

.tl-era__node-era {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #797979;
    margin-top: 8px;
    display: block;
}

.tl-era__node-era--active {
    color: #16202f;
}

/* Era card */
.tl-era__card {
    background: #ffffff;
    border: 1px solid #d8dadc;
    overflow: hidden;
}

.tl-era__card--today {
    display: flex;
    flex-direction: row-reverse;
}

.tl-era__card--today .tl-era__img-wrap {
    flex: 0 0 42%;
}

.tl-era__card--today .tl-era__body {
    flex: 1 1 0;
    min-width: 0;
}

.tl-era__img-wrap {
    width: 100%;
}

.tl-era__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.tl-era__body {
    padding: 32px 36px;
}

.tl-era__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #797979;
    display: block;
    margin-bottom: 10px;
}

.tl-era__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 38px;
    color: #16202f;
    margin-bottom: 16px;
}

.tl-era__rule {
    width: 36px;
    height: 2px;
    background: #16202f;
    margin-bottom: 20px;
}

.tl-era__body > p {
    font-size: 13px;
    line-height: 23px;
    color: #797979;
    margin-bottom: 14px;
}

/* Tags */
.tl-era__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.tl-era__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16202f;
    padding: 5px 10px;
    border: 1px solid #d8dadc;
}

/* Quote block (era 02) */
.tl-era__quote {
    background: #fafafa;
    border-left: 3px solid #16202f;
    padding: 16px 20px;
    margin: 20px 0;
}

.tl-era__quote-mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 28px;
    line-height: 1;
    color: #d8dadc;
    display: block;
    margin-bottom: 4px;
}

.tl-era__quote p {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    line-height: 22px;
    color: #16202f;
    font-style: italic;
    margin: 0 0 8px;
}

.tl-era__quote-source {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #797979;
    display: block;
}

/* Expand grid (era 03) */
.tl-era__expand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #d8dadc;
}

.tl-expand-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    color: #16202f;
    letter-spacing: 0.3px;
}

.tl-expand-item__dot {
    font-size: 6px;
    color: #797979;
    flex-shrink: 0;
}

/* Today pillars (era 04) */
.tl-era__today-pillars {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    align-items: center;
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
}

.tl-today-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 8px 12px;
}

.tl-today-pillar__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #797979;
}

.tl-today-pillar__value {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    line-height: 20px;
    color: #16202f;
}

.tl-today-pillar__div {
    width: 1px;
    height: 36px;
    background: #d8dadc;
    justify-self: center;
}

.tl-era__today-shapers-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #797979;
    margin-bottom: 10px;
}

/* Spine end cap */
.tl-spine-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.tl-spine-cap__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d8dadc;
    display: block;
    margin-bottom: 10px;
}

.tl-spine-cap__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d8dadc;
}

/* ---- Closing ---- */
.tl-closing {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    text-align: center;
}

.tl-closing__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}

.tl-closing__inner {
    position: relative;
    z-index: 1;
}

.tl-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.08);
    margin-bottom: 36px;
    display: block;
}

.tl-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.tl-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 24px;
}

.tl-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* ============================================================
   TIMELINE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tl-chapters-row              { flex-wrap: wrap; justify-content: flex-start; }
    .tl-chapter-pill              { padding: 16px 20px; }
    .tl-chapter-pill__connector   { display: none; }

    /* Stack the timeline vertically */
    .tl-spine                     { display: none; }

    .tl-era                       { flex-direction: column; margin-bottom: 48px; }
    .tl-era--left,
    .tl-era--right                { flex-direction: column; }

    .tl-era--left .tl-era__card,
    .tl-era--right .tl-era__card  { flex: none; width: 100%; margin: 0; }

    .tl-era--left .tl-era__node,
    .tl-era--right .tl-era__node  {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 0 16px 0;
        text-align: left;
    }

    .tl-era__node-era             { margin-top: 0; }
    .tl-era__card--today          { flex-direction: column; }
    .tl-era__card--today .tl-era__img-wrap { flex: none; width: 100%; }
}

@media (max-width: 768px) {
    .tl-intro__heading            { font-size: 28px; line-height: 40px; }
    .tl-era__title                { font-size: 22px; line-height: 32px; }
    .tl-closing__text             { font-size: 20px; line-height: 34px; }
    .tl-era__body                 { padding: 24px 24px; }
}

@media (max-width: 540px) {
    .tl-era__expand-grid          { grid-template-columns: 1fr; }
    .tl-era__today-pillars        { grid-template-columns: 1fr; gap: 12px; }
    .tl-today-pillar__div         { display: none; }
    .tl-closing__text             { font-size: 17px; line-height: 30px; }
    .tl-closing                   { padding: 80px 0; }
    .tl-closing__mark             { font-size: 72px; }
}

/* ============================================================
   TRADITIONS PAGE (.tr-*)
   ============================================================ */

/* ---- Intro ---- */
.tr-intro {
    padding: 96px 0 80px;
    background: #ffffff;
}

.tr-intro__wrap {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.tr-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.tr-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.tr-intro__index {
    flex: 0 0 300px;
    min-width: 0;
    padding-top: 8px;
}

.tr-intro__index-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 20px;
}

.tr-intro__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #d8dadc;
}

.tr-intro__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #d8dadc;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #16202f;
}

.tr-intro__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: #797979;
    flex-shrink: 0;
    width: 22px;
}

/* ---- Shared row layout ---- */
.tr-row {
    padding: 96px 0;
}

.tr-row--light { background: #fafafa; }
.tr-row--white { background: #ffffff; }

.tr-row__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.tr-row__img-col,
.tr-row__text-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.tr-row__img-wrap {
    position: relative;
}

.tr-row__img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.tr-row__badge {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #16202f;
    padding: 16px 20px;
    gap: 4px;
}

.tr-row__badge--bl { bottom: 0; left: 0; }
.tr-row__badge--br { bottom: 0; right: 0; }

.tr-row__badge-num {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    color: #ffffff;
    line-height: 1;
}

.tr-row__badge-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.tr-row__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    margin-bottom: 20px;
}

.tr-row__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

.tr-row__text-col > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

/* Learning grid (Tradition 01) */
.tr-learning-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #d8dadc;
}

.tr-learning-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tr-learning-item__icon {
    font-size: 8px;
    color: #16202f;
    flex-shrink: 0;
    margin-top: 5px;
}

.tr-learning-item h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    color: #16202f;
    margin: 0 0 4px;
}

.tr-learning-item p {
    font-size: 12px;
    line-height: 19px;
    color: #797979;
    margin: 0;
}

/* Density stats (Tradition 03) */
.tr-density-stats {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #d8dadc;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tr-density-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;
    border-left: 2px solid #16202f;
}

.tr-density-stat__term {
    font-family: 'Prata', Georgia, serif;
    font-size: 13px;
    color: #16202f;
}

.tr-density-stat p {
    font-size: 12px;
    line-height: 19px;
    color: #797979;
    margin: 0;
}

/* ---- Ceremonial section (dark) ---- */
.tr-ceremonial {
    background: #16202f;
    padding: 96px 0;
}

.tr-ceremonial__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.tr-ceremonial__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #ffffff;
    margin: 0 0 20px;
}

.tr-ceremonial__intro {
    font-size: 15px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.tr-ceremonial__body {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.tr-ceremonial__text-panel {
    flex: 1 1 0;
    min-width: 0;
}

.tr-ceremonial__text-panel > p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
}

.tr-ceremonial__purposes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-purpose-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.tr-purpose-item__bar {
    display: block;
    width: 32px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

.tr-ceremonial__motifs {
    flex: 0 0 340px;
    min-width: 0;
}

.tr-ceremonial__motifs-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 20px;
}

.tr-motif-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-motif-tag {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}

/* ---- Adaptation section (photo with overlay) ---- */
.tr-adaptation {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

.tr-adaptation__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}

.tr-adaptation__inner {
    position: relative;
    z-index: 1;
}

.tr-adaptation__body {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.tr-adaptation__text {
    flex: 1 1 0;
    min-width: 0;
}

.tr-adaptation__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #ffffff;
    margin: 10px 0 20px;
}

.tr-adaptation__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 28px;
}

.tr-adaptation__text p {
    font-size: 15px;
    line-height: 27px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 16px;
}

.tr-adaptation__pillars {
    flex: 0 0 480px;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.tr-adaptation-pillar {
    padding: 32px 28px;
    background: rgba(16,22,35,0.6);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-adaptation-pillar__icon {
    opacity: 0.7;
    margin-bottom: 4px;
}

.tr-adaptation-pillar h4 {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}

.tr-adaptation-pillar p {
    font-size: 12px;
    line-height: 20px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

/* ---- Closing ---- */
.tr-closing {
    background: #16202f;
    padding: 100px 0;
    text-align: center;
}

.tr-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.08);
    margin-bottom: 36px;
    display: block;
}

.tr-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.tr-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 28px;
}

.tr-closing__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tr-closing__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.tr-sep {
    font-size: 6px !important;
    color: rgba(255,255,255,0.15) !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   TRADITIONS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tr-intro__wrap              { flex-direction: column; gap: 48px; }
    .tr-intro__index             { flex: none; width: 100%; }
    .tr-row__wrap                { flex-direction: column; gap: 48px; }
    .tr-row__img-col,
    .tr-row__text-col            { flex: none; width: 100%; }
    .tr-row__img                 { height: 380px; }
    .tr-ceremonial__body         { flex-direction: column; gap: 40px; }
    .tr-ceremonial__motifs       { flex: none; width: 100%; }
    .tr-adaptation__body         { flex-direction: column; gap: 32px; }
    .tr-adaptation__pillars      { flex: none; width: 100%; }
    .tr-adaptation__title        { font-size: 30px; line-height: 44px; }
    .tr-row__title               { font-size: 28px; line-height: 40px; }
    .tr-ceremonial__title        { font-size: 30px; line-height: 44px; }
    .tr-adaptation__title        { font-size: 30px; line-height: 44px; }
}

@media (max-width: 768px) {
    .tr-learning-grid            { grid-template-columns: 1fr; }
    .tr-adaptation__pillars      { grid-template-columns: 1fr; }
    .tr-closing__text            { font-size: 20px; line-height: 34px; }
    .tr-row                      { padding: 64px 0; }
    .tr-ceremonial               { padding: 64px 0; }
    .tr-adaptation               { padding: 72px 0; }
}

@media (max-width: 540px) {
    .tr-row__img                 { height: 280px; }
    .tr-closing__text            { font-size: 17px; line-height: 30px; }
    .tr-closing                  { padding: 80px 0; }
    .tr-closing__mark            { font-size: 72px; }
    .tr-adaptation-pillar        { padding: 24px 20px; }
}

/* ============================================================
   ART & SYMBOLISM PAGE (.as-*)
   ============================================================ */

/* ---- Intro ---- */
.as-intro {
    padding: 96px 0 80px;
    background: #ffffff;
}

.as-intro__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.as-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.as-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.as-intro__text > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 28px;
}

.as-intro__values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.as-intro__values span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    padding: 7px 14px;
    border: 1px solid #d8dadc;
}

.as-intro__img-wrap {
    flex: 0 0 420px;
    min-width: 0;
    position: relative;
}

.as-intro__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.as-intro__img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16,22,35,0.82);
    text-align: center;
    padding: 14px 20px;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

/* ---- Symbolic Language (dark) ---- */
.as-symbols {
    background: #16202f;
    padding: 96px 0;
}

.as-symbols__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.as-symbols__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 38px;
    line-height: 52px;
    color: #ffffff;
    margin: 0 0 20px;
}

.as-symbols__intro {
    font-size: 15px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.as-symbols__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
}

.as-symbol-card {
    padding: 40px 36px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.as-symbol-card__icon {
    margin-bottom: 20px;
    opacity: 0.8;
}

.as-symbol-card h3 {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 26px;
    color: #ffffff;
    margin-bottom: 10px;
}

.as-symbol-card p {
    font-size: 13px;
    line-height: 22px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

/* ---- Visual Density ---- */
.as-density {
    padding: 96px 0;
    background: #fafafa;
}

.as-density__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.as-density__img-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.as-density__text-col {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.as-density__img-wrap {
    position: relative;
}

.as-density__img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block;
}

.as-density__img-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16,22,35,0.88);
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.as-density__img-tag span {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 0.7;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.as-density__img-tag p {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255,255,255,0.7);
    font-style: italic;
    margin: 0;
}

.as-density__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    margin-bottom: 20px;
}

.as-density__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

.as-density__text-col > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

.as-density__qualities {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #d8dadc;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.as-density-quality {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.as-density-quality__bar {
    display: block;
    width: 3px;
    height: 48px;
    background: #16202f;
    flex-shrink: 0;
    margin-top: 2px;
}

.as-density-quality h5 {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    color: #16202f;
    margin: 0 0 4px;
}

.as-density-quality p {
    font-size: 12px;
    line-height: 19px;
    color: #797979;
    margin: 0;
}

/* ---- Three Levels ---- */
.as-levels {
    padding: 96px 0;
    background: #ffffff;
}

.as-levels__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.as-levels__intro {
    font-size: 15px;
    line-height: 27px;
    color: #797979;
    margin: 0;
}

.as-levels__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.as-level-card {
    padding: 48px 40px;
    border: 1px solid #d8dadc;
    margin: -1px 0 0 -1px;
}

.as-level-card--mid {
    background: #16202f;
    border-color: #16202f;
}

.as-level-card__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #d8dadc;
    margin-bottom: 20px;
    display: block;
}

.as-level-card--mid .as-level-card__num {
    color: rgba(255,255,255,0.2);
}

.as-level-card__icon {
    margin-bottom: 20px;
    opacity: 0.6;
}

.as-level-card h3 {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 12px;
}

.as-level-card--mid h3 {
    color: #ffffff;
}

.as-level-card p {
    font-size: 13px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

.as-level-card--mid p {
    color: rgba(255,255,255,0.55);
}

/* ---- Museum Role (photo overlay) ---- */
.as-museum-role {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

.as-museum-role__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}

.as-museum-role__inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.as-museum-role__text {
    flex: 1 1 0;
    min-width: 0;
}

.as-museum-role__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 10px 0 20px;
}

.as-museum-role__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 24px;
}

.as-museum-role__text p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 16px;
}

.as-museum-role__approach {
    flex: 0 0 340px;
    min-width: 0;
    padding-top: 52px;
}

.as-museum-role__approach-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
}

.as-museum-role__approach-items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.as-approach-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
}

.as-approach-item__num {
    color: rgba(255,255,255,0.25);
    font-size: 14px;
    flex-shrink: 0;
}

/* ---- Closing ---- */
.as-closing {
    background: #16202f;
    padding: 100px 0;
    text-align: center;
}

.as-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(255,255,255,0.08);
    margin-bottom: 36px;
    display: block;
}

.as-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 38px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.as-closing__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto 24px;
}

.as-closing__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* ============================================================
   ART & SYMBOLISM RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .as-intro__wrap              { flex-direction: column; gap: 48px; }
    .as-intro__img-wrap          { flex: none; width: 100%; }
    .as-intro__img               { height: 380px; }
    .as-symbols__grid            { grid-template-columns: repeat(2, 1fr); }
    .as-density__wrap            { flex-direction: column; gap: 48px; }
    .as-density__img-col,
    .as-density__text-col        { flex: none; width: 100%; }
    .as-density__img             { height: 380px; }
    .as-museum-role__inner       { flex-direction: column; gap: 40px; }
    .as-museum-role__approach    { flex: none; width: 100%; padding-top: 0; }
    .as-density__title           { font-size: 28px; line-height: 40px; }
    .as-museum-role__title       { font-size: 28px; line-height: 40px; }
    .as-symbols__title           { font-size: 30px; line-height: 44px; }
}

@media (max-width: 768px) {
    .as-symbols__grid            { grid-template-columns: 1fr; }
    .as-levels__grid             { grid-template-columns: 1fr; }
    .as-level-card               { margin: 0; border-top: none; }
    .as-level-card:first-child   { border-top: 1px solid #d8dadc; }
    .as-closing__text            { font-size: 18px; line-height: 32px; }
    .as-density                  { padding: 64px 0; }
    .as-levels                   { padding: 64px 0; }
}

@media (max-width: 540px) {
    .as-density__img             { height: 280px; }
    .as-closing__text            { font-size: 16px; line-height: 28px; }
    .as-closing                  { padding: 80px 0; }
    .as-closing__mark            { font-size: 72px; }
    .as-symbol-card              { padding: 28px 24px; }
    .as-level-card               { padding: 32px 24px; }
}

/* ============================================================
   AAPI ART FORMS PAGE (.aapi-*)
   ============================================================ */

/* ---- Intro ---- */
.aapi-intro {
    padding: 96px 0 80px;
    background: #ffffff;
}

.aapi-intro__wrap {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.aapi-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.aapi-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.aapi-intro__text > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

.aapi-intro__functions {
    flex: 0 0 300px;
    min-width: 0;
    padding-top: 8px;
}

.aapi-intro__functions-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 20px;
}

.aapi-intro__functions-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #d8dadc;
}

.aapi-function-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #d8dadc;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #16202f;
    letter-spacing: 0.3px;
}

.aapi-function-item__dot {
    font-size: 7px;
    color: #797979;
    flex-shrink: 0;
}

/* ---- Forms Grid ---- */
.aapi-forms {
    padding: 0 0 96px;
    background: #ffffff;
}

.aapi-forms__header {
    padding: 64px 0 48px;
    border-top: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
    margin-bottom: 48px;
}

.aapi-forms__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.aapi-form-card {
    background: #fafafa;
    border: 1px solid #d8dadc;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.aapi-form-card__img-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.aapi-form-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aapi-form-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16,22,35,0.7) 0%, rgba(16,22,35,0.1) 60%);
}

.aapi-form-card__region {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #16202f;
    color: rgba(255,255,255,0.7);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 12px;
}

.aapi-form-card__body {
    padding: 28px 32px 32px;
    flex: 1;
    background: #ffffff;
}

.aapi-form-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 36px;
    color: #16202f;
    margin-bottom: 14px;
}

.aapi-form-card__rule {
    width: 32px;
    height: 2px;
    background: #16202f;
    margin-bottom: 18px;
}

.aapi-form-card__body > p {
    font-size: 13px;
    line-height: 22px;
    color: #797979;
    margin-bottom: 12px;
}

.aapi-form-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #d8dadc;
}

.aapi-form-card__tags span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16202f;
    padding: 5px 10px;
    border: 1px solid #d8dadc;
}

/* ---- Shared Thread (dark) ---- */
.aapi-thread {
    background: #16202f;
    padding: 80px 0;
}

.aapi-thread__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.aapi-thread__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 0 0 20px;
}

.aapi-thread__intro {
    font-size: 15px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.aapi-thread__items {
    display: flex;
    justify-content: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
}

.aapi-thread-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.aapi-thread-item__mark {
    font-size: 10px;
    color: rgba(255,255,255,0.2);
}

.aapi-thread-item span:last-child {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
}

/* ---- Future Horizon ---- */
.aapi-future {
    background: #16202f;
    padding: 0 0 96px;
}

.aapi-future__wrap {
    display: flex;
    gap: 72px;
    align-items: flex-start;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 64px;
}

.aapi-future__text {
    flex: 1 1 0;
    min-width: 0;
}

.aapi-future__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 48px;
    color: #ffffff;
    margin: 10px 0 20px;
}

.aapi-future__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 24px;
}

.aapi-future__text p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
}

.aapi-future__programs {
    flex: 0 0 300px;
    min-width: 0;
}

.aapi-future__programs-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
}

.aapi-future__programs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.aapi-future-program {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.65);
}

.aapi-future-program__icon {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ---- Closing ---- */
.aapi-closing {
    background: #fafafa;
    padding: 100px 0;
    text-align: center;
    border-top: 1px solid #d8dadc;
}

.aapi-closing__mark {
    font-family: 'Prata', Georgia, serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(22,32,47,0.08);
    margin-bottom: 36px;
    display: block;
}

.aapi-closing__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 38px;
    color: #16202f;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}

.aapi-closing__rule {
    width: 48px;
    height: 1px;
    background: #d8dadc;
    margin: 0 auto 28px;
}

.aapi-closing__traditions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.aapi-closing__traditions span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #797979;
}

.aapi-sep {
    font-size: 6px !important;
    color: #d8dadc !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   AAPI ART FORMS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .aapi-intro__wrap            { flex-direction: column; gap: 48px; }
    .aapi-intro__functions       { flex: none; width: 100%; }
    .aapi-future__wrap           { flex-direction: column; gap: 48px; }
    .aapi-future__programs       { flex: none; width: 100%; }
    .aapi-thread__title          { font-size: 28px; line-height: 40px; }
    .aapi-future__title          { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .aapi-forms__grid            { grid-template-columns: 1fr; }
    .aapi-thread__items          { flex-wrap: wrap; }
    .aapi-thread-item            { flex: 0 0 calc(50% - 1px); }
    .aapi-closing__text          { font-size: 18px; line-height: 32px; }
}

@media (max-width: 540px) {
    .aapi-thread-item            { flex: 0 0 100%; }
    .aapi-form-card__img-wrap    { height: 200px; }
    .aapi-form-card__body        { padding: 20px 24px 24px; }
    .aapi-closing__text          { font-size: 16px; line-height: 28px; }
    .aapi-closing                { padding: 80px 0; }
    .aapi-closing__mark          { font-size: 72px; }
}

/* ============================================================
   THE INITIATIVE PAGE (.init-*)
   ============================================================ */

/* ---- Conviction ---- */
.init-conviction {
    padding: 96px 0 80px;
    background: #ffffff;
}

.init-conviction__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.init-conviction__text {
    flex: 1 1 0;
    min-width: 0;
}

.init-conviction__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.init-conviction__text > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 28px;
}

.init-conviction__pillars {
    display: flex;
    gap: 0;
    border-top: 1px solid #d8dadc;
    border-left: 1px solid #d8dadc;
    margin-top: 8px;
}

.init-pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-right: 1px solid #d8dadc;
    border-bottom: 1px solid #d8dadc;
    text-align: center;
}

.init-pillar__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: #d8dadc;
    letter-spacing: 1px;
}

.init-pillar__label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #16202f;
}

.init-conviction__img-wrap {
    flex: 0 0 420px;
    min-width: 0;
}

.init-conviction__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* ---- Core ---- */
.init-core {
    padding: 96px 0;
    background: #fafafa;
}

.init-core__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.init-core__img-wrap {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.init-core__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.init-core__text {
    flex: 0 0 calc(50% - 36px);
    min-width: 0;
}

.init-core__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 46px;
    color: #16202f;
    margin-bottom: 20px;
}

.init-core__rule {
    width: 40px;
    height: 2px;
    background: #16202f;
    margin-bottom: 24px;
}

.init-core__text > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

.init-core__engagement {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #d8dadc;
}

.init-core__engagement span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #16202f;
    padding: 6px 12px;
    border: 1px solid #d8dadc;
}

/* ---- Duality (Preservation & Possibility) ---- */
.init-duality {
    background: #16202f;
    padding: 80px 0;
}

.init-duality__grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.init-duality__card {
    flex: 1 1 0;
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.init-duality__card-icon {
    opacity: 0.7;
    margin-bottom: 8px;
}

.init-duality__card h3 {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 36px;
    color: #ffffff;
    margin: 0;
}

.init-duality__card p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

.init-duality__divider {
    width: 1px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.init-duality__statement {
    margin-top: 0;
    padding: 32px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
}

.init-duality__statement p {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 30px;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* ============================================================
   THE INITIATIVE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .init-conviction__wrap       { flex-direction: column; gap: 48px; }
    .init-conviction__img-wrap   { flex: none; width: 100%; }
    .init-conviction__img        { height: 380px; }
    .init-core__wrap             { flex-direction: column; gap: 48px; }
    .init-core__img-wrap,
    .init-core__text             { flex: none; width: 100%; }
    .init-core__img              { height: 380px; }
    .init-core__title            { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .init-duality__grid          { flex-direction: column; }
    .init-duality__divider       { width: 100%; height: 1px; }
    .init-duality__card          { padding: 36px 32px; }
    .init-duality__statement     { padding: 24px 32px; }
}

@media (max-width: 540px) {
    .init-conviction__pillars    { flex-direction: column; }
    .init-core__img              { height: 280px; }
    .init-duality__card          { padding: 28px 24px; }
    .init-duality__statement     { padding: 20px 24px; }
}

/* ============================================================
   PLANNING & DEVELOPMENT PAGE (.pd-*)
   ============================================================ */

/* ---- Intro ---- */
.pd-intro {
    padding: 96px 0 80px;
    background: #ffffff;
}

.pd-intro__wrap {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.pd-intro__text {
    flex: 1 1 0;
    min-width: 0;
}

.pd-intro__lead {
    font-size: 17px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.pd-intro__text > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 16px;
}

.pd-intro__areas {
    flex: 0 0 280px;
    min-width: 0;
    padding-top: 8px;
}

.pd-intro__areas-label {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #16202f;
    margin-bottom: 20px;
}

.pd-intro__areas-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #d8dadc;
}

.pd-area-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #d8dadc;
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #16202f;
}

.pd-area-pill__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 11px;
    color: #d8dadc;
    flex-shrink: 0;
    width: 20px;
}

/* ---- Three Areas ---- */
.pd-areas {
    padding: 0;
}

.pd-area-row {
    padding: 56px 0;
    border-top: 1px solid #d8dadc;
}

.pd-area-row--light  { background: #fafafa; }
.pd-area-row--white  { background: #ffffff; }

.pd-area-row .story-container,
.pd-areas .story-container > .pd-area-row {
    display: contents;
}

.pd-area-row {
    display: block;
}

.pd-area-row__inner {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* Using direct child layout within story-container */
.pd-areas > .story-container {
    padding: 0;
}

.pd-areas > .story-container > .pd-area-row {
    padding: 56px 40px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 56px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
}

.pd-area-row__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 4px;
}

.pd-area-row__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 1;
    color: #d8dadc;
    display: block;
}

.pd-area-row__tag {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #797979;
}

.pd-area-row__content {
    min-width: 0;
}

.pd-area-row__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 36px;
    color: #16202f;
    margin-bottom: 16px;
}

.pd-area-row__content > p {
    font-size: 14px;
    line-height: 25px;
    color: #797979;
    margin-bottom: 20px;
}

.pd-area-row__tags,
.pd-area-row__people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-area-row__tags span,
.pd-area-row__people span {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16202f;
    padding: 5px 11px;
    border: 1px solid #d8dadc;
}

/* ---- Integrity (photo overlay) ---- */
.pd-integrity {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 96px 0;
}

.pd-integrity__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}

.pd-integrity__inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.pd-integrity__text {
    flex: 1 1 0;
    min-width: 0;
}

.pd-integrity__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 34px;
    line-height: 48px;
    color: #ffffff;
    margin: 10px 0 20px;
}

.pd-integrity__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 24px;
}

.pd-integrity__text p {
    font-size: 14px;
    line-height: 25px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.pd-integrity__foundation {
    flex: 0 0 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 56px;
}

.pd-foundation-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.pd-foundation-item__bar {
    display: block;
    width: 24px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* ---- Closing Statement ---- */
.pd-statement {
    background: #16202f;
    padding: 80px 0;
    text-align: center;
}

.pd-statement__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 36px;
    color: rgba(255,255,255,0.7);
    font-style: italic;
    font-weight: normal;
    margin-bottom: 20px;
}

.pd-statement__caption {
    font-family: 'Karla', 'Muli', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin: 0;
}

/* ============================================================
   PLANNING & DEVELOPMENT RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pd-intro__wrap                            { flex-direction: column; gap: 48px; }
    .pd-intro__areas                           { flex: none; width: 100%; }
    .pd-areas > .story-container > .pd-area-row { grid-template-columns: 1fr; gap: 20px; padding: 44px 40px; }
    .pd-area-row__num                          { font-size: 28px; }
    .pd-integrity__inner                       { flex-direction: column; gap: 40px; }
    .pd-integrity__foundation                  { flex: none; width: 100%; padding-top: 0; }
    .pd-integrity__title                       { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .pd-areas > .story-container > .pd-area-row { padding: 36px 28px; }
    .pd-statement__text                        { font-size: 18px; line-height: 30px; }
    .pd-integrity                              { padding: 64px 0; }
}

@media (max-width: 540px) {
    .pd-areas > .story-container > .pd-area-row { padding: 28px 20px; }
    .pd-area-row__title                        { font-size: 22px; line-height: 32px; }
    .pd-statement                              { padding: 60px 0; }
}

/* ============================================================
   COLLECTIONS IN PROGRESS — .cp-*
   ============================================================ */

/* Hero */
.cp-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.cp-intro {
    padding: 96px 0;
    background: #ffffff;
}

.cp-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.cp-intro__text {
    flex: 1;
    min-width: 0;
}

.cp-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.cp-intro__image-wrap {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cp-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.cp-intro__img-label {
    background: #16202f;
    color: rgba(255,255,255,0.6);
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 20px;
    text-align: center;
}

/* Two Lists */
.cp-lists {
    padding: 96px 0;
    background: #fafafa;
}

.cp-lists__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #d8dadc;
}

.cp-list-panel {
    padding: 52px 48px;
}

.cp-list-panel--light {
    background: #ffffff;
    border-right: 1px solid #d8dadc;
}

.cp-list-panel--dark {
    background: #16202f;
}

.cp-list-panel__header {
    margin-bottom: 36px;
}

.cp-list-panel__eyebrow {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    margin: 0 0 12px;
}

.cp-list-panel--dark .cp-list-panel__eyebrow {
    color: rgba(255,255,255,0.45);
}

.cp-list-panel__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 30px;
    line-height: 42px;
    color: #16202f;
    margin: 0 0 16px;
}

.cp-list-panel--dark .cp-list-panel__title {
    color: #ffffff;
}

.cp-list-panel__intro {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #797979;
    margin: 0;
}

.cp-list-panel--dark .cp-list-panel__intro {
    color: rgba(255,255,255,0.55);
}

.cp-list-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-list-panel__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #16202f;
}

.cp-list-panel--dark .cp-list-panel__list li {
    color: rgba(255,255,255,0.8);
}

.cp-list-item__dot {
    font-size: 7px;
    color: #797979;
    flex-shrink: 0;
    margin-top: 8px;
    line-height: 1;
}

.cp-list-panel--dark .cp-list-item__dot {
    color: rgba(255,255,255,0.3);
}

/* Belief & Strategy */
.cp-belief {
    padding: 96px 0;
    background: #ffffff;
}

.cp-belief__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.cp-belief__img-col {
    flex: 0 0 440px;
}

.cp-belief__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.cp-belief__text-col {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.cp-belief__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.cp-belief__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.cp-belief__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 28px;
    color: #16202f;
    margin-bottom: 20px;
}

.cp-belief__priorities {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid #d8dadc;
}

.cp-priority {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.cp-priority__bar {
    flex-shrink: 0;
    width: 3px;
    height: 52px;
    background: #16202f;
    margin-top: 2px;
}

.cp-priority h5 {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    margin: 0 0 6px;
}

.cp-priority p {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

/* Closing Statement */
.cp-statement {
    padding: 100px 0;
    background: #fafafa;
    text-align: center;
    border-top: 1px solid #d8dadc;
}

.cp-statement__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 34px;
    color: #16202f;
    font-style: italic;
    margin: 0 0 24px;
}

.cp-statement__caption {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    margin: 0;
}

/* ============================================================
   COLLECTIONS IN PROGRESS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .cp-intro__wrap                { flex-direction: column; gap: 48px; }
    .cp-intro__image-wrap          { flex: none; width: 100%; max-width: 480px; }
    .cp-lists__grid                { grid-template-columns: 1fr; }
    .cp-list-panel--light          { border-right: none; border-bottom: 1px solid #d8dadc; }
    .cp-belief__wrap               { flex-direction: column; gap: 48px; }
    .cp-belief__img-col            { flex: none; width: 100%; max-width: 480px; }
    .cp-belief__title              { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .cp-intro                      { padding: 64px 0; }
    .cp-lists                      { padding: 64px 0; }
    .cp-list-panel                 { padding: 40px 32px; }
    .cp-belief                     { padding: 64px 0; }
    .cp-belief__title              { font-size: 24px; line-height: 36px; }
    .cp-statement__text            { font-size: 17px; line-height: 28px; }
}

@media (max-width: 540px) {
    .cp-list-panel                 { padding: 32px 20px; }
    .cp-list-panel__title          { font-size: 24px; line-height: 34px; }
    .cp-statement                  { padding: 64px 0; }
}

/* ============================================================
   ARTIST COLLABORATIONS — .ac-*
   ============================================================ */

/* Hero */
.ac-hero {
    background-size: cover;
    background-position: center top;
}

/* Intro */
.ac-intro {
    padding: 96px 0;
    background: #ffffff;
}

.ac-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.ac-intro__text {
    flex: 1;
    min-width: 0;
}

.ac-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.ac-intro__image-wrap {
    flex: 0 0 420px;
}

.ac-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Forms of Collaboration */
.ac-forms {
    padding: 96px 0;
    background: #16202f;
}

.ac-forms__header {
    max-width: 720px;
    margin-bottom: 52px;
}

.ac-forms__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 20px;
}

.ac-forms__intro {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

.ac-forms__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ac-form-tag {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 20px;
    background: rgba(255,255,255,0.05);
}

/* Contemporary Expression */
.ac-contemporary {
    padding: 96px 0;
    background: #fafafa;
}

.ac-contemporary__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.ac-contemporary__img-col {
    flex: 0 0 440px;
}

.ac-contemporary__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.ac-contemporary__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.ac-contemporary__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.ac-contemporary__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.ac-contemporary__themes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #d8dadc;
}

.ac-theme-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #16202f;
}

.ac-theme-item__dot {
    font-size: 7px;
    color: #797979;
    flex-shrink: 0;
    margin-top: 8px;
    line-height: 1;
}

/* AAPI Dialogue */
.ac-aapi {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.ac-aapi__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.82);
}

.ac-aapi > .story-container {
    position: relative;
    z-index: 1;
}

.ac-aapi__inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.ac-aapi__text {
    flex: 1;
    min-width: 0;
}

.ac-aapi__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 8px 0 20px;
}

.ac-aapi__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 28px;
}

.ac-aapi__text p {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.ac-aapi__exchange {
    flex: 0 0 320px;
}

.ac-aapi__exchange-label {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 24px;
}

.ac-aapi__exchange-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ac-exchange-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ac-exchange-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ac-exchange-item__line {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

/* Closing Statement */
.ac-statement {
    padding: 100px 0;
    background: #ffffff;
    text-align: center;
    border-top: 1px solid #d8dadc;
}

.ac-statement__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 20px;
    line-height: 34px;
    color: #16202f;
    font-style: italic;
    margin: 0 0 24px;
}

.ac-statement__caption {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    margin: 0;
}

/* ============================================================
   ARTIST COLLABORATIONS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ac-intro__wrap                { flex-direction: column; gap: 48px; }
    .ac-intro__image-wrap          { flex: none; width: 100%; max-width: 480px; }
    .ac-contemporary__wrap         { flex-direction: column; gap: 48px; }
    .ac-contemporary__img-col      { flex: none; width: 100%; max-width: 480px; }
    .ac-contemporary__title        { font-size: 28px; line-height: 40px; }
    .ac-aapi__inner                { flex-direction: column; gap: 48px; }
    .ac-aapi__exchange             { flex: none; width: 100%; }
    .ac-aapi__title                { font-size: 28px; line-height: 40px; }
    .ac-forms__title               { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .ac-intro                      { padding: 64px 0; }
    .ac-forms                      { padding: 64px 0; }
    .ac-contemporary               { padding: 64px 0; }
    .ac-aapi                       { padding: 72px 0; }
    .ac-forms__title               { font-size: 26px; line-height: 36px; }
    .ac-statement__text            { font-size: 17px; line-height: 28px; }
}

@media (max-width: 540px) {
    .ac-forms__tags                { gap: 8px; }
    .ac-form-tag                   { font-size: 11px; padding: 8px 14px; }
    .ac-contemporary__title        { font-size: 24px; line-height: 34px; }
    .ac-statement                  { padding: 64px 0; }
}

/* ============================================================
   PARTNERSHIPS — .pp-*
   ============================================================ */

/* Hero */
.pp-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.pp-intro {
    padding: 96px 0;
    background: #ffffff;
}

.pp-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.pp-intro__text {
    flex: 1;
    min-width: 0;
}

.pp-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.pp-intro__image-wrap {
    flex: 0 0 400px;
}

.pp-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.pp-intro__partners {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #d8dadc;
}

.pp-intro__partners-label {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    margin: 0 0 16px;
}

.pp-intro__partners-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-intro__partners-tags span {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 7px 14px;
    background: #fafafa;
}

/* Four Ways */
.pp-ways {
    background: #fafafa;
    padding: 0;
}

.pp-ways > .story-container > .pp-way-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0 60px;
    padding: 52px 60px;
    border-bottom: 1px solid #d8dadc;
}

.pp-ways > .story-container > .pp-way-row:first-child {
    border-top: 1px solid #d8dadc;
}

.pp-way-row--light  { background: #fafafa; }
.pp-way-row--white  { background: #ffffff; }

.pp-way-row__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 4px;
}

.pp-way-row__num {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 1;
    color: #d8dadc;
    display: block;
    margin-bottom: 8px;
}

.pp-way-row__tag {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
}

.pp-way-row__content {
    min-width: 0;
}

.pp-way-row__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 36px;
    color: #16202f;
    margin: 0 0 16px;
}

.pp-way-row__content p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 20px;
}

.pp-way-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-way-row__tags span {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 5px 12px;
}

/* AAPI Ecosystems */
.pp-aapi {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.pp-aapi__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}

.pp-aapi > .story-container {
    position: relative;
    z-index: 1;
}

.pp-aapi__inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.pp-aapi__text {
    flex: 1;
    min-width: 0;
}

.pp-aapi__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 8px 0 20px;
}

.pp-aapi__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 28px;
}

.pp-aapi__text p {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.pp-aapi__interests {
    flex: 0 0 300px;
}

.pp-aapi__interests-label {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 24px;
}

.pp-aapi__interests-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pp-interest-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.pp-interest-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.pp-interest-item__bar {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

/* Foundation */
.pp-foundation {
    padding: 96px 0;
    background: #ffffff;
}

.pp-foundation__wrap {
    display: flex;
    align-items: center;
    gap: 72px;
}

.pp-foundation__text {
    flex: 1;
    min-width: 0;
}

.pp-foundation__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.pp-foundation__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.pp-foundation__text p {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: #797979;
    margin: 0;
}

.pp-foundation__img-wrap {
    flex: 0 0 420px;
}

.pp-foundation__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* ============================================================
   PARTNERSHIPS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pp-intro__wrap                              { flex-direction: column; gap: 48px; }
    .pp-intro__image-wrap                        { flex: none; width: 100%; max-width: 480px; }
    .pp-ways > .story-container > .pp-way-row    { grid-template-columns: 1fr; gap: 20px; padding: 44px 40px; }
    .pp-way-row__num                             { font-size: 28px; }
    .pp-aapi__inner                              { flex-direction: column; gap: 48px; }
    .pp-aapi__interests                          { flex: none; width: 100%; }
    .pp-aapi__title                              { font-size: 28px; line-height: 40px; }
    .pp-foundation__wrap                         { flex-direction: column; gap: 48px; }
    .pp-foundation__img-wrap                     { flex: none; width: 100%; max-width: 480px; }
    .pp-foundation__title                        { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .pp-intro                                    { padding: 64px 0; }
    .pp-ways > .story-container > .pp-way-row    { padding: 36px 28px; }
    .pp-aapi                                     { padding: 72px 0; }
    .pp-aapi__title                              { font-size: 24px; line-height: 36px; }
    .pp-foundation                               { padding: 64px 0; }
    .pp-foundation__title                        { font-size: 24px; line-height: 36px; }
}

@media (max-width: 540px) {
    .pp-ways > .story-container > .pp-way-row    { padding: 28px 20px; }
    .pp-way-row__title                           { font-size: 22px; line-height: 32px; }
    .pp-foundation__title                        { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   INNOVATION — .iv-*
   ============================================================ */

/* Hero */
.iv-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.iv-intro {
    padding: 96px 0;
    background: #ffffff;
}

.iv-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.iv-intro__text {
    flex: 1;
    min-width: 0;
}

.iv-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.iv-intro__image-wrap {
    flex: 0 0 420px;
}

.iv-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Nine Areas */
.iv-areas {
    padding: 96px 0;
    background: #16202f;
}

.iv-areas__header {
    margin-bottom: 52px;
}

.iv-areas__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.iv-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.iv-area-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 28px;
    background: #16202f;
    transition: background 0.2s;
}

.iv-area-card:hover {
    background: rgba(255,255,255,0.04);
}

.iv-area-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    display: block;
}

.iv-area-card__label {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 26px;
    color: #ffffff;
}

/* Future Audiences */
.iv-audiences {
    padding: 96px 0;
    background: #fafafa;
}

.iv-audiences__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.iv-audiences__img-col {
    flex: 0 0 440px;
}

.iv-audiences__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.iv-audiences__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.iv-audiences__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.iv-audiences__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.iv-audiences__pillars {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid #d8dadc;
}

.iv-audience-pillar {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.iv-audience-pillar__bar {
    flex-shrink: 0;
    width: 3px;
    height: 52px;
    background: #16202f;
    margin-top: 2px;
}

.iv-audience-pillar h5 {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    margin: 0 0 6px;
}

.iv-audience-pillar p {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

/* AAPI Collaboration */
.iv-aapi {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.iv-aapi__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}

.iv-aapi > .story-container {
    position: relative;
    z-index: 1;
}

.iv-aapi__inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.iv-aapi__text {
    flex: 1;
    min-width: 0;
}

.iv-aapi__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 8px 0 20px;
}

.iv-aapi__rule {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.25);
    margin-bottom: 28px;
}

.iv-aapi__text p {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.iv-aapi__collab {
    flex: 0 0 300px;
}

.iv-aapi__collab-label {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 24px;
}

.iv-aapi__collab-items {
    display: flex;
    flex-direction: column;
}

.iv-collab-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.iv-collab-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.iv-collab-item__line {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

/* Closing */
.iv-closing {
    padding: 100px 0;
    background: #ffffff;
    text-align: center;
    border-top: 1px solid #d8dadc;
}

.iv-closing__text {
    font-family: 'Muli', sans-serif;
    font-size: 19px;
    line-height: 32px;
    color: #16202f;
    margin: 0 0 24px;
}

.iv-closing__caption {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    margin: 0;
}

/* ============================================================
   INNOVATION RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .iv-intro__wrap            { flex-direction: column; gap: 48px; }
    .iv-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .iv-areas__grid            { grid-template-columns: repeat(2, 1fr); }
    .iv-areas__title           { font-size: 32px; line-height: 44px; }
    .iv-audiences__wrap        { flex-direction: column; gap: 48px; }
    .iv-audiences__img-col     { flex: none; width: 100%; max-width: 480px; }
    .iv-audiences__title       { font-size: 28px; line-height: 40px; }
    .iv-aapi__inner            { flex-direction: column; gap: 48px; }
    .iv-aapi__collab           { flex: none; width: 100%; }
    .iv-aapi__title            { font-size: 28px; line-height: 40px; }
}

@media (max-width: 768px) {
    .iv-intro                  { padding: 64px 0; }
    .iv-areas                  { padding: 64px 0; }
    .iv-audiences              { padding: 64px 0; }
    .iv-aapi                   { padding: 72px 0; }
    .iv-areas__title           { font-size: 26px; line-height: 36px; }
    .iv-area-card              { padding: 24px 20px; }
    .iv-closing__text          { font-size: 17px; line-height: 28px; }
}

@media (max-width: 540px) {
    .iv-areas__grid            { grid-template-columns: 1fr; }
    .iv-audiences__title       { font-size: 24px; line-height: 34px; }
    .iv-aapi__title            { font-size: 24px; line-height: 34px; }
    .iv-closing                { padding: 64px 0; }
}

/* ============================================================
   GET INVOLVED — .gi-*
   ============================================================ */

/* Hero */
.gi-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.gi-intro {
    padding: 80px 0 64px;
    background: #ffffff;
    text-align: center;
}

.gi-intro__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
}

.gi-intro__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #16202f;
    margin: 0 0 24px;
}

.gi-intro__lead {
    font-family: 'Muli', sans-serif;
    font-size: 17px;
    line-height: 28px;
    color: #797979;
    margin: 0;
}

/* Four Ways Grid */
.gi-ways {
    padding: 0 0 96px;
    background: #ffffff;
}

.gi-ways__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #d8dadc;
    border: 2px solid #d8dadc;
}

.gi-way-card {
    display: flex;
    flex-direction: column;
    background: #16202f;
    padding: 52px 48px;
    gap: 0;
    transition: background 0.25s;
}

.gi-way-card:hover {
    background: #1d2a3d;
}

.gi-way-card__top {
    margin-bottom: 24px;
}

.gi-way-card__icon {
    margin-bottom: 24px;
}

.gi-way-card__eyebrow {
    display: block;
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 10px;
}

.gi-way-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 26px;
    line-height: 36px;
    color: #ffffff;
    margin: 0;
}

.gi-way-card__body {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 auto;
    flex: 1;
}

.gi-way-card__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    transition: color 0.2s;
    width: 100%;
}

.gi-way-card__link:hover {
    color: #ffffff;
}

.gi-way-card__link-arrow {
    font-size: 16px;
    transition: transform 0.2s;
}

.gi-way-card__link:hover .gi-way-card__link-arrow {
    transform: translateX(4px);
}

/* Closing Band */
.gi-band {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.gi-band__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.80);
}

.gi-band > .story-container {
    position: relative;
    z-index: 1;
}

.gi-band__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.gi-band__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 36px;
    color: #ffffff;
    font-style: italic;
    margin: 0 0 24px;
}

.gi-band__caption {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* ============================================================
   GET INVOLVED RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .gi-intro__title           { font-size: 32px; line-height: 44px; }
    .gi-ways__grid             { grid-template-columns: 1fr; }
    .gi-way-card               { padding: 44px 40px; }
}

@media (max-width: 768px) {
    .gi-intro                  { padding: 64px 0 48px; }
    .gi-intro__title           { font-size: 28px; line-height: 38px; }
    .gi-ways                   { padding: 0 0 64px; }
    .gi-way-card               { padding: 36px 28px; }
    .gi-way-card__title        { font-size: 22px; line-height: 32px; }
    .gi-band                   { padding: 72px 0; }
    .gi-band__text             { font-size: 19px; line-height: 31px; }
}

@media (max-width: 540px) {
    .gi-way-card               { padding: 32px 20px; }
    .gi-intro__title           { font-size: 24px; line-height: 34px; }
}

/* ============================================================
   SUPPORT / DONATE — .sd-*
   ============================================================ */

/* Hero */
.sd-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.sd-intro {
    padding: 96px 0;
    background: #ffffff;
}

.sd-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.sd-intro__text {
    flex: 1;
    min-width: 0;
}

.sd-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.sd-intro__image-wrap {
    flex: 0 0 400px;
}

.sd-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Contribution Areas */
.sd-areas {
    padding: 96px 0;
    background: #16202f;
}

.sd-areas__header {
    margin-bottom: 52px;
}

.sd-areas__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.sd-areas__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sd-area-item {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sd-area-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sd-area-item__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    width: 28px;
}

.sd-area-item__label {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.85);
}

/* Commitment */
.sd-commitment {
    padding: 96px 0;
    background: #fafafa;
}

.sd-commitment__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.sd-commitment__img-col {
    flex: 0 0 440px;
}

.sd-commitment__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.sd-commitment__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.sd-commitment__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.sd-commitment__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.sd-commitment__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 16px;
}

.sd-commitment__qualities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid #d8dadc;
}

.sd-quality {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
}

.sd-quality__bar {
    flex-shrink: 0;
    width: 24px;
    height: 2px;
    background: #16202f;
}

/* Who We Welcome */
.sd-welcome {
    padding: 96px 0;
    background: #16202f;
}

.sd-welcome__inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.sd-welcome__text {
    flex: 1;
    min-width: 0;
}

.sd-welcome__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #ffffff;
    margin: 8px 0 20px;
}

.sd-welcome__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.sd-welcome__tags {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: center;
}

.sd-welcome__tags span {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    padding: 14px 0 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
}

.sd-welcome__tags span:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sd-welcome__tags span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}

/* CTA */
.sd-cta {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    text-align: center;
}

.sd-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}

.sd-cta > .story-container {
    position: relative;
    z-index: 1;
}

.sd-cta__inner {
    max-width: 680px;
    margin: 0 auto;
}

.sd-cta__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 56px;
    color: #ffffff;
    margin: 12px 0 24px;
}

.sd-cta__sub {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 40px;
}

.sd-cta__btn {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    background: #ffffff;
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.sd-cta__btn:hover {
    background: rgba(255,255,255,0.88);
    color: #16202f;
}

/* ============================================================
   SUPPORT / DONATE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .sd-intro__wrap            { flex-direction: column; gap: 48px; }
    .sd-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .sd-commitment__wrap       { flex-direction: column; gap: 48px; }
    .sd-commitment__img-col    { flex: none; width: 100%; max-width: 480px; }
    .sd-commitment__title      { font-size: 28px; line-height: 40px; }
    .sd-welcome__inner         { flex-direction: column; gap: 48px; }
    .sd-welcome__tags          { flex: none; width: 100%; }
    .sd-welcome__title         { font-size: 28px; line-height: 40px; }
    .sd-areas__title           { font-size: 32px; line-height: 44px; }
    .sd-cta__title             { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .sd-intro                  { padding: 64px 0; }
    .sd-areas                  { padding: 64px 0; }
    .sd-commitment             { padding: 64px 0; }
    .sd-welcome                { padding: 64px 0; }
    .sd-cta                    { padding: 80px 0; }
    .sd-commitment__qualities  { grid-template-columns: 1fr; }
    .sd-areas__title           { font-size: 26px; line-height: 36px; }
    .sd-cta__title             { font-size: 26px; line-height: 36px; }
}

@media (max-width: 540px) {
    .sd-area-item              { gap: 20px; padding: 18px 0; }
    .sd-area-item__label       { font-size: 14px; }
    .sd-commitment__title      { font-size: 24px; line-height: 34px; }
    .sd-cta__title             { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   PARTNER WITH US — .pw-*
   ============================================================ */

/* Hero */
.pw-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.pw-intro {
    padding: 96px 0;
    background: #ffffff;
}

.pw-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.pw-intro__text {
    flex: 1;
    min-width: 0;
}

.pw-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.pw-intro__image-wrap {
    flex: 0 0 400px;
}

.pw-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Nine Partner Types */
.pw-types {
    padding: 96px 0;
    background: #16202f;
}

.pw-types__header {
    margin-bottom: 52px;
}

.pw-types__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.pw-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.pw-type-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 28px;
    background: #16202f;
    transition: background 0.2s;
}

.pw-type-card:hover {
    background: rgba(255,255,255,0.04);
}

.pw-type-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    display: block;
}

.pw-type-card__label {
    font-family: 'Prata', Georgia, serif;
    font-size: 17px;
    line-height: 26px;
    color: #ffffff;
}

/* Partnership Forms */
.pw-forms {
    padding: 96px 0;
    background: #fafafa;
}

.pw-forms__wrap {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.pw-forms__text {
    flex: 0 0 380px;
}

.pw-forms__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 32px;
    line-height: 44px;
    color: #16202f;
    margin: 8px 0 20px;
}

.pw-forms__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 24px;
}

.pw-forms__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0;
}

.pw-forms__tags {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.pw-forms__tags span {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 10px 18px;
    background: #ffffff;
}

/* Early-Stage Opportunity */
.pw-opportunity {
    padding: 96px 0;
    background: #ffffff;
}

.pw-opportunity__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.pw-opportunity__img-col {
    flex: 0 0 440px;
}

.pw-opportunity__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.pw-opportunity__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.pw-opportunity__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.pw-opportunity__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.pw-opportunity__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 16px;
}

.pw-opportunity__areas {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid #d8dadc;
}

.pw-area-item {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: #16202f;
    padding: 14px 0;
    border-bottom: 1px solid #d8dadc;
}

.pw-area-item:first-child {
    border-top: 1px solid #d8dadc;
}

.pw-area-item__bar {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background: #16202f;
}

/* CTA */
.pw-cta {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    text-align: center;
}

.pw-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}

.pw-cta > .story-container {
    position: relative;
    z-index: 1;
}

.pw-cta__inner {
    max-width: 680px;
    margin: 0 auto;
}

.pw-cta__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 56px;
    color: #ffffff;
    margin: 12px 0 24px;
}

.pw-cta__sub {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 40px;
}

.pw-cta__btn {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    background: #ffffff;
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.2s;
}

.pw-cta__btn:hover {
    background: rgba(255,255,255,0.88);
}

/* ============================================================
   PARTNER WITH US RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pw-intro__wrap            { flex-direction: column; gap: 48px; }
    .pw-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .pw-types__grid            { grid-template-columns: repeat(2, 1fr); }
    .pw-types__title           { font-size: 32px; line-height: 44px; }
    .pw-forms__wrap            { flex-direction: column; gap: 48px; }
    .pw-forms__text            { flex: none; width: 100%; }
    .pw-opportunity__wrap      { flex-direction: column; gap: 48px; }
    .pw-opportunity__img-col   { flex: none; width: 100%; max-width: 480px; }
    .pw-opportunity__title     { font-size: 28px; line-height: 40px; }
    .pw-cta__title             { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .pw-intro                  { padding: 64px 0; }
    .pw-types                  { padding: 64px 0; }
    .pw-forms                  { padding: 64px 0; }
    .pw-opportunity            { padding: 64px 0; }
    .pw-cta                    { padding: 80px 0; }
    .pw-types__title           { font-size: 26px; line-height: 36px; }
    .pw-type-card              { padding: 24px 20px; }
    .pw-cta__title             { font-size: 26px; line-height: 36px; }
}

@media (max-width: 540px) {
    .pw-types__grid            { grid-template-columns: 1fr; }
    .pw-opportunity__title     { font-size: 24px; line-height: 34px; }
    .pw-forms__title           { font-size: 26px; line-height: 36px; }
    .pw-cta__title             { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   CONTRIBUTE ARTIFACTS — .ca-*
   ============================================================ */

/* Hero */
.ca-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.ca-intro {
    padding: 96px 0;
    background: #ffffff;
}

.ca-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.ca-intro__text {
    flex: 1;
    min-width: 0;
}

.ca-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.ca-intro__image-wrap {
    flex: 0 0 400px;
}

.ca-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Eight Contribution Types */
.ca-types {
    padding: 96px 0;
    background: #16202f;
}

.ca-types__header {
    margin-bottom: 52px;
}

.ca-types__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.ca-types__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.ca-type-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 24px;
    background: #16202f;
    transition: background 0.2s;
}

.ca-type-card:hover {
    background: rgba(255,255,255,0.04);
}

.ca-type-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    display: block;
}

.ca-type-card__label {
    font-family: 'Prata', Georgia, serif;
    font-size: 15px;
    line-height: 24px;
    color: #ffffff;
}

/* Beyond Objects */
.ca-knowledge {
    padding: 96px 0;
    background: #fafafa;
}

.ca-knowledge__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.ca-knowledge__img-col {
    flex: 0 0 440px;
}

.ca-knowledge__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.ca-knowledge__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.ca-knowledge__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.ca-knowledge__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.ca-knowledge__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 16px;
}

.ca-knowledge__principles {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid #d8dadc;
}

.ca-principle {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ca-principle__bar {
    flex-shrink: 0;
    width: 3px;
    height: 52px;
    background: #16202f;
    margin-top: 2px;
}

.ca-principle h5 {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    margin: 0 0 6px;
}

.ca-principle p {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #797979;
    margin: 0;
}

/* CTA */
.ca-cta {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    text-align: center;
}

.ca-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}

.ca-cta > .story-container {
    position: relative;
    z-index: 1;
}

.ca-cta__inner {
    max-width: 680px;
    margin: 0 auto;
}

.ca-cta__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 56px;
    color: #ffffff;
    margin: 12px 0 24px;
}

.ca-cta__sub {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 40px;
}

.ca-cta__btn {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    background: #ffffff;
    padding: 16px 36px;
    text-decoration: none;
    transition: background 0.2s;
}

.ca-cta__btn:hover {
    background: rgba(255,255,255,0.88);
}

/* ============================================================
   CONTRIBUTE ARTIFACTS RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ca-intro__wrap            { flex-direction: column; gap: 48px; }
    .ca-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .ca-types__grid            { grid-template-columns: repeat(2, 1fr); }
    .ca-types__title           { font-size: 32px; line-height: 44px; }
    .ca-knowledge__wrap        { flex-direction: column; gap: 48px; }
    .ca-knowledge__img-col     { flex: none; width: 100%; max-width: 480px; }
    .ca-knowledge__title       { font-size: 28px; line-height: 40px; }
    .ca-cta__title             { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .ca-intro                  { padding: 64px 0; }
    .ca-types                  { padding: 64px 0; }
    .ca-knowledge              { padding: 64px 0; }
    .ca-cta                    { padding: 80px 0; }
    .ca-types__title           { font-size: 26px; line-height: 36px; }
    .ca-type-card              { padding: 24px 18px; }
    .ca-cta__title             { font-size: 26px; line-height: 36px; }
}

@media (max-width: 540px) {
    .ca-types__grid            { grid-template-columns: 1fr; }
    .ca-knowledge__title       { font-size: 24px; line-height: 34px; }
    .ca-cta__title             { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   VOLUNTEER — .vl-*
   ============================================================ */

/* Hero */
.vl-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.vl-intro {
    padding: 96px 0;
    background: #ffffff;
}

.vl-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.vl-intro__text {
    flex: 1;
    min-width: 0;
}

.vl-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.vl-intro__image-wrap {
    flex: 0 0 400px;
}

.vl-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Ten Volunteer Areas */
.vl-areas {
    padding: 96px 0;
    background: #16202f;
}

.vl-areas__header {
    margin-bottom: 52px;
}

.vl-areas__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.vl-areas__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.vl-area-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 22px;
    background: #16202f;
    transition: background 0.2s;
}

.vl-area-card:hover {
    background: rgba(255,255,255,0.04);
}

.vl-area-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    display: block;
}

.vl-area-card__label {
    font-family: 'Prata', Georgia, serif;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
}

/* Who We Welcome */
.vl-welcome {
    padding: 96px 0;
    background: #fafafa;
}

.vl-welcome__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.vl-welcome__img-col {
    flex: 0 0 440px;
}

.vl-welcome__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.vl-welcome__text {
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}

.vl-welcome__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 36px;
    line-height: 50px;
    color: #16202f;
    margin: 8px 0 20px;
}

.vl-welcome__rule {
    width: 40px;
    height: 2px;
    background: #d8dadc;
    margin-bottom: 28px;
}

.vl-welcome__text > p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 28px;
}

.vl-welcome__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #d8dadc;
}

.vl-welcome__tags span {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 8px 16px;
    background: #ffffff;
}

.vl-welcome__formative p {
    font-family: 'Prata', Georgia, serif;
    font-size: 16px;
    line-height: 28px;
    color: #16202f;
    font-style: italic;
    margin: 0;
}

/* CTA */
.vl-cta {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    text-align: center;
}

.vl-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}

.vl-cta > .story-container {
    position: relative;
    z-index: 1;
}

.vl-cta__inner {
    max-width: 680px;
    margin: 0 auto;
}

.vl-cta__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 56px;
    color: #ffffff;
    margin: 12px 0 24px;
}

.vl-cta__sub {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 27px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 40px;
}

.vl-cta__btn {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}

.vl-cta__btn:hover {
    background: rgba(255,255,255,0.88);
}

/* ============================================================
   VOLUNTEER RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .vl-intro__wrap            { flex-direction: column; gap: 48px; }
    .vl-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .vl-areas__grid            { grid-template-columns: repeat(2, 1fr); }
    .vl-areas__title           { font-size: 32px; line-height: 44px; }
    .vl-welcome__wrap          { flex-direction: column; gap: 48px; }
    .vl-welcome__img-col       { flex: none; width: 100%; max-width: 480px; }
    .vl-welcome__title         { font-size: 28px; line-height: 40px; }
    .vl-cta__title             { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .vl-intro                  { padding: 64px 0; }
    .vl-areas                  { padding: 64px 0; }
    .vl-welcome                { padding: 64px 0; }
    .vl-cta                    { padding: 80px 0; }
    .vl-areas__title           { font-size: 26px; line-height: 36px; }
    .vl-area-card              { padding: 22px 16px; }
    .vl-cta__title             { font-size: 26px; line-height: 36px; }
}

@media (max-width: 540px) {
    .vl-areas__grid            { grid-template-columns: 1fr; }
    .vl-welcome__title         { font-size: 24px; line-height: 34px; }
    .vl-cta__title             { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   UPDATES — .up-*
   ============================================================ */

/* Hero */
.up-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.up-intro {
    padding: 96px 0;
    background: #ffffff;
}

.up-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.up-intro__text {
    flex: 1;
    min-width: 0;
}

.up-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.up-intro__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 16px;
}

.up-intro__text .up-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.up-intro__image-wrap {
    flex: 0 0 400px;
}

.up-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Current Activity */
.up-activity {
    padding: 96px 0;
    background: #16202f;
}

.up-activity__header {
    margin-bottom: 52px;
}

.up-activity__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.up-activity__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.up-activity-item {
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.85);
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.up-activity-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.up-activity-item__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
}

/* Current Updates */
.up-updates {
    padding: 96px 0;
    background: #fafafa;
}

.up-updates__header {
    margin-bottom: 52px;
}

.up-updates__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #16202f;
    margin: 8px 0 0;
}

.up-updates__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.up-update-card {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #d8dadc;
}

.up-update-card__bar {
    flex-shrink: 0;
    width: 4px;
    background: #16202f;
}

.up-update-card__body {
    flex: 1;
    padding: 36px 44px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.up-update-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.up-update-card__status {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    background: #16202f;
    padding: 4px 12px;
}

.up-update-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #d8dadc;
}

.up-update-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 24px;
    line-height: 34px;
    color: #16202f;
    margin: 0;
}

.up-update-card__text {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0;
}

/* Closing Band */
.up-band {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.up-band__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.82);
}

.up-band > .story-container {
    position: relative;
    z-index: 1;
}

.up-band__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.up-band__text {
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    line-height: 36px;
    color: #ffffff;
    font-style: italic;
    margin: 0 0 24px;
}

.up-band__caption {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* ============================================================
   UPDATES RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .up-intro__wrap            { flex-direction: column; gap: 48px; }
    .up-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .up-activity__title        { font-size: 32px; line-height: 44px; }
    .up-updates__title         { font-size: 32px; line-height: 44px; }
}

@media (max-width: 768px) {
    .up-intro                  { padding: 64px 0; }
    .up-activity               { padding: 64px 0; }
    .up-updates                { padding: 64px 0; }
    .up-band                   { padding: 72px 0; }
    .up-activity__title        { font-size: 26px; line-height: 36px; }
    .up-updates__title         { font-size: 26px; line-height: 36px; }
    .up-update-card__body      { padding: 28px 28px; }
    .up-update-card__title     { font-size: 20px; line-height: 30px; }
    .up-band__text             { font-size: 18px; line-height: 30px; }
}

@media (max-width: 540px) {
    .up-activity-item          { gap: 18px; font-size: 14px; padding: 18px 0; }
    .up-update-card__body      { padding: 24px 20px; }
    .up-update-card__title     { font-size: 18px; line-height: 28px; }
    .up-updates__title         { font-size: 22px; line-height: 32px; }
}

/* ============================================================
   MEDIA — .me-*
   ============================================================ */

/* Hero */
.me-hero {
    background-size: cover;
    background-position: center;
}

/* Intro */
.me-intro {
    padding: 96px 0;
    background: #ffffff;
}

.me-intro__wrap {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.me-intro__text {
    flex: 1;
    min-width: 0;
}

.me-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.me-intro__text p {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #797979;
    margin: 0 0 16px;
}

.me-intro__text .me-intro__lead {
    font-family: 'Prata', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    color: #16202f;
    margin-bottom: 20px;
}

.me-intro__image-wrap {
    flex: 0 0 400px;
}

.me-intro__img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

/* Future Content */
.me-future {
    padding: 96px 0;
    background: #16202f;
}

.me-future__header {
    margin-bottom: 52px;
}

.me-future__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #ffffff;
    margin: 8px 0 0;
}

.me-future__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.me-future-item {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.me-future-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.me-future-item__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    width: 28px;
}

.me-future-item__label {
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.85);
}

/* Media in Development */
.me-development {
    padding: 96px 0;
    background: #fafafa;
}

.me-development__header {
    margin-bottom: 52px;
}

.me-development__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 40px;
    line-height: 54px;
    color: #16202f;
    margin: 8px 0 0;
}

.me-development__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: #d8dadc;
    border: 2px solid #d8dadc;
}

.me-dev-card {
    background: #ffffff;
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.me-dev-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.me-dev-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #d8dadc;
}

.me-dev-card__status {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    background: #16202f;
    padding: 4px 10px;
}

.me-dev-card__title {
    font-family: 'Prata', Georgia, serif;
    font-size: 21px;
    line-height: 30px;
    color: #16202f;
    margin: 0;
}

.me-dev-card__text {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #797979;
    margin: 0;
}

/* ============================================================
   MEDIA RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .me-intro__wrap            { flex-direction: column; gap: 48px; }
    .me-intro__image-wrap      { flex: none; width: 100%; max-width: 480px; }
    .me-future__title          { font-size: 32px; line-height: 44px; }
    .me-development__title     { font-size: 32px; line-height: 44px; }
    .me-development__grid      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .me-intro                  { padding: 64px 0; }
    .me-future                 { padding: 64px 0; }
    .me-development            { padding: 64px 0; }
    .me-future__title          { font-size: 26px; line-height: 36px; }
    .me-development__title     { font-size: 26px; line-height: 36px; }
    .me-dev-card               { padding: 32px 24px; }
    .me-future-item            { gap: 20px; font-size: 14px; padding: 18px 0; }
}

@media (max-width: 540px) {
    .me-development__title     { font-size: 22px; line-height: 32px; }
    .me-dev-card__title        { font-size: 18px; line-height: 28px; }
    .me-future__title          { font-size: 22px; line-height: 32px; }
}


/* =============================================================
   EVENTS & ANNOUNCEMENTS PAGE  (.ea-*)
   ============================================================= */

/* --- Hero --- */
.ea-hero {
    background-size: cover;
    background-position: center top;
}

/* --- Intro --- */
.ea-intro {
    padding: 96px 0 80px;
    background: #fff;
}
.ea-intro__wrap {
    display: flex;
    gap: 72px;
    align-items: flex-start;
}
.ea-intro__text {
    flex: 1 1 54%;
}
.ea-intro__lead {
    font-size: 1.125rem;
    color: #16202f;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.7;
}
.ea-intro__text p {
    color: #797979;
    line-height: 1.8;
    margin-bottom: 16px;
}
.ea-intro__image-wrap {
    flex: 1 1 40%;
}
.ea-intro__img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* --- Upcoming Events --- */
.ea-events {
    padding: 88px 0 80px;
    background: #16202f;
}
.ea-events__header {
    text-align: center;
    margin-bottom: 60px;
}
.ea-events__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0;
}
.ea-events__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Event Card */
.ea-event-card {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
}
.ea-event-card:hover {
    background: rgba(255,255,255,0.07);
}
.ea-event-card__date-col {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 32px 16px;
    text-align: center;
}
.ea-event-card__month {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d8dadc;
    display: block;
    margin-bottom: 6px;
}
.ea-event-card__day {
    font-family: 'Prata', serif;
    font-size: 2.6rem;
    color: #fff;
    display: block;
    line-height: 1;
}
.ea-event-card__year {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #797979;
    display: block;
    margin-top: 6px;
}
.ea-event-card__body {
    flex: 1;
    padding: 36px 40px 36px 40px;
}
.ea-event-card__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}
.ea-event-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #797979;
}
.ea-event-card__venue {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d8dadc;
}
.ea-event-card__title {
    font-family: 'Prata', serif;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.4;
}
.ea-event-card__text {
    color: #d8dadc;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.ea-event-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ea-event-card__tags span {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d8dadc;
    border: 1px solid rgba(216,218,220,0.3);
    padding: 5px 12px;
}

/* --- Announcements --- */
.ea-announcements {
    padding: 88px 0 80px;
    background: #fafafa;
}
.ea-announcements__header {
    text-align: center;
    margin-bottom: 56px;
}
.ea-announcements__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #16202f;
    margin: 0;
}
.ea-announcements__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ea-ann-card {
    background: #fff;
    border: 1px solid #d8dadc;
    padding: 36px 32px 32px;
}
.ea-ann-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ea-ann-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #797979;
}
.ea-ann-card__status {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    border: 1px solid #d8dadc;
    padding: 4px 10px;
}
.ea-ann-card__title {
    font-family: 'Prata', serif;
    font-size: 1.1rem;
    color: #16202f;
    margin: 0 0 14px;
    line-height: 1.45;
}
.ea-ann-card__text {
    font-size: 0.9rem;
    color: #797979;
    line-height: 1.8;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .ea-intro__wrap {
        flex-direction: column;
        gap: 40px;
    }
    .ea-intro__img {
        height: 280px;
    }
    .ea-event-card {
        flex-direction: column;
    }
    .ea-event-card__date-col {
        flex-direction: row;
        gap: 12px;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 20px 28px;
    }
    .ea-event-card__body {
        padding: 24px 28px 28px;
    }
    .ea-announcements__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .ea-events__title,
    .ea-announcements__title {
        font-size: 1.8rem;
    }
    .ea-event-card__title {
        font-size: 1.05rem;
    }
}


/* =============================================================
   LEADERSHIP PAGE  (.lt-*)
   ============================================================= */

/* --- Hero --- */
.lt-hero {
    background-size: cover;
    background-position: center top;
}

/* --- Intro --- */
.lt-intro {
    padding: 88px 0 72px;
    background: #fff;
}
.lt-intro__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.lt-intro__lead {
    font-size: 1.125rem;
    color: #16202f;
    font-weight: 600;
    line-height: 1.75;
    margin-bottom: 20px;
}
.lt-intro__inner p:not(.lt-intro__lead):not(.story-section__eyebrow-label) {
    color: #797979;
    line-height: 1.85;
}

/* --- Team Section --- */
.lt-team {
    padding: 0 0 80px;
    background: #fff;
}

/* Member Card — flat 3-col grid for precise alignment */
.lt-member {
    display: grid;
    grid-template-columns: 48px 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 28px;
    align-items: start;
    border-top: 1px solid #d8dadc;
    padding: 52px 0;
}
.lt-member:last-child {
    border-bottom: 1px solid #d8dadc;
}
.lt-member__num {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #797979;
    padding-top: 10px;
}
.lt-member__info {
    grid-column: 2 / 4;
    grid-row: 1;
    border-bottom: 1px solid #d8dadc;
    padding-bottom: 24px;
}
.lt-member__bio {
    grid-column: 2;
    grid-row: 2;
}
.lt-member__work {
    grid-column: 3;
    grid-row: 2;
}
.lt-member__name {
    font-family: 'Prata', serif;
    font-size: 1.6rem;
    color: #16202f;
    margin: 0 0 6px;
    line-height: 1.2;
}
.lt-member__role {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #797979;
    margin: 0;
}
.lt-member__bio p {
    color: #797979;
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0;
}
.lt-member__work-label {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #16202f;
    margin: 0 0 16px;
}
.lt-member__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lt-member__list li {
    font-size: 0.9rem;
    color: #797979;
    line-height: 1.65;
    padding-left: 16px;
    position: relative;
}
.lt-member__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 1px;
    background: #797979;
}

/* --- Advisory Circle --- */
.lt-advisory {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 96px 0;
}
.lt-advisory__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.86);
}
.lt-advisory .story-container {
    position: relative;
    z-index: 1;
}
.lt-advisory__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.lt-advisory__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.15;
}
.lt-advisory__rule {
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 24px;
}
.lt-advisory__lead {
    color: #d8dadc;
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0;
}
.lt-advisory__priorities-label {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0 0 24px;
}
.lt-advisory__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lt-advisory-item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
}
.lt-advisory-item__bar {
    flex: 0 0 24px;
    height: 1px;
    background: rgba(255,255,255,0.35);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .lt-member {
        grid-template-columns: 1fr;
    }
    .lt-member__num {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
    }
    .lt-member__info {
        grid-column: 1;
        grid-row: 2;
    }
    .lt-member__bio {
        grid-column: 1;
        grid-row: 3;
    }
    .lt-member__work {
        grid-column: 1;
        grid-row: 4;
    }
    .lt-advisory__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 600px) {
    .lt-member__name {
        font-size: 1.3rem;
    }
    .lt-member__header {
        gap: 16px;
    }
}


/* =============================================================
   HOME PAGE  (.hp-*)
   ============================================================= */

.hp-page {
    overflow-x: clip;
}

/* ---- Hero ---- */
.hp-hero {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.hp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(16,22,35,0.88) 45%, rgba(16,22,35,0.50) 100%);
}
.hp-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 40px 80px;
}
.hp-hero__eyebrow {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 28px;
}
.hp-hero__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    color: #fff;
    line-height: 1.2;
    margin: 0 0 32px;
    max-width: 540px;
}
.hp-hero__rule {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,0.35);
    margin-bottom: 28px;
}
.hp-hero__lead {
    font-family: 'Muli', sans-serif;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    max-width: 520px;
    margin: 0 0 44px;
}
.hp-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.hp-hero__btn {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 32px;
    display: inline-block;
    transition: all 0.2s;
}
.hp-hero__btn--primary {
    background: #fff;
    color: #16202f;
}
.hp-hero__btn--primary:hover {
    background: #f0f0f0;
    color: #16202f;
}
.hp-hero__btn--ghost {
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
}
.hp-hero__btn--ghost:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.hp-hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.hp-hero__scroll span {
    display: block;
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.3);
    margin: 0 auto;
    animation: scrollPulse 2s ease-in-out infinite;
}

/* ---- Mission Band ---- */
.hp-mission {
    background: #16202f;
    padding: 72px 0;
}
.hp-mission__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0 40px;
}
.hp-mission__mark {
    font-family: 'Prata', serif;
    font-size: 5rem;
    color: rgba(255,255,255,0.12);
    line-height: 0;
    vertical-align: -0.4em;
    display: block;
    margin-bottom: 16px;
}
.hp-mission__statement {
    font-family: 'Prata', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    color: #fff;
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

/* ---- Intro ---- */
.hp-intro {
    padding: 100px 0 88px;
    background: #fff;
}
.hp-intro__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.hp-intro__lead {
    font-size: 1.1rem;
    color: #16202f;
    font-weight: 600;
    line-height: 1.75;
    margin-bottom: 20px;
}
.hp-intro__text p:not(.hp-intro__lead):not(.story-section__eyebrow-label) {
    color: #797979;
    line-height: 1.85;
    margin-bottom: 16px;
}
.hp-intro__link {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #16202f;
    text-decoration: none;
    border-bottom: 1px solid #16202f;
    padding-bottom: 2px;
    display: inline-block;
    margin-top: 8px;
    transition: opacity 0.2s;
}
.hp-intro__link:hover { opacity: 0.6; }
.hp-intro__visual {
    position: relative;
}
.hp-intro__img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}
.hp-intro__stat-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #16202f;
}
.hp-intro__stat {
    padding: 28px 24px;
    border-right: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.hp-intro__stat:last-child { border-right: none; }
.hp-intro__stat-num {
    display: block;
    font-family: 'Prata', serif;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 6px;
}
.hp-intro__stat-label {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* ---- Four Pillars ---- */
.hp-pillars {
    background: #16202f;
    padding: 88px 0;
}
.hp-pillars__header {
    text-align: center;
    margin-bottom: 56px;
}
.hp-pillars__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0;
}
.hp-pillars__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
}
.hp-pillar-card {
    background: #16202f;
    padding: 40px 32px 36px;
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s;
}
.hp-pillar-card:hover {
    background: rgba(255,255,255,0.04);
}
.hp-pillar-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.35);
    display: block;
    margin-bottom: 8px;
}
.hp-pillar-card__title {
    font-family: 'Prata', serif;
    font-size: 1.2rem;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.hp-pillar-card__text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.8;
    margin: 0;
    flex: 1;
}
.hp-pillar-card__link {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    margin-top: 8px;
    display: inline-block;
    transition: color 0.2s;
}
.hp-pillar-card__link:hover { color: #fff; }

/* ---- Upcoming Events ---- */
.hp-events {
    background: #fafafa;
    padding: 88px 0 80px;
}
.hp-events__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}
.hp-events__see-all {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.hp-events__see-all:hover { color: #16202f; }
.hp-events__list {
    display: flex;
    flex-direction: column;
}
.hp-event-row {
    display: grid;
    grid-template-columns: 88px 1px 1fr auto 40px;
    gap: 0 32px;
    align-items: center;
    padding: 28px 0;
    border-top: 1px solid #d8dadc;
}
.hp-event-row:last-child {
    border-bottom: 1px solid #d8dadc;
}
.hp-event-row__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hp-event-row__month {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
}
.hp-event-row__day {
    font-family: 'Prata', serif;
    font-size: 2rem;
    color: #16202f;
    line-height: 1.1;
}
.hp-event-row__year {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    color: #797979;
}
.hp-event-row__divider {
    width: 1px;
    height: 48px;
    background: #d8dadc;
}
.hp-event-row__venue {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #797979;
    margin: 0 0 6px;
}
.hp-event-row__title {
    font-family: 'Prata', serif;
    font-size: 1.1rem;
    color: #16202f;
    margin: 0;
    line-height: 1.35;
}
.hp-event-row__tags {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}
.hp-event-row__tags span {
    font-family: 'Karla', sans-serif;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #797979;
    border: 1px solid #d8dadc;
    padding: 3px 8px;
    white-space: nowrap;
}
.hp-event-row__arrow {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    color: #16202f;
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.hp-event-row:hover .hp-event-row__arrow { opacity: 1; }

/* ---- Get Involved ---- */
.hp-engage {
    background: #16202f;
    padding: 88px 0;
}
.hp-engage__header {
    text-align: center;
    margin-bottom: 56px;
}
.hp-engage__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0;
}
.hp-engage__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}
.hp-engage-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 40px 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    transition: background 0.2s;
}
.hp-engage-card:hover {
    background: rgba(255,255,255,0.07);
}
.hp-engage-card__num {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.3);
}
.hp-engage-card__icon {
    margin: 4px 0;
}
.hp-engage-card__title {
    font-family: 'Prata', serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.hp-engage-card__text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.8;
    margin: 0;
    flex: 1;
}
.hp-engage-card__cta {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    display: inline-block;
    transition: color 0.2s;
}
.hp-engage-card:hover .hp-engage-card__cta { color: #fff; }

/* ---- Split: Painting Tradition ---- */
.hp-tradition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.hp-tradition__image-col {
    background-size: cover;
    background-position: center;
    min-height: 500px;
}
.hp-tradition__text-col {
    background: #fff;
    padding: 88px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.hp-tradition__title {
    font-family: 'Prata', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #16202f;
    margin: 0;
    line-height: 1.2;
}
.hp-tradition__rule {
    width: 40px;
    height: 1px;
    background: #d8dadc;
}
.hp-tradition__text-col p {
    color: #797979;
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0;
}
.hp-tradition__link {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    text-decoration: none;
    border-bottom: 1px solid #16202f;
    padding-bottom: 2px;
    display: inline-block;
    width: fit-content;
    transition: opacity 0.2s;
}
.hp-tradition__link:hover { opacity: 0.6; }

/* ---- Leadership Teaser ---- */
.hp-leadership {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}
.hp-leadership__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.85);
}
.hp-leadership .story-container {
    position: relative;
    z-index: 1;
}
.hp-leadership__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.hp-leadership__title {
    font-family: 'Prata', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
}
.hp-leadership__lead {
    color: rgba(255,255,255,0.65);
    line-height: 1.85;
    font-size: 0.95rem;
    margin: 0 0 32px;
}
.hp-leadership__btn {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #16202f;
    background: #fff;
    padding: 14px 28px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}
.hp-leadership__btn:hover { background: #f0f0f0; color: #16202f; }
.hp-leadership__members {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hp-leadership-member {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.hp-leadership-member__name {
    font-family: 'Prata', serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
}
.hp-leadership-member__role {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

/* ---- Updates Strip ---- */
.hp-updates {
    background: #fff;
    padding: 88px 0 72px;
}
.hp-updates__header {
    margin-bottom: 48px;
}
.hp-updates__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.hp-update-card {
    background: #fafafa;
    border: 1px solid #d8dadc;
    padding: 32px 28px 28px;
    position: relative;
}
.hp-update-card__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #16202f;
}
.hp-update-card__status {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    display: block;
    margin-bottom: 12px;
}
.hp-update-card__title {
    font-family: 'Prata', serif;
    font-size: 1.05rem;
    color: #16202f;
    margin: 0 0 12px;
    line-height: 1.4;
}
.hp-update-card p {
    font-size: 0.875rem;
    color: #797979;
    line-height: 1.8;
    margin: 0;
}
.hp-updates__footer {
    text-align: center;
    margin-top: 40px;
}
.hp-updates__link {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #16202f;
    text-decoration: none;
    border-bottom: 1px solid #16202f;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}
.hp-updates__link:hover { opacity: 0.6; }

/* ---- Final CTA ---- */
.hp-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
}
.hp-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16,22,35,0.84);
}
.hp-cta .story-container {
    position: relative;
    z-index: 1;
}
.hp-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.hp-cta__title {
    font-family: 'Prata', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    margin: 16px 0 24px;
    line-height: 1.2;
}
.hp-cta__sub {
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0 0 40px;
}
.hp-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.hp-cta__btn {
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 36px;
    display: inline-block;
    transition: all 0.2s;
}
.hp-cta__btn--white {
    background: #fff;
    color: #16202f;
}
.hp-cta__btn--white:hover { background: #f0f0f0; color: #16202f; }
.hp-cta__btn--ghost {
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
}
.hp-cta__btn--ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---- Responsive ---- */

/* Tablet: 2-col grids */
@media (max-width: 1100px) {
    .hp-pillars__grid,
    .hp-engage__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet: stack layouts, tighten padding */
@media (max-width: 900px) {
    /* Uniform section vertical padding */
    .hp-mission   { padding: 56px 0; }
    .hp-intro     { padding: 64px 0; }
    .hp-pillars   { padding: 64px 0; }
    .hp-events    { padding: 64px 0; }
    .hp-engage    { padding: 64px 0; }
    .hp-leadership { padding: 64px 0; }
    .hp-updates   { padding: 64px 0; }
    .hp-cta       { padding: 72px 0; }

    /* Grids → single column */
    .hp-intro__wrap,
    .hp-leadership__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hp-tradition { grid-template-columns: 1fr; }
    .hp-updates__grid { grid-template-columns: 1fr; gap: 16px; }

    /* Images */
    .hp-intro__img { height: 280px; }
    .hp-tradition__image-col { min-height: 300px; }
    .hp-tradition__text-col { padding: 48px 40px; }

    /* Events */
    .hp-events__header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hp-event-row { grid-template-columns: 72px 1px 1fr 32px; gap: 0 20px; }
    .hp-event-row__tags { display: none; }

    /* Gaps */
    .hp-pillars__header,
    .hp-engage__header { margin-bottom: 40px; }
    .hp-intro__stat-block { grid-template-columns: 1fr 1fr; }
    .hp-leadership__members { gap: 2px; }
}

/* Mobile: single column everything, minimal padding */
@media (max-width: 600px) {
    /* story-container horizontal padding */
    .story-container { padding: 0 20px; }

    /* Uniform minimal section vertical padding */
    .hp-mission   { padding: 44px 0; }
    .hp-intro     { padding: 48px 0; }
    .hp-pillars   { padding: 48px 0; }
    .hp-events    { padding: 48px 0; }
    .hp-engage    { padding: 48px 0; }
    .hp-leadership { padding: 48px 0; }
    .hp-updates   { padding: 48px 0; }
    .hp-cta       { padding: 56px 0; }

    /* Hero */
    .hp-hero__inner { padding: 100px 20px 48px; }
    .hp-hero__title { font-size: 1.9rem; line-height: 1.2; }
    .hp-hero__lead  { font-size: 0.95rem; }
    .hp-hero__actions { flex-direction: column; gap: 10px; }
    .hp-hero__btn { width: 100%; text-align: center; }

    /* Mission */
    .hp-mission__inner { padding: 0 20px; }
    .hp-mission__statement { font-size: 1.1rem; }

    /* Intro */
    .hp-intro__wrap { gap: 28px; }
    .hp-intro__img { height: 220px; }
    .hp-intro__stat-block { grid-template-columns: 1fr 1fr; }

    /* Pillars / Engage → single col */
    .hp-pillars__grid,
    .hp-engage__grid { grid-template-columns: 1fr; }
    .hp-pillars__header,
    .hp-engage__header { margin-bottom: 28px; }
    .hp-pillar-card,
    .hp-engage-card { padding: 28px 20px; }

    /* Events */
    .hp-event-row { grid-template-columns: 56px 1px 1fr 28px; gap: 0 14px; padding: 20px 0; }
    .hp-event-row__day { font-size: 1.5rem; }
    .hp-event-row__title { font-size: 0.95rem; }

    /* Tradition */
    .hp-tradition__image-col { min-height: 220px; }
    .hp-tradition__text-col { padding: 40px 20px; gap: 16px; }
    .hp-tradition__title { font-size: 1.6rem; }

    /* Leadership */
    .hp-leadership__inner { gap: 32px; }
    .hp-leadership-member { padding: 14px 16px; }

    /* Updates */
    .hp-updates__grid { gap: 12px; }
    .hp-update-card { padding: 24px 20px 20px; }
    .hp-updates__header { margin-bottom: 28px; }

    /* CTA */
    .hp-cta__title { font-size: 1.7rem; }
    .hp-cta__actions { flex-direction: column; gap: 10px; align-items: center; }
    .hp-cta__btn { width: 100%; max-width: 280px; text-align: center; }
}


/* =============================================================
   HOMEPAGE EVENTS — shortcode override to match HP row style
   Scoped entirely to .hp-events to avoid touching archive/single
   ============================================================= */

/* Wrapper reset */
.hp-events .mae-shortcode-wrap { margin: 0; padding: 0; }
.hp-events .mae-shortcode-title { display: none; }
.hp-events .mae-no-events {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    color: #797979;
    padding: 24px 0;
    letter-spacing: 0.05em;
}

/* Grid → vertical list */
.hp-events .mae-events-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
}

/* Card → horizontal row */
.hp-events .mae-event-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0;
    border-top: 1px solid #d8dadc;
    border-bottom: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    transition: background 0.15s;
    overflow: visible;
}
.hp-events .mae-event-card:last-child {
    border-bottom: 1px solid #d8dadc;
}
.hp-events .mae-event-card:hover {
    background: rgba(22,32,47,0.025);
    box-shadow: none;
    transform: none;
}

/* ── Image column ── */
.hp-events .mae-card-img-link {
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 100px !important;
    display: block !important;
    overflow: hidden;
    border-radius: 0;
    margin: 0 32px 0 0 !important;
    position: relative;
    order: -1 !important;
}
.hp-events .mae-card-img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.35s ease;
}
.hp-events .mae-event-card:hover .mae-card-img {
    transform: scale(1.05);
}
.hp-events .mae-card-img-placeholder {
    width: 150px;
    height: 100px;
    background: #f0f0f0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide image-overlay elements */
.hp-events .mae-card-badge,
.hp-events .mae-card-today,
.hp-events .mae-card-past-overlay { display: none; }

/* ── Card body: date + content ── */
.hp-events .mae-card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1;
    gap: 0;
    padding: 24px 0;
    border-radius: 0;
    background: transparent;
}

/* Date strip */
.hp-events .mae-card-date-strip {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid #d8dadc;
    padding-right: 28px;
    margin-right: 28px;
    background: transparent;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
}
.hp-events .mae-card-month {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #797979;
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 2px;
    display: block;
    line-height: 1.4;
    width: auto;
}
.hp-events .mae-card-day {
    font-family: 'Prata', serif;
    font-size: 2rem;
    color: #16202f;
    line-height: 1.1;
    display: block;
    font-weight: 400;
}

/* Content area */
.hp-events .mae-card-content {
    flex: 1;
    padding: 0;
}

/* Show only location (last meta item = venue), hide date+time */
.hp-events .mae-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 6px;
}
.hp-events .mae-card-meta-item {
    display: none;
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #797979;
    gap: 5px;
    align-items: center;
}
.hp-events .mae-card-meta-item svg { display: none; }
/* Show only location (last rendered meta item) */
.hp-events .mae-card-meta-item:last-child { display: flex; }

/* Title */
.hp-events .mae-card-title {
    font-family: 'Prata', serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
    color: #16202f;
}
.hp-events .mae-card-title a {
    color: #16202f;
    text-decoration: none;
    transition: opacity 0.2s;
}
.hp-events .mae-card-title a:hover { color: #16202f; opacity: 0.65; }

/* Hide excerpt */
.hp-events .mae-card-excerpt { display: block; }

/* Footer: hide price tag, keep btn as arrow */
.hp-events .mae-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
    background: transparent;
}
.hp-events .mae-card-price-tag { display: none; }
.hp-events .mae-card-btn:hover,
.hp-events .mae-event-card:hover .mae-card-btn {
    background: none;
    color: #16202f;
    opacity: 1;
    box-shadow: none;
    transform: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hp-events .mae-card-img-link {
        flex: 0 0 110px;
        width: 110px;
        height: 80px;
        margin-right: 20px;
    }
    .hp-events .mae-card-img { width: 110px; height: 80px; }
    .hp-events .mae-card-img-placeholder { width: 110px; height: 80px; }
    .hp-events .mae-card-date-strip {
        flex: 0 0 60px;
        padding-right: 20px;
        margin-right: 20px;
    }
    .hp-events .mae-card-day { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .hp-events .mae-card-img-link { display: none; }
    .hp-events .mae-card-date-strip {
        flex: 0 0 52px;
        padding-right: 14px;
        margin-right: 14px;
    }
    .hp-events .mae-card-day { font-size: 1.4rem; }
    .hp-events .mae-card-title { font-size: 0.95rem; }
    .hp-events .mae-card-body { padding: 18px 0; }
}