:root {
    /* Colors */
    --bg: #f8f6e9;
    --primary: #6f231d;
    --text: #7a5a52;
    --cristal: #F7F2DC;
    --selenite: #F8F6E9;
    --malachite: #31372A;
    --olivine: #BDB868;
    --celestine: #D1E5E2;
    --jaspe: #F0B941;
    --grenat: #6F1812;
    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    --main-font: "Season Sans", system-ui, sans-serif;
    --second-font: "Rollerscript", system-ui, sans-serif;
    --third-font: "Season Mix", system-ui, sans-serif;
    --title-size: clamp(2.2rem, 7vw, 3.25rem);
    --title-line: 1.05;
    --fs-title: 80px;
    --fs-subtitle: 48px;
    --subtitle-size: 1.1rem;
    --p-size: 1rem;
    --p-line: 1.75;
    /* Image config from Figma */
    --img-w: 463.47px;
    --img-h: 507.09px;
    --img-radius: 16px;
    --img-rotate: 4deg;
    /* Spacing */
    --mobile-x: 22px;
    --mobile-y: 28px;
    --desktop-y: 56px;
    --gap-desktop: 80px;
}

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

/***********/
/*  Main  */
/*********/

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }
}
.bg-primary {
    background-color: var(--bg) !important;
}
.text-primary {
    color: var(--grenat) !important;
}
.fs-title {
    font-size: var(--fs-title);
}
.fs-subtitle {
    font-size: var(--fs-subtitle);
}
.fs-18 {
    font-size: 18px !important;
}
.text-dark {
    color: var(--malachite) !important;
}
.mt-80 {
    margin-top: var(--gap-desktop);
}
.mb-24 {
    margin-bottom: 24px !important;
}
.p-24 {
    padding: 24px !important;
}
.main-font {
    font-family: var(--main-font);
}
.second-font {
    font-family: var(--second-font);
}
.btn {
    border-radius: 0 !important;
    padding: 8px 20px !important;
    font-family: var(--main-font);
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    border-width: 1px !important;
    line-height: 150%;
    box-shadow: none !important;
    
}
.btn:hover {
    filter: none !important;
}
.p-lg {
    padding: 12px 24px !important;
}
.btn-primary {
    color: var(--malachite) !important;
    background-color: var(--jaspe) !important;
    border-color: var(--jaspe) !important;
}
.bt-primary:hover{
    color: var(--malachite) !important;
    background-color: var(--jaspe) !important;
    border-color: var(--jaspe) !important;
}
.btn-outline-third {
    color: var(--grenat) !important;
    background-color: transparent !important;
    border-color: var(--grenat) !important;
} 
.form-control {
    background-color: transparent !important;
    border-radius: 0;
    border-color: var(--malachite) !important;
    color: var(--malachite) !important;
    padding-block: 12px;
    height: 100%;
}
.form-control::placeholder {
    color: rgba(111, 24, 18, 0.40) !important;
}
.form-control:focus {
    box-shadow: none !important;
}
.text-yellow {
    color: var(--jaspe) !important;
}
.btn.btn-secondary.text-yellow {
    color: var(--jaspe) !important;
}
.fs-7 {
    font-size: 0.9rem;
}
.btn-secondary {
    color: #fff !important;
    background-color: var(--malachite) !important;
    border-color: var(--malachite) !important;
}
.btn-outline-secondary {
    color: var(--malachite);
   border-color: var(--malachite) !important;
   background-color: transparent !important;
   box-shadow: none !important;
}
.btn-outline-secondary:hover {
    color: #fff !important;
   background-color: var(--malachite)  !important;
}
.btn-outline-primary {
    color: var(--jaspe) !important;
    background-color: transparent !important;
    border-color: var(--jaspe) !important;
}

.page-bg {
    background: var(--bg);
    font-family: var(--font-sans);
    color: var(--text);
}

#video .modal-dialog {
  max-width: 800px;
  margin: 30px auto;
}

#video .modal-body {
  position: relative;
  padding: 0px;
  background-color: var(--cristal);
}
#video .btn-close {
  position: absolute;
  right: -30px;
  top: 0;
}

/* SECTION */

.jade-section {
    background: #ffffff;
}


/* AUTHOR */

.jade-author {
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #9c6a5b;
    margin-bottom: 16px;
}


/* TITLE */

.jade-title {
    font-size: 80px;
    font-weight: 500;
    color: var(--grenat) !important;
    line-height: 98%;
    margin-bottom: 32px;
}

