:root {
    --logo-navy: #10213d;
    --ink: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --paper: #ffffff;
    --white: #ffffff;
    --green: #0b6b57;
    --gold: #0b6b57;
    --blue: #0b6b57;
    --coral: #0b6b57;
    --radius: 16px;
    --radius-sm: 12px;
    --soft-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 10px 24px rgba(17, 24, 39, .06);
    --lift-shadow: 0 16px 40px rgba(17, 24, 39, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Manrope, Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #ffffff;
    line-height: 1.55;
}
img { max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(11,107,87,.28);
    outline-offset: 3px;
}
.skip-link {
    position: fixed;
    left: 18px;
    top: 12px;
    z-index: 1000;
    transform: translateY(-140%);
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--lift-shadow);
}
.skip-link:focus {
    transform: translateY(0);
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    min-height: 106px;
    padding: 8px 6vw;
    background: rgba(16, 33, 61, .98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 28px rgba(8,24,52,.16);
}
.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 300px;
    height: 86px;
    min-width: 300px;
    color: var(--ink);
}
.brand img {
    display: block;
    width: 300px;
    height: auto;
    max-height: 86px;
    object-fit: contain;
}
nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
nav a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; }
nav a:hover,
nav a.is-active { color: #ffffff; }
nav a.is-active {
    position: relative;
}
nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}
.nav-cta.is-active {
    color: #ffffff;
}
.nav-cta.is-active::after {
    display: none;
}
.nav-cta {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
}
.nav-cta, .btn.primary { background: var(--green); color: white; }
.hero {
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 48px;
    align-items: center;
    padding: 56px 6vw 80px;
    background: #ffffff;
}
.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    display: grid;
    align-items: end;
    padding: 0;
    background: #0f1c19;
}
.home-hero::before {
    content: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 12%, rgba(11,107,87,.09), transparent 32%),
        linear-gradient(90deg, rgba(11,107,87,.035), transparent 58%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.45), transparent 72%);
}
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4,10,8,.78) 0%, rgba(4,10,8,.44) 44%, rgba(4,10,8,.12) 100%),
        linear-gradient(180deg, rgba(4,10,8,.08) 0%, rgba(4,10,8,.52) 100%);
}
.hero h1, .page-hero h1 {
    max-width: 1080px;
    margin: 0 0 22px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: 0;
    text-wrap: balance;
}
.hero p, .page-hero p { max-width: 760px; color: var(--muted); font-size: 18px; }
.hero-copy {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    align-self: end;
    width: min(920px, calc(100% - 10vw));
    margin: 0 5vw 34px;
    color: #ffffff;
}
.hero-copy h1 {
    max-width: 920px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(4,10,8,.34);
    backdrop-filter: blur(4px);
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: 0;
    text-align: left;
    text-wrap: nowrap;
    white-space: nowrap;
}
.home-hero .hero-copy .eyebrow {
    display: none;
}
.home-hero .eyebrow {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}
.home-hero .hero-copy h1,
.home-hero .hero-lead {
    color: #ffffff;
    text-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.hero-lead {
    max-width: 710px;
    margin: 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.65;
}
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}
.hero-tags span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid rgba(11,107,87,.18);
    border-radius: 999px;
    background: #ffffff;
    color: #36534d;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(22,33,31,.05);
}
.home-hero .hero-tags span {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.14);
    color: #ffffff;
    box-shadow: none;
}
.home-headline-section {
    padding-top: 74px;
    padding-bottom: 74px;
    background:
        linear-gradient(135deg, #eaf7ff 0%, #ffffff 48%, #fff7cf 100%);
}
.home-headline-card {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 28px;
    align-items: stretch;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(0, 132, 255, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 22px 52px rgba(11, 69, 120, .13);
}
.home-headline-copy {
    display: grid;
    align-content: center;
}
.home-headline-copy .eyebrow {
    background: #dff3ff;
    color: #005b99;
}
.home-headline-copy h2 {
    max-width: 760px;
    margin: 12px 0 18px;
    color: #0d2d4d;
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: 0;
}
.home-headline-copy p {
    max-width: 880px;
    margin: 0 0 14px;
    color: #31485d;
    font-size: 17px;
    line-height: 1.78;
    text-align: justify;
}
.home-headline-points {
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 22px;
    border-radius: 14px;
    background: #0b8ee8;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.home-headline-points span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #0d2d4d;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(6, 42, 74, .12);
}
.home-headline-points span:nth-child(even) {
    background: #ffe77a;
}
.eyebrow {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(11,107,87,.08);
    color: var(--green);
    text-transform: uppercase;
    font-weight: 850;
    letter-spacing: .04em;
    font-size: 12px;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--green);
    border-radius: 10px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-large {
    min-height: 54px;
    padding: 13px 24px;
}
.btn.primary {
    border-color: var(--green);
    box-shadow: 0 10px 18px rgba(11,107,87,.14);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(22,33,31,.1);
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 710px;
    margin-top: 34px;
}
.hero-stats article {
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(11,107,87,.13);
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.home-hero .hero-stats article,
.home-hero .hero-proof {
    border-color: rgba(255,255,255,.26);
    background: rgba(255,255,255,.9);
}
.hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    margin-top: 22px;
    padding: 10px 13px;
    border: 1px solid rgba(11,107,87,.13);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(22,33,31,.055);
}
.hero-proof strong { color: var(--green); }
.hero-stats strong {
    display: block;
    margin-bottom: 6px;
    color: var(--green);
    font-size: 30px;
    line-height: 1;
}
.hero-stats span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}
.hero-panel, .card, .login-card, .stats article {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--soft-shadow);
}
.hero-panel { padding: 28px; }
.hero-panel li { margin: 10px 0; }
.hero-showcase {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
}
.home-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #0f1c19;
}
.home-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10,24,20,.04), rgba(10,24,20,.2));
}
.slider-track {
    height: 100%;
    display: flex;
    transform: translateX(0);
    transition: transform .55s ease;
}
.slider-slide {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
}
.slider-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.slider-nav {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(22,33,31,.16);
}
.slider-nav.prev { left: 14px; }
.slider-nav.next { right: 14px; }
.slider-dots {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.slider-dots button {
    width: 30px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.56);
    cursor: pointer;
}
.slider-dots button.is-active {
    background: white;
}
.showcase-card {
    position: relative;
    z-index: 1;
    width: min(420px, 86%);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: var(--radius);
    background: rgba(255,255,255,.92);
    box-shadow: 0 22px 58px rgba(22,33,31,.18);
    backdrop-filter: blur(16px);
}
.showcase-card.main {
    justify-self: start;
    margin-top: 12px;
}
.showcase-card.compact {
    justify-self: end;
    width: min(330px, 82%);
    margin-top: 132px;
}
.showcase-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--coral);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.showcase-card strong {
    display: block;
    font-size: 24px;
    line-height: 1.18;
}
.showcase-card ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}
.showcase-progress {
    height: 9px;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 999px;
    background: #e5eee9;
}
.showcase-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}
.showcase-people {
    position: absolute;
    z-index: 2;
    right: 22px;
    top: 34px;
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 20px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(12px);
}
.showcase-people img {
    width: 68px;
    height: 68px;
    margin-left: -12px;
    border: 4px solid white;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(22,33,31,.18);
}
.showcase-people span {
    margin-left: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}
