/* =============================================================
   entmomo — component + base styles (no build step required).
   Tailwind preflight is DISABLED in tailwind.config so this
   file owns all resets and they won't be overridden by the CDN.
   ============================================================= */

/* ---- Minimal CSS reset (replaces Tailwind preflight) ------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, code,
ul, ol, li, dl, dt, dd,
nav, header, footer, main, section, article, aside,
figure, figcaption, form, fieldset, legend, label,
table, thead, tbody, tfoot, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

ul, ol { list-style: none; }

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
}

button, [role="button"] { cursor: pointer; }

/* ---- Font -------------------------------------------------- */
@font-face {
    font-family: 'Dosis';
    src: url('../fonts/dosis/Dosis-Variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ---- Base -------------------------------------------------- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}

body {
    background-color: #ffffff;
    font-family: 'Dosis', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.625;
    color: #495A69;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #1D1D1D;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0E4C65;
}

::selection {
    background-color: #0E4C65;
    color: #ffffff;
}

/* ---- Buttons ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 200ms, background-color 200ms, border-color 200ms;
}
.btn-primary { background-color: #0E4C65; color: #FAFAFA; }
.btn-primary:hover { background-color: #4C7A8C; }

.btn-secondary { border: 1px solid #0E4C65; background-color: transparent; color: #0E4C65; }
.btn-secondary:hover { background-color: #0E4C65; color: #FAFAFA; }

.btn-ghost { 
    /*background-color: rgba(14,76,101,.6); */
    background-color: #0e4c65; 
    color: #FAFAFA; backdrop-filter: blur(4px); 
}
.btn-ghost:hover { 
    /*background-color: #0E4C65; */
    background-color: rgba(14,76,101,.6); 
}

/* ---- Sections --------------------------------------------- */
.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }

.section-eyebrow {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0E4C65;
}
.section-title { margin-top: 0.5rem; font-size: 1.625rem; line-height: 1.25; }
@media (min-width: 1024px) { .section-title { font-size: 2.0625rem; } }

.section-sub { margin: 1rem auto 0; max-width: 42rem; color: #495A69; }

/* ---- Header ----------------------------------------------- */
/*
 * Figma heights: 81px desktop (1440px canvas) / 97px mobile (375px canvas).
 * overflow: visible keeps dropdown panels from being clipped.
 */
/* ================================================================
   SITE HEADER — single height for all devices
   ================================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 9990;
    width: 100%;
    background-color: #ffffff;
    transition: box-shadow 300ms;
    overflow: visible;
    padding: 0 !important;
    margin: 0 !important;
    height: 81px !important;
    min-height: 81px !important;
    max-height: 81px !important;
}
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(14,76,101,.08); }

/* Admin bar offsets */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ── Inner wrapper: full-width flex, nav centred inside ── */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: center;   /* centre the nav group horizontally */
    width: 100%;
    height: 81px;
    padding: 0 1.5rem;
}