/* TEXT */

.jade-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #7a4a3d;
    margin-bottom: 20px;
}


/* SIGNATURE */

.jade-signature {
    margin-top: 32px;
    font-weight: 500;
}


/* IMAGE */

.jade-image-wrapper {
    display: flex;
    justify-content: center;
}

.jade-image {
    border-radius: 24px;
    max-width: 100%;
}


/* MOBILE TUNING */

@media (max-width: 767.98px) {
    .jade-title {
        font-size: 30px;
    }
    .jade-text p {
        font-size: 15px;
    }
}


/* ===== Participants (match screenshot) ===== */

.participants-section {
    background: #fff;
    padding: 64px 0;
}


/* ---------- Tabs (segmented baseline like screenshot) ---------- */

.participants-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 28px 0;
    padding: 0;
    border: 0;
}


/* Base */

.participants-tab {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 18px 14px;
    text-align: center;
    color: rgba(111, 35, 29, 0.75);
    font-size: 1.05rem;
    white-space: nowrap;
}


/* Inactive: left + right + bottom */

.participants-tab:not(.active) {
    border-left: 1px solid rgba(111, 35, 29, 0.45);
    border-right: 1px solid rgba(111, 35, 29, 0.45);
    border-bottom: 1px solid rgba(111, 35, 29, 0.45);
}


/* Active: text only (no borders, no bottom line) */

.participants-tab.active {
    color: var(--primary);
    font-weight: 600;
    border: 0;
}


/* Prevent double-thick borders between inactive neighbors */

.participants-tabs .nav-item+.nav-item .participants-tab:not(.active) {
    border-left: 0;
}


/* Mobile: allow horizontal scroll */

@media (max-width: 767.98px) {
    .participants-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .participants-tabs .nav-item {
        flex: 0 0 auto;
        min-width: 140px;
    }
}


/* ---------- Table layout: 4 columns + row separators ---------- */

.participants-table {
    margin-top: 10px;
}

.participants-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 per row */
    column-gap: 40px;
    /* 👈 reduced gap (Figma-like) */
    padding: 28px 0;
    border-bottom: 1px solid rgba(111, 35, 29, 0.55);
}

.participants-row--last {
    border-bottom: 0;
}


/* Each cell */

.participant {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    align-items: start;
}


/* Image */

.participant__img {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}


/* Text */

.participant__title {
    margin: 0 0 10px 0;
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}

.participant__name {
    margin: 0;
    color: rgba(111, 35, 29, 0.8);
    font-size: 0.95rem;
    line-height: 1.2;
}


/* Featured (the bold one in your screenshot row 3 col 1) */

.participant--featured .participant__title {
    font-weight: 700;
}


/* Mobile: stack items, keep separators */

@media (max-width: 767.98px) {
    .participants-row {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 18px;
        padding: 20px 0;
    }
    .participant {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .participant__img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
    .participant__title {
        font-size: 1.1rem;
    }
}


/* =========================
   Participants section (FULL CSS)
   Desktop matches 4-col table rows + separators
   Mobile matches screenshot: centered header, pill active tab, baseline, stacked big image cards
   ========================= */

.participants-section {
    background: #fff;
    padding: 64px 0;
}


/* ---------- Header (if you use it) ---------- */

.participants-header {
    max-width: 720px;
}

.participants-tagline {
    font-size: 12px;
    color: var(--primary);
    margin: 0 0 12px 0;
}

.participants-title {
    font-size: clamp(2.25rem, 4.2vw, 4rem);
    line-height: 1.05;
    font-weight: 500;
    color: var(--primary);
    margin: 0 0 14px 0;
}

.participants-intro {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    max-width: 620px;
}


/* ---------- Tabs (DESKTOP) segmented baseline like desktop screenshot ---------- */

.participants-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 36px 0 28px 0;
    padding: 0;
    border: 0;
}

.participants-tabs .nav-item {
    min-width: 0;
}


/* Base tab */

.participants-tab {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 18px 14px;
    text-align: center;
    color: rgba(111, 35, 29, 0.75);
    font-size: 1.05rem;
    white-space: nowrap;
}


/* Inactive: left + right + bottom */

.participants-tab:not(.active) {
    border-left: 1px solid rgba(111, 35, 29, 0.45);
    border-right: 1px solid rgba(111, 35, 29, 0.45);
    border-bottom: 1px solid rgba(111, 35, 29, 0.45);
}