.section.participant-section {
    background: #e6f6ef;
}
.participant-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
.flow-card {
    min-height: 220px;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 24px;
    border: 1px solid #e4ece7;
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--soft-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.flow-card:hover {
    transform: translateY(-3px);
    border-color: rgba(11,107,87,.26);
    box-shadow: var(--lift-shadow);
}
.flow-card strong {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e8f4ef;
    color: var(--green);
    font-size: 15px;
}
.flow-card h3 {
    margin: 4px 0 0;
    font-size: 21px;
    line-height: 1.2;
}
.flow-card p {
    margin: 0;
    color: var(--muted);
}
.section {
    padding: 92px 6vw;
    border-top: 1px solid rgba(11,107,87,.08);
}
.section:nth-of-type(even) { background: inherit; }
.section h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.14; margin: 0 0 24px; text-wrap: balance; }
.muted { background: #f9fafb; }
.narrow { max-width: 920px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.section-head {
    max-width: 980px;
    margin-bottom: 34px;
}
.section-head h2 {
    margin: 0 0 10px;
    max-width: 980px;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.14;
    font-weight: 850;
    text-align: left;
    text-wrap: balance;
}
.section-head p:last-child {
    max-width: 820px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    text-align: left;
    line-height: 1.7;
}
.compact-head {
    max-width: 980px;
}
.service-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    background: #f3f6fb;
}
.service-band a {
    min-height: 104px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 20px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    font-size: 18px;
    font-weight: 850;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
    box-shadow: var(--soft-shadow);
}
.service-band a::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(11,107,87,.1);
    box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 10px var(--green);
}
.service-band a:hover {
    color: var(--green);
    background: #ffffff;
    box-shadow: var(--lift-shadow);
}
.card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 26px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(11,107,87,.34);
    box-shadow: var(--lift-shadow);
}
.program-cards .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0;
    background: var(--green);
}
.program-flyer-photo {
    width: calc(100% + 56px);
    aspect-ratio: 4 / 3.25;
    display: block;
    object-fit: contain;
    margin: -28px -28px 20px;
    background: #f8fafc;
    cursor: zoom-in;
    transition: transform .35s ease, filter .35s ease;
    transform-origin: center;
}
.flyer-preview-trigger {
    width: calc(100% + 56px);
    display: block;
    margin: -28px -28px 20px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #f8fafc;
    cursor: zoom-in;
}
.flyer-preview-trigger .program-flyer-photo {
    width: 100%;
    margin: 0;
}
.program-cards .card:hover .program-flyer-photo {
    transform: scale(1.03);
    filter: contrast(1.04) saturate(1.04);
}
.program-flyer-pdf {
    min-height: 120px;
    display: grid;
    place-items: center;
    margin: -26px -26px 18px;
    background: rgba(11,107,87,.06);
    color: var(--green);
    font-weight: 850;
}
.training-showcase {
    background: #ffffff;
}
.section.home-program-section {
    background: #f1eafd;
}
.section.participant-section {
    background: #e7f3ee;
}
.section.home-training-section {
    background: #edf4fb;
}
.section.home-why-section {
    background: #0b6b57;
    color: #ffffff;
}
.home-why-section .section-head h2,
.home-why-section .section-head p:last-child {
    color: #ffffff;
}
.home-why-section .eyebrow {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}
.why-us-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.why-us-image-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    background: #10213d;
    box-shadow: 0 18px 42px rgba(2, 19, 34, .22);
}
.section.home-trainer-section {
    background: #f1eef7;
}
.section.home-client-section {
    background: #eef5f4;
}
.section.home-article-section {
    background: #f7f1ec;
}
.section.home-gallery-section {
    background: #102842;
}
.home-gallery-section .section-head h2 {
    color: #ffffff;
}
.home-gallery-section .section-head p:last-child {
    color: #dce9f4;
}
.home-gallery-section .eyebrow {
    background: rgba(255,255,255,.14);
    color: #ffe77a;
}
.home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.home-gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(2, 12, 23, .2);
    cursor: zoom-in;
}
.home-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}
.home-gallery-item:hover img,
.home-gallery-item:focus img {
    transform: scale(1.045);
}
.gallery-page {
    min-height: 70vh;
    background: #f5f9fc;
}
.gallery-page .section-head {
    margin-bottom: 30px;
}
.gallery-page .section-head h1 {
    max-width: 760px;
    margin: 0;
    color: #102842;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
}
.gallery-page .home-gallery-item {
    border-color: rgba(16, 40, 66, .12);
    box-shadow: 0 14px 34px rgba(16, 40, 66, .12);
}
.gallery-modal .flyer-modal-head {
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    border: 0;
    background: transparent;
}
.gallery-modal .flyer-modal-head button {
    background: rgba(255, 255, 255, .92);
}
.gallery-modal .flyer-modal-dialog {
    grid-template-rows: minmax(0, 1fr);
}
.gallery-modal .flyer-modal-dialog > img {
    max-height: 92vh;
}
.training-flyer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.training-flyer-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--soft-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.training-flyer-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11,107,87,.28);
    box-shadow: var(--lift-shadow);
}
.training-flyer-media {
    min-height: 280px;
    display: grid;
    place-items: center;
    background: #f9fafb;
    color: var(--muted);
    font-weight: 800;
    overflow: hidden;
    cursor: zoom-in;
}
.training-flyer-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, filter .35s ease;
    transform-origin: center;
}
.training-flyer-media .flyer-preview-trigger {
    width: 100%;
    height: 100%;
    margin: 0;
}
.training-flyer-media .flyer-preview-trigger img {
    height: 100%;
}
.training-flyer-card:hover .training-flyer-media img {
    transform: scale(1.08);
    filter: contrast(1.04) saturate(1.04);
}
.flyer-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 24px;
}
.flyer-modal.is-open {
    display: grid;
}
.flyer-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17,24,39,.74);
    cursor: zoom-out;
}
.flyer-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 96vw);
    max-height: 92vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.flyer-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.flyer-modal-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flyer-modal-head button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--ink);
    font-size: 24px;
    cursor: pointer;
}
.flyer-modal img {
    width: 100%;
    height: 100%;
    max-height: calc(92vh - 68px);
    object-fit: contain;
    background: #111827;
}
body.flyer-modal-open {
    overflow: hidden;
}
.training-flyer-body {
    padding: 20px;
}
.training-flyer-body span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
.training-flyer-body h3 {
    margin: 8px 0;
    font-size: 20px;
    line-height: 1.2;
}
.training-flyer-body p {
    margin: 0;
    color: var(--muted);
}
.card span, .badge { color: var(--blue); font-weight: 800; font-size: 13px; }
.card h3 { margin: 10px 0; color: #111827; line-height: 1.2; }
.card p { color: var(--muted); }
.card-link {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    font-weight: 800;
}
.card-link::after {
    content: ">";
    margin-left: 8px;
}
.program-cards .card h3::before,
.training-flyer-body h3::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--green);
    vertical-align: middle;
}
.feature-list, .client-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.feature-list span, .client-strip span {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    box-shadow: var(--soft-shadow);
}
.why-section {
    background: #ffffff;
}
.feature-list.refined {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.feature-list.refined span {
    min-height: 156px;
    display: grid;
    align-content: space-between;
    gap: 14px;
    padding: 22px;
    color: var(--ink);
    font-weight: 800;
    box-shadow: var(--soft-shadow);
}
.feature-list.refined strong {
    color: var(--coral);
    font-size: 14px;
}
.client-strip span {
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    box-shadow: 0 12px 28px rgba(22,33,31,.045);
    flex: 1 1 180px;
}
.client-strip img {
    display: block;
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
}
.trainer-photo {
    width: 100%;
    aspect-ratio: 4 / 3.7;
    object-fit: contain;
    object-position: center top;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background: #ffffff;
}
.trainers .card,
.cards .card {
    border-color: var(--line);
}
.trainers .card:hover,
.cards .card:hover {
    border-color: rgba(11,107,87,.26);
}
.two-col .card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.two-col .card li {
    position: relative;
    padding-left: 24px;
    color: var(--muted);
}
.two-col .card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}
.trainers .card {
    display: grid;
    align-content: start;
}
.trainer-photo.large {
    aspect-ratio: 1 / 1;
}
.page-hero {
    padding: 92px 6vw 78px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border-bottom: 1px solid var(--line);
}
.page-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}
.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 88px;
    border-bottom: 1px solid var(--line);
}
.about-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.7;
}
.about-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: grid;
    align-content: end;
    gap: 14px;
    padding: 34px;
    border: 1px solid rgba(11,107,87,.14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.about-summary-card::before {
    content: "";
    position: absolute;
    top: 32px;
    right: 32px;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(11,107,87,.1);
    box-shadow: inset 0 0 0 14px #ffffff, inset 0 0 0 17px var(--green);
}
.about-summary-card span {
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}
.about-summary-card strong {
    display: block;
    color: var(--ink);
    font-size: 34px;
    line-height: 1.1;
}
.about-summary-card p {
    font-size: 16px;
    line-height: 1.6;
}
.about-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    background: #102842;
}
.about-story {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.about-overview .eyebrow {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}
.about-story p:not(.eyebrow) {
    margin: 0 0 18px;
    color: #eaf3f8;
    font-size: 19px;
    line-height: 1.8;
}
.about-info-card {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius);
    background: rgba(255,255,255,.1);
    box-shadow: 0 18px 40px rgba(3, 17, 31, .18);
}
.about-info-card span {
    display: block;
    margin-bottom: 8px;
    color: #ffe77a;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.about-info-card p {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.7;
}
.about-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.about-metrics article {
    min-height: 122px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius);
    background: rgba(255,255,255,.95);
    box-shadow: 0 18px 40px rgba(3, 17, 31, .18);
}
.about-metrics strong {
    display: block;
    margin-bottom: 8px;
    color: #0b8ee8;
    font-size: 38px;
    line-height: 1;
}
.about-metrics span {
    color: var(--muted);
    font-weight: 700;
}
.about-principles-section {
    background: linear-gradient(135deg, #eaf7ff 0%, #ffffff 52%, #fff4bd 100%);
}
.about-poster-grid {
    width: min(1320px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
    align-items: start;
    margin: 0 auto;
}
.about-visual-poster {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(13, 45, 77, .14);
    border-radius: 12px;
    background: #17458a;
    box-shadow: 0 24px 54px rgba(13, 45, 77, .18);
}
.about-visual-poster img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.about-mission-section .section-head h2 {
    color: #0d2d4d;
}
.about-mission-section .eyebrow {
    background: #d7efff;
    color: #005b99;
}
.about-mission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.about-mission-card {
    min-height: 180px;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 26px;
    border: 1px solid rgba(11,107,87,.14);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.about-mission-card span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(11,107,87,.1);
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
}
.about-mission-card p {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 700;
}
.about-value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.about-value-card {
    min-height: 260px;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 28px;
    border: 1px solid rgba(146, 103, 0, .14);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.about-value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11,107,87,.3);
    box-shadow: var(--lift-shadow);
}
.about-value-card span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(11,107,87,.1);
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
}
.about-value-card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.about-value-card p {
    margin: 0;
    color: var(--muted);
}
.about-contact-section {
    background: #ffffff;
}
.about-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 28px;
    align-items: center;
    padding: 32px;
    border: 1px solid rgba(11,107,87,.15);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.about-contact-card h2,
