/* ===================================================================
   ESSMA — Global stylesheet for Breakdance  (L0 tokens + L2 primitives)
   Loaded by essma-elements; also paste into Breakdance → Settings →
   Custom Code → CSS (Global). Elements consume these classes — never
   re-implement them inside an element's scoped CSS.
   =================================================================== */

/* ---- 0. Crisp font rendering — match the standalone (lighter, classier text).
   Without this, macOS/Chrome render text with heavier subpixel smoothing. ---- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ---- 1. Design tokens (also register as Global Colors in Breakdance) ---- */
:root{
  --navy:#1B4185;        /* primary brand */
  --navy-deep:#112C5C;   /* dark sections / headings */
  --blue:#2E7CB8;        /* secondary accent / links */
  --blue-soft:#6BA8D6;
  --green:#5DB04A;        /* THE accent */
  --green-text:var(--green);   /* label/text green — alias of brand green (design uses one green: #5DB04A) */
  --ink:#0E1A2E;          /* body text */
  --ink-2:#4A576C;        /* secondary text */
  --line:#E4E8EF;         /* borders */
  --paper:#F4F6FA;        /* light section bg */
  --paper-2:#EAEEF5;
  --accent:var(--green);
}

/* ---- 1b. Scroll-reveal (assets/js/scroll-reveal.js adds .essma-reveal then .is-in) ---- */
.breakdance .essma-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.breakdance .essma-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.breakdance .essma-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Accent flourish on reveal — the green heading "period" pops in. */
@keyframes essma-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.breakdance .essma-reveal.is-in .gdot i{animation:essma-pop .5s cubic-bezier(.2,.85,.25,1) both}

/* Ambient idle motion — decorative only: green kicker dots breathe, hero texture drifts. */
@keyframes essma-breathe{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes essma-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-1.5%,1.2%)}}
.breakdance .kicker.k-dot::before{animation:essma-breathe 3.2s ease-in-out infinite}
.breakdance .essma-tex{animation:essma-drift 22s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .breakdance .essma-reveal.is-in .gdot i,
  .breakdance .kicker.k-dot::before,
  .breakdance .essma-tex{animation:none}
}

/* ---- 1c. Newsletter subscribe — honeypot + inline status ---- */
.essma-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.breakdance .essma-subscribe__msg{flex:1 0 100%;margin:9px 0 0;font-size:12.5px;line-height:1.45}
.breakdance .essma-subscribe__msg[data-state="ok"]{color:#6FCB5A}
.breakdance .essma-subscribe__msg[data-state="err"]{color:#ff7a6b}

/* ---- 1a. Accessibility: visible keyboard focus ring (mouse :focus untouched) ---- */
.breakdance a:focus-visible,
.breakdance button:focus-visible,
.breakdance .btn:focus-visible,
.breakdance input:focus-visible,
.breakdance select:focus-visible,
.breakdance textarea:focus-visible,
.breakdance [tabindex]:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- 2. UT-01 Section kicker — the subsection indicator ----
   <p class="kicker"><span class="kn">02</span><span class="kd">/</span>Connect with us</p>
   Modifiers: .k-dot · .on-dark · .green · .sm / .lg · .rule */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin:0}
.kicker .kn{color:var(--green)}
.kicker .kd{color:var(--ink-2);font-weight:400}
.kicker.k-dot .kd{display:none}
.kicker.k-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.kicker.on-dark{color:#cdd6e6}
.kicker.on-dark .kd{color:#7a8aa8}
.kicker.green{color:var(--green-text)}
.kicker.on-dark.green{color:var(--green)}
.kicker.sm{font-size:10px;letter-spacing:0.12em}
.kicker.lg{font-size:12px}
.kicker.rule{width:100%}
.kicker.rule::after{content:"";flex:1;height:1px;background:var(--line);margin-left:8px}
.kicker.on-dark.rule::after{background:rgba(255,255,255,0.14)}

.essma-display{font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92;color:var(--navy-deep)}

/* Green dot period — brand motif. Bebas "." is square; the real "." stays in
   text (copy/SEO/SR) but transparent; the <i> draws the round green dot.
   The dot sits IN-FLOW on the text baseline (display:inline-block;
   vertical-align:baseline + negative margin over the transparent period) so its
   position is size-independent and identical in every section. The whole motif
   lives inside a width:0 inline-block, so toggling it never changes line
   wrapping. Usage: <span class="gdot">.<i></i></span> */
.gdot{display:inline-block;width:0;white-space:nowrap;vertical-align:baseline;color:transparent}
.gdot i{display:inline-block;vertical-align:baseline;width:.14em;height:.14em;border-radius:50%;background:var(--green);margin-left:-.18em}
.essma-h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--navy-deep)}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ---- 3. Buttons (pill, 46px) ---- */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;border:1.5px solid transparent;cursor:pointer;
  transition:all .2s;text-decoration:none;white-space:nowrap}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(.92)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--navy-deep)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