/* Active: text only (no borders) */

.participants-tab.active {
    color: var(--primary);
    font-weight: 600;
    border: 0;
}


/* Avoid double-thick borders between inactive segments */

.participants-tabs .nav-item+.nav-item .participants-tab:not(.active) {
    border-left: 0;
}


/* ---------- Table/grid (DESKTOP) ---------- */

.participants-table {
    margin-top: 10px;
}

.participants-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 per row */
    column-gap: 40px;
    /* 👈 reduced gap (Figma-like) */
    padding: 28px 0;
    border-bottom: 1px solid rgba(111, 35, 29, 0.55);
}

.participants-row--last {
    border-bottom: 0;
}

.participant {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    align-items: start;
}

.participant__img {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

.participant__title {
    margin: 0 0 10px 0;
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}

.participant__name {
    margin: 0;
    color: rgba(111, 35, 29, 0.8);
    font-size: 0.95rem;
    line-height: 1.2;
}

.participant--featured .participant__title {
    font-weight: 700;
}


/* =========================
   MOBILE (match your screenshot)
   - Centered header
   - Tabs: pill active (outlined), others plain text
   - Tabs row scrollable
   - One thin baseline under the tabs
   - Stacked card layout with BIG image, then title + name + separator line
   ========================= */

@media (max-width: 767.98px) {
    .participants-section {
        padding: 40px 0;
    }
    /* Center header like screenshot */
    .participants-header {
        text-align: center;
        margin: 0 auto;
        max-width: 520px;
        padding: 0 18px;
    }
    .participants-title {
        font-size: 2.15rem;
    }
    .participants-intro {
        font-size: 0.95rem;
        margin: 0 auto;
    }
    /* Tabs: scrollable row, with baseline */
    .participants-tabs {
        display: flex;
        gap: 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 26px 0 14px 0;
        padding: 0 18px 10px 18px;
        /* match screenshot inset */
        border: 0;
        position: relative;
    }
    /* Baseline under tabs */
    .participants-tabs::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 0;
        height: 1px;
        background: rgba(111, 35, 29, 0.55);
    }
    .participants-tabs .nav-item {
        flex: 0 0 auto;
    }
    /* Reset desktop segmented borders */
    .participants-tab,
    .participants-tab:not(.active) {
        border: 0 !important;
    }
    .participants-tab {
        padding: 10px 12px;
        font-size: 0.95rem;
        color: rgba(111, 35, 29, 0.85);
        background: transparent;
    }
    /* Active tab is the outlined pill */
    .participants-tab.active {
        border: 1px solid rgba(111, 35, 29, 0.6) !important;
        border-radius: 6px;
        padding: 10px 14px;
        font-weight: 500;
        background: #fff;
    }
    /* Content spacing */
    .participants-table {
        margin-top: 10px;
        padding: 0 18px;
        /* same inset as screenshot */
    }
    /* Each "row" becomes a vertical stream; keep separators per item */
    .participants-row {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 0;
        border-bottom: 0;
        row-gap: 0;
    }
    .participant {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 0;
        border-bottom: 1px solid rgba(111, 35, 29, 0.55);
    }
    /* Big image card */
    .participant__img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
    .participant__title {
        font-size: 1.05rem;
        margin: 0;
        font-weight: 700;
        /* looks bold in your screenshot */
    }
    .participant__name {
        font-size: 0.9rem;
        margin-top: 6px;
    }
}


/* ===== Footer (add to sommet-styles.css) ===== */

.site-footer {
    background: #32382c;
    /* dark olive like screenshot */
    color: rgba(255, 255, 255, 0.85);
    padding: 44px 0;
}

.footer-container {
    max-width: 1180px;
}


/* Brand centered */

.footer-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 18px;
}
.footer-brand img {
    width: 285px;
}
.footer-brand__text {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.12em;
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Long thin line */

.footer-divider {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    margin: 0 0 22px 0;
}


/* Desktop: copy left, links right */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-copy {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.footer-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.9rem;
}

.footer-link:hover {
    opacity: 0.85;
}


/* Mobile: links stacked, copy at bottom (like screenshot) */

@media (max-width: 767.98px) {
    .site-footer {
        padding: 36px 0;
    }
    .footer-divider {
        margin-bottom: 18px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .footer-links {
        flex-direction: column;
        gap: 14px;
    }
    .footer-copy {
        margin-top: 6px;
    }
}