@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --pink:#e11b6b; --pink2:#f0398b; --ink:#191049;
  --pink-050:#fdeef4; --pink-100:#fbdbe9;
  --text:#20233a; --muted:#6b7280; --line:#eceef3; --bg:#f5f6fa;
  --green:#e8f7ef; --green-t:#128a55;
  --shadow:0 12px 30px rgba(25,16,73,.08); --shadow-sm:0 6px 16px rgba(25,16,73,.06);
  --r:18px;
}
*,*::before,*::after{ box-sizing:border-box; }
body.site{ margin:0; font-family:'Poppins',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; }
body.site[dir],html[dir="rtl"] body.site{ }
html[dir="rtl"] body.site{ font-family:'Cairo',system-ui,sans-serif; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
.wrap{ max-width:1320px; margin:0 auto; padding:0 26px; }
.mb{ margin-bottom:14px; }
.muted{ color:var(--muted); }
.ta-end{ text-align:end; } .ta-center{ text-align:center; } .nowrap{ white-space:nowrap; }

/* utility bar */
.utilitybar{ background:var(--ink); color:#fff; }
.ubar{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px; }
.ubar-left{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; }
.ubar-left::-webkit-scrollbar{ display:none; }
.ubar-left a{ font-size:12px; font-weight:600; color:#d9d5ea; white-space:nowrap; padding:9px 0; }
.ubar-left a:hover,.ubar-left a.active{ color:var(--pink2); }
.ubar-right-wrap{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.ubar-right{ display:flex; align-items:center; gap:12px; }
.ubar-right a{ font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; }
.ubar-right a.ubar-accent{ color:var(--pink2); }
.ubar-sep{ width:1px; height:13px; background:rgba(255,255,255,.25); }
.lang-btn{ display:flex; align-items:center; gap:6px; border:1.5px solid rgba(255,255,255,.35); border-radius:8px; padding:4px 10px; font-size:11.5px; font-weight:700; color:#fff; }
.lang-btn svg{ width:13px; height:13px; }
.lang-btn:hover{ border-color:#fff; color:var(--pink2); }

/* header */
.topbar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.nav{ display:flex; align-items:center; gap:22px; min-height:72px; }
.brand{ flex:0 0 auto; display:flex; align-items:center; }
.brand-logo{ height:44px; width:auto; }
.brand-text{ font-size:22px; font-weight:800; color:var(--ink); }
.mainnav{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav-item{ position:relative; }
.nav-item>.nav-link{ display:flex; align-items:center; gap:5px; padding:24px 10px; font-size:14px; font-weight:500; color:#3a3f57; white-space:nowrap; }
.nav-item>.nav-link.active,.nav-item:hover>.nav-link{ color:var(--pink); }
.caret{ width:11px; height:11px; }
.nav-item:hover .caret{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:100%; inset-inline-start:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:220px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s; z-index:50; }
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:none; }
.nav-item:nth-last-child(-n+2) .dropdown{ inset-inline-start:auto; inset-inline-end:0; }
.dropdown a{ display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:#3a3f57; white-space:nowrap; }
.dropdown a:hover,.dropdown a.active{ background:var(--pink-050); color:var(--pink); }
.tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.search-form{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; background:#fff; }
.search-form input{ border:0; outline:0; font-family:inherit; font-size:13px; width:150px; background:transparent; }
.search-form button{ background:none; border:0; color:#6b7280; display:grid; place-items:center; padding:0; }
.search-form button svg{ width:17px; height:17px; }
.search-form button:hover{ color:var(--pink); }
.burger{ display:none; background:none; border:0; color:#2b2f45; width:38px; height:38px; }
.burger svg{ width:24px; height:24px; }
.mobile-menu{ display:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-weight:600; font-size:14px; padding:11px 20px; border:1.5px solid transparent; }
.btn svg{ width:16px; height:16px; }
.btn-pink{ background:var(--pink); color:#fff; }
.btn-pink:hover{ filter:brightness(.92); }
.btn-ghost{ background:#fff; border-color:#d7d9e3; color:#2b2f45; }
.btn-ghost:hover{ border-color:var(--pink); color:var(--pink); }
.btn-outline-l{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline-l:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-sm{ padding:7px 13px; font-size:12.5px; }

/* hero */
/* ===== hero ===== */
.hero{ position:relative; color:#fff; overflow:hidden;
  background:radial-gradient(900px 500px at 78% 30%, rgba(225,27,107,.35), transparent 60%),
             linear-gradient(120deg, var(--ink) 0%, #22135a 45%, #33195f 100%);
  min-height:420px;                       /* fallback for older browsers */
  min-height:clamp(400px, 42vw, 580px);   /* scales itself on any screen */
  display:flex; align-items:center; }
.hero.has-img{ background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--ink); }
/* full-banner mode: the section is exactly the image's shape, content floats over it */
.hero.fit-full{ display:block; position:relative; min-height:0; }
.hero.fit-full .wrap{ z-index:2; }
/* when the banner carries its own text we only float the buttons at the bottom */
.hero.fit-full.no-text .wrap{ top:auto; bottom:6%; transform:none; }
.hero.fit-full.no-text .hero-cta{ justify-content:flex-start; }
.hero .wrap{ padding-top:54px; padding-bottom:58px; width:100%; }
/* the text column never spans the whole banner, so it can't sit on top of artwork */
.hero-copy{ max-width:560px; }
.hero h1{ font-size:36px; font-size:clamp(26px, 3.4vw, 42px); line-height:1.2; font-weight:800;
  text-shadow:0 2px 18px rgba(8,4,24,.6); }
.hero .lead{ font-size:16px; font-size:clamp(14px, 1.15vw, 16.5px); color:#e6e1f4; margin:16px 0 26px;
  text-shadow:0 1px 12px rgba(8,4,24,.55); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero.no-text .hero-copy{ max-width:none; }

/* quickbar */
.quickbar-wrap{ position:relative; z-index:10; }
.quickbar-wrap.pulled{ margin-top:-28px; }
.quickbar{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:20px 10px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0; }
.qitem{ flex:1 1 120px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:6px 8px; }
.qitem svg{ width:25px; height:25px; color:var(--pink); }
.qitem span{ font-size:12px; font-weight:600; color:#33384f; }
.qitem:hover svg{ transform:translateY(-2px); }

/* ===== inner page header ===== */
/* the banner shows in full, exactly like the home page — nothing drawn over it */
.page-hero-img{ display:block; position:relative; width:100%; background-position:center; }
/* the page title lives in its own strip underneath */
.page-titlebar{ color:#fff;
  background:radial-gradient(700px 380px at 85% 20%, rgba(225,27,107,.32), transparent 60%),
             linear-gradient(120deg, var(--ink) 0%, #22135a 55%, #33195f 100%); }
.page-titlebar .wrap{ padding-top:26px; padding-bottom:28px; }
.page-titlebar.standalone .wrap{ padding-top:40px; padding-bottom:46px; }
.page-titlebar h1{ font-size:26px; font-weight:800; }
.page-titlebar.standalone h1{ font-size:32px; }
.banner-text{ font-size:14.5px; color:#cfc9e6; max-width:640px; margin-top:8px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#c9c3e6; margin-bottom:14px; flex-wrap:wrap; }
.breadcrumb .sep{ opacity:.5; }
html[dir="rtl"] .breadcrumb .sep{ transform:scaleX(-1); display:inline-block; }

/* sections and cards */
.section{ padding:38px 0; }
.grid{ display:grid; gap:20px; align-items:stretch; align-content:start; }
.grid>*{ align-self:stretch; min-width:0; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:20px; display:flex; flex-direction:column; height:100%; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:nowrap; min-height:26px; }
.panel-title{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:var(--ink); min-width:0; }
.panel-title svg{ width:19px; height:19px; color:var(--pink); flex:0 0 auto; }
.panel-title span{ min-width:0; overflow-wrap:anywhere; }
.viewall{ color:var(--pink); font-weight:600; font-size:13px; flex:0 0 auto; white-space:nowrap; }
.panel-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; }

/* empty state */
.empty-state{ text-align:center; padding:34px 18px; border:1.5px dashed #dcdfe9; border-radius:var(--r); background:#fbfbfe; display:flex; flex-direction:column; align-items:center; flex:1 1 auto; justify-content:center; }
.empty-ic{ width:54px; height:54px; border-radius:50%; background:var(--pink-050); display:grid; place-items:center; margin-bottom:12px; }
.empty-ic svg{ width:25px; height:25px; color:var(--pink); }
.empty-state h3{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.empty-state p{ font-size:13px; color:var(--muted); max-width:420px; margin-bottom:14px; }

/* post cards */
.post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.15s; }
.post-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.pc-img img{ width:100%; height:150px; object-fit:cover; }
.pc-body{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.pc-top{ display:flex; align-items:center; gap:8px; }
.pc-date{ font-size:11px; color:var(--muted); margin-inline-start:auto; }
.post-card h3{ font-size:15px; font-weight:700; color:var(--ink); }
.post-card p{ font-size:13px; color:var(--muted); }
.posts-grid .post-card{ height:100%; }
.tag{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; }
.tag.inperson{ background:var(--pink-050); color:var(--pink); }

/* chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip{ border:1px solid var(--line); background:#fff; color:#4a4f68; border-radius:20px; padding:8px 16px; font-size:13px; font-weight:600; }
.chip:hover,.chip.active{ background:var(--pink-050); border-color:var(--pink-100); color:var(--pink); }

/* article */
.prose{ max-width:840px; }
.article-img{ width:100%; border-radius:var(--r); margin-bottom:20px; }
.article{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; font-size:15px; color:#43485f; }
.media-wrap{ margin-bottom:20px; }
.video-embed{ position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
video,audio{ width:100%; border-radius:12px; }
.media-note{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); margin-top:8px; }
.media-note svg{ width:14px; height:14px; }
.search-query{ background:var(--pink-050); border:1px solid var(--pink-100); border-radius:10px; padding:12px 16px; font-size:13.5px; margin-bottom:18px; }

/* auth */
.auth-wrap{ min-height:70vh; display:grid; place-items:center; padding:46px 20px; }
.auth-card{ width:100%; max-width:440px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:32px; }
.auth-card h1{ font-size:23px; font-weight:800; color:var(--ink); text-align:center; }
.a-sub{ font-size:13.5px; color:var(--muted); text-align:center; margin:6px 0 22px; }
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13px; font-weight:600; color:#3a3f57; margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; border:1.5px solid #e2e4ec; border-radius:10px; padding:11px 13px; font-family:inherit; font-size:14px; outline:0; background:#fff; color:#222; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--pink); }
.field small{ display:block; margin-top:5px; font-size:12px; }
.auth-btn{ width:100%; background:var(--pink); color:#fff; border:0; border-radius:10px; padding:12px; font-weight:700; font-size:14.5px; }
.auth-alt{ text-align:center; font-size:13px; color:var(--muted); margin-top:18px; }
.auth-alt a{ color:var(--pink); font-weight:700; }
.admin-card{ border-top:4px solid var(--ink); }
.admin-badge-row{ text-align:center; }
.admin-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff; border-radius:20px; padding:5px 13px; font-size:11px; font-weight:700; margin-bottom:12px; }
.admin-badge svg{ width:13px; height:13px; }
.admin-hint{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); text-align:center; }
.alert{ border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
.alert.error{ background:#fdecec; color:#b3261e; border:1px solid #f7c9c9; }
.alert.ok{ background:var(--green); color:var(--green-t); border:1px solid #bfe8d2; }

/* footer */
.footer{ margin-top:50px; background:linear-gradient(110deg, var(--ink), #2a1560 60%, #3a1a5e); color:#fff; }
.foot-top{ display:flex; align-items:center; gap:26px; padding:32px 0 28px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-msg{ display:flex; align-items:center; gap:15px; }
.foot-msg .fic{ width:50px; height:50px; border-radius:50%; background:var(--pink); display:grid; place-items:center; }
.foot-msg .fic svg{ width:21px; height:21px; color:#fff; }
.foot-msg h4{ font-size:17px; } .foot-msg p{ font-size:12.5px; color:#c3bdda; }
.subscribe{ flex:1; min-width:280px; max-width:520px; display:flex; background:#fff; border-radius:12px; padding:5px; }
.subscribe input{ flex:1; border:0; outline:0; padding:0 14px; font-family:inherit; font-size:14px; }
.subscribe button{ background:var(--pink); color:#fff; border:0; border-radius:9px; padding:11px 22px; font-weight:600; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 24px; flex-wrap:wrap; }
.foot-nav{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-nav a{ font-size:13px; color:#c9c3e0; }
.foot-copy{ font-size:12.5px; color:#a99fc9; }

/* mobile */
@media(max-width:1180px){
  .mainnav{ display:none; }
  .burger{ display:grid; place-items:center; }
  .nav{ justify-content:space-between; }
  .tools{ margin-inline-start:auto; }
  .search-form input{ width:110px; }
}
@media(max-width:900px){
  .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); }
  .hero-copy{ max-width:72%; }
}
@media(max-width:600px){
  .wrap{ padding:0 16px; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .page-titlebar h1{ font-size:21px; }
  .page-titlebar.standalone h1{ font-size:24px; }
  .hero{ min-height:440px; min-height:clamp(420px, 86vw, 540px); }
  .hero-copy{ max-width:none; }
  .hero .wrap{ padding-top:40px; padding-bottom:44px; }
  .hero-cta{ flex-direction:column; } .hero-cta .btn{ width:100%; }
  .search-form{ display:none; }
  .foot-top{ flex-direction:column; align-items:stretch; }

}
.mobile-menu.open{ display:block; position:fixed; inset:0; z-index:60; }
.mm-back{ position:absolute; inset:0; background:rgba(15,10,40,.5); }
.mm-panel{ position:absolute; top:0; bottom:0; right:0; left:auto; width:300px; max-width:86vw; background:#fff; padding:20px; overflow:auto; box-shadow:-10px 0 40px rgba(0,0,0,.2); }
html[dir="rtl"] .mm-panel{ right:auto; left:0; box-shadow:10px 0 40px rgba(0,0,0,.2); }
.mm-close{ background:none; border:0; font-size:22px; color:#555; float:right; }
html[dir="rtl"] .mm-close{ float:left; }
.mm-panel a{ display:block; padding:11px 4px; font-size:14.5px; font-weight:600; color:#2b2f45; border-bottom:1px solid var(--line); }
.mm-panel a.mm-sub{ font-size:13px; font-weight:500; color:#5a5f77; padding-inline-start:16px; }
.mm-group-title{ font-size:11px; font-weight:800; color:var(--pink); padding:14px 4px 6px; text-transform:uppercase; }

/* ===== hero / page banner with image ===== */
.banner-text{ font-size:15px; color:#cfc9e6; max-width:640px; margin-top:10px; }

/* ===== intro band (home) ===== */
.intro-band{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow-sm); }
.intro-copy h2{ font-size:26px; font-weight:800; color:var(--ink); margin-bottom:12px; }
.intro-copy p{ font-size:15px; color:var(--muted); margin-bottom:18px; }
.intro-media img,.feature-visual{ width:100%; border-radius:14px; object-fit:cover; max-height:340px; }

/* ===== full-width band strip ===== */
.band-strip{ margin:8px 0 30px; }
.band-strip img,.band-img{ width:100%; max-height:300px; object-fit:cover; display:block; }

/* ===== about page ===== */
.about-intro{ padding:52px 0 46px; }
.about-band{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--pink); margin-bottom:10px; }
html[dir="rtl"] .eyebrow{ letter-spacing:0; }
.about-copy h2{ font-size:32px; font-weight:800; color:var(--ink); margin-bottom:16px; line-height:1.25; }
.about-copy p{ font-size:15.5px; color:#4a4f68; line-height:1.85; }
.about-media{ position:relative; }
.about-media{ position:relative; }
.about-media picture{ display:block; }
.about-media img,.about-visual{ width:100%; border-radius:16px; object-fit:cover; box-shadow:var(--shadow); max-height:380px; }
.about-ph{ position:relative; width:100%; padding-top:75%; border-radius:16px;
  background:linear-gradient(150deg, var(--ink), var(--pink)); box-shadow:var(--shadow); }
.about-ph svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.about-ph svg{ width:70px; height:70px; color:rgba(255,255,255,.55); }

/* ===== executive board ===== */
.board-section{ padding:56px 0 66px; background:#fff; border-top:1px solid var(--line);
  background-size:cover; background-position:center; }
.section-head{ text-align:center; margin-bottom:42px; }
.section-head h2{ font-size:28px; font-weight:800; color:var(--ink); letter-spacing:.2px; }
html[dir="rtl"] .section-head h2{ letter-spacing:0; }
.head-rule{ width:64px; height:3px; background:var(--pink); border-radius:3px; margin:14px auto 0; }

.board-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px 26px; }
.board-card{ flex:0 1 calc(33.333% - 18px); max-width:236px; text-align:center; }
@supports (display:grid){
  .board-grid{ display:grid; grid-template-columns:repeat(3,1fr); justify-items:center; }
  .board-card{ width:100%; }
}
.bc-photo{ position:relative; width:100%; padding-top:116.6%; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--ink), var(--pink)); margin-bottom:16px;
  box-shadow:0 10px 26px rgba(25,16,73,.13); transition:transform .22s ease, box-shadow .22s ease; }
.board-card:hover .bc-photo{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(25,16,73,.2); }
.bc-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.bc-photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(12,7,36,.34), transparent); pointer-events:none; }
.bc-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.bc-ph svg{ width:46px; height:46px; color:rgba(255,255,255,.7); }
.bc-name{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.4;
  min-height:2.8em; display:flex; align-items:center; justify-content:center; }
.bc-role{ font-size:12.5px; color:var(--pink); margin-top:2px; line-height:1.5; font-weight:600; min-height:2.4em; }

/* footer visual */
.foot-media{ flex:0 0 auto; max-width:170px; }
.foot-media img,.foot-visual{ width:100%; }

@media(max-width:900px){
  .intro-band,.about-band{ grid-template-columns:1fr; gap:26px; }
  .about-copy h2{ font-size:26px; }
  .board-grid{ grid-template-columns:repeat(3,1fr); gap:26px 16px; }
  .board-card{ flex-basis:calc(33.333% - 12px); }
}
@media(max-width:600px){
  .board-grid{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .board-card{ flex-basis:calc(50% - 8px); max-width:none; }
  .about-intro{ padding:34px 0 30px; }
  .board-section{ padding:36px 0 44px; }
  .section-head{ margin-bottom:26px; }
  .board-card{ max-width:100%; }
  .section-head h2{ font-size:21px; }
  .intro-copy h2,.about-copy h2{ font-size:21px; }
  .foot-media{ display:none; }
  .band-strip img{ max-height:220px; }
}

/* download button under media */
.dl-btn{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; }
.dl-btn svg{ width:16px; height:16px; }

/* ---------- uploaded menu icons ----------
   The image is used as a stencil and filled with the brand colour, so a custom
   icon is always the exact same pink as the built-in ones. */
.mi-ic{ display:inline-block; flex:0 0 auto; line-height:0; vertical-align:middle; }
.mi-ic img{ width:100%; height:100%; object-fit:contain; display:block; }
@supports (-webkit-mask-image: url('')) or (mask-image: url('')){
  .mi-ic{ background-color:var(--pink);
    -webkit-mask:var(--mi) center/contain no-repeat; mask:var(--mi) center/contain no-repeat; }
  .mi-ic img{ visibility:hidden; }
}

/* When a banner image is used, nothing is drawn on top of it — the artwork stands alone. */
.hero.has-img .hero-cta{ display:none; }
.hero.has-img .wrap{ padding:0 !important; }

/* ---------- full-banner mode on phones ----------
   A wide banner becomes short on a narrow screen, so the image sits at the top
   at its true proportions and the buttons drop underneath it — never on top. */
@media(max-width:620px){
  /* On phones the banner stands alone: nothing is drawn over it. */
  .hero.fit-full{ background-size:100% 100%; background-position:center; }
  .hero.fit-full .wrap{ position:static !important; transform:none !important; inset:auto !important;
    padding:0 !important; }
  .hero .hero-cta{ display:none; }          /* buttons removed on mobile */
  .hero .hero-copy{ max-width:none; }
  /* the quick-links card sits BELOW the banner, never on top of it */
  .quickbar-wrap.pulled{ margin-top:0; }
  .quickbar{ padding:18px 10px; }
}

/* video badge on content cards */
.pc-img{ position:relative; }
.pc-img-none{ height:90px; background:linear-gradient(150deg, var(--ink), var(--pink)); }
.pc-play{ position:absolute; inset-inline-end:10px; bottom:10px; z-index:2;
  width:32px; height:32px; border-radius:50%; background:rgba(10,6,30,.62);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.pc-play svg{ width:17px; height:17px; color:#fff; }

/* ===== rich text on the public page ===== */
.fs-xs{ font-size:.75em; } .fs-sm{ font-size:.875em; }
.fs-lg{ font-size:1.25em; } .fs-xl{ font-size:1.5em; } .fs-xxl{ font-size:2em; }
.article blockquote{ margin:1em 0; padding-inline-start:16px;
  border-inline-start:3px solid var(--pink); color:#555; font-size:1.02em; }
.article ul,.article ol{ padding-inline-start:26px; margin:.8em 0; }
.article img{ max-width:100%; border-radius:10px; margin:.6em 0; }
.article table{ width:100%; border-collapse:collapse; margin:1em 0; }
.article th,.article td{ border:1px solid var(--line); padding:9px 12px; text-align:start; }
.article th{ background:var(--bg); font-weight:700; }
.article mark{ background:#ffe680; padding:0 3px; border-radius:2px; }
/* who wrote it */
.post-author{ display:flex; align-items:center; gap:9px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.post-author b{ color:var(--ink); font-weight:700; }
.post-author .pa-dot{ width:4px; height:4px; border-radius:50%; background:#c9cdd8; }

/* links inside an article: clearly clickable, and long URLs never overflow */
.article a{ color:#1d4ed8; text-decoration:underline; text-underline-offset:3px;
  overflow-wrap:anywhere; word-break:break-word; }
.article a:hover{ color:var(--pink); }
.article a:visited{ color:#6d28d9; }