/* on dark surfaces */
.btn-on-dark{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.22);color:#fff}
.btn-on-dark:hover{background:rgba(255,255,255,0.16)}
.btn-light{background:#fff;color:var(--navy-deep)}
.btn-light:hover{background:var(--paper)}
.btn.sm{height:38px;padding:0 16px;font-size:13px}
/* Breakdance core sets `.breakdance a{color:var(--bde-links-color)}` (blue, spec 0,1,1),
   which beats `.btn-accent` (0,1,0) on anchor-buttons. Re-assert button text colors
   with `.breakdance`-scoped selectors (0,2,0) so links keep the right colour. */
.breakdance .btn-primary,.breakdance .btn-accent,.breakdance .btn-on-dark,
.breakdance a.btn-primary,.breakdance a.btn-accent,.breakdance a.btn-on-dark,
.breakdance .btn-primary:hover,.breakdance .btn-accent:hover,.breakdance .btn-on-dark:hover{color:#fff}
.breakdance .btn-ghost,.breakdance a.btn-ghost,.breakdance .btn-light,.breakdance a.btn-light{color:var(--navy-deep)}
.breakdance .btn-ghost:hover,.breakdance a.btn-ghost:hover{color:var(--navy)}
.breakdance .btn .arr,.breakdance a.btn .arr{color:inherit}

/* ---- 4. Tags / pills ---- */
.tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(46,124,184,.10);color:var(--blue);font-size:12px;font-weight:600}
.tag.green{background:rgba(93,176,74,.14);color:var(--green-text)}
.tag.navy{background:rgba(27,65,133,.10);color:var(--navy)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* Inline SVG card icons (includes/icons.php). Sized off the container font-size,
   colour inherited via currentColor. ~1.35em reads well inside the icon chips. */
.breakdance .essma-ico{width:1.35em;height:1.35em;display:inline-block;vertical-align:middle;flex:0 0 auto}
.breakdance .essma-ico-char{line-height:1}

/* ---- Complianz consent banner — ESSMA brand (navy/green). Renders at body level
   (outside .breakdance), so target its classes directly; applies once the banner
   is enabled via the Complianz wizard. ---- */
.cmplz-cookiebanner{border-radius:18px!important;border:1px solid var(--line,#E4E8EF)!important;box-shadow:0 18px 50px rgba(11,27,61,.18)!important;font-family:'Inter',sans-serif!important}
.cmplz-cookiebanner .cmplz-title{font-family:'Archivo',sans-serif!important;font-weight:800!important;color:var(--navy-deep,#112C5C)!important}
.cmplz-cookiebanner .cmplz-btn{border-radius:999px!important;font-family:'Inter',sans-serif!important;font-weight:600!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{background:var(--green,#5DB04A)!important;border-color:var(--green,#5DB04A)!important;color:#fff!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover{filter:brightness(.93)}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options{background:transparent!important;border:1px solid var(--line,#E4E8EF)!important;color:var(--navy-deep,#112C5C)!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover{border-color:var(--navy,#1B4185)!important;color:var(--navy,#1B4185)!important}
.cmplz-cookiebanner .cmplz-link,.cmplz-cookiebanner .cmplz-documents a{color:var(--green-text,#3F8A30)!important}
.cmplz-cookiebanner .cmplz-category-toggle{accent-color:var(--green,#5DB04A)}

/* ---- 5. Section rhythm & header (Breakdance content width 1280) ---- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:60px}
.sec-head h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:68px;line-height:1;
  text-transform:uppercase;color:#1A4185}

/* ESSMA elements fill the Breakdance Section they sit in. Vertical Sections are
   flex columns that DON'T stretch children by default, so components whose
   content has no intrinsic width (grids of aspect-ratio cards, e.g. the network
   gallery) collapse to ~0 width. This makes every ESSMA element span the section.
   It also NEUTRALISES a component's own "Full bleed" 100vw breakout (max-width +
   calc margins): inside a Section the breakout is computed against the section's
   container, not the viewport, so it mis-aligns left. The Section's own Width
   control is the single source of truth for boxed vs edge-to-edge. (margin-top/
   bottom are left intact so the kicker gap / section rhythm survive.) */
.breakdance .section-container > [class*="essma-"]{width:100%;max-width:100%;margin-left:0;margin-right:0}
/* Full-bleed bars (Archive, SectionTabs, MemberMap) carry their own inner
   container (.wrap/.at-wrap: max-width 1280 + 32px gutter) which the Section
   can't reach. Inside a Section, defer to it: drop the cap + horizontal gutter
   so the Section's width/gutter applies (vertical padding kept). */
.breakdance .section-container > [class*="essma-"]:not(.bde-essma-member-map) .wrap,
.breakdance .section-container > [class*="essma-"]:not(.bde-essma-member-map) .at-wrap{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
/* MemberMap is a full-bleed band but its content (.wrap) stays centred at 1280
   (the band has no constraining Section container), so it's excluded above. */
/* Contained components: the Section owns ALL spacing, so zero their inner
   wrapper's padding inside a Section (the section's vertical rhythm + gutter
   apply). Bands/heroes are EXCLUDED — their inner padding insets content inside
   the colored/edge-to-edge band and stays adjustable via the element's Padding
   control. Only affects elements inside a Section; root instances are untouched. */
.breakdance .section-container > [class*="essma-"]:not(.essma-ba2):not(.essma-ba4):not(.essma-deepdive):not(.essma-exp):not(.essma-he1):not(.essma-he2):not(.essma-he6) > [class*="__inner"]{padding:0}

/* ---- 6. Card (hover lift + accent reveal) ---- */
.card{padding:32px;border:1px solid var(--line);border-radius:18px;background:#fff;position:relative;overflow:hidden;
  transition:all .2s cubic-bezier(.2,.8,.2,1)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .25s}
.card:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,27,61,.09)}
.card:hover::before{transform:scaleY(1);transform-origin:top}

/* ---- 7. Stat number (jersey style) ---- */
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:62px;line-height:.85;color:var(--navy-deep);display:inline-block}
.stat-num sup{font-family:'Archivo',sans-serif;font-size:22px;color:var(--accent);font-weight:700;vertical-align:.5em;margin-left:.06em}

/* ---- 8. Logo / crest partial (DI-02/04/05, HE-04) ---- */
.essma-crest{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:900;flex-shrink:0;overflow:hidden;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,0.25)}
.essma-crest--logo{background:#fff;box-shadow:none}
.essma-crest--logo img{width:100%;height:100%;object-fit:contain;padding:14%}

/* ---- 9. Grid-lines overlay (dark heroes, optional per-instance) ---- */
.grid-lines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 72%)}

/* ---- 9b. Texture overlay — per-instance raster on dark sections.
   Usage: <div class="essma-tex essma-tex--{grid|stripes|dots|none}"></div> ---- */
.essma-tex{position:absolute;inset:0;pointer-events:none}
.essma-tex--grid{
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 72%)}
.essma-tex--stripes{background:repeating-linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.045) 7px, transparent 7px, transparent 17px)}
.essma-tex--dots{background-image:radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px);background-size:22px 22px}
.essma-tex--none{display:none}

/* ---- 10. Editorial article body (news posts) ---- */
.post-body{font-family:'Inter',sans-serif;font-size:18px;line-height:1.7;color:#1c2535;max-width:720px}
.post-body p{margin:0 0 26px}
.post-body h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:28px;color:var(--navy-deep);margin:46px 0 18px}
.post-body h2::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:18px}
.dropcap{float:left;font-family:'Bebas Neue',sans-serif;font-size:84px;line-height:.74;padding:6px 14px 0 0;color:var(--navy)}
.pullquote{font-family:'Inter',sans-serif;font-size:27px;line-height:1.38;color:var(--navy-deep);font-weight:500;
  margin:40px 0;padding:6px 0 6px 30px;border-left:4px solid var(--accent)}
.pullquote cite{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-2);margin-top:18px}

/* Section Tabs (filter mode) — fade a group in when its tab is activated.
   Applied by section-tabs.js to the controlled section/element. */
.essma-tab-in{animation:essma-tab-fade .26s ease both}
@keyframes essma-tab-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* [essma_media_gallery] — Flickr album browser (Media Gallery page). Album grid
   of uniform cover cards (cover + title + count); ?album=ID shows Photonic. */
.essma-mg{max-width:1280px;margin:0 auto;padding:0 24px}
.essma-mg__grid{display:grid;grid-template-columns:repeat(var(--mg-cols,4),1fr);gap:16px}
.essma-mg__card{position:relative;display:block;text-decoration:none;border-radius:14px;overflow:hidden;background:#0b1b3d;aspect-ratio:4/3}
.essma-mg__cover{position:absolute;inset:0}
.essma-mg__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.essma-mg__card:hover .essma-mg__cover img{transform:scale(1.05)}
.essma-mg__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,27,61,.85) 100%)}
.essma-mg__meta{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px}
.essma-mg__title{display:block;color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.essma-mg__count{display:block;margin-top:5px;color:rgba(255,255,255,.82);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.essma-mg__back{display:inline-block;margin-bottom:24px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy,#1B4185);text-decoration:none}
.essma-mg__back:hover{color:var(--green-text,#3F8A30)}
.essma-mg--empty{color:var(--ink-2,#4A576C);font-size:14px;padding:40px 24px;text-align:center}
@media (max-width:900px){.essma-mg__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.essma-mg__grid{grid-template-columns:1fr}}

/* Soccer-ball cursor (assets/js/ball-cursor.js) — hovering a `.ball-cursor`
   element hides the native cursor and a rolling ball follows the pointer. */
body.ballcur .ball-cursor, body.ballcur .ball-cursor *{cursor:none}
#ballCursor{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none;z-index:99999;opacity:0;transform:scale(.3);transition:opacity .16s ease, transform .3s cubic-bezier(.2,.9,.3,1.7)}
#ballCursor.on{opacity:1;transform:scale(1)}
#ballCursor .bc-inner{width:100%;height:100%;background:url('../img/ball-cursor.png') center/contain no-repeat;transform:rotate(var(--r,0deg));filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* ── Membership: branded login page ([essma_login]) ── */
.essma-login{max-width:1280px;margin:0 auto;padding:80px 24px;display:flex;justify-content:center}
.essma-login__panel{width:100%;max-width:440px;background:#fff;border:1px solid var(--line,#E4E8EF);border-radius:18px;padding:40px;box-shadow:0 24px 60px rgba(11,27,61,.08)}
.essma-login__title{font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;font-size:46px;line-height:.98;color:var(--navy-deep,#112C5C);margin:12px 0 0}
.essma-login__sub{font-size:15px;line-height:1.6;color:var(--ink-2,#4A576C);margin:10px 0 22px}
.essma-login__error{background:#fdecea;border:1px solid #f5c2bd;color:#8a1c12;font-size:14px;line-height:1.5;border-radius:12px;padding:12px 14px;margin:0 0 18px}
.essma-login__error a{color:#8a1c12;text-decoration:underline}
.essma-login__notice{background:#eef7ec;border:1px solid #c7e6bf;color:#27632a;font-size:14px;line-height:1.5;border-radius:12px;padding:12px 14px;margin:0 0 18px}
.essma-login__form{display:flex;flex-direction:column;gap:14px}
.essma-login__field{display:flex;flex-direction:column;gap:6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;color:var(--navy-deep,#112C5C)}
.essma-login__field input{height:46px;padding:0 14px;border:1px solid var(--line,#E4E8EF);border-radius:12px;font-size:15px;font-family:'Inter',sans-serif;font-weight:400;color:var(--navy-deep,#112C5C);background:#fff}
.essma-login__field input:focus{outline:none;border-color:var(--green,#5DB04A);box-shadow:0 0 0 3px rgba(93,176,74,.18)}
.essma-login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2,#4A576C)}
.essma-login__remember{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.essma-login__row a{color:var(--green-text,#2E7D27);font-weight:600}
.essma-login__btn{width:100%;justify-content:center;margin-top:4px}
.essma-login__alt{font-size:14px;color:var(--ink-2,#4A576C);margin:22px 0 0;text-align:center}
.essma-login__alt a{color:var(--green-text,#2E7D27);font-weight:600}
.essma-login__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ── Membership: gate panel + teaser (publication detail) ── */
.essma-pub__teaser{color:var(--ink-2,#4A576C);font-size:16px;line-height:1.7;margin:0 0 10px;max-height:5em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.essma-members-gate{border:1px solid var(--line,#E4E8EF);border-radius:18px;background:linear-gradient(180deg,#fff,#f6f8fb);padding:34px 30px;text-align:center;box-shadow:0 18px 44px rgba(11,27,61,.07)}
.essma-members-gate__lock{color:var(--green-text,#2E7D27);margin:0 auto 6px;display:block}
.essma-members-gate__title{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:var(--navy-deep,#112C5C);margin:6px 0 8px}
.essma-members-gate__text{font-size:14.5px;line-height:1.6;color:var(--ink-2,#4A576C);max-width:380px;margin:0 auto 20px}
.essma-members-gate__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- Event detail body helpers — use these classes in an event's content to
   build the "what to expect" checklist, included/excluded cards and partner
   logo row from the design. Optional; plain content still renders fine. ---- */
.essma-ticklist{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:22px 0;padding:0;list-style:none}
.essma-ticklist li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.5;color:var(--navy-deep,#112C5C);font-weight:500;align-self:start}
.essma-ticklist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:rgba(93,176,74,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235DB04A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat}

.essma-incex{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin:16px 0;align-items:start}
.essma-incex__card{border:1px solid var(--line,#E4E8EF);border-radius:18px;padding:24px}
.essma-incex__card--in{background:#fff}
.essma-incex__card--ex{background:var(--paper,#F4F6FA)}
.essma-incex__card h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--navy-deep,#112C5C);margin:0 0 12px}
.essma-incex__h{display:flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;color:var(--navy-deep,#112C5C);margin:0 0 16px}
.essma-incex__b{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex:0 0 auto}
.essma-incex__card--in .essma-incex__b{background:var(--green,#5DB04A)}
.essma-incex__card--ex .essma-incex__b{background:#C0463E}
.essma-incex__card ul{list-style:none;margin:0;padding:0}
.essma-incex__card li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;margin:8px 0;color:var(--ink,#0E1A2E)}
.essma-incex__card--in li::before{content:"✓";position:absolute;left:0;color:var(--green,#5DB04A);font-weight:700}
.essma-incex__card--ex li::before{content:"✕";position:absolute;left:0;color:#C0463E;font-weight:700}

/* Key-facts box (Dates / Location / Format) */
.essma-keyfacts{display:flex;gap:0;margin:28px 0;background:var(--paper,#F4F6FA);border:1px solid var(--line,#E4E8EF);border-radius:14px;overflow:hidden}
.essma-keyfacts__kf{flex:1;padding:20px 24px;border-right:1px solid var(--line,#E4E8EF)}
.essma-keyfacts__kf:last-child{border-right:0}
.essma-keyfacts__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2,#4A576C);margin-bottom:8px}
.essma-keyfacts__v{font-size:15px;font-weight:700;color:var(--navy-deep,#112C5C);line-height:1.35}

/* Questions — navy band with contact cards */
.essma-questions{margin:40px 0 8px;background:var(--navy-deep,#112C5C);border-radius:18px;padding:34px 38px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.breakdance .essma-questions h3{color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;margin:0}
.essma-questions__intro p{color:#9eb1d0;font-size:14px;margin:8px 0 0}
.essma-questions__contacts{display:flex;gap:14px;flex-wrap:wrap}
.essma-questions__qc{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 20px;text-decoration:none;transition:background .15s,border-color .15s}
.essma-questions__qc:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.essma-questions__r{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-soft,#A6D49A)}
.essma-questions__e{display:block;font-size:15px;font-weight:600;color:#fff;margin-top:6px}
@media (max-width:680px){.essma-keyfacts{flex-direction:column}.essma-keyfacts__kf{border-right:0;border-bottom:1px solid var(--line,#E4E8EF)}.essma-keyfacts__kf:last-child{border-bottom:0}}

.essma-partnerlogos{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:16px 0}
.essma-partnerlogos img{height:64px;width:auto;object-fit:contain;flex:0 0 auto;padding:14px 20px;border:1px solid var(--line,#E4E8EF);border-radius:14px;background:#fff}

/* Partner / supplier card (DI-02) — shared primitive so it renders both in the
   partners directory and on the event detail page (.essma-event-partners). */
.breakdance .essma-event-partners{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.breakdance .essma-di2__supplier{border:1px solid var(--line,#E4E8EF);border-radius:18px;background:#fff;padding:20px;transition:all .2s;position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit}
.breakdance .essma-di2__supplier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#5DB04A);transform:scaleY(0);transform-origin:bottom;transition:transform .25s}
.breakdance .essma-di2__supplier:hover{border-color:var(--navy,#1B4185);transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,27,61,.08)}
.breakdance .essma-di2__supplier:hover::before{transform:scaleY(1);transform-origin:top}
.breakdance .essma-di2__sup-logo{display:flex;align-items:center;justify-content:center;height:104px;margin-bottom:16px;padding:16px;background:#fff;border:1px solid var(--line,#E4E8EF);border-radius:12px;overflow:hidden}
.breakdance .essma-di2__sup-logo img{max-width:100%;max-height:100%;object-fit:contain}
.breakdance .essma-di2__sup-logo--mono{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;color:var(--navy,#1B4185);background:var(--paper,#F4F6FA)}
.breakdance .essma-di2__supplier h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:1.2;color:var(--navy-deep,#112C5C);margin:0}
.breakdance .essma-di2__supplier .essma-di2__st{margin-top:4px;font-size:12.5px;color:var(--ink-2,#4A576C)}
.breakdance .essma-di2__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

@media (max-width:980px){.breakdance .essma-event-partners{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.essma-ticklist,.essma-incex{grid-template-columns:1fr}.breakdance .essma-event-partners{grid-template-columns:1fr}}