.about-contact-card h3 {
    margin: 0 0 12px;
}
.about-contact-card p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}
.inhouse-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 58px;
    align-items: end;
    background:
        radial-gradient(circle at 82% 14%, rgba(11,107,87,.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.inhouse-hero h1 {
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
}
.trainer-hero h1 {
    max-width: 980px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
}
.trainer-hero {
    background: #102842;
    border-bottom-color: rgba(255,255,255,.12);
}
.trainer-hero .eyebrow,
.certification-hero .eyebrow,
.article-hero .eyebrow {
    background: rgba(255,255,255,.14);
    color: #ffe77a;
}
.trainer-hero h1,
.certification-hero h1,
.article-hero h1 {
    color: #ffffff;
}
.certification-hero {
    background: #102842;
    border-bottom-color: rgba(255,255,255,.12);
}
.certification-hero h1 {
    max-width: 980px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
}
.certification-program-section {
    background: #dff3ff;
}
.certification-program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.certification-program-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.certification-program-card:nth-child(even) {
    border-color: rgba(180,120,0,.18);
    background: #fff9da;
}
.certification-program-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11,107,87,.28);
    box-shadow: var(--lift-shadow);
}
.certification-flyer-media {
    min-height: 260px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f4fbf7;
}
.certification-flyer-media .flyer-preview-trigger {
    width: 100%;
    height: 100%;
    margin: 0;
}
.certification-flyer-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    transition: transform .25s ease, filter .25s ease;
}
.certification-program-card:hover .certification-flyer-media img {
    transform: scale(1.06);
    filter: contrast(1.04) saturate(1.04);
}
.certification-program-body {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
}
.certification-program-body span {
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
}
.certification-program-body h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.18;
}
.certification-program-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}
.empty-certification {
    grid-column: 1 / -1;
}
.certification-benefits {
    max-width: none;
    margin: 0;
    background: #fff4bd;
}
.certification-benefits > * {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
.certification-benefits h2 {
    margin-top: 0;
    margin-bottom: 26px;
    color: #493b13;
    text-align: center;
}
.certification-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.certification-benefit-grid article {
    min-height: 160px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px 20px;
    border: 1px solid rgba(146, 103, 0, .16);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(97, 72, 12, .08);
    text-align: center;
}
.certification-benefit-grid span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #102842;
    color: #ffe77a;
    font-size: 13px;
    font-weight: 900;
}
.certification-benefit-grid p {
    margin: 0;
    color: #3f3212;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 750;
}
.short-training-hero {
    background: #102842;
    border-bottom-color: rgba(255,255,255,.12);
}
.short-training-hero .eyebrow {
    background: rgba(255,255,255,.14);
    color: #ffe77a;
}
.short-training-hero h1 {
    max-width: 980px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
    color: #ffffff;
}
.short-training-hero p:not(.eyebrow) {
    color: #dce9f4;
}
.short-training-hero p:not(.eyebrow) {
    text-align: justify;
    text-justify: inter-word;
}
.section.short-benefits {
    background: #dff3ff;
    border-top-color: rgba(11,142,232,.18);
}
.short-benefits h2,
.short-agenda h2 {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.agenda-month-note {
    max-width: 1180px;
    margin: -10px auto 18px;
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}
.agenda-month-note strong {
    color: var(--green);
}
.short-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
}
.short-benefit-grid article {
    min-height: 160px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px 20px;
    border-color: rgba(11,142,232,.18);
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(13, 95, 153, .08);
    text-align: center;
}
.short-benefit-grid span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #102842;
    color: #ffe77a;
    font-size: 13px;
    font-weight: 900;
}
.short-benefit-grid p {
    margin: 0;
    color: #173a58;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 750;
}
.section.short-agenda {
    background: #fff4bd;
}
.short-agenda .flowbite-table {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 44px rgba(17,24,39,.08);
}
.short-agenda table {
    font-size: 14px;
}
.short-agenda th {
    background: #102842;
    color: #ffffff;
}
.short-agenda .agenda-month-note {
    color: #5b4a16;
}
.short-agenda .agenda-month-note strong {
    color: #0d5f99;
}
.white-page-footer {
    border-top-color: #e5e7eb;
    background: #ffffff;
    color: #1f2937;
}
.section.trainer-list-section {
    background: #dff3ff;
}
.trainer-list-section .card:nth-child(even) {
    border-color: rgba(180,120,0,.18);
    background: #fff4bd;
}
.short-agenda td:first-child {
    color: var(--ink);
    font-weight: 850;
}
.short-agenda td a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(11,107,87,.08);
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
}
.short-agenda td:last-child a {
    background: var(--green);
    color: #ffffff;
}
.register-hero {
    background: #102842;
    border-bottom-color: rgba(255,255,255,.12);
}
.register-hero .eyebrow {
    background: rgba(255,255,255,.14);
    color: #ffe77a;
}
.register-hero h1 {
    max-width: 980px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
    color: #ffffff;
}
.register-hero p:not(.eyebrow) {
    color: #dce9f4;
}
.consultation-intro-section {
    background: #dff3ff;
}
.consultation-intro-card {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid rgba(11,142,232,.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(13,95,153,.09);
    text-align: center;
}
.consultation-intro-card span {
    color: #0d5f99;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.consultation-intro-card h2 {
    margin: 9px 0 12px;
    color: #102842;
}
.consultation-intro-card p {
    max-width: 760px;
    margin: 0 auto;
    color: #425466;
    font-size: 17px;
    line-height: 1.7;
}
.section.register-section {
    max-width: none;
    margin: 0;
    background: #fff4bd;
}
.register-section > * {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.register-section .registration-panel {
    border-color: rgba(146,103,0,.16);
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(97,72,12,.11);
}
.registration-panel label {
    color: #1f2937;
}
.registration-panel input,
.registration-panel select,
.registration-panel textarea {
    border-color: #cfd8d4;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.registration-panel input:focus,
.registration-panel select:focus,
.registration-panel textarea:focus {
    background: #ffffff;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(11,107,87,.12);
}
.article-hero {
    background: #102842;
    border-bottom-color: rgba(255,255,255,.12);
}
.article-hero h1 {
    max-width: 980px;
    font-size: clamp(36px, 3.5vw, 54px);
    line-height: 1.1;
    text-align: justify;
    text-wrap: balance;
}
.article-hero p:not(.eyebrow) {
    color: #dce9f4;
    text-align: justify;
}
.section.article-list-section {
    background: #dff3ff;
}
.article-list-section .card:nth-child(even) {
    border-color: rgba(180,120,0,.18);
    background: #fff4bd;
}
.inhouse-hero::after {
    content: "";
    position: absolute;
    left: 6vw;
    right: 6vw;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11,107,87,.28), transparent);
}
.inhouse-brief {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 34px;
    border: 1px solid rgba(11,107,87,.14);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(17,24,39,.12);
}
.inhouse-brief::before {
    content: "";
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(11,107,87,.1);
    box-shadow: inset 0 0 0 13px #ffffff, inset 0 0 0 16px var(--green);
}
.inhouse-brief span {
    color: var(--green);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.inhouse-brief strong {
    display: block;
    color: var(--ink);
    font-size: 32px;
    line-height: 1.12;
}
.inhouse-brief p {
    margin: 0;
    color: var(--muted);
}
.inhouse-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: 46px;
    align-items: start;
}
.inhouse-story {
    max-width: 790px;
}
.inhouse-story p:not(.eyebrow) {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.8;
}
.inhouse-highlight {
    display: grid;
    gap: 14px;
}
.inhouse-highlight article {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.inhouse-highlight strong {
    display: block;
    margin-bottom: 8px;
    color: var(--green);
    font-size: 26px;
    line-height: 1;
}
.inhouse-highlight span {
    color: var(--muted);
    font-weight: 700;
}
.inhouse-process {
    background: #f9fafb;
}
.inhouse-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.inhouse-process-grid article {
    min-height: 260px;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.inhouse-process-grid article:hover {
    transform: translateY(-4px);
    border-color: rgba(11,107,87,.28);
    box-shadow: var(--lift-shadow);
}
.inhouse-process-grid span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(11,107,87,.1);
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
}
.inhouse-process-grid h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.inhouse-process-grid p {
    margin: 0;
    color: var(--muted);
}
.inhouse-package-card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(11,107,87,.15);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(17,24,39,.1);
}
.inhouse-package-card h2 {
    margin: 12px 0 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.12;
}
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f9fafb; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.flowbite-table {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.flowbite-table table {
    border: 0;
}
.flowbite-table tbody tr:hover td {
    background: #f9fafb;
}
.table-action-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--green);
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(11,107,87,.16);
}
.table-action-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
}
.form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    background: white;
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(11,107,87,.12);
    border-color: var(--green);
}
.registration-panel,
.contact-panel {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--soft-shadow);
}
.contact-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.alert { padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; }
.success { background: #e6f6ed; color: #0c5d38; }
.error { background: #fff1ef; color: #a43322; }
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: var(--green);
    color: white;
    max-width: calc(100vw - 44px);
    padding: 13px 16px;
    border-radius: 999px;
    box-shadow: 0 14px 32px rgba(0,0,0,.2);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    z-index: 30;
}
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 34px 6vw;
    border-top: 1px solid rgba(217,119,6,.16);
    background: #fff3e6;
    color: #374151;
}
.footer-tagline {
    color: #d97706;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 900;
    line-height: 1.1;
}
.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-socials a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(11,107,87,.18);
    border-radius: 999px;
    padding: 8px 13px 8px 10px;
    background: #f2fbf7;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    box-shadow: var(--soft-shadow);
}
.footer-socials a:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
}
.footer-socials img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.footer-socials strong {
    color: var(--green);
    font-size: 13px;
}
.login-body { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #f4f6f9; }
.login-card { width: min(440px, 100%); padding: 30px; border-radius: 6px; box-shadow: 0 12px 30px rgba(15, 23, 42, .12); }
.admin-login-card {
    width: min(460px, 100%);
    padding: 34px;
}
.login-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 8px;
    background: var(--green);
    color: white;
    font-weight: 900;
}
.admin-login-card h1 {
    margin: 0 0 8px;
    font-size: 34px;
}
.participant-login-logo {
    display: flex;
    justify-content: center;
    margin: -6px -8px 22px;
    padding: 18px;
    border-radius: 8px;
    background: var(--logo-navy);
}
.participant-login-logo img {
    display: block;
    width: min(280px, 100%);
    height: auto;
    max-height: 94px;
    object-fit: contain;
}
.admin-login-logo {
    margin-bottom: 26px;
}
.admin-login-logo img {
    width: min(320px, 100%);
    max-height: 106px;
}
.hint { color: var(--muted); font-size: 13px; }
.admin-body {
    background: #f4f6f9;
}
.admin-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
}
.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 14px 22px;
    overflow-y: auto;
    border-right: 0;
    background: var(--logo-navy);
    box-shadow: 12px 0 28px rgba(15, 23, 42, .14);
}
.admin-content-wrap {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 10px 28px;
    border-bottom: 1px solid #dde2e8;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.admin-topbar strong,
.admin-topbar span {
    display: block;
}
.admin-topbar strong {
    color: #1f2933;
    font-size: 16px;
}
.admin-topbar span {
    color: #6b7280;
    font-size: 13px;
}
.admin-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-top-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    color: #374151;
    background: #ffffff;
    font-size: 13px;
    font-weight: 750;
}
.admin-top-actions a:hover {
    color: var(--green);
    border-color: rgba(11,107,87,.35);
}
.admin-top-actions .logout {
    color: #b42318;
}
.admin-shellbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 14px 5vw;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(22, 33, 31, .05);
}
.admin-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    margin: 0 -14px 8px;
    padding: 12px 18px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--logo-navy);
}
.admin-brand img {
    display: block;
    width: min(210px, 100%);
    height: auto;
    max-height: 70px;
    object-fit: contain;
}
.admin-nav {
    display: grid;
    gap: 4px;
}
.admin-nav small {
    margin: 18px 10px 6px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.admin-nav a {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    font-weight: 750;
}
.admin-nav a span {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 5px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 900;
}
.admin-nav a:hover,
.admin-nav a.is-active {
    background: var(--green);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,.14);
}
.admin-nav a:hover span,
.admin-nav a.is-active span {
    color: #ffffff;
    background: rgba(255,255,255,.18);
}
.admin-nav .danger-nav {
    color: #ffb4ab;
}
.admin-shellbar nav a {
    padding: 9px 10px;
    border-radius: 8px;
}
.admin-shellbar nav a:hover {
    background: #edf5f0;
}
.admin-main {
    min-width: 0;
    padding: 28px;
}
.admin-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.stats article { padding: 22px; display: grid; gap: 4px; }
.stats strong { font-size: 34px; }
.admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.admin-hero h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.1;
}
.admin-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
}
.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 130px;
    display: grid;
    align-content: space-between;
    padding: 20px;
    background: white;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--green);
}
.kpi-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kpi-card strong {
    display: block;
    margin: 12px 0 4px;
    font-size: 38px;
    line-height: 1;
}
.kpi-card small {
    color: var(--muted);
}
.kpi-card.accent-gold::before { background: var(--gold); }
.kpi-card.accent-blue::before { background: var(--blue); }
.kpi-card.accent-ink::before { background: var(--ink); }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}
.dashboard-grid.wide-left {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
}
.dashboard-panel {
    background: white;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.panel-title h2 {
    margin: 0;
    font-size: 22px;
}
.panel-title .eyebrow {
    margin: 0 0 4px;
}
.panel-note {
    color: var(--muted);
    font-size: 13px;
}
.progress-row,
.asset-meter {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #edf2ef;
}
.progress-row > div:first-child,
.asset-meter > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.progress-row span,
.asset-meter span {
    color: var(--muted);
    font-size: 13px;
}
.progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2ef;
}
.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}
.activity-list,
.catalog-list {
    display: grid;
    gap: 12px;
}
.activity-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #edf2ef;
    border-radius: 6px;
    background: #ffffff;
}
.activity-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #e6f6ed;
    color: var(--green);
    font-weight: 800;
}
.activity-item strong,
.activity-item span,
.activity-item small,
.catalog-list strong,
.catalog-list span,
.catalog-list small,
.admin-table-modern td span,
.admin-table-modern td small {
    display: block;
}
.activity-item span,
.catalog-list span,
.admin-table-modern td span {
    color: var(--muted);
}
.activity-item small,
.catalog-list small,
.admin-table-modern td small {
    color: #7c8a86;
    font-size: 12px;
}
.catalog-list > div {
    padding: 13px;
    border: 1px solid #edf2ef;
    border-radius: 6px;
    background: #ffffff;
}
.admin-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.admin-shortcuts a {
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 16px;
    border: 1px solid #edf2ef;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 850;
}
.admin-shortcuts a:hover {
    border-color: rgba(11,107,87,.35);
    color: var(--green);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #edf2ef;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
}
.status-baru { background: #fff4d8; color: #865a00; }
.status-dihubungi { background: #e9f2ff; color: #205a91; }
.status-masuk_grup_wa { background: #e6f6ed; color: #0c5d38; }
.status-selesai { background: #e7f7f5; color: #0b6b57; }
.status-batal { background: #fff1ef; color: #a43322; }
.admin-table-modern table {
    border: 0;
    border-spacing: 0;
    border-collapse: separate;
}
.admin-table-modern th {
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f8fafc;
}
.admin-table-modern td {
    background: white;
}
.admin-table-modern th,
.admin-table-modern td {
    border-color: #e5e7eb;
}
.admin-filter {
    display: grid;
    grid-template-columns: 180px minmax(220px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.admin-filter label {
    gap: 5px;
}
.admin-filter label span {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.admin-filter button,
.quick-actions button {
    min-height: 43px;
    border: 0;
    border-radius: 6px;
    background: var(--green);
    color: white;
    padding: 10px 14px;
    font-weight: 800;
}
.admin-filter a,
.quick-actions a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
    font-weight: 800;
}
.export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: -2px 0 16px;
}
.export-actions a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 6px;
    background: #0f8f56;
    color: #fff;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(15, 143, 86, .18);
}
.export-actions a.pdf {
    background: #18332a;
    box-shadow: 0 8px 18px rgba(24, 51, 42, .18);
}
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.wa-link {
    font-weight: 800;
}
.empty-state {
    margin: 0;
    color: var(--muted);
}
.inline-form { display: grid; gap: 8px; min-width: 220px; }
.inline-form button {
    border: 0;
    background: var(--green);
    color: white;
    border-radius: 6px;
    padding: 10px;
    font-weight: 700;
}
.asset-section {
    margin: 34px 0;
}
.asset-section h2 {
    margin: 0 0 16px;
}
.asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.asset-card {
    background: white;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.asset-card h3 {
    font-size: 16px;
    margin: 12px 0;
}
.asset-card form {
    display: grid;
    gap: 10px;
}
.asset-card button {
    border: 0;
    background: var(--green);
    color: white;
    border-radius: 6px;
    padding: 10px;
    font-weight: 700;
}
.asset-preview {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: #f8fafc;
    color: var(--muted);
    overflow: hidden;
}
.asset-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.asset-preview.portrait { aspect-ratio: 4 / 3; }
.asset-preview.logo { aspect-ratio: 16 / 7; padding: 14px; }
.asset-preview.flyer { aspect-ratio: 3 / 4; }
.admin-thumb {
    width: 82px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #f8fafc;
    color: var(--muted);
}
.admin-thumb.portrait {
    aspect-ratio: 4 / 3.7;
}
.admin-thumb.logo {
    width: 112px;
    aspect-ratio: 16 / 9;
    padding: 8px;
}
.admin-thumb.flyer {
    width: 92px;
    aspect-ratio: 3 / 4;
}
.admin-thumb.slide {
    width: 150px;
    aspect-ratio: 16 / 9;
}
.admin-thumb.social {
    width: 54px;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    padding: 10px;
}
.admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.admin-thumb.portrait img {
    object-position: center top;
}
.crud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.crud-panel {
    background: white;
    border: 1px solid #dde2e8;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.crud-panel h2 {
    margin-top: 0;
}
.form.compact {
    gap: 12px;
}
.form-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-row .wide {
    grid-column: 1 / -1;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
.check input {
    width: auto;
}
.mini-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.mini-edit button,
.crud-panel table button {
    border: 0;
    background: var(--green);
    color: white;
    border-radius: 6px;
    padding: 10px;
    font-weight: 700;
}
.danger-link {
    color: #a43322;
    font-weight: 700;
}
.inactive-row {
    opacity: .55;
}
.participant-body {
    min-height: 100vh;
    background: #f4f7f6;
}
.participant-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px clamp(18px, 5vw, 64px);
    background: var(--logo-navy);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.participant-topbar .brand img {
    width: 300px;
    max-height: 86px;
}
.participant-topbar nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.participant-topbar nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 800;
}
.participant-main {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 30px 0 48px;
}
.participant-portal {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.participant-sidebar {
    position: sticky;
    top: 24px;
    overflow: hidden;
    border: 1px solid #dfe7e4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 40, 66, .08);
}
.participant-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #102842;
    color: #ffffff;
}
.participant-identity > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffe77a;
    color: #102842;
    font-size: 18px;
    font-weight: 900;
}
.participant-identity strong,
.participant-identity small {
    display: block;
}
.participant-identity strong {
    line-height: 1.25;
}
.participant-identity small {
    margin-top: 3px;
    color: #cbdbe7;
}
.participant-sidebar nav {
    display: grid;
    gap: 4px;
    padding: 12px;
}
.participant-sidebar nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-left: 3px solid transparent;
    border-radius: 5px;
    color: #34495e;
    font-size: 14px;
    font-weight: 800;
}
.participant-sidebar nav a:hover,
.participant-sidebar nav a:focus,
.participant-sidebar nav a.is-active {
    border-left-color: #0b8ee8;
    background: #eaf7ff;
    color: #0d5f99;
}
.participant-content {
    min-width: 0;
}
.participant-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eef8f4 100%);
}
.participant-section-panel {
    scroll-margin-top: 24px;
    margin-bottom: 22px;
}
.participant-section-panel[hidden] {
    display: none !important;
}
.certificate-list {
    display: grid;
    gap: 12px;
}
.certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e2e8e5;
    border-radius: 6px;
    background: #ffffff;
}
.certificate-item strong,
.certificate-item span {
    display: block;
}
.certificate-item span {
    margin-top: 4px;
    color: var(--muted);
}
.participant-password-panel {
    margin-top: 0;
}
.participant-consulting-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    margin-top: 0;
    border-color: rgba(11, 142, 232, .18);
    background: linear-gradient(135deg, #eaf7ff 0%, #ffffff 62%, #fff4bd 100%);
}
.participant-consulting-copy {
    max-width: 820px;
}
.participant-consulting-copy h2 {
    margin: 8px 0 14px;
    color: #0d2d4d;
    font-size: 28px;
}
.participant-consulting-copy p:not(.eyebrow) {
    margin: 0 0 10px;
    color: #425466;
    line-height: 1.72;
}
.participant-consulting-action {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .hero, .home-hero, .about-hero, .about-overview, .about-contact-card, .inhouse-hero, .inhouse-overview, .inhouse-package-card, .two-col { grid-template-columns: 1fr; }
    .home-hero {
        min-height: 660px;
        gap: 0;
    }
    .grid, .service-band, .participant-cards, .training-flyer-grid, .certification-program-grid, .feature-list.refined, .short-benefits .feature-list, .about-mission-grid, .about-value-grid, .inhouse-process-grid, .asset-grid, .crud-grid, .form-row, .kpi-grid, .dashboard-grid, .dashboard-grid.wide-left, .admin-filter, .home-headline-card, .why-us-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        position: static;
        height: auto;
        gap: 14px;
        padding: 0 14px 18px;
        border-right: 0;
        border-bottom: 1px solid #dde2e8;
    }
    .admin-brand {
        margin-bottom: 4px;
    }
    .admin-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-nav small {
        grid-column: 1 / -1;
    }
    .topbar, .admin-head { align-items: flex-start; flex-direction: column; }
    .admin-shellbar, .admin-hero, .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-actions {
        justify-content: flex-start;
    }
    .about-poster-grid {
        grid-template-columns: 1fr;
    }
    .certification-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .short-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-poster-grid .about-visual-poster {
        width: min(620px, 100%);
    }
    .certificate-item,
    .participant-topbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .participant-portal {
        grid-template-columns: 1fr;
    }
    .participant-sidebar {
        position: static;
    }
    .participant-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .participant-consulting-panel {
        grid-template-columns: 1fr;
    }
    .participant-consulting-action {
        width: max-content;
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .grid, .service-band, .participant-cards, .training-flyer-grid, .certification-program-grid, .feature-list.refined, .short-benefits .feature-list, .about-mission-grid, .about-value-grid, .inhouse-process-grid, .hero-stats, .stats, .asset-grid, .crud-grid, .form-row, .mini-edit, .kpi-grid, .dashboard-grid, .dashboard-grid.wide-left, .admin-filter, .quick-actions, .admin-shortcuts, .home-headline-card, .why-us-image-grid { grid-template-columns: 1fr; }
    .home-hero {
        min-height: 620px;
        padding: 0;
    }
    .hero h1, .page-hero h1, .hero-copy h1 { font-size: 34px; }
    .hero-showcase { min-height: 620px; }
    .home-slider { inset: 0; }
    .hero-copy {
        width: calc(100% - 28px);
        margin: 0 14px 24px;
    }
    .hero-copy h1 {
        font-size: 24px;
        white-space: normal;
        text-wrap: balance;
    }
    .home-headline-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }
    .home-headline-card {
        gap: 20px;
        padding: 22px;
        border-radius: 14px;
    }
    .home-headline-copy h2 {
        font-size: 30px;
    }
    .home-headline-copy p {
        font-size: 16px;
        text-align: left;
    }
    .about-metrics {
        grid-template-columns: 1fr;
    }
    .about-visual-poster {
        border-radius: 8px;
    }
    .participant-sidebar nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 14px;
        scrollbar-width: none;
    }
    .participant-sidebar nav::-webkit-scrollbar {
        display: none;
    }
    .participant-sidebar nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .certification-benefit-grid {
        grid-template-columns: 1fr;
    }
    .short-benefit-grid {
        grid-template-columns: 1fr;
    }
    .home-gallery-grid {
        grid-template-columns: 1fr;
    }
    .hero-lead {
        font-size: 16px;
        line-height: 1.55;
    }
    .showcase-card { width: 92%; }
    .showcase-people { right: 12px; top: 44px; }
    .showcase-people span { display: none; }
    .hero-proof {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        border-radius: 8px;
    }
    .about-hero {
        gap: 30px;
        padding: 54px 18px 48px;
    }
    .about-summary-card {
        min-height: 230px;
        padding: 26px;
        border-radius: 22px;
    }
    .about-story p:not(.eyebrow) {
        font-size: 17px;
    }
    .inhouse-hero {
        gap: 30px;
        padding: 54px 18px 48px;
    }
    .inhouse-brief,
    .inhouse-package-card {
        padding: 26px;
        border-radius: 18px;
    }
    .inhouse-story p:not(.eyebrow) {
        font-size: 17px;
    }
    .topbar {
        align-items: center;
        flex-direction: row;
        padding: 12px 18px;
    }
    .brand {
        width: 190px;
        height: 58px;
        min-width: 190px;
    }
    .brand img {
        width: 190px;
        max-height: 58px;
    }
    .topbar nav {
        width: auto;
        min-width: 0;
        flex: 1;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .topbar nav::-webkit-scrollbar { display: none; }
    nav a {
        flex: 0 0 auto;
        font-size: 13px;
    }
    .admin-main {
        padding: 22px 16px 40px;
    }
    .admin-hero h1 {
        font-size: 28px;
    }
    .activity-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .activity-item .status-pill {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}