/* ===================================================================
   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.)

   Matching on "essma-" alone was too greedy: essma-reveal is a utility class
   people add to ANY Breakdance element, so a plain Image or Menu carrying the
   reveal animation was being forced to 100% too — which is how the header logo
   ended up spanning the whole bar, ignoring its own Width setting. Our elements
   are either bare (essma-ticker, essma-pillars, essma-kicker — no bde- class) or
   Breakdance-wrapped as bde-essma-*; Breakdance's own elements always carry a
   bde- class of some other type. So: match ours, skip theirs. Note that real
   ESSMA elements can carry essma-reveal as well (essma-kicker does), which is
   why excluding that class outright is not an option. */
.breakdance .section-container > [class*="essma-"]:not([class*="bde-"]),
.breakdance .section-container > [class*="bde-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}}

/* DI-04 Badge Wall — cells are now links to member profiles. Enqueued here (not in
   the element default.css) so it ships via a plain file upload with no Breakdance
   CSS regeneration. overflow:hidden stops oversized logos spilling; the anchor
   reset keeps the clickable cell looking exactly like the old div. */
.breakdance .essma-di4__cell{overflow:hidden}
.breakdance a.essma-di4__cell{text-decoration:none;color:inherit;cursor:pointer}
.breakdance .essma-di4__cell img{max-height:72px}

/* Restored from staging: this block is what actually styles the Summit
   button today. It was moved out of here on the assumption it lived in the
   Menu Dropdown's own Custom CSS, but nothing on the site ever carried it —
   every .essma-nav-cta rule in the browser resolves to this file. Uploading
   a copy without it would strip the button bare. */
/* ── Nav CTA — "Summit 2026" button with an animated border that circles the
   pill. Add classes on the Menu Dropdown (builder → Settings → Advanced → CSS
   Classes); they land on the <li>, we style its .breakdance-dropdown-toggle.
   Mix a FILL + a BEAM modifier to taste, e.g.:
     essma-nav-cta essma-nav-cta--fill-green
   Fills: (none)=outline · --fill-green · --fill-navy
   Beams: (none)=green   · --beam-gradient (green→blue)
   Pure CSS (SFTP, no DB); reduced-motion → static ring.
   Tweak: padding = pill width, 2px = border thickness, 3.2s = orbit time. */
@property --essma-cta-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.essma-nav-cta .breakdance-dropdown-toggle{
  position:relative; border-radius:999px;
  padding-left:15px; padding-right:11px;
  box-shadow:inset 0 0 0 1px rgba(17,44,92,.12);
  --essma-beam-1:#5DB04A; --essma-beam-2:#d9ffd2;
}
.essma-nav-cta .breakdance-dropdown-toggle::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  pointer-events:none;
  background:conic-gradient(from var(--essma-cta-a),
     transparent 0deg 250deg, var(--essma-beam-1) 300deg,
     var(--essma-beam-2) 330deg, var(--essma-beam-1) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:essma-cta-spin 3.2s linear infinite;
}
@keyframes essma-cta-spin{ to{ --essma-cta-a:360deg; } }

/* FILL modifiers */
.essma-nav-cta--fill-green .breakdance-dropdown-toggle{ background:var(--green,#5DB04A); box-shadow:none; }
.essma-nav-cta--fill-navy  .breakdance-dropdown-toggle{ background:var(--navy-deep,#112C5C); box-shadow:none; }
.essma-nav-cta--fill-green .breakdance-dropdown-toggle .breakdance-menu-link,
.essma-nav-cta--fill-green .breakdance-dropdown-toggle .breakdance-menu-link-arrow,
.essma-nav-cta--fill-navy  .breakdance-dropdown-toggle .breakdance-menu-link,
.essma-nav-cta--fill-navy  .breakdance-dropdown-toggle .breakdance-menu-link-arrow{ color:#fff !important; }

/* BEAM colour modifier (green is the default) */
.essma-nav-cta--beam-gradient .breakdance-dropdown-toggle::before{
  background:conic-gradient(from var(--essma-cta-a),
     transparent 0deg 210deg, #5DB04A 270deg, #2b7fd4 320deg, #1B4185 360deg);
}

@media (prefers-reduced-motion:reduce){
  .essma-nav-cta .breakdance-dropdown-toggle::before{ animation:none; background:var(--essma-beam-1); }
}

/* ── Sticky header on phones ──────────────────────────────────────────────
   The header Section's desktop values cascade straight down: a 250px logo, a
   60px gap and no horizontal padding. On a 393px phone that is 64% of the
   width, pinned against the edge with the swirl clipped, while the ticker
   right below it sits neatly indented. Corrected here rather than per
   breakpoint in the builder, so it survives the next header duplicate.
   .pin-spacer is Breakdance's own wrapper for the pinned header — exactly one
   per page, whichever header template is active. Specificity is deliberate:
   Breakdance sets the container's padding at (0,2,0) from the per-post
   defaults sheet, so these selectors have to outrank it rather than rely on
   which stylesheet happens to load last. */
@media (max-width: 767px) {
  .breakdance .pin-spacer > .bde-section > .section-container {
    padding-left: 16px; padding-right: 16px;
    /* The band was 50px around a 30px logo — 9px of air top and bottom, which
       read as cramped next to the ticker's own breathing room. Breakdance's pin
       script writes the height inline from the pre-pin measurement, so padding
       set here is measured in; padding added afterwards is simply ignored. */
    padding-top: 10px; padding-bottom: 10px;
    column-gap: 12px; justify-content: space-between;
  }
  /* Descendant, not direct child: the logo gets wrapped in a container link
     so it points home, and a `>` here silently stopped matching the moment
     that wrapper appeared — the logo sprang back to 250px. Matching on the
     image itself survives whatever it is nested in. */
  .breakdance .pin-spacer .section-container img.bde-image2 { width: 150px; max-width: 150px; }
}

/* ── Mobile menu: the two action buttons share a row ──────────────────────
   Breakdance lays the collapsed menu out as a flex column, so the Summit and
   Login buttons each took a full-width row of their own at the bottom of the
   panel — two stacked slabs where one row would do. Two siblings cannot share
   a line in a column flex, so the list becomes a two-column grid instead:
   every item spans both columns exactly as before, and only the custom areas
   (which is what a menu Button renders as) take one column each.

   Specificity is deliberate. Breakdance sets the list's display from
   `.breakdance .bde-menu-<id> .breakdance-menu--enabled .breakdance-menu-list`
   — four classes, and the middle one is per-menu, so it cannot be matched
   generically. Doubling up on the nav's own classes gets to four without
   naming any id, which keeps this working across header duplicates.

   Assumes the menu's custom areas are the buttons. That holds now the logo has
   moved out of the menu; add a third custom area and it joins the row. */
@media (max-width: 767px) {
  .breakdance .breakdance-menu--enabled.breakdance-menu--collapse ul.breakdance-menu-list {
    display: grid; grid-template-columns: 1fr 1fr; align-content: center;
  }
  .breakdance .breakdance-menu--enabled.breakdance-menu--collapse ul.breakdance-menu-list > li { grid-column: 1 / -1; }
  .breakdance .breakdance-menu--enabled.breakdance-menu--collapse ul.breakdance-menu-list > li.bde-menu-custom-area { grid-column: auto; }
}