/* ── Mobile row (logo + hamburger) — visible below 1024px ─── */
.site-header-mobile {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
@media (min-width: 1024px) { .site-header-mobile { display: none; } }

/* ── Desktop nav: all items centred as a group, logo pinned to 50% ──
   The nav is a full-width grid: [1fr] [logo-auto] [1fr]
   • Left 1fr right-aligns its links  → items cluster toward logo
   • Right 1fr left-aligns its links  → items cluster toward logo
   • Logo auto column sits at the mathematical centre of the grid
   The grid itself is width:100% inside the full-width header, so
   the logo centre == the viewport centre at every zoom level.      */
.site-nav {
    display: none;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
@media (min-width: 1024px) { .site-nav { display: grid; } }

.site-nav__left {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* push items right, toward the logo */
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;           /* gap between logo and nav links */
    height: 100%;
    text-decoration: none;
}
.site-nav__right {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* push items left, toward the logo */
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Animated hamburger ------------------------------------ */

.hamburger {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;     /* center-align so × is always perfectly centered */
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms, transform 250ms ease;
}
.hamburger:hover { background-color: rgba(14, 76, 101, 0.07); }

.hamburger__line {
    display: block;
    height: 1.5px;
    background-color: #1D1D1D;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 350ms cubic-bezier(0.23, 1, 0.32, 1),
                opacity 220ms ease,
                width 300ms ease;
}

/* All three lines equal width — matches Figma exactly */
.hamburger__line:nth-child(1) { width: 20px; }
.hamburger__line:nth-child(2) { width: 20px; }
.hamburger__line:nth-child(3) { width: 20px; }

/* Open state: morph to × */
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
    width: 20px;
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
    width: 20px;
    opacity: 0;
    transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
    width: 20px;
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Panel close button — always shows as ×, spins on hover */
.hamburger--close .hamburger__line:nth-child(1) {
    width: 20px;
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger--close .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger--close .hamburger__line:nth-child(3) {
    width: 20px;
    transform: translateY(-6.5px) rotate(-45deg);
}
.hamburger--close:hover { transform: rotate(90deg); }

/* ---- Nav links -------------------------------------------- */

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1D1D1D;
    text-decoration: none;
    transition: color 200ms;
}

/* Caret */
.nav-caret {
    display: inline-block;
    width: 0.6875rem;
    height: 0.6875rem;
    margin-left: 0.125rem;
    flex-shrink: 0;
    transition: transform 220ms ease;
}
.nav-item:hover > .nav-link .nav-caret,
.nav-item:focus-within > .nav-link .nav-caret { transform: rotate(180deg); }
.nav-link:hover,
.nav-link[aria-current='page'] { color: #0E4C65; }

.nav-item { position: relative; }

.dropdown-panel {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 60;
    min-width: 180px;
    transform: translateY(0.5rem);
    background-color: #ffffff;
    border-radius: 12px;   /* matches Figma rx=12 */
    overflow: hidden;       /* clips child items to rounded corners */
    padding: 0;
    margin: 0;
    list-style: none;
    /* Figma shadow: feGaussianBlur stdDeviation=32, opacity=0.24 → large soft drop */
    box-shadow: 0 0 64px rgba(0,0,0,0.24);
    opacity: 0;
    transition: opacity 200ms, transform 200ms, visibility 200ms;
}
.nav-item:hover > .dropdown-panel,
.nav-item:focus-within > .dropdown-panel {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}
.dropdown-link {
    /* Each item is exactly 42px tall per Figma design */
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1D1D1D;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms, background-color 150ms;
}
.dropdown-link:hover,
.dropdown-link:focus-visible { background-color: #0E4C65; color: #FAFAFA; }
/* Semi-transparent primary on active — matches Figma's 70%-opacity active state */
.dropdown-link:active { background-color: rgba(14,76,101,.7); color: #FAFAFA; }

/* ---- Mobile menu ------------------------------------------ */
.mobile-menu {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.mobile-menu.is-open { visibility: visible; }

.mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(14, 30, 40, 0.55);
    opacity: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 350ms ease;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

.mobile-menu__panel {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    height: 100%;
    width: 82%;
    max-width: 22rem;
    transform: translateX(100%);
    flex-direction: column;
    overflow-y: auto;
    background-color: #ffffff;
    padding: 0;
    box-shadow: -8px 0 40px rgba(14,30,40,.15);
    transition: transform 380ms cubic-bezier(0.32, 0, 0.15, 1);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

/* Panel inner header: logo + close button */
.mobile-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 81px;          /* matches Figma header height */
    border-bottom: 1px solid #EAEFF2;
    flex-shrink: 0;
}
.mobile-panel__logo { display: flex; align-items: center; }

/* Panel nav container */
.mobile-panel__nav {
    padding: 0.5rem 1.25rem 2.5rem;
    flex: 1;
}

.mobile-menu__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.9375rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #495A69;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #EAEFF2;
    transition: color 200ms;
}
.mobile-menu__link:hover { color: #0E4C65; }

.mobile-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms;
}
.mobile-submenu.is-open { grid-template-rows: 1fr; }
.mobile-submenu__inner { overflow: hidden; }

.mobile-submenu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.25rem 0.75rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1D1D1D;
    text-decoration: none;
}

/* ---- Hero slider ------------------------------------------ */
.hero-slider .swiper-pagination {
    bottom: 1.5rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.hero-slider .swiper-pagination-bullet {
    height: 3px;
    width: 2.75rem;
    border-radius: 0;
    background-color: rgba(250,250,250,.5);
    opacity: 1;
    transition: background-color 200ms;
}
.hero-slider .swiper-pagination-bullet-active { background-color: #FAFAFA; }

.hero-arrow {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #FAFAFA;
    color: #1D1D1D;
    box-shadow: 0 2px 10px rgba(14,76,101,.06);
    transition: transform 200ms;
    border: none;
    cursor: pointer;
}
.hero-arrow:hover { transform: scale(1.05); }

/* ---- Services tabs ---------------------------------------- */
.services-tab {
    position: relative;
    margin-bottom: -1px;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0.25rem 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #495A69;
    background: none;
    cursor: pointer;
    transition: color 200ms;
}
.services-tab:hover { color: #1D1D1D; }
.services-tab.is-active { border-bottom-color: #0E4C65; font-weight: 700; color: #1D1D1D; }

.services-panel[hidden] { display: none; }

.services-tablist { scrollbar-width: none; -ms-overflow-style: none; }
.services-tablist::-webkit-scrollbar { display: none; }

/* ---- Testimonials ----------------------------------------- */
/* Figma: card 600x268, rx=12, fill #D8E8EE, 24px gap (gap already
   matches via Swiper's spaceBetween). Fixed height keeps every
   card in a row the same size regardless of quote length;
   overflowing quotes scroll internally instead of stretching the
   card (and the whole row) taller. */
.testimonial-card {
    display: flex;
    height: 268px;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: #D8E8EE;
    padding: 1.25rem;
}
.testimonial-card blockquote {
    overflow-y: auto;
    min-height: 0;
}

.slider-arrow {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #0E4C65;
    color: #0E4C65;
    background: none;
    cursor: pointer;
    transition: color 200ms, background-color 200ms;
}
.slider-arrow:hover { background-color: #0E4C65; color: #FAFAFA; }
.slider-arrow:disabled { cursor: not-allowed; opacity: 0.4; }
.slider-arrow:disabled:hover { background-color: transparent; color: #0E4C65; }

/* ---- Events popup -----------------------------------------
   z-index sits above .site-header (9990, see below) — it was
   previously 70, which let the sticky header paint over the
   popup. Kept above the mobile menu (9999) / filter drawer
   (10000) too, since a modal should always be topmost. */
.events-popup {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    padding-top: 3.5rem;
    opacity: 0;
    transition: opacity 300ms, visibility 300ms;
}
@media (min-width: 1024px) { .events-popup { align-items: center; padding-top: 1rem; } }
.events-popup.is-open { visibility: visible; opacity: 1; }

.events-popup__overlay { position: absolute; inset: 0; background-color: rgba(29,29,29,.5); }

.events-popup__panel {
    position: relative;
    display: flex;
    max-height: 88vh;
    width: 100%;
    max-width: 48rem;
    transform: scale(.95);
    flex-direction: column;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 300ms;
}
.events-popup.is-open .events-popup__panel { transform: scale(1); }

.events-popup__frost {
    position: absolute;
    inset: 0;
    background-color: rgba(250,250,250,.55);
    backdrop-filter: blur(2px);
}

/* ---- Event row — flat translucent teal bar, per Figma:
   #0E4C65 @ 48% opacity, 8px backdrop blur, no border, ~square
   corners (rx 2px). Centered inline row on desktop; stacks to a
   column with no bullet separators on mobile. --------------- */
.event-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border-radius: 2px;
    background-color: rgba(14,76,101,.48);
    padding: 1rem;
    text-align: center;
    color: #FAFAFA;
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: background-color 200ms;
}
.event-row:hover { background-color: rgba(14,76,101,.6); }
@media (min-width: 1024px) {
    .event-row { flex-direction: row; justify-content: center; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Override the global h1-h6 dark color and the browser's default
   blue/underlined link style — both should read as plain white here. */
.event-row h3 { color: #FAFAFA; }
.event-row a { color: #FAFAFA; text-decoration: none; }
.event-row a:hover { text-decoration: underline; }

/* ---- Gallery lightbox (project detail — Photo Gallery) ----
   Same fade + inner-scale pattern as .events-popup, sized for
   a single enlarged photo instead of a content card. --------- */
.gallery-lightbox {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 300ms, visibility 300ms;
}
.gallery-lightbox.is-open { visibility: visible; opacity: 1; }

.gallery-lightbox__overlay { position: absolute; inset: 0; background-color: rgba(29,29,29,.85); }

.gallery-lightbox__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 64rem;
    max-height: 88vh;
    transform: scale(.95);
    transition: transform 300ms;
}
.gallery-lightbox.is-open .gallery-lightbox__panel { transform: scale(1); }

.gallery-lightbox__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 88vh;
    width: 100%;
}
.gallery-lightbox__figure img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    border-radius: 12px;
    object-fit: contain;
}

.gallery-lightbox__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 0;
    background-color: rgba(29,29,29,.55);
    color: #FAFAFA;
    transition: background-color 200ms;
}
.gallery-lightbox__close:hover { background-color: rgba(14,76,101,.85); }

.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 0;
    background-color: rgba(29,29,29,.55);
    color: #FAFAFA;
    transform: translateY(-50%);
    transition: background-color 200ms;
}
.gallery-lightbox__nav:hover { background-color: rgba(14,76,101,.85); }
/* Mobile: keep arrows inside the lightbox's own padding so they can't
   clip off-screen. Desktop: sit just outside the panel edge. */
.gallery-lightbox__nav--prev { left: 0.5rem; }
.gallery-lightbox__nav--next { right: 0.5rem; }
@media (min-width: 1024px) {
    .gallery-lightbox__nav--prev { left: -1.5rem; }
    .gallery-lightbox__nav--next { right: -1.5rem; }
}

.gallery-lightbox__counter {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 9999px;
    background-color: rgba(29,29,29,.55);
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(250,250,250,.9);
}

/* ---- Footer ----------------------------------------------- */
.footer-heading { font-size: 1.375rem; font-weight: 700; color: #1D1D1D; }

.footer-link { font-size: 0.9375rem; color: #495A69; text-decoration: none; transition: color 200ms; }
.footer-link:hover { color: #0E4C65; }

.social-link { color: #1D1D1D; text-decoration: none; transition: color 200ms; }
.social-link:hover { color: #0E4C65; }

.back-to-top {
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #0E4C65;
    color: #0E4C65;
    text-decoration: none;
    transition: color 200ms, background-color 200ms;
}
.back-to-top:hover { background-color: #0E4C65; color: #FAFAFA; }

/* ---- Coming soon form ------------------------------------- */
.field-underline {
    width: 100%;
    border: none;
    border-bottom: 1px solid #BFCDD9;
    background-color: transparent;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #1D1D1D;
}
.field-underline::placeholder { color: rgba(73,90,105,.7); }
.field-underline:focus { border-bottom-color: #0E4C65; outline: none; box-shadow: none; }

/* ---- Utility ---------------------------------------------- */
.scrollbar-thin-primary { scrollbar-width: thin; scrollbar-color: #0E4C65 transparent; }

/* =============================================================
   Inner-page shared components
   ============================================================= */

/* ---- Page banner ------------------------------------------ */
/* Figma About Us desktop: 277px, Projects desktop: 300px.    */
.page-banner {
    min-height: 220px;
}
@media (min-width: 1024px) {
    .page-banner { min-height: 300px; }
}

/* ---- About section image -----------------------------------
   Tailwind preflight is disabled (no global border-style:solid),
   so a bare `border` utility class never draws — own it here,
   same as the footer divider below. */
.about-image {
    border: 1px solid #E0E7EB;
    border-radius: 8px;
}

/* ---- Projects filter — underline-tab style (Figma: y=624 border) --- */
/* Container: full-width #BFCDD9 bottom border, tabs sit on top of it.  */
.projects-filter-bar {
    border-bottom: 2px solid #BFCDD9;
    /* Hide the horizontal scrollbar track — keep scroll functional on mobile */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.projects-filter-bar::-webkit-scrollbar { display: none; }
.projects-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #495A69;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;  /* overlap the container border so active underline replaces it */
    transition: color 200ms, border-color 200ms;
}
.projects-filter-btn:hover { color: #0E4C65; }
.projects-filter-btn.is-active {
    color: #1D1D1D;              /* Figma: active tab text is ink (#1D1D1D), not primary */
    border-bottom-color: #0E4C65; /* underline indicator stays primary teal */
    font-weight: 700;
}

/* ---- Projects grid — middle-column stagger (Figma: +56px offset) --- */
/* Targets every 2nd card in a 3-column grid (col 2: nth-child 3n+2).   */
@media (min-width: 1024px) {
    .projects-grid > .project-card--mid {
        margin-top: 56px;
    }
}

/* ---- Load More button — outline style (Figma: stroke #0E4C65 rx=7.5) */
.projects-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.75rem;
    height: 52px;
    border-radius: 7.5px;
    border: 1.5px solid #0E4C65;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0E4C65;
    cursor: pointer;
    transition: background-color 200ms, color 200ms;
}
.projects-load-more:hover {
    background-color: #0E4C65;
    color: #FAFAFA;
}

/* ---- Project card ----------------------------------------- */
/*
 * Opacity and pointer-events are controlled via inline styles by
 * projects-filter.js (3-step fade-out → layout-swap → fade-in).
 * No CSS transition here — the JS sets transition per-step.
 */
.project-card { /* intentionally no default transition — see filter JS */ }

/* Overlay — centered content fades in on hover (Figma: black 50% overlay, title + Explore More centered) */
.project-card__overlay {
    opacity: 0;
    transition: opacity 350ms ease;
}
.project-card:hover .project-card__overlay { opacity: 1; }

/* ---- Team card -------------------------------------------- */
.team-card { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms; }
.team-card:hover { box-shadow: 0 8px 32px rgba(14,76,101,0.12); }

/* ---- Project meta bar ------------------------------------ */
/* dl items inside the meta bar share equal width via the grid.
   The divide-x utility in Tailwind needs border set on children. */
.project-meta-item + .project-meta-item { border-left: 1px solid #E0E7EB; }

/* ---- Project hero image (below page banner) --------------- */
.project-hero-image { padding-top: 2.5rem; padding-bottom: 0; }

/* ---- Project gallery item (2-col thumbnails, rx=12) ------- */
/* A <button> now (opens the lightbox) — strip native button chrome
   so it still lays out and looks exactly like the plain div it was. */
.project-gallery__item {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 0;
    padding: 0;
    background: transparent;
    appearance: none;
}

/* =============================================================
   Header — visual match to Figma design
   The <header> is position: sticky so it must not rely on
   parent height. All spacing is locked via min/max/height.
   ============================================================= */

/* Ensure the skip-link (sr-only) never pushes layout */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}
/* When focused (keyboard nav), make it visible */
.sr-only:not(:focus):not(:focus-within) {
    position: absolute !important;
}

/* Guarantee <main> starts flush after the sticky header */
main { display: block; }

/* Additional space-y-3 equivalent for footer lists if needed */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* leading-relaxed for team bio */
.leading-relaxed { line-height: 1.625; }

/* text-primary utility for icon colors */
.text-primary { color: #0E4C65; }
.text-offwhite { color: #FAFAFA; }
.text-ink { color: #1D1D1D; }
.text-slate { color: #495A69; }

/* bg-mist for section backgrounds */
.bg-mist { background-color: #D8E8EE; }
.bg-white { background-color: #ffffff; }
.bg-primary { background-color: #0E4C65; }
.bg-ink { background-color: #1D1D1D; }

/* shadow-card */
.shadow-card { box-shadow: 0 2px 10px rgba(14,76,101,0.06); }

/* rounded utilities */
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.375rem; }

/* object-cover */
.object-cover { object-fit: cover; }

/* overflow-hidden */
.overflow-hidden { overflow: hidden; }

/* transition utilities */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Hover: scale image slightly within its overflow-hidden parent */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:opacity-70 { opacity: 0.7; }


/* =============================================================
   Contact Us Page — consolidated stylesheet (all-in-one)
   REPLACES every previous Contact Us CSS block.

   Auto-enqueued from assets/css/contact.css by inc/contact-form.php.
   If you prefer one big stylesheet, paste this into it and delete
   the file (the enqueue is skipped when the file doesn't exist).

   Figma reference: Frame 15 — 1440 × 1007 px
     Card: 650×847, rx=12, shadow blur 64px black @ 24%, padding 64px
     Field pitch 98px → label (13px) + 6px + 53px input row + 30px gap
     Underlines: 1px #BFCDD9 · Message block: 139px
     Submit: 522×53, rx=8, #0E4C65 · Info icons: 40×40, item pitch 71px
   ============================================================= */

/* ---- Two-column grid (form card | contact info) ----------- */
.contact-grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .contact-grid {
        /* Figma: card 650 / gap 83 / info col ~547 */
        grid-template-columns: 650fr 547fr;
        gap: clamp(3rem, 5.75vw, 83px);
        align-items: center;   /* info column vertically centered vs card */
    }
}

/* ---- Form card — white, rx=12, big soft shadow (Figma) ----- */
.contact-form-card {
    background: #ffffff;
    border-radius: 12px;
    /* Figma: feGaussianBlur stdDeviation=32, black @ 24%, no offset */
    box-shadow: 0 0 64px rgba(0, 0, 0, 0.24);
    padding: 2rem 1.5rem;
}
@media (min-width: 1024px) {
    .contact-form-card { padding: 64px; }
}

/* ---- Card title (no eyebrow in this design) ---------------- */
.contact-form-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1D1D1D;
}
@media (min-width: 1024px) {
    .contact-form-title { font-size: 2.0625rem; }  /* ≈33px, Figma */
}

/* ---- Alert banner (AJAX success / error) -------------------- */
.contact-alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.contact-alert--success {
    background-color: rgba(14, 76, 101, 0.08);
    color: #0E4C65;
    border-left: 4px solid #0E4C65;
}
.contact-alert--error {
    background-color: rgba(212, 23, 23, 0.07);
    color: #D41717;
    border-left: 4px solid #D41717;
}
#contact-form-status[hidden] { display: none; }

/* ---- Honeypot — visually gone, still in the DOM for bots ---- */
.cf-hp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Form container ----------------------------------------- */
/* Figma: title bottom → first label ≈ 46px */
.contact-form { margin-top: 2.875rem; }

/* ---- Field block: label above → input row with underline ---- */
/* Figma: 30px between a field's underline and the next label   */
.contact-field + .contact-field { margin-top: 1.875rem; }

/* Label — 13px, ink, red asterisk (Figma #D41717) */
.contact-field__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1D1D1D;
    margin-bottom: 0.375rem;   /* 6px → 53px row below */
    cursor: pointer;
}
.contact-field__req {
    color: #D41717;
    margin-left: 1px;
}

/* Input row — [input] [icon-right], full-width underline */
.contact-field__row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 53px;                       /* Figma row height */
    border-bottom: 1px solid #BFCDD9;
    transition: border-color 200ms;
}
.contact-field__row:focus-within { border-bottom-color: #0E4C65; }

/* Input / select / textarea shared */
.contact-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.0625rem;      /* ≈17px, Figma */
    font-weight: 500;
    color: #1D1D1D;
    outline: none;
    padding: 0;
}
.contact-field__input::placeholder { color: #495A69; opacity: 1; }

/* No focus ring inside fields — the teal underline is the indicator */
.contact-field__input:focus,
.contact-field__input:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Icon — right side, teal, 16px (exact Figma paths) */
.contact-field__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #0E4C65;
    pointer-events: none;
}
.contact-field__icon svg { width: 16px; height: 16px; }

/* Select — hide native arrow; caret is ink (#1D1D1D per Figma) */
.contact-field__row--select .contact-field__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.contact-field__row--select .contact-field__input:invalid { color: #495A69; }
.contact-field__icon--caret { color: #1D1D1D; }

/* Textarea row — icon pinned top-right, block is 139px tall */
.contact-field__row--textarea {
    align-items: flex-start;
    padding: 0.875rem 0 1rem;
    min-height: 139px;          /* Figma message block height */
}
.contact-field__row--textarea .contact-field__input {
    resize: none;
    min-height: 106px;
    line-height: 1.5;
}
.contact-field__row--textarea .contact-field__icon {
    margin-top: 0.25rem;        /* optically align with first text line */
}

/* ---- Field error state (live validation) -------------------- */
.contact-field.has-error .contact-field__row,
.contact-field.has-error .contact-field__row:focus-within {
    border-bottom-color: #D41717;
}
.contact-field.has-error .contact-field__icon { color: #D41717; }

.contact-field__error {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: #D41717;
}
.contact-field__error[hidden] { display: none; }

/* ---- Custom select dropdown (theme-consistent) --------------- */
.contact-field__row--select { position: relative; }

/* Hide native select once JS enhances it (still submits the value) */
.contact-field__row--select.is-enhanced .contact-field__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Visible trigger — mimics the input text */
.contact-select__trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 52px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #495A69;              /* placeholder state */
    cursor: pointer;
    text-align: left;
    padding: 0;
}
.contact-select__trigger.has-value { color: #1D1D1D; }
.contact-select__trigger:focus,
.contact-select__trigger:focus-visible { outline: none; box-shadow: none; }

/* Caret rotates when open */
.contact-field__row--select .contact-field__icon--caret svg {
    transition: transform 220ms ease;
}
.contact-field__row--select.is-open .contact-field__icon--caret svg {
    transform: rotate(180deg);
}

/* Dropdown panel — matches header .dropdown-panel */
.contact-select__panel {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 296px;           /* 7 × 42px + padding */
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 0 64px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 200ms, transform 200ms, visibility 200ms;
}
.contact-field__row--select.is-open .contact-select__panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Options — 42px rows, teal hover, like .dropdown-link */
.contact-select__option {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1D1D1D;
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms, background-color 150ms;
}
.contact-select__option:hover,
.contact-select__option.is-focused {
    background-color: #0E4C65;
    color: #FAFAFA;
}
.contact-select__option.is-selected {
    background-color: rgba(14, 76, 101, 0.08);
    color: #0E4C65;
    font-weight: 600;
}
.contact-select__option.is-selected:hover,
.contact-select__option.is-selected.is-focused {
    background-color: #0E4C65;
    color: #FAFAFA;
}

/* ---- Submit (Figma: 522×53, rx=8, #0E4C65, 31px gap) -------- */
.contact-submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 53px;
    margin-top: 1.9375rem;      /* 31px */
    border: none;
    border-radius: 8px;
    background-color: #0E4C65;
    color: #FAFAFA;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background-color 200ms;
}
.contact-submit:hover { background-color: #4C7A8C; }

/* Loading state */
.contact-submit:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}
.contact-submit.is-loading {
    position: relative;
    color: rgba(250, 250, 250, 0.85);
}
.contact-submit.is-loading::after {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: 0.625rem;
    border: 2px solid rgba(250, 250, 250, 0.35);
    border-top-color: #FAFAFA;
    border-radius: 50%;
    animation: cf-spin 700ms linear infinite;
}
@keyframes cf-spin {
    to { transform: rotate(360deg); }
}

/* ---- Contact info column (right — no background card) ------- */
.contact-info-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.36;          /* Figma: 45px line pitch @ 33px */
    color: #1D1D1D;
}
@media (min-width: 1024px) {
    .contact-info-title { font-size: 2.0625rem; }
}

.contact-info-list {
    list-style: none;
    margin: 2.5rem 0 0;         /* Figma: heading → first item ≈ 40px */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;                /* Figma: 71px pitch − ~47px item = 24px */
}

/* Item — [40px icon] [desc over value], vertically centered */
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Icon — plain teal 40px, no circular badge in this design */
.contact-info-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0E4C65;
}
.contact-info-icon svg { width: 40px; height: 40px; }

/* Description line (top) — slate */
.contact-info-desc {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: #495A69;
    margin: 0;
}

/* Value line (bottom) — ink, semibold */
.contact-info-value {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1D1D1D;
    text-decoration: none;
    transition: color 200ms;
}
a.contact-info-value:hover { color: #0E4C65; }


/* =============================================================
   Events archive — Show/Hide Filter + sidebar/drawer + list
   ============================================================= */

/* ---- Toggle button + search ------------------------------- */
.events-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1D1D1D;
    cursor: pointer;
    transition: color 200ms;
}
.events-filter-toggle:hover { color: #0E4C65; }

.events-search-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #BFCDD9;
    border-radius: 0;
    background-color: transparent;
    padding: 0.625rem 1.5rem 0.625rem 0;
    font-size: 0.875rem;
    color: #1D1D1D;
}
.events-search-input::placeholder { color: rgba(73,90,105,.7); }
.events-search-input:focus { border-color: #0E4C65; outline: none; }

.events-search-icon {
    position: absolute;
    right: 0.125rem;
    top: 50%;
    display: flex;
    height: 0.875rem;
    width: 0.875rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    color: #0E4C65;
    pointer-events: none;
}

/* ---- Off-canvas backdrop (mobile only) --------------------- */
.events-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(14, 30, 40, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, visibility 350ms;
}
[data-events-filter].is-filter-open .events-filter-overlay { opacity: 1; visibility: visible; }
@media (min-width: 1024px) {
    .events-filter-overlay { display: none; }
}

/* ---- Filter panel — off-canvas drawer (mobile) -------------- */
.events-filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    height: 100%;
    width: 85%;
    max-width: 22rem;
    overflow-y: auto;
    background-color: #ffffff;
    padding: 1.5rem;
    transform: translateX(-100%);
    transition: transform 380ms cubic-bezier(0.32, 0, 0.15, 1);
    box-shadow: 8px 0 40px rgba(14,30,40,.15);
}
[data-events-filter].is-filter-open .events-filter-panel { transform: translateX(0); }

/* ---- Filter panel — static sidebar column (desktop) --------- */
@media (min-width: 1024px) {
    .events-filter-panel {
        position: static;
        z-index: auto;
        height: auto;
        width: auto;
        max-width: none;
        overflow: visible;
        padding: 1.5rem;
        border: 1px solid #E0E7EB;
        border-radius: 0.75rem;
        transform: none;
        transition: none;
        box-shadow: none;
        display: none;
    }
    [data-events-filter].is-filter-open .events-filter-panel { display: block; }

    .events-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
    [data-events-filter].is-filter-open .events-layout { grid-template-columns: 280px 1fr; }
}

/* ---- Filter groups (status / sort / categories / city) ------ */
.events-filter-group {
    border: none;
    border-top: 1px solid #E0E7EB;
    margin: 0;
    padding: 1.25rem 0;
}
.events-filter-panel > fieldset.events-filter-group:first-of-type { border-top: none; }

.events-filter-legend {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1D1D1D;
    padding: 0;
    cursor: pointer;
    list-style: none;
}
.events-filter-legend::-webkit-details-marker { display: none; }

.events-filter-radio,
.events-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #495A69;
    cursor: pointer;
}
.events-filter-radio input,
.events-filter-checkbox input {
    accent-color: #0E4C65;
    width: 1rem;
    height: 1rem;
}
fieldset.events-filter-group > .events-filter-radio:first-of-type { margin-top: 1rem; }

/* ---- Accordion (Categories / City) — native <details> ------- */
.events-accordion .accordion-icon-plus,
.events-accordion .accordion-icon-minus {
    display: flex;
    height: 1rem;
    width: 1rem;
    color: #495A69;
}
.events-accordion .accordion-icon-minus { display: none; }
.events-accordion[open] .accordion-icon-plus { display: none; }
.events-accordion[open] .accordion-icon-minus { display: flex; }

/* ---- Active filter chips ------------------------------------ */
.events-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid #BFCDD9;
    border-radius: 9999px;
    background-color: #D8E8EE;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0E4C65;
    cursor: pointer;
}
.events-filter-chip:hover { border-color: #0E4C65; }

.events-clear-all {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #495A69;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.events-clear-all:hover { color: #0E4C65; }

/* ---- Apply Filter button ------------------------------------ */
.events-apply-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    height: 48px;
    border: none;
    border-radius: 7.5px;
    background-color: #0E4C65;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #FAFAFA;
    cursor: pointer;
    transition: background-color 200ms;
}
.events-apply-btn:hover { background-color: #4C7A8C; }

/* ---- Month group heading badge ------------------------------- */
.event-month-count {
    display: inline-flex;
    height: 1.5rem;
    min-width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #D8E8EE;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0E4C65;
}
.event-month-group + .event-month-group { margin-top: 2.5rem; }
.event-month-group { margin-top: 1.5rem; }
.event-month-group:first-of-type { margin-top: 0; }

/* ---- Event list row ------------------------------------------ */
.event-list-row:hover .event-list-row-title { color: #0E4C65; }

/* =============================================================
   Single event page — hero card + tabs
   ============================================================= */
.event-hero { min-height: 420px; }
@media (min-width: 1024px) { .event-hero { min-height: 480px; } }

/* =============================================================
   Single artist page — hero + share icons
   ============================================================= */
.artist-hero { min-height: 420px; }
@media (min-width: 1024px) { .artist-hero { min-height: 560px; } }

.artist-social-icon {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #FAFAFA;
    color: #1D1D1D;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: color 200ms, box-shadow 200ms;
}
.artist-social-icon:hover { color: #0E4C65; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }

.event-tab {
    position: relative;
    margin-bottom: -1px;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0.125rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(250,250,250,.7);
    background: none;
    cursor: pointer;
    transition: color 200ms, border-color 200ms;
}
.event-tab:hover { color: #FAFAFA; }
.event-tab.is-active { border-bottom-color: #FAFAFA; font-weight: 700; color: #FAFAFA; }

.event-tab-panel[hidden] { display: none; }

/* ---- Event list row — mobile layout (Figma: 375px) ---------- */
/* On mobile the row stacks: full-width image, then an inline
   date badge beside the title/meta, then a full-width Buy Ticket. */
.event-date-inline {
    min-width: 44px;
    text-align: center;
    padding-right: 0.5rem;
    border-right: 1px solid #EAEAEA;
}

@media (max-width: 767px) {
    /* Buy Ticket spans the full row width on mobile */
    .event-list-row .btn-primary {
        width: 100%;
    }
}

/* Hide the inline mobile date module on desktop; the centered
   date column takes over from md: upward. */
@media (min-width: 768px) {
    .event-date-inline { display: none; }
}

/* global content section custom css  */
/* Event Section Styles */
.prose-custom h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.prose-custom p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
    /*margin-bottom: 24px;*/
}

/* Bullet Header Row Alignment */
.bullet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.bullet-header h6.black {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.bullet-header img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

/* Bullets Layout styling */
ul.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.list li.list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: #4a5568;
    margin-bottom: 10px;
    line-height: 1.5;
}

ul.list li.list-item::before {
    content: "•";
    color: #718096; /* Matches the clean slate bullet color */
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}