/* BACRS — design tokens, base, components. Contrast ratios checked against WCAG 2.1 AA. No inline styles are used anywhere (strict CSP). */
@font-face{font-family:"Noto Sans";font-weight:400;font-display:swap;src:url(/static/fonts/noto-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:600;font-display:swap;src:url(/static/fonts/noto-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:700;font-display:swap;src:url(/static/fonts/noto-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Bengali";font-weight:400;font-display:swap;src:url(/static/fonts/noto-sans-bengali-bengali-400-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Bengali";font-weight:600;font-display:swap;src:url(/static/fonts/noto-sans-bengali-bengali-600-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Bengali";font-weight:700;font-display:swap;src:url(/static/fonts/noto-sans-bengali-bengali-700-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Serif";font-weight:600;font-display:swap;src:url(/static/fonts/noto-serif-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Serif";font-weight:700;font-display:swap;src:url(/static/fonts/noto-serif-latin-700-normal.woff2) format("woff2")}

:root{
--brand:#0b6e99; --brand-dark:#084f6e; --brand-deep:#06384f; --accent:#11aad8; --slate:#3e5f6c;
  --ink:#14232b; --muted:#51636c; --line:#d7e1e6; --bg:#f4f8fa; --surface:#fff; --tint:#e8f3f8;
  --ok:#0b6b3a; --ok-bg:#e3f5ea; --warn:#7a4b00; --warn-bg:#fff2d6; --bad:#9b1c1c; --bad-bg:#fde8e8; --info:#08506f; --info-bg:#e3f1f8;
  --chart-1:#0b6e99; --radius:10px; --shadow:0 1px 2px rgba(6,56,79,.08),0 6px 20px rgba(6,56,79,.06);
  --font:"Noto Sans","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --serif:"Noto Serif","Noto Sans Bengali",Georgia,serif;
  --maxw:1160px;
}
@media (prefers-color-scheme:dark){:root.auto-dark{--ink:#e8f0f3;--muted:#a9bcc5;--line:#2a4350;--bg:#0b1a22;--surface:#11262f;--tint:#143342}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 var(--font);color:var(--ink);background:var(--bg)}
img,svg{max-width:100%;height:auto}
a{color:var(--brand-dark);text-underline-offset:2px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.75rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.25;color:var(--brand-deep);margin:1.4em 0 .5em}
h1{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:0}
h2{font-size:1.45rem}h3{font-size:1.15rem}h4{font-size:1rem}
p{margin:.6em 0 1em}
.muted{color:var(--muted)}.small{font-size:.875rem}.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.stack>*+*{margin-top:1rem}.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.row.between{justify-content:space-between}.grow{flex:1}.mt{margin-top:1.5rem}.mb{margin-bottom:1.5rem}.mt0{margin-top:0}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.w-sm{max-width:480px}.w-md{max-width:720px}.w-full{width:100%}

/* ---------- header / footer ---------- */
.topbar {
    background: linear-gradient(180deg, #064b9e 0%, #073777 100%);
    color: #ffffff;
    font-size: 13px;
    border: 1px solid rgba(145, 200, 255, 0.45);
    border-bottom: 2px solid #168fe5;
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 7px;
    padding-bottom: 7px;
    flex-wrap: wrap;
}

.topbar a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.topbar a:hover {
    color: #b8e2ff;
}

.site-header{--top-h:96px;position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,#06306f,#0a4698 55%,#0b5aa8);border-bottom:1px solid #d3dfee}
.site-header .container{display:flex;align-items:center;gap:1rem;min-height:72px;position:relative}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:#fff;font-family:var(--font);font-weight:800;font-size:1.6rem;line-height:1.1}
.brand:hover{color:#fff}
.brand img{width:54px;height:54px;border-radius:10px}
.brand small{display:block;font:500 .8rem/1.3 var(--font);letter-spacing:0;text-transform:none;color:#e6f0fb;max-width:32ch}
.nav-toggle{display:none}
.nav-btn{display:block;margin-left:auto;cursor:pointer;padding:.5rem .9rem;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.main-nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:12px 16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px rgba(6,48,111,.18)}
.nav-toggle:checked~.main-nav{display:block}
.main-nav ul{display:flex;flex-direction:column;gap:.25rem;list-style:none;margin:0;padding:0}
.site-header .main-nav a{position:relative;display:block;padding:.6rem .8rem;border-radius:8px;text-decoration:none;color:#0b2f6b;font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.02em;transition:color .2s,background .2s}
.site-header .main-nav a:hover,.site-header .main-nav a[aria-current=page]{background:var(--tint);color:var(--brand-dark)}
.main-nav .btn{margin-left:0}
.site-header .main-nav a.btn{text-transform:none;text-align:center;border-radius:999px;padding:.7rem 1rem;border:2px solid var(--brand);background:transparent;color:var(--brand-dark)}
.site-header .main-nav a.btn:not(.secondary){background:#0b9d98;border-color:#0b9d98;color:#fff}
.site-header .main-nav a.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.search-form{position:relative;display:flex}
.search-form input{width:100%;padding:.7rem 3.2rem .7rem 1.1rem;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
.search-form::after{content:"";position:absolute;right:5px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;pointer-events:none;
  background:#19b6b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/18px no-repeat}
.lang a{font-weight:600}

@media (min-width:981px){
  .site-header{top:calc(var(--top-h) * -1);
    background:
      linear-gradient(#f2f6fb,#f2f6fb) 0 var(--top-h)/100% 100% no-repeat,
      linear-gradient(135deg,#06306f,#0a4698 55%,#0b5aa8);
    box-shadow:0 4px 14px rgba(6,48,111,.12)}
  .site-header .container{display:grid;grid-template-columns:repeat(8,minmax(max-content,1fr));grid-template-rows:var(--top-h) 74px;column-gap:1rem;align-items:center;min-height:0}
  .brand{grid-row:1;grid-column:1/4;font-size:2rem}
  .nav-btn{display:none}
  .main-nav,.main-nav ul{display:contents}
  .main-nav{position:static;padding:0;background:none;border:0;box-shadow:none}

  /* menu links: row 2, one line each */
  .main-nav li{grid-row:2;min-width:0}
  .site-header .main-nav a{padding:1.4rem .2rem;white-space:nowrap;border-radius:0;text-align:center;background:none;color:#0b2f6b;font-size:.9rem}
  .site-header .main-nav a:hover,.site-header .main-nav a[aria-current=page]{background:none;color:#0a8fb8}
  .site-header .main-nav a::after{content:"";position:absolute;left:18%;right:18%;bottom:12px;height:3px;border-radius:3px;background:#19b6d6;transform:scaleX(0);transition:transform .25s}
  .site-header .main-nav a:hover::after,.site-header .main-nav a[aria-current=page]::after{transform:scaleX(1)}

  /* row 1: search + Verify + Sign in */
  .main-nav li:has(.search-form){grid-row:1;grid-column:4/7}
  .main-nav li:has(a.btn.secondary){grid-row:1;grid-column:7}
  .main-nav li:has(a.btn:not(.secondary)){grid-row:1;grid-column:8}
  .search-form input{height:50px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;transition:border-color .25s,background .25s}
  .search-form input::placeholder{color:#c9dcf2}
  .search-form input:focus{outline:none;border-color:#5fe3f5;background:rgba(255,255,255,.14)}
  .search-form::after{width:40px;height:40px;margin-top:-20px;right:5px;background-size:20px}
  .site-header .main-nav a.btn{padding:.75rem .5rem;font-size:.9rem;border:2px solid rgba(255,255,255,.7);background:transparent;color:#fff}
  .site-header .main-nav a.btn:not(.secondary){background:#0b9d98;border-color:#0b9d98;color:#fff}
  .site-header .main-nav a.btn::after{display:none}
  .site-header .main-nav a.btn:hover{background:rgba(255,255,255,.14);color:#fff}
  .site-header .main-nav a.btn:not(.secondary):hover{background:#0eb0aa}
}
.site-footer{position:relative;overflow:hidden;color:#d4e3f3;margin-top:0rem;padding:3.2rem 0 4.5rem;font-size:.95rem;
  background:linear-gradient(180deg,#02214a,#033069 60%,#04407f)}
.site-footer::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-150px;height:230px;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,#0b66bd,#0a4f9c);opacity:.55}
.site-footer>.container{position:relative;z-index:1}
.site-footer a{color:#e6f0fb;text-decoration:none;transition:color .2s,transform .2s}
.site-footer a:hover{color:#5fd0ff}
.site-footer p{line-height:1.85;margin:.4em 0 .9em}
.site-footer h2{position:relative;color:#fff;font:700 1.3rem/1.2 var(--font);text-transform:none;letter-spacing:0;margin:0 0 1.4rem}
.site-footer h2::after{content:"";display:block;width:36px;height:3px;border-radius:3px;background:#19b6ff;margin-top:.7rem}
.site-footer .g4>div:first-child h2{font-size:2.1rem;font-weight:800}
.site-footer .g4>div:first-child h2::after{display:none}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{position:relative;margin:.7rem 0;padding-left:1.5rem}
.site-footer li::before{content:"";position:absolute;left:.2rem;top:.62em;width:7px;height:7px;border-top:2px solid #19b6ff;border-right:2px solid #19b6ff;transform:rotate(45deg);transition:transform .2s}
.site-footer li:hover::before{transform:translateX(3px) rotate(45deg)}
.site-footer li a:hover{transform:translateX(3px);display:inline-block}
@media (min-width:901px){.site-footer .g4{grid-template-columns:1.5fr 1.2fr 1fr 1fr;gap:2.8rem}}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.2rem;font-size:.82rem;color:#aac3dc}
.site-footer>.container>p.small{border-top:1px solid rgba(25,182,255,.35);margin:1.4rem 0 0;padding-top:1.1rem;color:#e6f0fb}

/* ===== MENU FINAL (13 ta menu + IERC dropdown) - app.css er SHESH e ===== */
.main-nav .has-sub{position:relative}
.main-nav .caret{display:inline-block;width:.42em;height:.42em;margin-left:.35em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .2s}
.main-nav .sub{list-style:none;margin:0;padding:0}

/* ---- Desktop ---- */
@media (min-width:981px){
  .site-header .container{grid-template-columns:repeat(13,minmax(max-content,1fr));column-gap:.1rem}
  .brand{grid-column:1/6;min-width:0}
  .main-nav li:has(.search-form){grid-column:6/10}
  .main-nav li:has(a.btn.secondary){grid-column:10/12;padding:0 .3rem}
  .main-nav li:has(a.btn:not(.secondary)){grid-column:12/14;padding:0 .3rem}
  .site-header .main-nav>ul>li:not(:has(.btn)):not(:has(.search-form))>a{padding:1.4rem .15rem;font-size:.78rem;letter-spacing:0}
  .main-nav .has-sub:hover .caret,.main-nav .has-sub:focus-within .caret{transform:translateY(.05em) rotate(225deg)}

  .main-nav .sub{display:none;position:absolute;left:0;top:100%;z-index:80;min-width:240px;padding:.45rem;flex-direction:column;gap:0;
    background:#fff;border:1px solid #d3dfee;border-top:3px solid #19b6d6;border-radius:0 0 12px 12px;box-shadow:0 16px 36px rgba(6,48,111,.2)}
  .main-nav .has-sub:hover>.sub,.main-nav .has-sub:focus-within>.sub{display:flex;animation:subin .18s ease-out}
  .site-header .main-nav .sub a{padding:.65rem .9rem;text-align:left;white-space:nowrap;font-size:.85rem;border-radius:8px;color:#0b2f6b}
  .site-header .main-nav .sub a::after{display:none}
  .site-header .main-nav .sub a:hover{background:#eaf4fb;color:#0a8fb8;padding-left:1.15rem}
  .main-nav li:last-child .sub{left:auto;right:0}
}
@keyframes subin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Mobile / tablet ---- */
@media (max-width:980px){
  .main-nav .caret{display:none}
  .main-nav .sub{display:flex;flex-direction:column;margin:.1rem 0 .3rem .9rem;padding-left:.5rem;border-left:2px solid #d3dfee}
  .site-header .main-nav .sub a{font-size:.85rem;text-transform:none}
}

/* ---------- hero & sections ---------- */
.hero{position:relative;overflow:hidden;text-align:center;color:#fff;
  display:flex;align-items:center;
  min-height:clamp(440px,72vh,700px);
  padding:clamp(3rem,8vw,6rem) 0;
  background:url(/static/img/hero-bg.jpg) center/cover no-repeat #06304f}
.hero>.container{width:100%}
.hero p.small{color:#5fe3f5;font-weight:600;font-size:clamp(.95rem,2vw,1.15rem);margin:0 auto 1rem;max-width:none}
.hero h1{color:#fff;font-size:clamp(1.6rem,4.2vw,3rem);line-height:1.25;max-width:900px;margin:0 auto 1.2rem;text-wrap:balance}
.hero p{max-width:60ch;color:#d5e7f0;font-size:clamp(.95rem,1.8vw,1.05rem);margin-inline:auto}
.hero .btns{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:clamp(1.4rem,3vw,2rem)}
.hero .btns .btn{padding:.7rem 1.6rem;border-radius:999px;font-size:.92rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(95,227,245,.55);color:#fff;
  transition:background .25s,transform .25s,box-shadow .25s}
.hero .btns .btn:hover{background:rgba(95,227,245,.16);border-color:#5fe3f5;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(43,182,221,.3)}
.hero .btns .btn:first-child{background:linear-gradient(90deg,#1396c1,#2bb6dd);border-color:transparent}
.hero .btns .btn:first-child:hover{background:linear-gradient(90deg,#17a6d3,#45c6ea);border-color:transparent}
@media (max-width:560px){
  .hero .btns{flex-direction:column;align-items:center}
  .hero .btns .btn{width:100%;max-width:320px}
}

.section{padding:3rem 0}.section.alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{max-width:70ch;margin-bottom:1.4rem}
.page-head{background:var(--surface);border-bottom:1px solid var(--line);padding:1.6rem 0}
.page-head h1{margin:.2rem 0 0}
.breadcrumbs{font-size:.86rem;color:var(--muted)}.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:.35rem;color:var(--line)}
.content{padding-top:2rem;padding-bottom:2rem}
.prose{max-width:78ch}.prose h2{margin-top:1.8em}.prose ul,.prose ol{padding-left:1.3rem}.prose li{margin:.3rem 0}
.prose blockquote{margin:1rem 0;padding:.8rem 1rem;background:var(--tint);border-left:4px solid var(--brand);border-radius:0 8px 8px 0}
.prose table{border-collapse:collapse;width:100%;margin:1rem 0}.prose th,.prose td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}.prose th{background:var(--tint)}
.layout-side{display:grid;grid-template-columns:260px 1fr;gap:2rem}
@media (max-width:860px){.layout-side{grid-template-columns:1fr}}
.side-nav ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.side-nav a{display:block;padding:.55rem .9rem;text-decoration:none;border-bottom:1px solid var(--line);font-size:.93rem}
.side-nav li:last-child a{border-bottom:0}.side-nav a[aria-current=page]{background:var(--tint);font-weight:700}

/* ---------- cards, tables, badges ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0}
.card.flat{box-shadow:none}
a.card{display:block;text-decoration:none;color:inherit}a.card:hover{border-color:var(--accent)}
.principle{border-top:4px solid var(--accent)}.principle .n{font:700 .8rem var(--font);color:var(--brand);letter-spacing:.08em}
.stat{text-align:left}.stat .v{font:700 2rem var(--serif);color:var(--brand-deep);line-height:1}.stat .l{color:var(--muted);font-size:.88rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t caption{text-align:left;padding:.7rem 1rem;font-weight:700}
table.t th,table.t td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{background:var(--tint);font-weight:700;white-space:nowrap;color:var(--brand-deep)}
table.t tr:last-child td{border-bottom:0}table.t tbody tr:hover{background:#f8fbfc}
table.t.compact td,table.t.compact th{padding:.4rem .6rem}
dl.kv{display:grid;grid-template-columns:minmax(140px,230px) 1fr;gap:.35rem 1rem;margin:0}dl.kv dt{font-weight:600;color:var(--slate)}dl.kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){dl.kv{grid-template-columns:1fr}}
.badge{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid transparent;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#b7e2c6}.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#f0d28f}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:#f2b9b9}.badge.info{background:var(--info-bg);color:var(--info);border-color:#b8d9e8}.badge.neutral{background:#eceff1;color:#33444c;border-color:#d3dade}

/* ---------- buttons & forms ---------- */
.btn{display:inline-block;padding:.62rem 1.1rem;border-radius:8px;border:2px solid var(--brand);background:var(--brand);color:#fff;font:600 .95rem var(--font);text-decoration:none;cursor:pointer;line-height:1.25;text-align:center}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn.secondary{background:transparent;color:var(--brand-dark)}.btn.secondary:hover{background:var(--tint);color:var(--brand-deep)}
.btn.light{background:#fff;color:var(--brand-deep);border-color:#fff}.btn.light:hover{background:var(--tint)}
.btn.ghost-light{background:transparent;color:#fff;border-color:#fff}.btn.ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}
.btn.danger{background:var(--bad);border-color:var(--bad)}.btn.danger:hover{background:#7a1515}
.btn.sm{padding:.3rem .7rem;font-size:.85rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link-btn{background:none;border:0;padding:0;color:var(--brand-dark);text-decoration:underline;cursor:pointer;font:inherit}
form.inline{display:inline}
.field{margin-bottom:1rem}.field label,.field .lbl{display:block;font-weight:600;margin-bottom:.25rem}
.field .req{color:var(--bad)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=url],.field input[type=number],.field input[type=date],.field input[type=search],.field select,.field textarea,.input{width:100%;padding:.6rem .7rem;border:1px solid #8aa0ab;border-radius:8px;font:inherit;background:var(--surface);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}.field textarea.tall{min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:3px solid rgba(17,170,216,.35)}
.field .help{color:var(--muted);font-size:.86rem;margin-top:.2rem}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--bad)}
.field .err{color:var(--bad);font-weight:600;font-size:.88rem;margin-top:.25rem}
.check{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.6rem}.check input{margin-top:.35rem;width:1.1rem;height:1.1rem}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin:0 0 1.2rem;background:var(--surface)}
legend{font-weight:700;padding:0 .4rem;color:var(--brand-deep)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}.filters .field{margin:0}.filters input,.filters select{min-width:150px}

/* ---------- alerts, steps, misc ---------- */
.flash{padding:.8rem 1rem;border-radius:8px;margin:0 0 .8rem;border:1px solid;font-weight:500}
.flash.success{background:var(--ok-bg);color:var(--ok);border-color:#b7e2c6}.flash.error{background:var(--bad-bg);color:var(--bad);border-color:#f2b9b9}
.flash.info{background:var(--info-bg);color:var(--info);border-color:#b8d9e8}.flash.warning{background:var(--warn-bg);color:var(--warn);border-color:#f0d28f}
.notice{border-left:5px solid var(--accent);background:var(--tint);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1rem 0}
.notice.warn{border-color:#d99a00;background:var(--warn-bg)}.notice.bad{border-color:var(--bad);background:var(--bad-bg)}
.tracker{list-style:none;display:flex;gap:0;padding:0;margin:1rem 0;overflow-x:auto}
.tracker li{flex:1;min-width:104px;text-align:center;font-size:.76rem;position:relative;padding-top:26px;color:var(--muted)}
.tracker li::before{content:"";position:absolute;top:6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:3px solid var(--line);z-index:1}
.tracker li::after{content:"";position:absolute;top:12px;left:-50%;width:100%;height:3px;background:var(--line)}
.tracker li:first-child::after{display:none}
.tracker li.done{color:var(--ink)}.tracker li.done::before{background:var(--ok);border-color:var(--ok)}.tracker li.done::after{background:var(--ok)}
.tracker li.current{color:var(--brand-deep);font-weight:700}.tracker li.current::before{border-color:var(--brand);background:var(--accent)}
.tracker li.problem::before{background:var(--warn);border-color:var(--warn)}
.tracker .d{display:block;font-weight:400;color:var(--muted)}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:1rem}
.tabs a{padding:.5rem .9rem;text-decoration:none;font-weight:600;border-radius:8px 8px 0 0;color:var(--slate)}.tabs a[aria-current=page]{background:var(--surface);border:1px solid var(--line);border-bottom-color:var(--surface);margin-bottom:-2px;color:var(--brand-deep)}
.pager{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0;align-items:center}.pager a,.pager span{padding:.3rem .7rem;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:var(--surface)}.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand)}
details.card summary{cursor:pointer;font-weight:700}
.member-card{display:flex;gap:1rem;align-items:flex-start}.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--tint);flex:none;display:grid;place-items:center;font:700 1.4rem var(--serif);color:var(--brand)}
.chart{display:block;max-width:560px}.chart-label{font:12px var(--font);fill:var(--ink)}.chart-value{font:700 12px var(--font);fill:var(--brand-deep)}
.verify-box{border:3px solid;border-radius:14px;padding:1.4rem;background:var(--surface)}
.verify-box.valid{border-color:var(--ok)}.verify-box.invalid{border-color:var(--bad)}.verify-box.warn{border-color:#d99a00}
.verify-box .verdict{font:700 1.6rem var(--serif);margin:0 0 .4rem}.valid .verdict{color:var(--ok)}.invalid .verdict{color:var(--bad)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#eef3f5;padding:.1rem .4rem;border-radius:4px;overflow-wrap:anywhere}

/* ---------- portal / admin shell ---------- */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 68px)}
.shell aside{background:var(--brand-deep);color:#d4e4ec;padding:1rem .6rem}
.shell aside h2{font:700 .72rem var(--font);text-transform:uppercase;letter-spacing:.09em;color:#8fb3c4;margin:1.1rem .7rem .3rem}
.shell aside a{display:block;color:#e6f1f6;text-decoration:none;padding:.45rem .7rem;border-radius:7px;font-size:.92rem}
.shell aside a:hover{background:rgba(255,255,255,.1)}.shell aside a[aria-current=page]{background:var(--brand);color:#fff;font-weight:700}
.shell main{padding:1.5rem 1.6rem 3rem;min-width:0}
.shell .who{padding:.4rem .7rem;font-size:.82rem;color:#a9c6d4;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:.5rem}
@media (max-width:900px){.shell{grid-template-columns:1fr}.shell aside{padding:.4rem}.shell aside nav{display:flex;flex-wrap:wrap;gap:.2rem}.shell aside h2{display:none}}
.noprint{}
@media print{.site-header,.site-footer,.topbar,.shell aside,.noprint,.skip{display:none!important}.shell{display:block}body{background:#fff}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.aside-btn{color:#e6f1f6;padding:.45rem .7rem;font-size:.92rem;text-decoration:none}
.aside-btn:hover{text-decoration:underline}
.code-list{list-style:none;columns:2;padding:1.2rem}.code-list li{margin:.35rem 0}
.pre{white-space:pre-wrap;font-family:inherit;margin:0}




/* =====================================================================
   MEMBERSHIP PAGE (modern cards)
   ===================================================================== */

/* --- page head: soft blue banner --- */

/* .page-head:has(+ section .stat){
  background:
    linear-gradient(90deg,rgba(248,252,254,.72) 0%,rgba(248,252,254,.5) 35%,rgba(248,252,254,.12) 70%,rgba(248,252,254,0) 100%),
    url(/static/img/membership-bg.jpg) center/cover no-repeat,
    #eaf5fb;
  min-height:170px;display:flex;align-items:center;
  border-bottom:1px solid #dbe9f2;padding:2rem 0}
.page-head:has(+ section .stat)>.container{width:100%}
main:has(section .stat){
  background:
    linear-gradient(rgba(248,252,254,.3),rgba(248,252,254,.3)),
    url(/static/img/membership-body.jpg) center top/cover no-repeat,
    #eef6fb;
  padding-bottom:4rem}
main:has(section .stat)+.site-footer{margin-top:0} */
.page-head:has(+ section .stat){
  background:transparent;
  min-height:170px;display:flex;align-items:center;
  border-bottom:0;padding:2rem 0}
.page-head:has(+ section .stat)>.container{width:100%}
main:has(section .stat){
  background:
    linear-gradient(rgba(248,252,254,.25),rgba(248,252,254,.25)),
    url(/static/img/membership-bg.jpg) center top/cover no-repeat,
    #eef6fb;
  padding-bottom:4rem}
main:has(section .stat)+.site-footer{margin-top:0}
.page-head:has(+ section .stat) h1{color:#0b3a63;font-size:clamp(1.9rem,3.4vw,2.5rem)}
.page-head:has(+ section .stat) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
.page-head:has(+ section .stat) p.muted{color:#3d5568;max-width:60ch}

/* --- cards grid: 4 columns --- */
.grid.g3:has(>.card>.stat){grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:stretch}
@media (max-width:1050px){.grid.g3:has(>.card>.stat){grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.g3:has(>.card>.stat){grid-template-columns:1fr}}

/* --- single card --- */
.grid>.card:has(>.stat){position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:1.4rem 1.3rem;border-radius:18px;border:1px solid #cfe6f2;
  background:linear-gradient(160deg,#ffffff 0%,#f3f9fd 100%);
  box-shadow:0 2px 4px rgba(11,58,99,.04),0 10px 26px rgba(11,58,99,.07);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.grid>.card:has(>.stat):hover{transform:translateY(-5px);border-color:#8fcbe6;box-shadow:0 14px 34px rgba(11,58,99,.14)}
.grid>.card:has(>.stat)::before{content:"";position:absolute;top:-34px;right:-34px;width:150px;height:100px;border-radius:50%;
  background:radial-gradient(circle at 35% 65%,rgba(25,182,200,.25),transparent 70%);pointer-events:none}
.grid>.card:has(>.stat)>*{position:relative}

/* --- title + round icon --- */
.grid>.card:has(>.stat) h2{font:700 1.18rem/1.25 var(--serif);color:#0b3a63;margin:0 0 .35rem}
.grid>.card:has(>.stat) h2::before{content:"";display:block;width:56px;height:56px;border-radius:50%;margin-bottom:.9rem;
  background-size:26px;background-position:center;background-repeat:no-repeat;background-color:#d3ebf8}

.grid>.card:has(>.stat):nth-child(1) h2::before{background-color:#d3ebf8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(2) h2::before{background-color:#d2f1ec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v6a5 5 0 0 0 10 0V3'/%3E%3Cpath d='M10 14v1a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='20' cy='11' r='2'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(3) h2::before{background-color:#e3dffa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4bc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(4) h2::before{background-color:#d3ebf8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-3.5 3-5 7-5s7 1.5 7 5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14c3 0 5 1.2 5 4'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(5) h2::before{background-color:#d3ebf8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(6) h2::before{background-color:#d2f1ec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E")}
.grid>.card:has(>.stat):nth-child(n+7) h2::before{background-color:#e3dffa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a4bc4' stroke='%235a4bc4' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 6 6.2.8-4.6 4.3 1.2 6.4L12 17.4 6.4 20.5l1.2-6.4L3 9.8 9.2 9z'/%3E%3C/svg%3E")}

/* --- price --- */
.grid>.card .stat{margin:.1rem 0 .8rem}
.grid>.card .stat .v{font:700 1.8rem var(--serif);color:#0f8b8d}
.grid>.card .stat .l{color:#5b7183;font-size:.82rem;margin-left:.2rem}

/* --- description --- */
.grid>.card:has(>.stat)>p:not(.stat):not(.mt){font-size:.9rem;line-height:1.55;font-weight:500;color:#2f4558;margin:0 0 .9rem}

/* --- "Rights and responsibilities" / "Eligibility" (blue triangle) --- */
.grid>.card:has(>.stat) details{margin:.2rem 0 .5rem}
.grid>.card:has(>.stat) summary{list-style:none;cursor:pointer;font-size:.85rem;font-weight:600;color:#14507f}
.grid>.card:has(>.stat) summary::-webkit-details-marker{display:none}
.grid>.card:has(>.stat) summary::before{content:"";display:inline-block;margin-right:.55rem;border-left:7px solid #14507f;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s}
.grid>.card:has(>.stat) details[open] summary::before{transform:rotate(90deg)}
.grid>.card:has(>.stat) details .prose{margin-top:.5rem;color:#2f4558}

/* --- bottom button / badge (always at the bottom of card) --- */
.grid>.card:has(>.stat)>p.mt{margin-top:auto;padding-top:1rem;margin-bottom:0}
.grid>.card:has(>.stat) .btn.sm{padding:.5rem 1.2rem;border-radius:999px;border:0;font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#0a6f9e,#0b88b4);transition:transform .2s,box-shadow .2s}
.grid>.card:has(>.stat) .btn.sm::after{content:"\2192";margin-left:.5rem}
.grid>.card:has(>.stat) .btn.sm:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,111,158,.35);color:#fff}
.grid>.card:has(>.stat) .badge.neutral{background:#dff0fb;color:#1c5f8f;border-color:#bfdcf0;padding:.3rem .8rem;font-size:.76rem}

/* --- info notice at the bottom --- */
section.content>.grid+.notice{position:relative;border:0;border-left:5px solid #19b6d6;border-radius:12px;
  padding:1rem 1.2rem 1rem 3.4rem;color:#1d4560;font-size:.9rem;line-height:1.6;
  background:linear-gradient(90deg,#dcf0fa,#eaf6fc)}
section.content>.grid+.notice::before{content:"i";position:absolute;left:1.1rem;top:1rem;width:24px;height:24px;border-radius:50%;
  background:#19b6d6;color:#fff;font:700 .9rem/24px var(--serif);text-align:center}
  /* --- membership patch --- */
.grid>.card:has(>.stat) .badge.neutral{white-space:normal;line-height:1.35;text-align:center;border-radius:12px}
.grid>.card:has(>.stat)::before{opacity:.7;width:130px;height:90px;top:-40px;right:-40px}
.grid>.card:has(>.stat) h2::before{width:60px;height:60px;background-size:28px}
.grid>.card .stat .v{font-size:1.9rem}

/* membership: hide price */
.grid>.card:has(>.stat) .stat{display:none}


/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
main:has(form[action="/contact"]){
  background:
    linear-gradient(rgba(248,252,254,.25),rgba(248,252,254,.25)),
    url(/static/img/contact-bg.jpg) center top/cover no-repeat,
    linear-gradient(160deg,#e3f1fa,#f6fbfe 55%,#dcedf8);
  padding-bottom:4rem}
main:has(form[action="/contact"])+.site-footer{margin-top:0}

/* banner */
.page-head:has(+ section form[action="/contact"]){background:transparent;border-bottom:0;padding:2rem 0 .6rem}
.page-head:has(+ section form[action="/contact"]) h1{color:#0b3a63;font-size:clamp(1.9rem,3.4vw,2.5rem)}
.page-head:has(+ section form[action="/contact"]) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
.page-head:has(+ section form[action="/contact"])>.container,
section.content:has(form[action="/contact"]){max-width:1060px}

/* two cards */
.grid.g2:has(form[action="/contact"]){grid-template-columns:repeat(2,1fr);gap:1.6rem;align-items:stretch}
@media (max-width:820px){.grid.g2:has(form[action="/contact"]){grid-template-columns:1fr}}
.grid.g2:has(form[action="/contact"])>div:first-child{display:flex;flex-direction:column}
.grid.g2:has(form[action="/contact"]) form.card{flex:1}
.grid.g2:has(form[action="/contact"]) form.card,
.grid.g2:has(form[action="/contact"])>.card{position:relative;overflow:hidden;padding:1.9rem 1.9rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(11,58,99,.12)}
.grid.g2:has(form[action="/contact"])>.card::after{content:"";position:absolute;right:-50px;bottom:-60px;width:190px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(25,182,216,.35),transparent 70%);pointer-events:none}

/* form fields */
.grid.g2:has(form[action="/contact"]) .field{margin-bottom:1.05rem}
.grid.g2:has(form[action="/contact"]) .field label{font-size:.88rem;font-weight:600;color:#1b3a57;margin-bottom:.35rem}
.grid.g2:has(form[action="/contact"]) .field input,
.grid.g2:has(form[action="/contact"]) .field textarea{width:100%;padding:.78rem 1.2rem;border:1.5px solid #c9dbe8;border-radius:999px;background:rgba(255,255,255,.9);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s}
.grid.g2:has(form[action="/contact"]) .field textarea{border-radius:20px;min-height:170px}
.grid.g2:has(form[action="/contact"]) .field input:focus,
.grid.g2:has(form[action="/contact"]) .field textarea:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}

/* send button */
.grid.g2:has(form[action="/contact"]) form .btn{display:inline-flex;align-items:center;gap:.65rem;padding:.85rem 1.7rem;border:0;border-radius:999px;
  background:linear-gradient(90deg,#08577f,#0a78a8);color:#fff;font-size:.95rem;font-weight:700;transition:transform .2s,box-shadow .2s}
.grid.g2:has(form[action="/contact"]) form .btn::before{content:"";width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10l7 3 3 7z'/%3E%3Cpath d='M21 3L10 13'/%3E%3C/svg%3E") center/contain no-repeat}
.grid.g2:has(form[action="/contact"]) form .btn::after{content:"\2192"}
.grid.g2:has(form[action="/contact"]) form .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,87,127,.35)}

/* office card */
.grid.g2:has(form[action="/contact"])>.card>*{position:relative;z-index:1}
.grid.g2:has(form[action="/contact"])>.card h2{display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem;font:700 1.4rem/1.2 var(--serif);color:#0b3a63}
.grid.g2:has(form[action="/contact"])>.card>p:not(.small){position:relative;min-height:46px;margin:0 0 1.3rem;padding-left:66px;font-size:.93rem;line-height:1.7;color:#35506a}
.grid.g2:has(form[action="/contact"])>.card>p:not(.small) br{display:none}
.grid.g2:has(form[action="/contact"])>.card>p:not(.small) strong{display:block;color:#0b2f4d;margin-bottom:.1rem}
.grid.g2:has(form[action="/contact"])>.card h2::before,
.grid.g2:has(form[action="/contact"])>.card>p:not(.small)::before{content:"";flex:none;width:46px;height:46px;border-radius:50%;background-color:#d9edf9;background-repeat:no-repeat;background-position:center;background-size:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.grid.g2:has(form[action="/contact"])>.card>p:not(.small)::before{position:absolute;left:0;top:0}
.grid.g2:has(form[action="/contact"])>.card h2::before,
.grid.g2:has(form[action="/contact"])>.card>p:not(.small):nth-of-type(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.grid.g2:has(form[action="/contact"])>.card>p:not(.small):nth-of-type(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l9-2v18M13 9h7v12M8 8h1M8 12h1M8 16h1M16 13h1M16 17h1'/%3E%3C/svg%3E")}
.grid.g2:has(form[action="/contact"])>.card>p:has(a[href^="mailto:"])::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.grid.g2:has(form[action="/contact"])>.card a{color:#0a6a99;font-weight:600}

/* note at the bottom */
.grid.g2:has(form[action="/contact"])>.card>p.small{position:relative;margin:1.2rem 0 0;padding:1.1rem 0 0 66px;border-top:1px solid #d6e6f1;font-size:.82rem;line-height:1.65;color:#4a6378}
.grid.g2:has(form[action="/contact"])>.card>p.small:last-child::before{content:"i";position:absolute;left:6px;top:1.1rem;width:30px;height:30px;border-radius:50%;background:#d9edf9;color:#1488b8;font:700 .95rem/30px var(--serif);text-align:center}
.grid.g2:has(form[action="/contact"]) .field textarea{resize:none}



/* =====================================================================
   COMPLAINTS PAGE
   ===================================================================== */
main:has(form[action="/complaints"]){
  background:
    linear-gradient(rgba(248,252,254,.2),rgba(248,252,254,.2)),
    url(/static/img/complaints-bg.jpg) center left/100% 100% no-repeat,
    radial-gradient(ellipse at 50% 108%,rgba(110,190,230,.45),transparent 55%),
    linear-gradient(180deg,#eaf4fb,#f7fbfe 60%,#e1effa);
  padding-bottom:4rem}
main:has(form[action="/complaints"])+.site-footer{margin-top:0}

/* banner */
.page-head:has(+ section form[action="/complaints"]){background:transparent;border-bottom:0;padding:1.8rem 0 .8rem}
.page-head:has(+ section form[action="/complaints"]) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
.page-head:has(+ section form[action="/complaints"]) h1{display:flex;align-items:center;gap:1.1rem;color:#0b3a63;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.2}
.page-head:has(+ section form[action="/complaints"]) h1::before{content:"";flex:none;width:62px;height:62px;border-radius:50%;
  background:#d9edf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/30px no-repeat;
  box-shadow:0 6px 18px rgba(20,136,184,.2)}
.page-head:has(+ section form[action="/complaints"]) p.muted{margin-left:81px;color:#3d5568;max-width:62ch}
@media (max-width:560px){.page-head:has(+ section form[action="/complaints"]) p.muted{margin-left:0}}

/* form card */
section.content:has(form[action="/complaints"]){max-width:640px;padding-top:3rem}
form[action="/complaints"].card{position:relative;padding:4.2rem 2rem 2rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 38px rgba(11,58,99,.13)}
form[action="/complaints"].card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:13px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,#1d7fae 0,#5bb3d6 24%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,#8fd0e6 76%,#bfe4f2 100%)}
form[action="/complaints"].card::after{content:"";position:absolute;left:50%;top:-34px;width:68px;height:68px;margin-left:-34px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/32px no-repeat;
  border:7px solid #f2f8fd;box-shadow:0 -4px 14px rgba(20,136,184,.12)}

/* fields */
form[action="/complaints"] .field{margin-bottom:1.1rem}
form[action="/complaints"] .field label{font-size:.88rem;font-weight:600;color:#1b3a57;margin-bottom:.35rem}
form[action="/complaints"] .field input,
form[action="/complaints"] .field select,
form[action="/complaints"] .field textarea{width:100%;padding:.66rem 1rem;border:1.5px solid #d3e1ec;border-radius:9px;background:rgba(255,255,255,.92);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s}
form[action="/complaints"] .field textarea{min-height:170px;resize:none}
form[action="/complaints"] .field input:focus,
form[action="/complaints"] .field select:focus,
form[action="/complaints"] .field textarea:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}
form[action="/complaints"] ::placeholder{color:#9db0bf;font-size:.88rem}

/* submit */
form[action="/complaints"] .btn{display:inline-flex;align-items:center;gap:.65rem;padding:.8rem 1.6rem;border:0;border-radius:12px;
  background:linear-gradient(90deg,#0b6a99,#1f86b5);color:#fff;font-size:.95rem;font-weight:700;box-shadow:0 6px 16px rgba(11,106,153,.3);transition:transform .2s,box-shadow .2s}
form[action="/complaints"] .btn::before{content:"";width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10l7 3 3 7z'/%3E%3Cpath d='M21 3L10 13'/%3E%3C/svg%3E") center/contain no-repeat}
form[action="/complaints"] .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,106,153,.4)}
/* complaints: compact form */
form[action="/complaints"].card{padding:3.6rem 1.8rem 1.5rem}
form[action="/complaints"] .field{margin-bottom:.7rem}
form[action="/complaints"] .field label{margin-bottom:.2rem;font-size:.84rem}
form[action="/complaints"] .field input,
form[action="/complaints"] .field select{padding:.5rem .9rem;font-size:.9rem}
form[action="/complaints"] .field textarea{min-height:110px;padding:.55rem .9rem;font-size:.9rem}
form[action="/complaints"] .btn{padding:.65rem 1.4rem;font-size:.9rem}



/* =====================================================================
   GOVERNANCE & COMPLIANCE PAGE
   ===================================================================== */
main:has(table.t a[href^="/policies/"]){position:relative;overflow:hidden;padding-bottom:4rem;
  background:
    radial-gradient(circle at 100% 0%,rgba(130,195,235,.45),transparent 40%),
    radial-gradient(ellipse at 0% 100%,rgba(110,190,230,.35),transparent 50%),
    linear-gradient(180deg,#eaf4fb,#f7fbfe 55%,#e3f0fa)}
main:has(table.t a[href^="/policies/"])::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/static/img/governance-bg.jpg) center/100% 100% no-repeat;opacity:.55}
main:has(table.t a[href^="/policies/"])>*{position:relative}
main:has(table.t a[href^="/policies/"])+.site-footer{margin-top:0}

/* banner */
.page-head:has(+ section table.t a[href^="/policies/"]){background:transparent;border-bottom:0;padding:1.8rem 0 .6rem}
.page-head:has(+ section table.t a[href^="/policies/"])>.container,
section.content:has(table.t a[href^="/policies/"]){max-width:1020px}
.page-head:has(+ section table.t a[href^="/policies/"]) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
.page-head:has(+ section table.t a[href^="/policies/"]) h1{display:flex;align-items:center;gap:1.1rem;color:#0b3a63;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15}
.page-head:has(+ section table.t a[href^="/policies/"]) h1::before{content:"";flex:none;width:72px;height:72px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E") center/36px no-repeat,linear-gradient(145deg,#0b5a95,#1a8fb8);
  box-shadow:0 8px 20px rgba(11,90,149,.3),0 0 0 6px rgba(255,255,255,.6)}
.page-head:has(+ section table.t a[href^="/policies/"]) p.muted{margin-left:90px;color:#3d5568;max-width:64ch}
.page-head:has(+ section table.t a[href^="/policies/"]) p.muted::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:#19b6d6;margin-top:.7rem}
@media (max-width:560px){.page-head:has(+ section table.t a[href^="/policies/"]) p.muted{margin-left:0}}

/* table card */
section.content:has(table.t a[href^="/policies/"]) .table-wrap{border:1px solid rgba(255,255,255,.9);border-radius:18px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 38px rgba(11,58,99,.14)}
section.content table.t:has(a[href^="/policies/"]){border-collapse:separate;border-spacing:0}
section.content table.t:has(a[href^="/policies/"]) thead tr{background:linear-gradient(90deg,#0a4f86,#0d6f9c 60%,#14899f)}
section.content table.t:has(a[href^="/policies/"]) thead th{background:transparent;color:#fff;
  font-size:.82rem;font-weight:700;padding:.95rem .9rem;border-bottom:0}
section.content table.t:has(a[href^="/policies/"]) thead th::before{content:"";display:inline-block;width:15px;height:15px;margin-right:.55rem;vertical-align:-2px;background-position:center;background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")}
section.content table.t:has(a[href^="/policies/"]) thead th:nth-child(n+3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5v8l-9 5-9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
section.content table.t:has(a[href^="/policies/"]) tbody td{padding:.62rem .9rem;border-bottom:1px solid #e1edf5;vertical-align:middle;font-size:.82rem;color:#4a6378;transition:background .2s}
section.content table.t:has(a[href^="/policies/"]) tbody tr:last-child td{border-bottom:0}
section.content table.t:has(a[href^="/policies/"]) tbody tr:hover td{background:#e8f3fb}

/* Document ID with round icon */
section.content table.t:has(a[href^="/policies/"]) tbody td:first-child{font-weight:600;color:#5b7183;white-space:nowrap}
section.content table.t:has(a[href^="/policies/"]) tbody td:first-child::before{content:"";display:inline-block;width:34px;height:34px;margin-right:.7rem;vertical-align:middle;border-radius:50%;
  background:#dcecf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6fa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center/17px no-repeat}

/* document title + summary */
section.content table.t:has(a[href^="/policies/"]) tbody td a{font-weight:700;font-size:.88rem;color:#0a7fa6}
section.content table.t:has(a[href^="/policies/"]) tbody td a:hover{color:#075f80}
section.content table.t:has(a[href^="/policies/"]) tbody td .small{font-size:.76rem;line-height:1.4;color:#6b8092}

/* status pills */
section.content table.t:has(a[href^="/policies/"]) .badge{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .8rem .28rem .6rem;font-size:.76rem;font-weight:600;border-radius:999px;border:0}
section.content table.t:has(a[href^="/policies/"]) .badge::before{content:"";width:14px;height:14px;background-position:center;background-repeat:no-repeat;background-size:contain}
section.content table.t:has(a[href^="/policies/"]) .badge.ok{background:#dff5e6;color:#0b6b3a}
section.content table.t:has(a[href^="/policies/"]) .badge.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6b3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E")}
section.content table.t:has(a[href^="/policies/"]) .badge.warn{background:#fdebc8;color:#8a5200}
section.content table.t:has(a[href^="/policies/"]) .badge.warn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5200' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
section.content table.t:has(a[href^="/policies/"]) .badge.neutral{background:#e4ecf3;color:#52687b}
section.content table.t:has(a[href^="/policies/"]) .badge.neutral::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352687b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

/* arrow at the end of each row */
section.content table.t:has(a[href^="/policies/"]) tbody td:last-child{position:relative;padding-right:2.6rem}
section.content table.t:has(a[href^="/policies/"]) tbody td:last-child::after{content:"\203A";position:absolute;right:1rem;top:50%;transform:translateY(-52%);font-size:1.5rem;line-height:1;color:#6b8092}
section.content table.t:has(a[href^="/policies/"]) tbody tr:hover td:last-child::after{color:#0a7fa6}
/* governance: pager */
section.content:has(table.t a[href^="/policies/"]) .pager{justify-content:center;gap:.5rem;margin:1.6rem 0 0}
section.content:has(table.t a[href^="/policies/"]) .pager a,
section.content:has(table.t a[href^="/policies/"]) .pager .cur{padding:.45rem .95rem;border-radius:999px;font-weight:600;font-size:.88rem;
  border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.86);color:#0a6a99;box-shadow:0 4px 12px rgba(11,58,99,.08);transition:transform .2s,box-shadow .2s}
section.content:has(table.t a[href^="/policies/"]) .pager a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,58,99,.15)}
section.content:has(table.t a[href^="/policies/"]) .pager .cur{background:linear-gradient(90deg,#0a4f86,#14899f);color:#fff;border-color:transparent}
section.content:has(table.t a[href^="/policies/"]) .pager .muted{border:0;background:none;box-shadow:none}


/* =====================================================================
   HOME PAGE: sections after the hero
   ===================================================================== */
.hero~.section{position:relative;padding:3.6rem 0}
.hero~.section:not(.alt):not(:last-of-type){background:linear-gradient(180deg,#f5fafe 0%,#eaf4fb 100%)}
.hero~.section.alt{background:linear-gradient(180deg,#ffffff,#f4f9fd);border-block:1px solid #dbe9f3}
.hero~.section:not(.alt):last-of-type{background:linear-gradient(180deg,#eaf4fb 0%,#dcecf8 100%);margin-bottom:0}

/* headings */
.hero~.section h2{font:700 clamp(1.5rem,2.6vw,1.9rem)/1.2 var(--serif);color:#0b3a63;margin:0 0 .5rem}
.hero~.section h2::after{content:"";display:block;width:46px;height:3px;border-radius:3px;margin-top:.7rem;background:linear-gradient(90deg,#1488b8,#19c3d6)}
.hero~.section .section-head p{color:#46607a;font-size:1rem;line-height:1.7}
.hero~.section h3.mt{margin:2.6rem 0 1.1rem;padding-left:.8rem;border-left:4px solid #19b6d6;font:700 1.25rem/1.2 var(--serif);color:#0b3a63}

/* all cards */
.hero~.section .card{position:relative;border-radius:18px;border:1px solid #d3e5f1;background:linear-gradient(160deg,#fff 0%,#f4f9fd 100%);
  box-shadow:0 2px 4px rgba(11,58,99,.04),0 10px 26px rgba(11,58,99,.07);transition:transform .25s,box-shadow .25s,border-color .25s}
.hero~.section a.card:hover,.hero~.section .grid>.card:not(.principle):not(.flat):hover{transform:translateY(-5px);border-color:#8fcbe6;box-shadow:0 16px 36px rgba(11,58,99,.15)}
.hero~.section .card h3{font:700 1.12rem/1.3 var(--serif);color:#0b3a63;margin:0 0 .4rem}
.hero~.section .card p{color:#46607a;font-size:.92rem;line-height:1.6}

/* round icons on the 6 link cards */
.hero~.section .grid.g3>.card:not(.principle) h3::before{content:"";display:block;width:54px;height:54px;border-radius:50%;margin-bottom:.9rem;
  background-color:#d3ebf8;background-repeat:no-repeat;background-position:center;background-size:26px}
.hero~.section .grid.g3>a.card{padding:1.5rem 1.4rem 3rem}
.hero~.section .grid.g3>a.card::after{content:"\2192";position:absolute;right:1.1rem;bottom:.9rem;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#e1f0fa;color:#0a6a99;font-weight:700;transition:background .25s,color .25s,transform .25s}
.hero~.section .grid.g3>a.card:hover::after{background:#0a7fa6;color:#fff;transform:translateX(3px)}

.hero~.section:not(.alt):not(:last-of-type) .grid.g3>a.card:nth-child(1) h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 12l2 2 4-4M9 17h6'/%3E%3C/svg%3E")}
.hero~.section:not(.alt):not(:last-of-type) .grid.g3>a.card:nth-child(2) h3::before{background-color:#d2f1ec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.hero~.section:not(.alt):not(:last-of-type) .grid.g3>a.card:nth-child(3) h3::before{background-color:#e3dffa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4bc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}

/* principles */
.hero~.section .grid:has(>.principle){grid-template-columns:repeat(3,1fr);gap:1.1rem}
.hero~.section .card.principle{overflow:hidden;padding:1.5rem 1.4rem 1.3rem;border-top:1px solid #d3e5f1}
.hero~.section .card.principle::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#1488b8,#19c3d6)}
.hero~.section .card.principle .n{position:absolute;right:1.1rem;top:.7rem;font:800 2.4rem/1 var(--serif);color:#d3e8f5;letter-spacing:0}
.hero~.section .card.principle h4{font:700 1.05rem/1.3 var(--serif);color:#0b3a63;margin:.4rem 0 .5rem;padding-right:2.6rem}
.hero~.section .card.principle p{margin:0;font-size:.88rem}
.hero~.section .card.principle:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,58,99,.14)}

/* pill links ("See all...", "All news", "All events") */
.hero~.section p>a:only-child:not(.btn){display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.2rem;border-radius:999px;
  background:#fff;border:1.5px solid #bfdcf0;color:#0a6a99;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 4px 12px rgba(11,58,99,.07);transition:background .2s,color .2s,transform .2s}
.hero~.section p>a:only-child:not(.btn):hover{background:#0a7fa6;border-color:#0a7fa6;color:#fff;transform:translateY(-2px)}

/* news + events */
.hero~.section.alt .grid.g2{gap:2.4rem}
.hero~.section.alt .grid>div>p.muted{padding:1.4rem;border:1.5px dashed #bcd6e8;border-radius:14px;background:rgba(236,246,252,.7);text-align:center;margin:0 0 1rem}
.hero~.section.alt .card.flat{padding:1.1rem 1.3rem;border-left:4px solid #19b6d6}
.hero~.section.alt .card.flat h3{margin:.2rem 0}
.hero~.section.alt .card.flat a{color:#0b3a63;text-decoration:none}
.hero~.section.alt .card.flat a:hover{color:#0a7fa6}

/* bottom 3 cards */
.hero~.section:not(.alt):last-of-type .grid.g3>.card{padding:1.6rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start}
.hero~.section:not(.alt):last-of-type .grid.g3>.card p{flex:1}
.hero~.section:not(.alt):last-of-type .grid.g3>.card:nth-child(1) h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-3.5 3-5 7-5s7 1.5 7 5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14c3 0 5 1.2 5 4'/%3E%3C/svg%3E")}
.hero~.section:not(.alt):last-of-type .grid.g3>.card:nth-child(2) h3::before{background-color:#d2f1ec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M20 20l-5.5-5.5'/%3E%3C/svg%3E")}
.hero~.section:not(.alt):last-of-type .grid.g3>.card:nth-child(3) h3::before{background-color:#e3dffa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4bc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E")}
.hero~.section:not(.alt):last-of-type .btn.secondary.sm{padding:.5rem 1.2rem;border-radius:999px;border:1.5px solid #0a7fa6;background:transparent;color:#0a6a99;font-weight:700;font-size:.86rem;transition:background .2s,color .2s,transform .2s}
.hero~.section:not(.alt):last-of-type .btn.secondary.sm::after{content:"\2192";margin-left:.5rem}
.hero~.section:not(.alt):last-of-type .btn.secondary.sm:hover{background:#0a7fa6;color:#fff;transform:translateY(-2px)}

@media (max-width:900px){.hero~.section .grid:has(>.principle){grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hero~.section .grid:has(>.principle){grid-template-columns:1fr}.hero~.section{padding:2.6rem 0}}

main:has(.hero)+.site-footer{margin-top:0}





/* =====================================================================
   LOGIN PAGE
   ===================================================================== */
main:has(.login-page){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/login-bg.jpg) center/cover no-repeat,
    radial-gradient(circle at 15% 85%,rgba(150,205,235,.4),transparent 45%),
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
main:has(.login-page)+.site-footer{margin-top:0}
.login-page{display:flex;align-items:center;min-height:calc(100vh - 220px);padding:3rem 0}
.login-wrap{display:grid;grid-template-columns:1fr minmax(0,500px);gap:4rem;align-items:center}

/* left side text */
.login-intro h1{font:700 clamp(1.8rem,3vw,2.3rem)/1.2 var(--serif);color:#0b5a85;max-width:26ch;margin:0}
.login-tag{margin:1.1rem 0 0;font-size:.9rem;color:#46607a}
.login-tag span{margin:0 .5rem;color:#8fb0c8}
.login-desc{margin:2.4rem 0 0;max-width:34ch;font-size:1rem;line-height:1.75;color:#46607a}

/* card */
.login-card{position:relative;overflow:hidden;padding:2.2rem 2rem 1.5rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 0 0,rgba(25,182,200,.32),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(25,182,200,.3),transparent 34%),
    rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 42px rgba(11,58,99,.16)}
.login-avatar{width:58px;height:58px;margin:0 auto .7rem;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,136,184,.25);
  background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/28px no-repeat}
.login-card h2{margin:0;text-align:center;font:700 1.75rem/1.2 var(--serif);color:#0b3a63}
.login-sub{margin:.4rem 0 1.5rem;text-align:center;font-size:.92rem;color:#46607a}
.login-card .flash{margin-bottom:1rem}

/* fields with round icon on the left */
.login-card .field{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:.8rem;margin-bottom:1.1rem;align-items:start}
.login-card .field::before{content:"";grid-column:1;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;background-color:#d7edf8;background-repeat:no-repeat;background-position:center;background-size:20px}
.login-card .field:has(#f_email)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.login-card .field:has(#f_password)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.login-card .field label{grid-column:2;grid-row:1;margin:0 0 .35rem;font-size:.98rem;font-weight:700;color:#0b5a85}
.login-card .field input{width:100%;padding:.8rem 1rem;border:1.5px solid #cfdfea;border-radius:10px;background:rgba(255,255,255,.95);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s}
.login-card .field>input{grid-column:2;grid-row:2}
.login-card .field input:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}
.login-card .field input::placeholder{color:#9db0bf;font-size:.9rem}
.login-card .field .err,.login-card .field .help{grid-column:2}
.pw-wrap{grid-column:2;grid-row:2;position:relative;display:block}
.pw-wrap input{padding-right:3rem}
.pw-eye{position:absolute;right:.55rem;top:50%;width:34px;height:34px;margin-top:-17px;border:0;border-radius:8px;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3.2 3.9M6.6 7.6A17 17 0 0 0 2.5 12S6 18 12 18c1.4 0 2.6-.3 3.7-.8'/%3E%3C/svg%3E") center/20px no-repeat}
.pw-eye.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 6 12 6s9.5 6 9.5 6-3.5 6-9.5 6S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.pw-eye:hover{background-color:#e6f2fa}

/* button + links */
.login-card .btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:.4rem;padding:.95rem 1rem;border:0;border-radius:12px;
  background:linear-gradient(90deg,#0b5f8f,#0a86a6);color:#fff;font-size:1.05rem;font-weight:700;box-shadow:0 8px 20px rgba(11,95,143,.3);transition:transform .2s,box-shadow .2s}
.login-card .btn::after{content:"\2192";font-size:1.2rem}
.login-card .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,95,143,.4)}
.login-forgot{margin:1.1rem 0 0;font-size:.93rem}
.login-card a{color:#0a6a99}
.login-new{margin:1.4rem -2rem 0;padding:1.2rem 2rem 0;border-top:1px solid #dbe9f3;text-align:center;font-size:.93rem;color:#2f4558}

@media (max-width:960px){
  .login-wrap{grid-template-columns:1fr;gap:2rem}
  .login-card{max-width:520px;width:100%;margin:0 auto}
  .login-desc{margin-top:1.2rem}
}
@media (max-width:480px){.login-card{padding:1.8rem 1.2rem 1.2rem}.login-new{margin:1.4rem -1.2rem 0}}

/* =====================================================================
   REGISTER PAGE  (CSS only - register.ejs is NOT changed)
   ===================================================================== */
main:has(form[action="/register"]){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/login-bg.jpg) center/cover no-repeat,
    radial-gradient(circle at 15% 85%,rgba(150,205,235,.4),transparent 45%),
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
main:has(form[action="/register"])+.site-footer{margin-top:0}
main:has(form[action="/register"]) .content{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 220px);padding-top:3rem;padding-bottom:3rem}

/* the card */
.w-sm:has(>form[action="/register"]){position:relative;overflow:hidden;width:100%;max-width:500px;margin:0 auto;padding:2.2rem 2rem 1.5rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 0 0,rgba(25,182,200,.32),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(25,182,200,.3),transparent 34%),
    rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 42px rgba(11,58,99,.16)}
.w-sm:has(>form[action="/register"])>h1{margin:0;text-align:center;font:700 1.75rem/1.2 var(--serif);color:#0b3a63}
.w-sm:has(>form[action="/register"])>h1::before{content:"";display:block;width:58px;height:58px;margin:0 auto .7rem;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,136,184,.25);
  background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/28px no-repeat}
.w-sm:has(>form[action="/register"])>p.muted{margin:.4rem 0 1.5rem;text-align:center;font-size:.92rem;color:#46607a}
.w-sm:has(>form[action="/register"])>form.card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}

/* fields with round icon on the left */
.w-sm:has(>form[action="/register"]) .field{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:.8rem;margin-bottom:.95rem;align-items:start}
.w-sm:has(>form[action="/register"]) .field::before{content:"";grid-column:1;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;background-color:#d7edf8;background-repeat:no-repeat;background-position:center;background-size:20px}
.w-sm:has(>form[action="/register"]) .field:has(#f_name)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/register"]) .field:has(#f_email)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/register"]) .field:has(#f_phone)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/register"]) .field:has(#f_password)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/register"]) .field:has(#f_password2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3M9.5 16l1.7 1.7 3.3-3.4'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/register"]) .field label{grid-column:2;grid-row:1;margin:0 0 .35rem;font-size:.98rem;font-weight:700;color:#0b5a85}
.w-sm:has(>form[action="/register"]) .field input{width:100%;padding:.8rem 1rem;border:1.5px solid #cfdfea;border-radius:10px;background:rgba(255,255,255,.95);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s}
.w-sm:has(>form[action="/register"]) .field>input{grid-column:2;grid-row:2}
.w-sm:has(>form[action="/register"]) .field input:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}
.w-sm:has(>form[action="/register"]) .field.has-error input{border-color:#c0392b}
.w-sm:has(>form[action="/register"]) .field .err,.w-sm:has(>form[action="/register"]) .field .help{grid-column:2}
.w-sm:has(>form[action="/register"]) .field .help{margin-top:.3rem;font-size:.8rem;color:#6a7d89}

/* checkbox */
.w-sm:has(>form[action="/register"]) .check{margin:.3rem 0 1.1rem;font-size:.88rem;line-height:1.5;color:#2f4558}
.w-sm:has(>form[action="/register"]) .check input{flex:none;accent-color:#0a86a6}

/* button + links */
.w-sm:has(>form[action="/register"]) .btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:.4rem;padding:.95rem 1rem;border:0;border-radius:12px;
  background:linear-gradient(90deg,#0b5f8f,#0a86a6);color:#fff;font-size:1.05rem;font-weight:700;box-shadow:0 8px 20px rgba(11,95,143,.3);transition:transform .2s,box-shadow .2s}
.w-sm:has(>form[action="/register"]) .btn::after{content:"\2192";font-size:1.2rem}
.w-sm:has(>form[action="/register"]) .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,95,143,.4)}
.w-sm:has(>form[action="/register"]) a{color:#0a6a99}
.w-sm:has(>form[action="/register"])>p:last-child{margin:1.4rem -2rem 0;padding:1.2rem 2rem 0;border-top:1px solid #dbe9f3;text-align:center;font-size:.93rem;color:#2f4558}

@media (max-width:480px){
  .w-sm:has(>form[action="/register"]){padding:1.8rem 1.2rem 1.2rem}
  .w-sm:has(>form[action="/register"])>p:last-child{margin:1.4rem -1.2rem 0}
}

/* =====================================================================
   FORGOT PASSWORD PAGE  (CSS only - forgot.ejs is NOT changed)
   ===================================================================== */
main:has(form[action="/forgot-password"]){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/login-bg.jpg) center/cover no-repeat,
    radial-gradient(circle at 15% 85%,rgba(150,205,235,.4),transparent 45%),
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
main:has(form[action="/forgot-password"])+.site-footer{margin-top:0}
main:has(form[action="/forgot-password"]) .content{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 220px);padding-top:3rem;padding-bottom:3rem}

/* the card */
.w-sm:has(>form[action="/forgot-password"]){position:relative;overflow:hidden;width:100%;max-width:500px;margin:0 auto;padding:2.2rem 2rem 1.5rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 0 0,rgba(25,182,200,.32),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(25,182,200,.3),transparent 34%),
    rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 42px rgba(11,58,99,.16)}
.w-sm:has(>form[action="/forgot-password"])>h1{margin:0;text-align:center;font:700 1.75rem/1.2 var(--serif);color:#0b3a63}
.w-sm:has(>form[action="/forgot-password"])>h1::before{content:"";display:block;width:58px;height:58px;margin:0 auto .7rem;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,136,184,.25);
  background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/28px no-repeat}
.w-sm:has(>form[action="/forgot-password"])>p{margin:.4rem 0 1.5rem;text-align:center;font-size:.92rem;color:#46607a}
.w-sm:has(>form[action="/forgot-password"])>form.card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}

/* fields with round icon on the left */
.w-sm:has(>form[action="/forgot-password"]) .field{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:.8rem;margin-bottom:.95rem;align-items:start}
.w-sm:has(>form[action="/forgot-password"]) .field::before{content:"";grid-column:1;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;background-color:#d7edf8;background-repeat:no-repeat;background-position:center;background-size:20px;margin-top: -9px;}
.w-sm:has(>form[action="/forgot-password"]) .field:has(#f_email)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.w-sm:has(>form[action="/forgot-password"]) .field label{grid-column:2;grid-row:1;margin:0 0 1.35rem;font-size:.98rem;font-weight:700;color:#0b5a85}
.w-sm:has(>form[action="/forgot-password"]) .field input{width:100%;padding:.8rem 1rem;border:1.5px solid #cfdfea;border-radius:10px;background:rgba(255,255,255,.95);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s;margin-left: -25px}
.w-sm:has(>form[action="/forgot-password"]) .field>input{grid-column:2;grid-row:2}
.w-sm:has(>form[action="/forgot-password"]) .field input:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}
.w-sm:has(>form[action="/forgot-password"]) .field.has-error input{border-color:#c0392b}
.w-sm:has(>form[action="/forgot-password"]) .field .err,.w-sm:has(>form[action="/forgot-password"]) .field .help{grid-column:2}
.w-sm:has(>form[action="/forgot-password"]) .field .help{margin-top:.3rem;font-size:.8rem;color:#6a7d89}


/* button + links */
.w-sm:has(>form[action="/forgot-password"]) .btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:.4rem;padding:.95rem 1rem;border:0;border-radius:12px;
  background:linear-gradient(90deg,#0b5f8f,#0a86a6);color:#fff;font-size:1.05rem;font-weight:700;box-shadow:0 8px 20px rgba(11,95,143,.3);transition:transform .2s,box-shadow .2s}
.w-sm:has(>form[action="/forgot-password"]) .btn::after{content:"\2192";font-size:1.2rem}
.w-sm:has(>form[action="/forgot-password"]) .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,95,143,.4)}
.w-sm:has(>form[action="/forgot-password"]) a{color:#0a6a99}

@media (max-width:480px){
  .w-sm:has(>form[action="/forgot-password"]){padding:1.8rem 1.2rem 1.2rem}
}
/* ===== Reset password page (CSS only, no content change) ===== */
main:has(form[action^="/reset-password/"]){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/login-bg.jpg) center/cover no-repeat,
    radial-gradient(circle at 15% 85%,rgba(150,205,235,.4),transparent 45%),
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
.content:has(form[action^="/reset-password/"]){display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 260px);padding:3rem 1rem}
.content:has(form[action^="/reset-password/"])>.w-sm{position:relative;overflow:hidden;width:100%;max-width:500px;margin:0 auto;padding:2.4rem 2rem 1.8rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 0 0,rgba(25,182,200,.32),transparent 34%),radial-gradient(circle at 100% 100%,rgba(25,182,200,.3),transparent 34%),rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 42px rgba(11,58,99,.16)}
.w-sm:has(form[action^="/reset-password/"])>h1{margin:0 0 1.3rem;text-align:center;font:700 1.7rem/1.2 var(--serif);color:#0b3a63}
.w-sm:has(form[action^="/reset-password/"])>h1::before{content:"";display:block;width:62px;height:62px;margin:0 auto .9rem;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,136,184,.25);
  background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/30px no-repeat}
.w-sm>form[action^="/reset-password/"]{background:transparent;border:0;box-shadow:none;padding:0}
form[action^="/reset-password/"] .field{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:.8rem;margin-bottom:1.1rem;align-items:start}
form[action^="/reset-password/"] .field::before{content:"";grid-column:1;grid-row:1 / span 3;width:42px;height:42px;border-radius:50%;background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/20px no-repeat}
form[action^="/reset-password/"] .field:has(#f_password2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
form[action^="/reset-password/"] .field>label{grid-column:2;margin:0 0 .35rem;font-size:.98rem;font-weight:700;color:#0b5a85}
form[action^="/reset-password/"] .field>*:not(label){grid-column:2}
form[action^="/reset-password/"] .field input{width:100%;padding:.8rem 1rem;border:1.5px solid #cfdfea;border-radius:10px;background:rgba(255,255,255,.95);font-size:.93rem;color:#14232b;transition:border-color .2s,box-shadow .2s}
form[action^="/reset-password/"] .field input:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.18)}
form[action^="/reset-password/"] .btn{margin-top:.6rem;padding:.9rem 1rem;border:0;border-radius:999px;background:linear-gradient(135deg,#1488b8,#19b6c8);color:#fff;font-weight:700;font-size:1rem;box-shadow:0 8px 20px rgba(20,136,184,.32);transition:transform .2s,box-shadow .2s}
form[action^="/reset-password/"] .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,136,184,.4)}
.w-sm:has(form[action^="/reset-password/"])>.flash{margin-bottom:1rem}
@media (max-width:520px){.content:has(form[action^="/reset-password/"])>.w-sm{padding:1.8rem 1.2rem 1.4rem}}

/* =====================================================================
   MESSAGE PAGE  ("Check your e-mail", "Link expired" ...)  CSS only - message.ejs NOT changed
   ===================================================================== */
main:has(.content>.w-md>h1:first-child+p){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/login-bg.jpg) center/cover no-repeat,
    radial-gradient(circle at 15% 85%,rgba(150,205,235,.4),transparent 45%),
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
main:has(.content>.w-md>h1:first-child+p)+.site-footer{margin-top:0}
.content:has(>.w-md>h1:first-child+p){display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 220px);padding-top:3rem;padding-bottom:3rem}

.content>.w-md:has(>h1:first-child+p){position:relative;overflow:hidden;width:100%;max-width:520px;margin:0 auto;padding:2.4rem 2.2rem 2.2rem;text-align:center;border-radius:18px;border:1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 0 0,rgba(25,182,200,.32),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(25,182,200,.3),transparent 34%),
    rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 42px rgba(11,58,99,.16)}
.content>.w-md:has(>h1:first-child+p)>h1{margin:0;font:700 1.75rem/1.25 var(--serif);color:#0b3a63}
.content>.w-md:has(>h1:first-child+p)>h1::before{content:"";display:block;width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%;border:4px solid #fff;
  background:#d7edf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.5V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3Cpath d='M16 19l2 2 4-4'/%3E%3C/svg%3E") center/36px no-repeat;box-shadow:0 6px 16px rgba(20,136,184,.25),0 0 0 0 rgba(20,136,184,.3);animation:msgPulse 2.4s ease-out infinite}
@keyframes msgPulse{0%{box-shadow:0 6px 16px rgba(20,136,184,.25),0 0 0 0 rgba(20,136,184,.3)}70%,100%{box-shadow:0 6px 16px rgba(20,136,184,.25),0 0 0 18px rgba(20,136,184,0)}}
@media (prefers-reduced-motion:reduce){.content>.w-md:has(>h1:first-child+p)>h1::before{animation:none}}
.content>.w-md:has(>h1:first-child+p)>h1::after{content:"";display:block;width:44px;height:3px;margin:.9rem auto 0;border-radius:3px;background:#19a7c4}
.content>.w-md:has(>h1:first-child+p)>p{margin:1rem auto 0;max-width:40ch;font-size:.98rem;line-height:1.7;color:#46607a}
.content>.w-md:has(>h1:first-child+p)>p:has(>a.btn){margin-top:1.6rem;max-width:none}
.content>.w-md:has(>h1:first-child+p) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:220px;padding:.9rem 1.6rem;border:0;border-radius:12px;
  background:linear-gradient(90deg,#0b5f8f,#0a86a6);color:#fff;font-size:1rem;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(11,95,143,.3);transition:transform .2s,box-shadow .2s}
.content>.w-md:has(>h1:first-child+p) .btn::after{content:"\2192";font-size:1.2rem}
.content>.w-md:has(>h1:first-child+p) .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,95,143,.4);color:#fff}
@media (max-width:480px){
  .content>.w-md:has(>h1:first-child+p){padding:2rem 1.3rem 1.8rem}
  .content>.w-md:has(>h1:first-child+p) .btn{width:100%}
}




/* =====================================================================
   RESEARCH ETHICS PAGE  (/research-ethics)
   ===================================================================== */
/* --- 1. MAIN SECTION background image: public/img/re-main-bg.jpg --- */
main:has(.content>.row>a[href="/portal/ethics/new"]){
  padding-bottom:3rem;
  background:
    url(/static/img/re-main-bg.jpg) center top/cover no-repeat,
    radial-gradient(circle at 0 100%,rgba(150,205,235,.45),transparent 38%),
    linear-gradient(180deg,#f3f9fd,#f8fcfe)}

/* --- banner --- */
.page-head:has(+ .content>.row>a[href="/portal/ethics/new"]){padding:2.4rem 0 3.6rem;border-bottom:0;
  /* 2. PAGE HEAD background image: public/img/re-banner.jpg */
  background:
    linear-gradient(90deg,rgba(238,247,252,.92) 0%,rgba(238,247,252,.6) 38%,rgba(238,247,252,0) 70%),
    url(/static/img/re-banner.jpg) center/cover no-repeat,
    linear-gradient(135deg,#e3f1f9,#f6fbfe 60%,#dcecf6)}
.page-head:has(+ .content>.row>a[href="/portal/ethics/new"]) .breadcrumbs{display:none}
.page-head:has(+ .content>.row>a[href="/portal/ethics/new"]) h1{margin:0;max-width:16ch;font:700 clamp(1.9rem,3.6vw,2.5rem)/1.15 var(--serif);color:#0b4a6f}
.page-head:has(+ .content>.row>a[href="/portal/ethics/new"]) p{max-width:46ch;margin:1rem 0 0;font-size:.95rem;line-height:1.65;color:#3e5f6c}

/* --- big white card --- */
.content:has(>.row>a[href="/portal/ethics/new"]){position:relative;margin:-2rem auto 0;width:calc(100% - 24px);padding:1.6rem 1.8rem 1.8rem;border-radius:18px;background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 14px 40px rgba(11,58,99,.12)}

/* --- intro box (the notice) --- */
.content:has(>.row>a[href="/portal/ethics/new"]) .notice{position:relative;margin:0 0 1.2rem;min-height:104px;padding:3.1rem 1.4rem 1.2rem 7.6rem;border:0;border-radius:14px;font-size:.88rem;line-height:1.65;color:#3e5f6c;
  /* 3. NOTICE box background image: public/img/re-notice.jpg */
  background:
    linear-gradient(90deg,#e4f3fa 0%,rgba(228,243,250,.92) 45%,rgba(228,243,250,0) 85%),
    url(/static/img/re-notice.jpg) right center/cover no-repeat,
    linear-gradient(90deg,#e4f3fa,#f3fafd)}
.content:has(>.row>a[href="/portal/ethics/new"]) .notice::before{content:"";position:absolute;left:1.3rem;top:50%;width:76px;height:76px;margin-top:-38px;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,136,184,.22);
  background:#d3ecf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/40px no-repeat}
.content:has(>.row>a[href="/portal/ethics/new"]) .notice::after{content:"Research Ethics Committee";position:absolute;left:7.6rem;top:1rem;font:700 1.45rem/1.2 var(--serif);color:#0b4a6f}

/* --- three buttons --- */
.content:has(>.row>a[href="/portal/ethics/new"]) .row.mb{gap:.9rem;margin-bottom:1.8rem}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border-radius:8px;font-size:.88rem;font-weight:700;transition:transform .2s,box-shadow .2s}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn::before{content:"";width:20px;height:20px;background-position:center;background-repeat:no-repeat;background-size:contain}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn:not(.secondary){border:0;background:linear-gradient(90deg,#0b5f8f,#0a86a6);color:#fff;box-shadow:0 8px 18px rgba(11,95,143,.28)}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn.secondary{border:1.5px solid #bfe0ee;background:#fff;color:#0b5a85}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn:hover{transform:translateY(-2px)}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .row .btn:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E")}

/* --- section headings --- */
.content:has(>.row>a[href="/portal/ethics/new"]) h2{margin:1.8rem 0 1rem;font:700 1.35rem/1.2 var(--serif);color:#0b4a6f}
.content:has(>.row>a[href="/portal/ethics/new"]) h2::after{content:"";display:block;width:26px;height:3px;margin-top:.5rem;border-radius:3px;background:#19a7c4}

/* --- grids: 4 columns --- */
.content:has(>.row>a[href="/portal/ethics/new"]) .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card{position:relative;margin:0;border:1px solid #dbe9f3;border-radius:10px;background:linear-gradient(135deg,#fff,#f4f9fc);box-shadow:0 2px 8px rgba(11,58,99,.05)}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card h3{margin:0;font:700 .82rem/1.35 var(--font);color:#0b4a6f}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card::before{content:"";position:absolute;left:.8rem;width:40px;height:40px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:20px}

/* information for researchers */
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card{display:flex;align-items:center;min-height:62px;padding:.7rem .8rem .7rem 3.7rem;text-decoration:none;transition:transform .2s,box-shadow .2s}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card h3{font-weight:600;color:#2f4558}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card::before{top:50%;margin-top:-20px}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,58,99,.12)}

/* review categories + principles */
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat{padding:.9rem .9rem .9rem 3.9rem;min-height:82px}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat::before{top:.9rem}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat p{margin:.3rem 0 0;font-size:.7rem;line-height:1.5;color:#6a7d89}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle{border-top:1px solid #dbe9f3}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle .n{font:700 .68rem var(--font);letter-spacing:.06em;color:#6a7d89}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle h3{margin:.1rem 0 0}

/* round coloured icons (8 colours, repeating) */
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+1)::before{background-color:#d8e9fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a73c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.5 3-5.5 6-5.5s6 2 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.5 0 4 1.7 4 4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+2)::before{background-color:#d6f2e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+3)::before{background-color:#ead9f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3fb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+4)::before{background-color:#fde4cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8791c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v10H3z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+5)::before{background-color:#d3f1f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a93b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+6)::before{background-color:#fde0ea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6336c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-5-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 9c0 6-8 11-8 11z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n+7)::before{background-color:#dfe6fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6fd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>a.card:nth-child(8n)::before{background-color:#fdf0cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+1)::before{background-color:#d8e9fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a73c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.5 3-5.5 6-5.5s6 2 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.5 0 4 1.7 4 4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+2)::before{background-color:#d6f2e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+3)::before{background-color:#ead9f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3fb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+4)::before{background-color:#fde4cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8791c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v10H3z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+5)::before{background-color:#d3f1f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a93b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+6)::before{background-color:#fde0ea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6336c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-5-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 9c0 6-8 11-8 11z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n+7)::before{background-color:#dfe6fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6fd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.card.flat:not(.principle):nth-child(8n)::before{background-color:#fdf0cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+1)::before{background-color:#d8e9fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a73c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.5 3-5.5 6-5.5s6 2 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.5 0 4 1.7 4 4'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+2)::before{background-color:#d6f2e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+3)::before{background-color:#ead9f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3fb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+4)::before{background-color:#fde4cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8791c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v10H3z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+5)::before{background-color:#d3f1f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a93b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+6)::before{background-color:#fde0ea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6336c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-5-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 9c0 6-8 11-8 11z'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n+7)::before{background-color:#dfe6fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6fd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E")}
.content:has(>.row>a[href="/portal/ethics/new"]) .grid>.principle:nth-child(8n)::before{background-color:#fdf0cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}

/* --- responsive --- */
@media (max-width:1000px){.content:has(>.row>a[href="/portal/ethics/new"]) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .content:has(>.row>a[href="/portal/ethics/new"]){padding:1.2rem 1rem 1.4rem}
  .content:has(>.row>a[href="/portal/ethics/new"]) .grid{grid-template-columns:1fr}
  .content:has(>.row>a[href="/portal/ethics/new"]) .notice{padding:6.2rem 1.1rem 1.1rem 1.1rem}
  .content:has(>.row>a[href="/portal/ethics/new"]) .notice::before{top:1.1rem;margin-top:0;left:1.1rem}
  .content:has(>.row>a[href="/portal/ethics/new"]) .notice::after{left:1.1rem;top:4.4rem;font-size:1.25rem}
  .content:has(>.row>a[href="/portal/ethics/new"]) .row .btn{width:100%;justify-content:center}
}







/* =====================================================================
   GOVERNANCE PAGE  (/governance)
   ===================================================================== */
/* --- page background --- */
main:has(.side-nav a[href="/governance"][aria-current="page"]){
  background:
    linear-gradient(rgba(243,249,253,.35),rgba(243,249,253,.35)),
    url(/static/img/governance-banner.jpg) center top/100% 100% no-repeat,
    radial-gradient(circle at 0 100%,rgba(150,205,235,.45),transparent 38%),
    linear-gradient(180deg,#f3f9fd,#f8fcfe)}

/* --- banner --- */
.page-head:has(+ section .side-nav a[href="/governance"][aria-current="page"]){
  position:relative;padding:2.2rem 0 1.8rem;border-bottom:0;background:transparent}
.page-head:has(+ section .side-nav a[href="/governance"][aria-current="page"]) .breadcrumbs{display:none}
.page-head:has(+ section .side-nav a[href="/governance"][aria-current="page"]) h1{margin:0;font:700 clamp(2rem,4vw,2.6rem)/1.15 var(--serif);color:#0b4a6f}
.page-head:has(+ section .side-nav a[href="/governance"][aria-current="page"]) h1::after{
  content:"Our structure, leadership and commitment to advancing clinical research in Bangladesh.";
  display:block;max-width:34ch;margin-top:.7rem;font:400 1rem/1.6 var(--font);color:#3e5f6c}
.page-head:has(+ section .side-nav a[href="/governance"][aria-current="page"]) .container::after{
  content:"";display:block;width:60px;height:3px;margin-top:.9rem;border-radius:3px;background:#1488b8}

/* --- layout --- */
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]){grid-template-columns:260px minmax(0,1fr);gap:1.6rem;align-items:start}

/* --- sidebar card --- */
.side-nav:has(a[href="/governance"][aria-current="page"]){padding:1.2rem 1rem 6rem;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(11,58,99,.1)}
.side-nav:has(a[href="/governance"][aria-current="page"]) ul{border:0;background:transparent;display:grid;gap:.7rem}
.side-nav:has(a[href="/governance"][aria-current="page"]) a{
  display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border:0;border-radius:10px;
  background-color:#eef6fa;color:#0b4a6f;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
.side-nav:has(a[href="/governance"][aria-current="page"]) a:hover{background-color:#e0eff7;transform:translateX(2px)}
.side-nav:has(a[href="/governance"][aria-current="page"]) a::before{content:"";flex:none;width:22px;height:22px;background-position:center;background-repeat:no-repeat;background-size:contain}
.side-nav:has(a[href="/governance"][aria-current="page"]) a[href="/about"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cpath d='M4 10h16M5 20h14M6 10v10M10 10v10M14 10v10M18 10v10'/%3E%3C/svg%3E")}
.side-nav:has(a[href="/governance"][aria-current="page"]) a[href="/governance"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.side-nav:has(a[href="/governance"][aria-current="page"]) a[aria-current="page"]{
  background:linear-gradient(90deg,#0b7fa6,#0a93b3);color:#fff;box-shadow:0 8px 18px rgba(11,127,166,.3)}
.side-nav:has(a[href="/governance"][aria-current="page"]) a[href="/governance"][aria-current="page"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}

/* --- main white card --- */
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose{
  position:relative;max-width:none;padding:2.1rem 2rem 1.6rem;border-radius:16px;box-shadow:0 10px 30px rgba(11,58,99,.1);
  background:linear-gradient(#19a7c4,#19a7c4) 2rem 0/48px 3px no-repeat,#fff}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose::before{
  content:"BACRS Governance";display:block;margin:0 0 .5rem;font:700 1.75rem/1.2 var(--serif);color:#0b4a6f}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>p:first-child{margin:0 0 1.3rem;font-size:.95rem;color:#2f4558}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>p:first-child strong{color:#0b2f4a}

/* --- 4 rows with round coloured icons --- */
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li{
  position:relative;margin:0;min-height:82px;padding:2.6rem 1.2rem 1rem 6rem;border-radius:12px;
  background:linear-gradient(90deg,#f4f8fb,#fafcfd);font-size:.86rem;line-height:1.55;color:#4a5f6c;text-indent:-.3em}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li::first-letter{font-size:0}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li>strong{
  position:absolute;text-indent:0;left:6rem;top:.9rem;font:700 1.02rem/1.3 var(--font);color:#0a7a99}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li::before{
  content:"";position:absolute;left:1.1rem;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:26px}
.prose>ul>li:nth-child(1)::before{background-color:#d8e9fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a73c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M6.5 20c0-3.5 2.5-5.5 5.5-5.5s5.5 2 5.5 5.5M1.5 18c0-2.5 1.5-4 3.5-4M22.5 18c0-2.5-1.5-4-3.5-4'/%3E%3C/svg%3E")}
.prose>ul>li:nth-child(2)::before{background-color:#d6f2e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E")}
.prose>ul>li:nth-child(3)::before{background-color:#ead9f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3fb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6z'/%3E%3Cpath d='M12 16l-1.5 2.5L12 20l1.5-1.5z'/%3E%3C/svg%3E")}
.prose>ul>li:nth-child(4)::before{background-color:#fde4cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8791c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h6M9 16h4'/%3E%3C/svg%3E")}

/* --- last note box --- */
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>p:last-child{
  position:relative;margin:1.3rem 0 0;padding:1.1rem 1.2rem 1.1rem 3.6rem;border-radius:12px;background:#eaf3f8;font-size:.86rem;line-height:1.9;color:#2f4558}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>p:last-child::before{
  content:"";position:absolute;left:1.2rem;top:1.15rem;width:24px;height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231488b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E") center/contain no-repeat}
.layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>p:last-child a{color:#1488b8}

@media (max-width:860px){
  .layout-side:has(.side-nav a[href="/governance"][aria-current="page"]){grid-template-columns:1fr}
  .side-nav:has(a[href="/governance"][aria-current="page"]){padding-bottom:1.2rem}
  .layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose{padding:1.8rem 1.1rem 1.2rem}
}
@media (max-width:520px){
  .layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li{padding:3.6rem 1rem 1rem 1rem;min-height:0}
  .layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li>strong{left:5rem;top:1.2rem}
  .layout-side:has(.side-nav a[href="/governance"][aria-current="page"]) .prose>ul>li::before{top:1.1rem;margin-top:0;width:44px;height:44px;background-size:22px}
}



/* =====================================================================
   MEMBERS DIRECTORY PAGE  (/members)   CSS only - members.ejs is NOT changed
   ===================================================================== */
/* --- page background: public/img/members-bg.jpg --- */
main:has(.member-card){
  background:
    url(/static/img/members-bg.jpg) center top/cover no-repeat,
    radial-gradient(circle at 0 0,rgba(150,205,235,.4),transparent 35%),
    linear-gradient(180deg,#eef7fc,#f8fcfe);
  padding-bottom:3rem}

/* --- banner --- */
.page-head:has(+ .content .member-card){padding:1.6rem 0 2rem;border-bottom:0;background:transparent}
.page-head:has(+ .content .member-card) .container{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:1.6rem;align-items:start}
.page-head:has(+ .content .member-card) .breadcrumbs{grid-column:1 / -1;margin-bottom:1.4rem;font-size:.95rem;font-weight:600;color:#46607a}
.page-head:has(+ .content .member-card) .breadcrumbs a{color:#0b4a6f;text-decoration:none}
.page-head:has(+ .content .member-card) .breadcrumbs li:first-child a::before{content:"";display:inline-block;width:16px;height:16px;margin-right:.4rem;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E") center/contain no-repeat}
.page-head:has(+ .content .member-card) .breadcrumbs li+li::before{content:"\203A";color:#6a7d89}
.page-head:has(+ .content .member-card) .container::before{content:"";grid-column:1;grid-row:2 / span 2;width:100px;height:100px;border-radius:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.5 3-5.5 6-5.5s6 2 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.5 0 4 1.7 4 4'/%3E%3C/svg%3E"),linear-gradient(135deg,#2b6fb0,#1b9fc0);background-repeat:no-repeat;background-size:34px,100% 100%;background-position:center;
  box-shadow:0 0 0 14px rgba(255,255,255,.65),0 10px 24px rgba(20,100,160,.25)}
.page-head:has(+ .content .member-card) h1{grid-column:2;margin:0;font:700 clamp(2rem,4vw,2.7rem)/1.1 var(--serif);color:#0b3a63}
.page-head:has(+ .content .member-card) p{grid-column:2;max-width:58ch;margin:.6rem 0 0;font-size:1rem;line-height:1.65;color:#5a7388}
.page-head:has(+ .content .member-card) .container::after{content:"";grid-column:2;width:56px;height:3px;margin-top:.9rem;border-radius:3px;background:#19a7c4}

/* --- search bar --- */
.content:has(.member-card) .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px) auto;gap:1rem;align-items:center;max-width:1260px;margin:0 0 1.2rem;padding:1.2rem 1.3rem;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(11,58,99,.1)}
.content:has(.member-card) .filters .field{margin:0}
.content:has(.member-card) .filters input,.content:has(.member-card) .filters select{min-width:0;width:100%;height:46px;border:1.5px solid #dbe6ee;border-radius:10px;background-color:#fff;font-size:.93rem;color:#14232b}
.content:has(.member-card) .filters .field:nth-child(1) input{padding:0 1rem 0 2.7rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7d89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.9rem center;background-size:18px}
.content:has(.member-card) .filters .field:nth-child(1) label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.content:has(.member-card) .filters .field:nth-child(1) input::placeholder{color:#9db0bf}
.content:has(.member-card) .filters input:focus,.content:has(.member-card) .filters select:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.15)}
.content:has(.member-card) .filters .field:nth-child(2){position:relative;padding-left:48px}
.content:has(.member-card) .filters .field:nth-child(2)::before{content:"";position:absolute;left:0;top:0;width:48px;height:44px;border:1.5px solid #dbe6ee;border-right:0;border-radius:10px 0 0 10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center/20px no-repeat}
.content:has(.member-card) .filters .field:nth-child(2) select{padding:.5rem 2.2rem 0 .8rem;border-radius:0 10px 10px 0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:16px}
.content:has(.member-card) .filters .field:nth-child(2) label{position:absolute;left:58px;top:-9px;z-index:1;padding:0 .35rem;background:#fff;font-size:.78rem;color:#46607a}
.content:has(.member-card) .filters .btn{display:inline-flex;align-items:center;gap:.6rem;height:46px;padding:0 2rem;border:0;border-radius:10px;background:linear-gradient(90deg,#0b4a7a,#0b6a96);font-weight:700;box-shadow:0 8px 18px rgba(11,74,122,.28)}
.content:has(.member-card) .filters .btn::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat}
.content:has(.member-card)>p.muted{margin:0 0 1rem;font-size:.92rem;color:#46607a}

/* --- cards --- */
/* designation / institution text and the View Profile button (made with CSS only) */
.content:has(.member-card) .member-card>div p{margin:.45rem 0 0;font-size:.9rem;line-height:1.6;color:#46607a}
.content:has(.member-card) .member-card::after{content:"View Profile  \203A";display:flex;align-items:center;justify-content:center;margin:auto 1rem 1rem;padding:.8rem 1rem .8rem 2.2rem;border-radius:10px;
  background:#eef5fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 6 12 6s9.5 6 9.5 6-3.5 6-9.5 6S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat calc(50% - 62px) center/18px;font-size:.85rem;font-weight:700;color:#0b4a6f}
.content:has(.member-card) .member-card:hover::after{background-color:#e0eef7}

.content:has(.member-card) .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.content:has(.member-card) .member-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:0;border-radius:14px;background:#fff;text-decoration:none;box-shadow:0 8px 26px rgba(11,58,99,.1);transition:transform .2s,box-shadow .2s}
.content:has(.member-card) .member-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,58,99,.16)}
.content:has(.member-card) .member-card::before{content:"";display:block;height:84px;
  background:radial-gradient(circle at 88% 130%,rgba(255,255,255,.22) 0 38%,transparent 39%),radial-gradient(circle at 60% 160%,rgba(255,255,255,.14) 0 40%,transparent 41%),linear-gradient(135deg,var(--c1),var(--c2))}
.content:has(.member-card) .member-card .avatar{position:relative;z-index:1;width:72px;height:72px;margin:-38px 0 0 1.4rem;border:5px solid #fff;border-radius:50%;background:var(--c3);color:#fff;font:700 1.5rem var(--serif);box-shadow:0 4px 12px rgba(11,58,99,.18)}
.content:has(.member-card) .member-card img.avatar{background:#fff}
.content:has(.member-card) .member-card>div{padding:.8rem 1.4rem 1rem}
.content:has(.member-card) .member-card>div h2{margin:0;font:700 1.2rem/1.25 var(--serif);color:#0b3a63}
.content:has(.member-card) .member-card>div p{margin:.45rem 0 0;font-size:.88rem;line-height:1.5;color:#46607a}
.content:has(.member-card) .member-card:nth-child(4n+1){--c1:#2d5a91;--c2:#3f74ad;--c3:#1f4a7c}
.content:has(.member-card) .member-card:nth-child(4n+2){--c1:#2e8c80;--c2:#4ba797;--c3:#2a7f73}
.content:has(.member-card) .member-card:nth-child(4n+3){--c1:#6a5bc4;--c2:#8878d9;--c3:#5b4bb5}
.content:has(.member-card) .member-card:nth-child(4n){--c1:#2899b5;--c2:#48b6cc;--c3:#1f87a3}
/* --- cards --- */
/* designation / institution text and the View Profile button (made with CSS only) */
.content:has(.member-card) .member-card>div p{margin:.45rem 0 0;font-size:.9rem;line-height:1.6;color:#46607a}
.content:has(.member-card) .member-card::after{content:"View Profile  \203A";display:flex;align-items:center;justify-content:center;margin:auto 1rem 1rem;padding:.8rem 1rem .8rem 2.2rem;border-radius:10px;
  background:#eef5fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 6 12 6s9.5 6 9.5 6-3.5 6-9.5 6S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat calc(50% - 62px) center/18px;font-size:.85rem;font-weight:700;color:#0b4a6f}
.content:has(.member-card) .member-card:hover::after{background-color:#e0eef7}

.content:has(.member-card) .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.content:has(.member-card) .member-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:0;border-radius:14px;background:#fff;text-decoration:none;box-shadow:0 8px 26px rgba(11,58,99,.1);transition:transform .2s,box-shadow .2s}
.content:has(.member-card) .member-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,58,99,.16)}
.content:has(.member-card) .member-card::before{content:"";display:block;height:84px;
  background:radial-gradient(circle at 88% 130%,rgba(255,255,255,.22) 0 38%,transparent 39%),radial-gradient(circle at 60% 160%,rgba(255,255,255,.14) 0 40%,transparent 41%),linear-gradient(135deg,var(--c1),var(--c2))}
.content:has(.member-card) .member-card .avatar{position:relative;z-index:1;width:140px;height:140px;margin:-60px 0 0 1.4rem;border:5px solid #fff;border-radius:50%;background:var(--c3);color:#fff;font:700 1.5rem var(--serif);box-shadow:0 4px 12px rgba(11,58,99,.18)}
.content:has(.member-card) .member-card img.avatar{background:#fff}
.content:has(.member-card) .member-card>div{padding:.8rem 1.4rem 1rem}
.content:has(.member-card) .member-card>div h2{margin:0;font:700 1.2rem/1.25 var(--serif);color:#0b3a63}
.content:has(.member-card) .member-card>div p{margin:.45rem 0 0;font-size:.88rem;line-height:1.5;color:#46607a}
.content:has(.member-card) .member-card:nth-child(4n+1){--c1:#2d5a91;--c2:#3f74ad;--c3:#1f4a7c}
.content:has(.member-card) .member-card:nth-child(4n+2){--c1:#2e8c80;--c2:#4ba797;--c3:#2a7f73}
.content:has(.member-card) .member-card:nth-child(4n+3){--c1:#6a5bc4;--c2:#8878d9;--c3:#5b4bb5}
.content:has(.member-card) .member-card:nth-child(4n){--c1:#2899b5;--c2:#48b6cc;--c3:#1f87a3}

@media (max-width:1180px){.content:has(.member-card) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.content:has(.member-card) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content:has(.member-card) .filters{grid-template-columns:1fr 1fr}.content:has(.member-card) .filters .field:nth-child(1){grid-column:1 / -1}}
@media (max-width:620px){
  .content:has(.member-card) .grid{grid-template-columns:1fr}
  .content:has(.member-card) .filters{grid-template-columns:1fr}
  .page-head:has(+ .content .member-card) .container{grid-template-columns:72px minmax(0,1fr);column-gap:1rem}
  .page-head:has(+ .content .member-card) .container::before{width:72px;height:72px;border-radius:16px;background-size:26px,100% 100%;box-shadow:0 0 0 8px rgba(255,255,255,.65)}
}
/* ===== Members page: profile cards (FBRSN style, BACRS colours) ===== */
.member-marker{display:none!important}
.pgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:0 0 clamp(20px,3vw,36px)}
.pgrid>.pcard{grid-column:span 2}
.pgrid-featured>.pcard:nth-child(1){grid-column:3 / span 2}
.pgrid-featured>.pcard:nth-child(2){grid-column:5 / span 2}
.pgrid-featured>.pcard:nth-child(3){grid-column:1 / span 2}
.pcard{--c1:#2d5a91;--c2:#3f74ad;--c3:#1f4a7c;--gold:#b08d4a;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e3e8ef;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(20,40,80,.07);transition:transform .25s ease,box-shadow .25s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(20,40,80,.16);border-color:var(--gold)}
.pgrid>.pcard:nth-child(4n+2){--c1:#2e8c80;--c2:#4ba797;--c3:#2a7f73}
.pgrid>.pcard:nth-child(4n+3){--c1:#6a5bc4;--c2:#8878d9;--c3:#5b4bb5}
.pgrid>.pcard:nth-child(4n+4){--c1:#2899b5;--c2:#48b6cc;--c3:#1f87a3}
.pcard-top{position:relative;height:clamp(210px,19vw,250px);overflow:hidden;background:linear-gradient(135deg,var(--c3) 0%,var(--c1) 50%,var(--c2) 100%)}
.pcard-badge{position:absolute;top:14px;right:14px;z-index:3;background:var(--gold);color:#fff;font:700 .72rem/1 Georgia,"Times New Roman",serif;letter-spacing:.08em;padding:8px 14px;border-radius:999px}
.pcard-sil{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:62%;height:42%;background:rgba(255,255,255,.2);border-radius:50% 50% 0 0/80% 80% 0 0}
.pcard-photo{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-52%);width:clamp(130px,12vw,160px);height:clamp(130px,12vw,160px);border-radius:50%;border:4px solid rgba(255,255,255,.75);box-shadow:0 8px 22px rgba(0,0,0,.25);object-fit:cover;object-position:center top;background:rgba(255,255,255,.22)}
.pcard-ini{display:flex;align-items:center;justify-content:center;color:#fff;font:700 clamp(2.4rem,4vw,3.2rem)/1 Georgia,"Times New Roman",serif;letter-spacing:.02em}
.pcard-body{padding:20px 22px 24px;text-align:left;flex:1}
.pcard-body p{margin:0}
.pcard-name{margin:0 0 6px;font:700 1.12rem/1.3 Georgia,"Times New Roman",serif;color:#0f2b4a;text-transform:none}
.pcard-name a{color:inherit;text-decoration:none}
.pcard-name a:hover{color:var(--c1)}
.pcard-desig{color:var(--gold);font:700 .95rem/1.35 Georgia,"Times New Roman",serif;margin-bottom:8px!important}
.pcard-prof{color:#34404f;font-size:.95rem;margin-bottom:8px!important}
.pcard-mail{font-size:.88rem;word-break:break-all}
.pcard-mail a{color:var(--c1);text-decoration:none}
.pcard-mail a:hover{text-decoration:underline}
.pcard-loc{color:#6b7684;font-size:.85rem;margin-top:8px!important;padding-left:18px;position:relative}
.pcard-loc::before{content:"";position:absolute;left:0;top:.2em;width:11px;height:14px;background:var(--gold);border-radius:50% 50% 50% 0;transform:rotate(-45deg) scale(.8)}
@media (max-width:1100px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid>.pcard,.pgrid-featured>.pcard:nth-child(-n+3){grid-column:auto}
}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}


/* ===== Members cards: View Profile button ===== */
.pcard-body{display:flex;flex-direction:column}
.pcard-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:10px;background:#eef2f7;border:1px solid #e0e6ee;color:var(--c1);font:700 .92rem/1 Georgia,"Times New Roman",serif;text-decoration:none;transition:background .2s,color .2s}
.pcard-btn:hover{background:var(--c1);color:#fff;border-color:var(--c1)}
.pcard-body>.pcard-mail{margin-bottom:16px!important}
.pcard-body>.pcard-loc{margin-bottom:16px!important}
.pcard-body>p:last-of-type:not(.pcard-mail):not(.pcard-loc){margin-bottom:16px!important}


/* =====================================================================================================
   BACRS — About page redesign (CSS only). Paste at the very end of public/css/app.css.
   Works with the EXISTING markup (views/public/page.ejs + CMS text). No HTML / JS / content change.
   It only applies to the page whose side-menu marks /about as current, so no other page is affected.
   Background art files: /static/img/about/{hero-left,hero-right,dna,city}.jpg
   ===================================================================================================== */
main:has(.side-nav a[href="/about"][aria-current="page"]){--a-navy:#0b4474;--a-title:#10517c;--a-card:#fafdfe;--a-shadow:0 0 24px rgba(10,80,130,.09);--a-px:1.35rem;--a-py:1.15rem;--ic:54px;--ic-gap:1rem;
  position:relative;isolation:isolate;background:linear-gradient(to top,rgba(32,182,190,.3),rgba(32,182,190,0) 150px),linear-gradient(180deg,#e9f6fe,#d9effc 55%,#cde9f8)}
main:has(.side-nav a[href="/about"][aria-current="page"])+.site-footer{margin-top:0}

/* ---------- hero ---------- */
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head{position:relative;overflow:hidden;isolation:isolate;min-height:135px;padding:1.35rem 0 1.2rem;border-bottom:0;background:linear-gradient(90deg,#eef8fd,#dbeffa 55%,#cfe9f8)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::before,main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::after{content:"";position:absolute;top:0;bottom:0;z-index:-1;background-repeat:no-repeat;background-size:auto 100%;pointer-events:none}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::before{left:0;width:225px;background-position:center;background-image:url(/static/img/about/hero-left.jpg);-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::after{right:0;width:656px;background-position:right center;background-image:url(/static/img/about/hero-right.jpg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .breadcrumbs{display:none}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head h1{margin:0;padding-left:1.1rem;font-size:clamp(1.8rem,2.7vw,2.4rem);line-height:1.2;font-weight:700;color:var(--a-title)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head h1::after{content:"Learn more about our mission, vision, and the goals that drive clinical research in Bangladesh.";display:block;max-width:26rem;margin-top:.55rem;font:400 .95rem/1.55 var(--font);color:#16384f}
html[lang="bn"] main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head h1::after{content:"আমাদের লক্ষ্য, রূপকল্প এবং বাংলাদেশে ক্লিনিক্যাল গবেষণাকে এগিয়ে নেওয়ার উদ্দেশ্য সম্পর্কে আরও জানুন।"}
main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head .container::after{content:"";display:block;width:58px;height:4px;margin:.7rem 0 0 1.1rem;border-radius:4px;background:linear-gradient(90deg,#0773a0,#19b4b5)}

/* ---------- page background art (DNA right, city + wave bottom-left) ---------- */
main:has(.side-nav a[href="/about"][aria-current="page"])::before,main:has(.side-nav a[href="/about"][aria-current="page"])::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"])::before{top:140px;right:0;width:200px;height:889px;max-height:calc(100% - 140px);background-image:url(/static/img/about/dna.jpg);background-position:right top;background-size:200px auto;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
main:has(.side-nav a[href="/about"][aria-current="page"])::after{left:0;bottom:0;width:472px;height:544px;max-height:100%;background-image:url(/static/img/about/city.jpg);background-position:left bottom;background-size:472px auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%),linear-gradient(to right,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 22%),linear-gradient(to right,#000 72%,transparent);mask-composite:intersect}

/* ---------- layout ---------- */
main:has(.side-nav a[href="/about"][aria-current="page"]) .content{padding-top:1.1rem;padding-bottom:3.4rem}
main:has(.side-nav a[href="/about"][aria-current="page"]) .layout-side{grid-template-columns:240px minmax(0,1fr);gap:1.5rem;align-items:start}

/* ---------- side menu ---------- */
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav ul{display:grid;gap:.5rem;align-content:start;min-height:19.5rem;padding:.8rem;border:0;border-radius:14px;background:var(--a-card);box-shadow:var(--a-shadow)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border:0;border-bottom:0;border-radius:10px;background:#f1f8fc;color:var(--a-navy);font-weight:700;font-size:.92rem;text-decoration:none}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a:hover{background:#e3f1fa;color:var(--a-navy)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a[aria-current=page]{background:linear-gradient(90deg,#0773a0,#19b4b5);color:#fff}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a::before{content:"";flex:none;width:22px;height:22px;background:center/contain no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a[href="/about"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%23ffffff' stroke-width='1.700' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M4.5 9.5h15'/%3E%3Cpath d='M6 11v7M10 11v7M14 11v7M18 11v7'/%3E%3Cpath d='M3.5 20.5h17'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav a[href="/governance"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%230b4474' stroke-width='1.700' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6l7-3z'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- article = stack of cards (each card is built from consecutive elements of the CMS text) ---------- */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose{max-width:none}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>*{position:relative;margin:0;padding:0 var(--a-px);background:var(--a-card);box-shadow:var(--a-shadow);font-size:.93rem;line-height:1.55;color:#1d3a50;list-style:none;clip-path:inset(0 -40px)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose strong{color:#0a3e69}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(n+2){margin-top:-1px}
/* card starts */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(1),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(2),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(6),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(8){margin-top:.9rem}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(1){margin-top:0}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(2),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(6),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(8){border-radius:14px 14px 0 0;clip-path:inset(-40px -40px 0 -40px)}
/* card ends */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(5),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(7),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(9){border-radius:0 0 14px 14px;clip-path:inset(0 -40px -40px -40px)}
/* single card */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(1){border-radius:14px;clip-path:none}

/* card 1 — intro */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(1){padding:1.35rem var(--a-px) 1.35rem calc(var(--a-px) + 82px + 1.6rem);min-height:102px;font-size:.98rem;line-height:1.7}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(1)::before{content:"";position:absolute;left:var(--a-px);top:50%;width:82px;height:82px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dcedfb'/%3E%3Cg transform='translate(18.200000000000003 18.200000000000003) scale(1.15)' fill='none' stroke='%231a7fd0' stroke-width='1.478' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='2.7'/%3E%3Ccircle cx='5.3' cy='10' r='2'/%3E%3Ccircle cx='18.7' cy='10' r='2'/%3E%3Cpath d='M7.6 19.5v-1.4a4.4 4.4 0 0 1 8.8 0v1.4z'/%3E%3Cpath d='M2.4 17.8v-.7a3 3 0 0 1 3-3M21.6 17.8v-.7a3 3 0 0 0-3-3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* card headings (icon + divider + title) */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2{margin:0;padding:var(--a-py) var(--a-px) 0 calc(var(--a-px) + 90px);font-size:1.65rem;line-height:1.2;font-weight:700;color:var(--a-title)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(n+4)::before{content:"";position:absolute;left:var(--a-px);top:var(--a-py);width:82px;height:54px;background:center/contain no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(6)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 54'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230a7ac4'/%3E%3Cstop offset='1' stop-color='%230a5b9a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='27' cy='27' r='27' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000001 13.200000000000001) scale(1.15)' fill='none' stroke='%23ffffff' stroke-width='1.478' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-6.1 7-11.6a7 7 0 0 0-14 0c0 5.5 7 11.6 7 11.6z'/%3E%3Ccircle cx='12' cy='9.6' r='2.5'/%3E%3C/g%3E%3Cpath d='M80 13V41' stroke='%23cfe3f1' stroke-width='2'/%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(8)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 54'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230a7ac4'/%3E%3Cstop offset='1' stop-color='%230a5b9a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='27' cy='27' r='27' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000001 13.200000000000001) scale(1.15)' fill='none' stroke='%23ffffff' stroke-width='1.478' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6l7-3z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/g%3E%3Cpath d='M80 13V41' stroke='%23cfe3f1' stroke-width='2'/%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(6),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(8){display:flex;align-items:center;min-height:calc(54px + var(--a-py) + .6rem);padding-bottom:.6rem;font-size:1.55rem}

/* card 2 — what we do */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(3),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(4){clip-path:none;box-shadow:12px 0 18px -10px rgba(10,80,130,.1),-12px 0 18px -10px rgba(10,80,130,.1)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(3)::before{content:"";position:absolute;left:var(--a-px);top:calc(1px - 1.98rem);width:82px;height:54px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 54'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230a7ac4'/%3E%3Cstop offset='1' stop-color='%230a5b9a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='27' cy='27' r='27' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000001 13.200000000000001) scale(1.15)' fill='none' stroke='%23ffffff' stroke-width='1.478' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='12' cy='12' r='.9'/%3E%3Cpath d='m12 12 7.4-7.4'/%3E%3Cpath d='M16.6 3.2v4.2h4.2'/%3E%3C/g%3E%3Cpath d='M80 4V50' stroke='%23cfe3f1' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(3){padding:.35rem var(--a-px) .8rem calc(var(--a-px) + 90px);font-size:.92rem;line-height:1.5;color:#2c4a5f}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul{counter-reset:obj;margin:0;padding:6px var(--a-px) .75rem calc(var(--a-px) + var(--ic) + var(--ic-gap))}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul::before{content:"";position:absolute;z-index:1;top:27px;bottom:.75rem;left:calc(var(--a-px) + var(--ic) + var(--ic-gap) + .55rem + 13px);border-left:2px dashed #b4d6ec;pointer-events:none}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li{counter-increment:obj;position:relative;margin:0 0 1.2rem;padding:.65rem 1.1rem .65rem 3.1rem;min-height:42px;border-radius:10px;background:#eef6fb}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:last-child{margin-bottom:0}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li::before{content:"";position:absolute;left:calc(-1 * (var(--ic) + var(--ic-gap)));top:50%;width:var(--ic);height:var(--ic);transform:translateY(-50%);background:center/contain no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:nth-child(5n+1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dcedfb'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%231a7fd0' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.3 5.8a5 5 0 0 0-7.1 0L12 7l-1.2-1.2a5 5 0 0 0-7.1 7.1L12 21l8.3-8.1a5 5 0 0 0 0-7.1z'/%3E%3Cpath d='M3.4 12.2h4.3l1.6-3 2.9 6 1.6-3h6.6'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:nth-child(5n+2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dff5e8'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%2317a355' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 15 2 2 4-4.2'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:nth-child(5n+3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23ebe6fa'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%237a4fd4' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Crect x='7.4' y='11' width='2.6' height='6' rx='.4'/%3E%3Crect x='12' y='7' width='2.6' height='10' rx='.4'/%3E%3Crect x='16.6' y='12.6' width='2.6' height='4.4' rx='.4'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:nth-child(5n+4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23fdefd9'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%23f29a12' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.1 8 4.6 4 4.6v13c4 0 6.4.5 8 2 1.6-1.5 4-2 8-2v-13c-4 0-6.4.5-8 2z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li:nth-child(5n+5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dcf4f6'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%230fa0a8' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='2.7'/%3E%3Ccircle cx='5.3' cy='10' r='2'/%3E%3Ccircle cx='18.7' cy='10' r='2'/%3E%3Cpath d='M7.6 19.5v-1.4a4.4 4.4 0 0 1 8.8 0v1.4z'/%3E%3Cpath d='M2.4 17.8v-.7a3 3 0 0 1 3-3M21.6 17.8v-.7a3 3 0 0 0-3-3'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li::after{content:counter(obj,decimal-leading-zero);position:absolute;z-index:2;left:.55rem;top:50%;display:grid;place-items:center;width:28px;height:28px;transform:translateY(-50%);border-radius:50%;background:#d9ecf9;border:1px solid #bcdcf1;color:var(--a-navy);font-weight:700;font-size:.74rem;line-height:1;letter-spacing:.02em}

/* pills that live inside a card: rounded rectangle drawn with gradients so the card keeps its own padding */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(5),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(7),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>:nth-child(9){--pc:#e3f3fc;--r:10px;
  border:solid transparent;border-width:0 var(--a-px) var(--a-py) var(--a-px);
  background:
    radial-gradient(circle at 100% 100%,var(--pc) 9.5px,transparent 10px) top left/var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 100%,var(--pc) 9.5px,transparent 10px) top right/var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 0,var(--pc) 9.5px,transparent 10px) bottom left/var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 0,var(--pc) 9.5px,transparent 10px) bottom right/var(--r) var(--r) no-repeat,
    linear-gradient(var(--pc),var(--pc)) var(--r) 0/calc(100% - 2 * var(--r)) 100% no-repeat,
    linear-gradient(var(--pc),var(--pc)) 0 var(--r)/100% calc(100% - 2 * var(--r)) no-repeat,
    linear-gradient(var(--a-card),var(--a-card));
  background-clip:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box}

/* note under the list */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(5){padding:.8rem 1.1rem .8rem calc(1.1rem + 34px + 1.2rem + 2px + 1rem)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(5)::before{content:"";position:absolute;left:1.1rem;top:.8rem;bottom:.8rem;width:calc(34px + 1.2rem + 2px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='17' fill='%230a6dc2'/%3E%3Cg transform='translate(5.0 5.0) scale(1.0)' fill='none' stroke='%23ffffff' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.4' r='1.15' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M12 11v6'/%3E%3C/g%3E%3C/svg%3E") left center/34px 34px no-repeat,linear-gradient(#b9d9ee,#b9d9ee) right center/2px 100% no-repeat}

/* card 3 — offices (two columns) */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7){--pc:#eef6fb;display:grid;grid-template-columns:66px minmax(0,1fr) 66px minmax(0,1fr);column-gap:1rem;padding:.8rem 1rem;
  background-image:
    linear-gradient(#c6dbe8,#c6dbe8),
    radial-gradient(circle at 100% 100%,var(--pc) 9.5px,transparent 10px),radial-gradient(circle at 0 100%,var(--pc) 9.5px,transparent 10px),
    radial-gradient(circle at 100% 0,var(--pc) 9.5px,transparent 10px),radial-gradient(circle at 0 0,var(--pc) 9.5px,transparent 10px),
    linear-gradient(var(--pc),var(--pc)),linear-gradient(var(--pc),var(--pc)),linear-gradient(var(--a-card),var(--a-card));
  background-position:50% 50%,top left,top right,bottom left,bottom right,var(--r) 0,0 var(--r),0 0;
  background-size:1px calc(100% - 1.6rem),var(--r) var(--r),var(--r) var(--r),var(--r) var(--r),var(--r) var(--r),calc(100% - 2 * var(--r)) 100%,100% calc(100% - 2 * var(--r)),auto;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-clip:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::before,main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::after{content:"";grid-row:1 / span 2;align-self:center;width:66px;height:66px;background:center/contain no-repeat}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::before{grid-column:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dcedfb'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%231a7fd0' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='10' height='17' rx='1'/%3E%3Cpath d='M15 9h4v11.5h-4'/%3E%3Cpath d='M8.5 7.5h3M8.5 11h3M8.5 14.5h3M3 20.5h18'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::after{grid-column:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32.0' cy='32.0' r='32.0' fill='%23dff5e8'/%3E%3Cg transform='translate(17.0 17.0) scale(1.25)' fill='none' stroke='%2317a355' stroke-width='1.360' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s7-6.1 7-11.6a7 7 0 0 0-14 0c0 5.5 7 11.6 7 11.6z'/%3E%3Ccircle cx='12' cy='9.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E")}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)>strong{align-self:end;font-size:.95rem}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)>strong:nth-of-type(1){grid-column:2;grid-row:1}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)>strong:nth-of-type(2){grid-column:4;grid-row:1}

/* card 4 — independence and funding */
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(9){--pc:#e4f8f5;padding:.8rem 1.1rem .8rem calc(1.1rem + 32px + 1.1rem + 2px + 1rem)}
main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(9)::before{content:"";position:absolute;left:1.1rem;top:.8rem;bottom:.8rem;width:calc(32px + 1.1rem + 2px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%2318a96a' stroke-width='1.700' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.2C5 11 10.2 5.6 19.4 4.6c0 9.2-5.4 14.4-13.6 14.4'/%3E%3Cpath d='M5 19.2c3-5.4 6.2-8.4 10.4-10.4'/%3E%3C/g%3E%3C/svg%3E") left center/32px 32px no-repeat,linear-gradient(#bfe6dc,#bfe6dc) right center/2px 100% no-repeat}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  main:has(.side-nav a[href="/about"][aria-current="page"])::before,main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::before{display:none}
  main:has(.side-nav a[href="/about"][aria-current="page"])::after{width:320px;background-size:320px auto;opacity:.7}
}
@media (max-width:860px){
  main:has(.side-nav a[href="/about"][aria-current="page"]) .layout-side{grid-template-columns:minmax(0,1fr)}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .side-nav ul{display:flex;flex-wrap:wrap;min-height:0;padding:.6rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::after{opacity:.55}
}
@media (max-width:640px){
  main:has(.side-nav a[href="/about"][aria-current="page"]){--ic:42px;--ic-gap:.7rem;--a-px:1rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head{min-height:0;padding:1.2rem 0 1rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .page-head::after{display:none}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(1){min-height:0;padding-left:calc(var(--a-px) + 56px + 1rem)}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(1)::before{width:56px;height:56px}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2{padding-left:calc(var(--a-px) + 58px);font-size:1.3rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(n+4)::before{width:58px;height:40px;top:calc(var(--a-py) + 7px);background-position:left center;background-size:auto 100%}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(3)::before{width:58px;height:40px;top:calc(1px - 1.69rem + 7px);background-position:left center;background-size:auto 100%}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(6),main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>h2:nth-child(8){font-size:1.3rem;min-height:calc(54px + var(--a-py) + .6rem)}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(3){padding-left:var(--a-px)}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul::before{display:none}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>ul>li{padding-left:2.9rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7){grid-template-columns:52px minmax(0,1fr);row-gap:.2rem;column-gap:.8rem}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::before,main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::after{width:52px;height:52px}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::before{grid-row:1 / span 2}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)::after{grid-column:1;grid-row:3 / span 2}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)>strong:nth-of-type(1){grid-column:2;grid-row:1}
  main:has(.side-nav a[href="/about"][aria-current="page"]) .prose>p:nth-child(7)>strong:nth-of-type(2){grid-column:2;grid-row:3}
}


/* =====================================================================================================
   BACRS — Research Ethics pages redesign (CSS only). Paste at the very end of public/css/app.css.
   Applies to all /research-ethics/* pages (the ones that show the "In this section" side menu).
   Works with the EXISTING markup — no HTML / JS / content change.
   Background art: /static/img/ethics/{hero-photo,waves-left,waves-right,emblem}
   ===================================================================================================== */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]){--e-navy:#0b4474;--e-title:#12527f;--e-text:#26475f;--t-blue:#ecf6fd;--t-green:#ecf8f5;--t-purple:#f0f0fb;--e-px:2rem;--e-py:1rem;
  position:relative;isolation:isolate;background:linear-gradient(180deg,#f3f9fe,#e6f3fc 60%,#e1effa)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])+.site-footer{margin-top:0}

/* ---------- page background art ---------- */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::before,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::before{left:0;top:0;width:408px;height:803px;max-height:100%;background-image:url(/static/img/ethics/waves-left.jpg);background-size:408px auto;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent),linear-gradient(to bottom,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 62%,transparent),linear-gradient(to bottom,#000 70%,transparent);mask-composite:intersect}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::after{right:0;bottom:0;width:396px;height:631px;max-height:calc(100% - 172px);background-image:url(/static/img/ethics/waves-right.jpg);background-position:right bottom;background-size:396px auto;-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent),linear-gradient(to top,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 62%,transparent),linear-gradient(to top,#000 70%,transparent);mask-composite:intersect}

/* ---------- hero ---------- */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head{position:relative;overflow:hidden;isolation:isolate;min-height:172px;padding:1.1rem 0 1.2rem;border-bottom:0;background:transparent}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:718px;background:url(/static/img/ethics/hero-photo.jpg) right top/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%);pointer-events:none}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head .container{position:relative}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs{font-size:.82rem;font-weight:600;color:#0b5a8f}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs ol{align-items:center;gap:.5rem}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs a{color:#0b5a8f;text-decoration:none}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs a:hover{text-decoration:underline}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs li:first-child::before{content:"";display:inline-block;width:.95rem;height:.95rem;margin-right:.4rem;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E") center/contain no-repeat}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .breadcrumbs li+li::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.5rem;background:#8aa9c0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1{margin:.6rem 0 0;padding-left:118px;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.15;font-weight:700;color:var(--e-title)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1::after{content:"Ethical research for a healthier tomorrow — guided by integrity, accountability and the highest standards.";display:block;max-width:31rem;margin-top:.4rem;font:400 .98rem/1.5 var(--font);color:#2a5876}
html[lang="bn"] main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1::after{content:"একটি সুস্থ আগামীর জন্য নৈতিক গবেষণা — সততা, দায়বদ্ধতা এবং সর্বোচ্চ মানদণ্ডে পরিচালিত।"}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head .container::before{content:"";position:absolute;left:16px;top:2.35rem;width:98px;height:98px;border-radius:22px;background:url(/static/img/ethics/emblem.png) center/cover;box-shadow:0 8px 20px rgba(20,90,140,.14)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head .container::after{content:"";display:block;width:52px;height:3px;margin:.65rem 0 0 134px;border-radius:3px;background:linear-gradient(90deg,#19a8b4,#0b7aa5)}

/* ---------- layout ---------- */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .content{padding-top:.3rem;padding-bottom:3rem}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .layout-side{grid-template-columns:310px minmax(0,1fr);gap:1rem;align-items:start}

/* ---------- side menu ---------- */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav ul{padding:.75rem;border:0;border-radius:14px;background:#fff;box-shadow:0 8px 30px rgba(20,90,140,.08)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav li{position:relative}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav li::after{content:"";position:absolute;left:2.3rem;right:.7rem;bottom:0;height:1px;background:#e4edf5}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav li:has(>a[aria-current=page])::after,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav li:last-child::after{display:none}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a{display:flex;align-items:center;gap:.65rem;padding:.42rem .7rem;border:0;border-bottom:0;border-radius:7px;font-size:.8rem;line-height:1.35;font-weight:500;color:#2a6a96}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a:hover{background:#eef6fc;color:var(--e-navy)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center/contain no-repeat}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;background:currentColor;opacity:.65;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[aria-current=page]{padding:.58rem .7rem;background:linear-gradient(90deg,#0a7599,#0b8aa6);color:#fff;font-weight:700;box-shadow:0 4px 10px rgba(10,117,153,.25)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[aria-current=page]::after{opacity:1}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/about"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/scope"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/procedure"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/guidelines"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/required-documents"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/informed-consent"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/vulnerable-participants"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-4 3.1-6.2 7-6.2s7 2.2 7 6.2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-4 3.1-6.2 7-6.2s7 2.2 7 6.2z'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/review-categories"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 19.5c0-3.6 2.8-5.6 6.2-5.6s6.2 2 6.2 5.6z'/%3E%3Cpath d='M15.5 5a3.2 3.2 0 0 1 0 6M17.5 14.2c2.4.5 3.9 2.3 3.9 5.3h-3.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 19.5c0-3.6 2.8-5.6 6.2-5.6s6.2 2 6.2 5.6z'/%3E%3Cpath d='M15.5 5a3.2 3.2 0 0 1 0 6M17.5 14.2c2.4.5 3.9 2.3 3.9 5.3h-3.4'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/fees"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/meeting-schedule"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/timeline"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/amendments"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19 9.2a2.1 2.1 0 0 0-3-3L5.2 17 4 20z'/%3E%3Cpath d='M14 8l3 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19 9.2a2.1 2.1 0 0 0-3-3L5.2 17 4 20z'/%3E%3Cpath d='M14 8l3 3'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/continuing-review"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/sae-reporting"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 21 19.5H3z'/%3E%3Cpath d='M12 10v4.4M12 17v.1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 21 19.5H3z'/%3E%3Cpath d='M12 10v4.4M12 17v.1'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/protocol-deviations"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/research-misconduct"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/conflict-of-interest"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/confidentiality"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/complaints-appeals"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/composition"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 19.5c0-3.6 2.8-5.6 6.2-5.6s6.2 2 6.2 5.6z'/%3E%3Cpath d='M15.5 5a3.2 3.2 0 0 1 0 6M17.5 14.2c2.4.5 3.9 2.3 3.9 5.3h-3.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 19.5c0-3.6 2.8-5.6 6.2-5.6s6.2 2 6.2 5.6z'/%3E%3Cpath d='M15.5 5a3.2 3.2 0 0 1 0 6M17.5 14.2c2.4.5 3.9 2.3 3.9 5.3h-3.4'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/terms-of-reference"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .side-nav a[href$="/research-ethics/sop"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}

/* ---------- article = white card holding tinted boxes (box = h2 + the elements that follow it) ---------- */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose{max-width:none;padding:.8rem 1rem 1rem;border-radius:14px;background:#fff;box-shadow:0 8px 30px rgba(20,90,140,.08)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>*{margin:-1px 0 0;padding:.3rem calc(var(--e-px) + 5rem) .3rem var(--e-px);background:var(--bx,var(--t-blue));border:0;border-radius:0;font-size:.93rem;line-height:1.55;color:var(--e-text)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose strong{color:#0a3e69}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose a{color:#0b6aa8}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr{display:none}
/* box colours: intro blue, then green, purple, blue … */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(1),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(1)~*{--bx:var(--t-green)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(2),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(2)~*{--bx:var(--t-purple)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(3),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(3)~*{--bx:var(--t-blue)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(4),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(4)~*{--bx:var(--t-green)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(5),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(5)~*{--bx:var(--t-purple)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(6),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(6)~*{--bx:var(--t-blue)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(7),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(7)~*{--bx:var(--t-green)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(8),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(8)~*{--bx:var(--t-purple)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(9),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(9)~*{--bx:var(--t-blue)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(10),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(10)~*{--bx:var(--t-green)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(11),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(11)~*{--bx:var(--t-purple)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(12),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2:nth-of-type(12)~*{--bx:var(--t-blue)}
/* box starts / ends */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:first-child{margin-top:0}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:first-child,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p+*{margin-top:.75rem;border-top-left-radius:12px;border-top-right-radius:12px;padding-top:.9rem}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:first-child{margin-top:0}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:last-child,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:has(+h2),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>:has(+hr),main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p{border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding-bottom:1.05rem}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h2{padding-top:1rem;padding-bottom:.1rem;font-size:1.4rem;line-height:1.25;font-weight:700;color:var(--e-title)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h3,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>h4{font-size:1.02rem;color:var(--e-navy)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>ul,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>ol{padding-left:calc(var(--e-px) + 1.4rem)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>ul>li::marker,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>ol>li::marker{color:#19a8b4;font-weight:700}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>blockquote{border-radius:0;box-shadow:inset 4px 0 0 #7fb6dc;font-style:normal}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>.table-wrap,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>.grid,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>.notice{padding-right:var(--e-px)}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>.notice{box-shadow:inset 4px 0 0 #7fb6dc}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>.grid .card{background:rgba(255,255,255,.7);border-color:#d6e6f2}
/* the italic disclaimer paragraph (everything after the "---") becomes the quote box */
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p:nth-child(n){--bx:#e8f2fb;position:relative;padding:1.1rem var(--e-px) 1.1rem 5.3rem;font-size:.78rem;line-height:1.6;font-style:italic;color:#2b5170}
main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p::before{content:"";position:absolute;left:1.3rem;top:1.1rem;width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23d3e8f8'/%3E%3Cg fill='%231d7ac8'%3E%3Ccircle cx='14.5' cy='24' r='4.4'/%3E%3Ccircle cx='26.5' cy='24' r='4.4'/%3E%3Cpath d='M10.1 24c0-6.4 2.8-9.8 8-11l.8 2.4c-2.7 1-3.9 2.7-4 5.6z'/%3E%3Cpath d='M22.1 24c0-6.4 2.8-9.8 8-11l.8 2.4c-2.7 1-3.9 2.7-4 5.6z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::before,main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"])::after{display:none}
}
@media (max-width:860px){
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .layout-side{grid-template-columns:minmax(0,1fr)}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head::after{opacity:.5}
}
@media (max-width:640px){
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]){--e-px:1.1rem}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head{min-height:0}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head::after{display:none}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1{font-size:1.45rem}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1::after{font-size:.88rem}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head .container::before{display:none}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head h1{padding-left:0}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .page-head .container::after{margin-left:0}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose{padding:.6rem}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>*{padding-right:var(--e-px)}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p:nth-child(n){padding-left:4.2rem}
  main:has(.side-nav a[href^="/research-ethics/"][aria-current="page"]) .prose>hr+p::before{left:.9rem;width:34px;height:34px}
}

/* Member profile page: no labels, no "View Profile" bar */
.container.content>.card.member-card::after{content:none!important;display:none!important}
.pv-info{margin:.9rem 0 .4rem}
.pv-info p{margin:0 0 .45rem;font-size:1.05rem;color:#14232b}
.pv-info a{color:#14232b}

/* Member profile page: hide ALL labels (keep values) and the "View Profile" bar */
.container.content>.card.member-card dl.kv{display:block}
.container.content>.card.member-card dl.kv dt{display:none}
.container.content>.card.member-card dl.kv dd{margin:0 0 .5rem;font-size:1.05rem}
.container.content>.card.member-card::after{content:none!important;display:none!important}



/* ===== Member profile page: beautiful profile card (only this page; /members cards untouched) ===== */
.container.content>.card.member-card{--pc1:#1f4a7c;--pc2:#2d5a91;--pc3:#2899b5;
  display:block!important;position:relative;max-width:760px;margin:2.5rem auto 1rem!important;padding:0 2rem 2.2rem!important;overflow:hidden;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:24px!important;background:#fff!important;text-align:center;
  box-shadow:0 22px 60px rgba(11,58,99,.18)!important}
.container.content>.card.member-card::before{content:""!important;display:block!important;position:static!important;
  height:170px!important;margin:0 -2rem!important;border-radius:0!important;
  background:radial-gradient(circle at 18% 120%,rgba(255,255,255,.28) 0 22%,transparent 23%),
             radial-gradient(circle at 82% -10%,rgba(255,255,255,.22) 0 26%,transparent 27%),
             linear-gradient(135deg,var(--pc1),var(--pc2) 55%,var(--pc3))!important}
.container.content>.card.member-card::after{content:none!important;display:none!important}
.container.content>.card.member-card>.avatar{display:flex!important;align-items:center;justify-content:center;
  width:150px!important;height:150px!important;margin:-78px auto 1rem!important;border:6px solid #fff!important;border-radius:50%!important;
  object-fit:cover;object-position:center top;background:linear-gradient(135deg,#2d5a91,#2899b5)!important;color:#fff!important;
  font:700 3.4rem/1 var(--serif)!important;box-shadow:0 10px 28px rgba(11,58,99,.28)!important;position:relative;z-index:2}
.container.content>.card.member-card>.grow{display:block;width:100%}
.container.content>.card.member-card .badge.ok{display:inline-block;padding:.4rem 1rem;border-radius:999px;background:#e4f6ec;color:#0c6b3b;border:1px solid #b9e6cb;font-weight:700;font-size:.82rem;letter-spacing:.02em}
.container.content>.card.member-card dl.kv{display:block!important;margin:1.4rem 0 0!important}
.container.content>.card.member-card dl.kv dt{display:none!important}
.container.content>.card.member-card dl.kv dd{margin:0 0 .55rem!important;font-size:1.05rem;color:#34404f}
.container.content>.card.member-card dl.kv dd:first-of-type{font:700 1.3rem/1.35 var(--serif);color:#b08d4a}
.container.content>.card.member-card dl.kv dd a{display:inline-block;margin-top:.5rem;padding:.55rem 1.2rem;border-radius:999px;background:#eef5fb;color:#1f4a7c;text-decoration:none;font-weight:600;font-size:.95rem;word-break:break-all}
.container.content>.card.member-card dl.kv dd a:hover{background:#1f4a7c;color:#fff}
.container.content>.card.member-card h2{margin:1.8rem 0 .5rem;font-size:1.15rem;color:#0f2b4a}
.container.content>.card.member-card h2+p,.container.content>.card.member-card .prose{text-align:left;color:#34404f}
@media (max-width:560px){.container.content>.card.member-card{padding:0 1.2rem 1.8rem!important;margin-top:1.5rem!important}
  .container.content>.card.member-card::before{margin:0 -1.2rem!important;height:130px!important}
  .container.content>.card.member-card>.avatar{width:120px!important;height:120px!important;margin-top:-64px!important}}


/* ===== Search page + results (CSS only, no content change) ===== */
main:has(.content>form.filters[action="/search"]){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/members-bg.jpg) center top/cover no-repeat fixed,
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
.page-head:has(+ .content>form.filters[action="/search"]){background:transparent;border:0;padding:2.2rem 0 .6rem}
.page-head:has(+ .content>form.filters[action="/search"]) h1{font:700 clamp(2rem,4vw,2.8rem)/1.15 var(--serif);color:#0b3a63;margin:.4rem 0 0;display:flex;align-items:center;gap:1rem}
.page-head:has(+ .content>form.filters[action="/search"]) h1::before{content:"";flex:none;width:60px;height:60px;border-radius:16px;background:#2899b5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:0 8px 20px rgba(40,153,181,.35)}

/* search bar */
.content>form.filters[action="/search"]{display:flex;align-items:center;gap:.8rem;flex-wrap:nowrap;padding:.7rem .7rem .7rem 1.4rem;margin:.6rem 0 2rem;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid #fff;box-shadow:0 14px 36px rgba(11,58,99,.14)}
.content>form.filters[action="/search"] .field{flex:1;margin:0}
.content>form.filters[action="/search"] .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.content>form.filters[action="/search"] input{width:100%;min-width:0;padding:.8rem .4rem;border:0!important;background:transparent!important;box-shadow:none!important;font-size:1.05rem;color:#14232b;outline:none}
.content>form.filters[action="/search"] .btn{flex:none;padding:.85rem 1.8rem;border:0;border-radius:999px;background:linear-gradient(135deg,#1488b8,#19b6c8);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(20,136,184,.3);transition:transform .2s}
.content>form.filters[action="/search"] .btn:hover{transform:translateY(-2px)}

/* result groups */
.content:has(>form.filters[action="/search"])>h2{display:inline-block;margin:1.6rem 0 .7rem;padding:.35rem 1rem;border-radius:999px;background:#1f4a7c;color:#fff;font:700 .85rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase}
.content:has(>form.filters[action="/search"])>h2+ul{list-style:none;margin:0;padding:.4rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.93);border:1px solid #fff;box-shadow:0 12px 32px rgba(11,58,99,.1)}
.content:has(>form.filters[action="/search"])>h2+ul>li{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;padding:.9rem 0;border-bottom:1px solid #e6eef5}
.content:has(>form.filters[action="/search"])>h2+ul>li:last-child{border-bottom:0}
.content:has(>form.filters[action="/search"])>h2+ul>li>a{font:700 1.05rem/1.4 var(--serif);color:#0b5a85;text-decoration:none}
.content:has(>form.filters[action="/search"])>h2+ul>li>a::after{content:" \203A";color:#b08d4a}
.content:has(>form.filters[action="/search"])>h2+ul>li>a:hover{color:#1488b8;text-decoration:underline}
.content:has(>form.filters[action="/search"])>h2+ul .muted{color:#6b7684}
.content:has(>form.filters[action="/search"])>h2+.table-wrap{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.93);border:1px solid #fff;box-shadow:0 12px 32px rgba(11,58,99,.1)}
.content:has(>form.filters[action="/search"])>.notice{border:1px solid #fff;border-left:5px solid #2899b5;border-radius:14px;background:rgba(255,255,255,.93);padding:1.2rem 1.4rem;font-size:1.05rem;box-shadow:0 12px 32px rgba(11,58,99,.1)}
.content:has(>form.filters[action="/search"])>p.muted{display:inline-block;padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.9);color:#46607a}
@media (max-width:560px){.content>form.filters[action="/search"]{padding:.5rem .5rem .5rem 1rem}.content>form.filters[action="/search"] .btn{padding:.8rem 1.1rem}}



/* ===== Researchers page (CSS only, no content change) ===== */
main:has(.content form.filters #area){
  background:
    linear-gradient(rgba(246,251,254,.35),rgba(246,251,254,.35)),
    url(/static/img/members-bg.jpg) center top/cover no-repeat fixed,
    linear-gradient(135deg,#e6f2fa,#f8fcfe 55%,#e0eef8)}
.page-head:has(+ .content form.filters #area){background:transparent;border:0;padding:2.2rem 0 .4rem}
.page-head:has(+ .content form.filters #area) h1{display:flex;align-items:center;gap:1rem;margin:.4rem 0 0;font:700 clamp(2rem,4vw,2.8rem)/1.15 var(--serif);color:#0b3a63}
.page-head:has(+ .content form.filters #area) h1::before{content:"";flex:none;width:60px;height:60px;border-radius:16px;background:#2899b5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:0 8px 20px rgba(40,153,181,.35)}
.page-head:has(+ .content form.filters #area) .muted{color:#46607a;font-size:1.02rem}

/* filter bar */
.content form.filters:has(#area){display:grid;grid-template-columns:2fr 1.2fr 1.2fr auto;gap:.9rem;align-items:end;padding:1.1rem 1.2rem;margin:.8rem 0 1.2rem;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid #fff;box-shadow:0 14px 36px rgba(11,58,99,.14)}
.content form.filters:has(#area) .field{margin:0;min-width:0}
.content form.filters:has(#area) label{display:block;margin:0 0 .35rem;font-size:.82rem;font-weight:700;letter-spacing:.03em;color:#0b5a85}
.content form.filters:has(#area) input,.content form.filters:has(#area) select{width:100%;min-width:0;padding:.75rem 1rem;border:1.5px solid #cfdfea;border-radius:12px;background:#fff;font-size:.95rem;color:#14232b}
.content form.filters:has(#area) input:focus,.content form.filters:has(#area) select:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 4px rgba(20,136,184,.16)}
.content form.filters:has(#area) .btn{padding:.8rem 1.8rem;border:0;border-radius:999px;background:linear-gradient(135deg,#1488b8,#19b6c8);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(20,136,184,.3)}
.content:has(form.filters #area)>p.muted{display:inline-block;margin:0 0 1.2rem;padding:.45rem 1rem;border-radius:999px;background:rgba(255,255,255,.9);color:#46607a;font-weight:600}
.content:has(form.filters #area)>.notice{border:1px solid #fff;border-left:5px solid #2899b5;border-radius:14px;background:rgba(255,255,255,.93);padding:1.2rem 1.4rem;box-shadow:0 12px 32px rgba(11,58,99,.1)}

/* researcher cards */
.content:has(form.filters #area)>.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(16px,2vw,26px)}
.content:has(form.filters #area)>.grid>a.card{--c1:#2d5a91;--c2:#3f74ad;--c3:#1f4a7c;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:112px 1.4rem 1.5rem!important;overflow:hidden;border:1px solid #e3e8ef;border-radius:20px;background:#fff;text-decoration:none;color:#34404f;box-shadow:0 6px 20px rgba(20,40,80,.08);transition:transform .25s,box-shadow .25s,border-color .25s}
.content:has(form.filters #area)>.grid>a.card:nth-child(4n+2){--c1:#2e8c80;--c2:#4ba797;--c3:#2a7f73}
.content:has(form.filters #area)>.grid>a.card:nth-child(4n+3){--c1:#6a5bc4;--c2:#8878d9;--c3:#5b4bb5}
.content:has(form.filters #area)>.grid>a.card:nth-child(4n+4){--c1:#2899b5;--c2:#48b6cc;--c3:#1f87a3}
.content:has(form.filters #area)>.grid>a.card::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:radial-gradient(circle at 15% 130%,rgba(255,255,255,.3) 0 24%,transparent 25%),radial-gradient(circle at 90% -20%,rgba(255,255,255,.25) 0 28%,transparent 29%),linear-gradient(135deg,var(--c3),var(--c1) 55%,var(--c2))}
.content:has(form.filters #area)>.grid>a.card::after{content:"";position:absolute;left:50%;top:44px;width:72px;height:72px;margin-left:-36px;border-radius:50%;border:4px solid #fff;box-shadow:0 8px 20px rgba(11,58,99,.22);background:var(--c1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E") center/34px no-repeat}
.content:has(form.filters #area)>.grid>a.card:hover{transform:translateY(-6px);border-color:#b08d4a;box-shadow:0 18px 38px rgba(20,40,80,.18)}
.content:has(form.filters #area)>.grid>a.card h2{margin:.9rem 0 .35rem;font:700 1.15rem/1.3 var(--serif);color:#0f2b4a;text-transform:none}
.content:has(form.filters #area)>.grid>a.card .muted{margin:0 0 .8rem;color:#b08d4a;font-weight:700;font-size:.93rem}
.content:has(form.filters #area)>.grid>a.card .small{margin:auto 0 0;padding:.5rem .9rem;border-radius:12px;background:#eef5fb;color:#1f4a7c;font-size:.85rem;line-height:1.45}
@media (max-width:1000px){.content:has(form.filters #area)>.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.content form.filters:has(#area){grid-template-columns:1fr 1fr}}
@media (max-width:620px){.content:has(form.filters #area)>.grid{grid-template-columns:1fr!important}.content form.filters:has(#area){grid-template-columns:1fr}}

/* =====================================================================================================
   BACRS — Verify pages (/verify, /verify-membership and their result pages) — CSS only.
   Paste at the very END of public/css/app.css. No HTML / JS / content change.
   Uses images that already exist: /static/img/ethics/{hero-photo,waves-left,waves-right}.jpg
   ===================================================================================================== */

/* ---------- page background ---------- */
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)){position:relative;isolation:isolate;overflow:hidden;padding-bottom:4.5rem;
  background:radial-gradient(circle at 100% 0,rgba(130,195,235,.45),transparent 42%),radial-gradient(ellipse at 0 100%,rgba(110,190,230,.35),transparent 50%),linear-gradient(180deg,#eaf4fb,#f7fbfe 55%,#e3f0fa)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))+.site-footer{margin-top:0}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::before,main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::before{left:0;top:0;width:408px;height:803px;max-height:100%;background:url(/static/img/ethics/waves-left.jpg) left top/408px auto no-repeat;opacity:.8;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,#000 65%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,#000 65%,transparent);mask-composite:intersect}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::after{right:0;bottom:0;width:396px;height:631px;max-height:calc(100% - 170px);background:url(/static/img/ethics/waves-right.jpg) right bottom/396px auto no-repeat;opacity:.8;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to top,#000 65%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to top,#000 65%,transparent);mask-composite:intersect}

/* ---------- banner ---------- */
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head{position:relative;overflow:hidden;isolation:isolate;min-height:168px;padding:1.8rem 0 1.2rem;border-bottom:0;background:transparent}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:640px;background:url(/static/img/ethics/hero-photo.jpg) right top/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(to bottom,#000 62%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(to bottom,#000 62%,transparent);mask-composite:intersect;pointer-events:none}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .breadcrumbs{font-size:.84rem;font-weight:600}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head h1{display:flex;align-items:center;gap:1.1rem;margin:.7rem 0 0;color:#0b3a63;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head h1::before{content:"";flex:none;width:68px;height:68px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a93c4'/%3E%3Cstop offset='1' stop-color='%230b6a99'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='36.0' cy='36.0' r='36.0' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000003 13.200000000000003) scale(1.9)' fill='none' stroke='%23ffffff' stroke-width='1.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6l7-3z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;box-shadow:0 0 0 6px rgba(255,255,255,.7),0 10px 24px rgba(20,136,184,.28)}
main:has(section form[action="/verify-membership"]) .page-head h1::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a93c4'/%3E%3Cstop offset='1' stop-color='%230b6a99'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='36.0' cy='36.0' r='36.0' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000003 13.200000000000003) scale(1.9)' fill='none' stroke='%23ffffff' stroke-width='1.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M5.8 16.2c.4-1.6 1.6-2.4 3.2-2.4s2.8.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/g%3E%3C/svg%3E")}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head p.muted{margin:.5rem 0 0 86px;max-width:56ch;color:#3d5568;font-size:1rem}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head p.muted::after{content:"";display:block;width:46px;height:3px;margin-top:.8rem;border-radius:3px;background:linear-gradient(90deg,#19a8b4,#0b7aa5)}

/* ====================================================================================================
   1) THE FORM PAGE
   ==================================================================================================== */
section.content:has(form:is([action="/verify"],[action="/verify-membership"])){max-width:680px;padding-top:3.2rem}
section.content:has(form:is([action="/verify"],[action="/verify-membership"])) .w-sm{max-width:none;display:flex;flex-direction:column}

/* the card */
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card{position:relative;padding:3.9rem 2.2rem 2rem;border-radius:24px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 46px rgba(11,58,99,.14)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:13px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#1d7fae 0,#5bb3d6 24%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,#8fd0e6 76%,#bfe4f2 100%)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card::after{content:"";position:absolute;left:50%;top:-36px;width:72px;height:72px;margin-left:-36px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Ccircle cx='34' cy='34' r='34' fill='%23fff'/%3E%3Cg transform='translate(15.399999999999999 15.399999999999999) scale(1.55)' fill='none' stroke='%231488b8' stroke-width='1.226' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='14' y='3.5' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='3.5' y='14' width='6.5' height='6.5' rx='1.2'/%3E%3Cpath d='M14 14h3v3h-3zM20.5 14v.1M14 20.5h.1M17.5 17.5h3v3'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;border:7px solid #f2f8fd;box-shadow:0 -4px 14px rgba(20,136,184,.14),0 8px 18px rgba(20,136,184,.16)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .field{margin:0 0 1.2rem}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .field label{display:block;margin-bottom:.45rem;color:#1b3a57;font-size:.9rem;font-weight:700;letter-spacing:.02em}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .field input{width:100%;height:56px;padding:0 1rem 0 3.1rem;border:1.5px solid #cfe0ec;border-radius:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%237fa0b5' stroke-width='2.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/g%3E%3C/svg%3E") 1.05rem center/20px 20px no-repeat;color:#0b3a63;font:600 1.05rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;transition:border-color .2s,box-shadow .2s}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .field input::placeholder{color:#a3b8c6;font-weight:400;letter-spacing:.02em}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .field input:focus{outline:none;border-color:#1488b8;box-shadow:0 0 0 5px rgba(20,136,184,.16)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .btn{display:flex;width:100%;align-items:center;justify-content:center;gap:.65rem;height:54px;padding:0 1.4rem;border:0;border-radius:14px;background:linear-gradient(90deg,#0b6a99,#1f86b5);color:#fff;font-size:1rem;font-weight:700;letter-spacing:.02em;box-shadow:0 8px 20px rgba(11,106,153,.32);transition:transform .2s,box-shadow .2s}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .btn::before{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%23ffffff' stroke-width='2.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6l7-3z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,106,153,.42)}

/* error message */
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .flash.error{display:flex;align-items:center;gap:.7rem;margin:0 0 1.2rem;padding:.85rem 1.1rem;border:1px solid #f1c3c3;border-radius:14px;background:#fff1f1;color:#9b1c1c;font-weight:600;box-shadow:0 6px 16px rgba(155,28,28,.08)}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .flash.error::before{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%239b1c1c' stroke-width='2.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2M12 16.2v.1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* privacy note + switch link */
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p.small.muted{position:relative;margin:1.4rem 0 .9rem;padding:.85rem 1.1rem .85rem 3.1rem;border:1px solid #d6e8f3;border-radius:14px;background:rgba(255,255,255,.75);color:#3d5568;font-size:.86rem;line-height:1.55}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p.small.muted::before{content:"";position:absolute;left:1.05rem;top:.95rem;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%231488b8' stroke-width='1.900' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6l7-3z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child{margin:0;text-align:center}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child a{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.2rem;border:1.5px solid #bcd9ea;border-radius:999px;background:#fff;color:#0b4a6f;font-weight:600;font-size:.92rem;text-decoration:none;box-shadow:0 4px 12px rgba(11,58,99,.08);transition:transform .2s,box-shadow .2s,border-color .2s}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child a::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%231488b8' stroke-width='2.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child a:hover{transform:translateY(-2px);border-color:#1488b8;box-shadow:0 8px 18px rgba(11,58,99,.14)}

/* ====================================================================================================
   2) THE RESULT PAGE
   ==================================================================================================== */
section.content:has(.verify-box){max-width:840px;padding-top:2.4rem}
section.content:has(.verify-box)>.w-md{max-width:none}

/* verdict card */
main:has(section .verify-box) .verify-box{--vb:#0b8a4b;--vb-bg:#e4f7ec;--vb-line:#b7e3c9;--vb-glow:rgba(23,163,85,.2);
  position:relative;overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:1.6rem;align-items:center;padding:1.8rem 2rem;border:1px solid var(--vb-line);border-radius:24px;background:linear-gradient(120deg,var(--vb-bg),#fff 78%);box-shadow:0 20px 48px var(--vb-glow)}
main:has(section .verify-box) .verify-box.invalid{--vb:#b3261e;--vb-bg:#fdeceb;--vb-line:#f2c2be;--vb-glow:rgba(179,38,30,.16)}
main:has(section .verify-box) .verify-box.warn{--vb:#a56d00;--vb-bg:#fff3d6;--vb-line:#f0d78f;--vb-glow:rgba(208,138,0,.18)}
main:has(section .verify-box) .verify-box::before{content:"";grid-row:1 / span 3;width:96px;height:96px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232fbf78'/%3E%3Cstop offset='1' stop-color='%230b8a4b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='48.0' cy='48.0' r='48.0' fill='url(%23g)'/%3E%3Cg transform='translate(20.400000000000002 20.400000000000002) scale(2.3)' fill='none' stroke='%23ffffff' stroke-width='0.957' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;box-shadow:0 0 0 9px rgba(255,255,255,.75),0 0 0 10px var(--vb-line),0 14px 28px var(--vb-glow)}
main:has(section .verify-box) .verify-box.invalid::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ea5c55'/%3E%3Cstop offset='1' stop-color='%23b3261e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='48.0' cy='48.0' r='48.0' fill='url(%23g)'/%3E%3Cg transform='translate(22.799999999999997 22.799999999999997) scale(2.1)' fill='none' stroke='%23ffffff' stroke-width='1.048' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/g%3E%3C/svg%3E")}
main:has(section .verify-box) .verify-box.warn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6bc3c'/%3E%3Cstop offset='1' stop-color='%23d08a00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='48.0' cy='48.0' r='48.0' fill='url(%23g)'/%3E%3Cg transform='translate(22.799999999999997 22.799999999999997) scale(2.1)' fill='none' stroke='%23ffffff' stroke-width='0.952' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 21 19.5H3z'/%3E%3Cpath d='M12 10v4.4M12 17v.1'/%3E%3C/g%3E%3C/svg%3E")}
main:has(section .verify-box) .verify-box::after{content:"";position:absolute;right:-34px;bottom:-46px;width:230px;height:230px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%230b8a4b' stroke-width='5'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%230b8a4b' stroke-width='2' stroke-dasharray='3 6'/%3E%3Cg transform='translate(21.599999999999994 21.599999999999994) scale(3.2)' fill='none' stroke='%230b8a4b' stroke-width='0.688' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.1;pointer-events:none}
main:has(section .verify-box) .verify-box.invalid::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23b3261e' stroke-width='5'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23b3261e' stroke-width='2' stroke-dasharray='3 6'/%3E%3Cg transform='translate(21.599999999999994 21.599999999999994) scale(3.2)' fill='none' stroke='%23b3261e' stroke-width='0.688' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/g%3E%3C/svg%3E")}
main:has(section .verify-box) .verify-box.warn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23d08a00' stroke-width='5'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23d08a00' stroke-width='2' stroke-dasharray='3 6'/%3E%3Cg transform='translate(21.599999999999994 21.599999999999994) scale(3.2)' fill='none' stroke='%23d08a00' stroke-width='0.688' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 21 19.5H3z'/%3E%3Cpath d='M12 10v4.4M12 17v.1'/%3E%3C/g%3E%3C/svg%3E")}
main:has(section .verify-box) .verify-box>*{position:relative;z-index:1}
main:has(section .verify-box) .verify-box .verdict{margin:0;color:var(--vb);font:700 clamp(1.7rem,3.4vw,2.2rem)/1.15 var(--serif)}
main:has(section .verify-box) .verify-box p{margin:.35rem 0 0;color:#2c4a5f}
main:has(section .verify-box) .verify-box .verdict+p{font-size:1.02rem}
main:has(section .verify-box) .verify-box p strong{color:var(--vb)}

/* details */
main:has(section .verify-box) dl.kv.card{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:0;margin:1.2rem 0 0;padding:0;overflow:hidden;border:1px solid #d9e8f2;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 36px rgba(11,58,99,.1)}
main:has(section .verify-box) dl.kv.card::before{content:"";grid-column:1 / -1;height:7px;background:linear-gradient(90deg,#1d7fae,#5bb3d6 40%,#8fd0e6 70%,#19a8b4)}
main:has(section .verify-box) dl.kv.card dt{padding:.9rem 1.3rem;background:#f1f7fb;border-bottom:1px solid #e3eef5;color:#47697f;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
main:has(section .verify-box) dl.kv.card dd{margin:0;padding:.82rem 1.3rem;border-bottom:1px solid #edf3f7;color:#14232b;font-weight:500;overflow-wrap:anywhere}
main:has(section .verify-box) dl.kv.card dt:nth-last-of-type(1),main:has(section .verify-box) dl.kv.card dd:nth-last-of-type(1){border-bottom:0}
main:has(section .verify-box) dl.kv.card dd:nth-of-type(1) strong{display:inline-block;padding:.2rem .7rem;border-radius:8px;background:#e3f1f8;color:#0b4a6f;font:700 1rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}
main:has(section .verify-box) dl.kv.card dd a{color:#0b6aa8;font-weight:600}

/* newer version notice, history, footnote, buttons */
main:has(section .verify-box) .notice.warn{margin:1.2rem 0 0;padding:1rem 1.2rem;border:1px solid #f0d78f;border-left:5px solid #d99a00;border-radius:14px;background:#fff6dd;box-shadow:0 8px 20px rgba(208,138,0,.1)}
main:has(section .verify-box) section.content h2,main:has(section .verify-box) .w-md>h2{margin:2rem 0 .8rem;color:#0b3a63;font-size:1.3rem}
main:has(section .verify-box) .table-wrap{overflow:hidden;border:1px solid #d9e8f2;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(11,58,99,.08)}
main:has(section .verify-box) table.t th{background:#f1f7fb;color:#47697f;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase}
main:has(section .verify-box) .w-md>p.small.muted{display:flex;align-items:flex-start;gap:.6rem;margin:1.4rem 0 0;color:#47697f}
main:has(section .verify-box) .w-md>p.small.muted::before{content:"";flex:none;width:18px;height:18px;margin-top:.12rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%235b7a90' stroke-width='2.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
main:has(section .verify-box) .w-md>p.mt .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.6rem;border:0;border-radius:14px;background:linear-gradient(90deg,#0b6a99,#1f86b5);font-weight:700;box-shadow:0 8px 20px rgba(11,106,153,.3);transition:transform .2s,box-shadow .2s}
main:has(section .verify-box) .w-md>p.mt .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,106,153,.4)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::before,main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box))::after{display:none}
}
@media (max-width:760px){
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head::after{opacity:.45}
}
@media (max-width:640px){
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head{min-height:0;padding:1.3rem 0 .8rem}
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head::after{display:none}
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head h1::before{width:54px;height:54px}
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"],.verify-box)) .page-head p.muted{margin-left:0}
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card{padding:3.6rem 1.2rem 1.4rem}
  main:has(section .verify-box) .verify-box{grid-template-columns:1fr;row-gap:.9rem;padding:1.4rem 1.3rem;text-align:left}
  main:has(section .verify-box) .verify-box::before{grid-row:auto;width:76px;height:76px}
  main:has(section .verify-box) dl.kv.card{grid-template-columns:1fr}
  main:has(section .verify-box) dl.kv.card dt{padding:.7rem 1.1rem .15rem;border-bottom:0;background:#f7fafc}
  main:has(section .verify-box) dl.kv.card dd{padding:.15rem 1.1rem .8rem;background:#f7fafc}
}
@media (prefers-reduced-motion:reduce){
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .btn,main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child a,main:has(section .verify-box) .w-md>p.mt .btn{transition:none}
  main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) form.card .btn:hover,main:has(section :is(form[action="/verify"],form[action="/verify-membership"])) .w-sm>p:last-child a:hover,main:has(section .verify-box) .w-md>p.mt .btn:hover{transform:none}
}



/* ===== Members cards v4: wave-header profile card (add at the END of app.css) ===== */
.pgrid>.pcard{--c1:#1f78c1;--c2:#27a0e0;--c3:#1b5ea8;--tint:rgba(31,120,193,.14);
  display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.9);border-radius:24px;overflow:hidden;color:#34404f;text-align:center;
  background:linear-gradient(180deg,#f3f8fd 0%,#fff 100%);box-shadow:0 14px 34px rgba(20,60,110,.14);transition:transform .3s,box-shadow .3s}
.pgrid>.pcard:nth-child(4n+2){--c1:#0e9a8c;--c2:#22c2b3;--c3:#0b7d73;--tint:rgba(14,154,140,.15)}
.pgrid>.pcard:nth-child(4n+3){--c1:#6a5bc4;--c2:#8c7be0;--c3:#5546b0;--tint:rgba(106,91,196,.15)}
.pgrid>.pcard:nth-child(4n+4){--c1:#1f8fb0;--c2:#3cbad6;--c3:#176f8a;--tint:rgba(31,143,176,.15)}
.pgrid>.pcard:hover{transform:translateY(-7px);box-shadow:0 24px 46px rgba(20,60,110,.24);border-color:#fff}
.pgrid>.pcard::before,.pgrid>.pcard::after{display:none!important}

/* header with wave */
.pgrid .pcard-top{position:relative;height:150px;padding:0;overflow:visible;background:linear-gradient(135deg,var(--c3) 0%,var(--c1) 55%,var(--c2) 100%)}
.pgrid .pcard-top::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:62%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C70 30 150 30 230 58S350 84 400 48V100H0z' fill='%23ffffff' fill-opacity='.38'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.pgrid .pcard-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:48%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 70C80 48 160 52 240 74S350 92 400 66V100H0z' fill='%23f3f8fd'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.pgrid .pcard-badge,.pgrid .pcard-sil{display:none!important}
.pgrid .pcard-photo{position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);width:156px;height:156px;border-radius:50%;object-fit:cover;object-position:center top;
  border:5px solid #fff;box-shadow:0 0 0 7px rgba(255,255,255,.45),0 14px 28px rgba(15,40,80,.28);background:var(--c1)}
.pgrid .pcard-ini{display:flex;align-items:center;justify-content:center;color:#fff;font:700 clamp(2.2rem,3.6vw,2.9rem)/1 var(--serif);background:linear-gradient(135deg,var(--c1),var(--c2))}

/* body */
.pgrid .pcard-body{display:flex;flex-direction:column;align-items:stretch;padding:48px 22px 22px;text-align:center;flex:1}
.pgrid .pcard-name{margin:0 0 14px;color:#0f2b4a;font:700 1.2rem/1.3 var(--serif);letter-spacing:.01em;text-transform:none}
.pgrid .pcard-name a{color:inherit}
.pgrid .pcard-desig{align-self:center;margin:0 0 16px!important;padding:7px 22px;border-radius:999px;background:var(--tint);color:var(--c1);font:700 .95rem/1.2 var(--font)}
.pgrid .pcard-prof,.pgrid .pcard-mail{position:relative;display:flex;align-items:center;gap:14px;margin:0!important;padding:13px 4px 13px 6px;text-align:left;font-size:.95rem;line-height:1.4;color:#1a2b44}
.pgrid .pcard-prof{border-top:1px solid #dde7f1}
.pgrid .pcard-mail{border-top:0;border-bottom:1px solid #dde7f1;margin-bottom:16px!important;font-size:.92rem}
.pgrid .pcard-prof::before,.pgrid .pcard-mail::before{content:"";flex:none;width:22px;height:22px;background:var(--c1);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.pgrid .pcard-prof{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7L12 2zM4 11v7H2v2h20v-2h-2v-7h-2.5v7h-3v-7h-2.5v7H9.5v-7h-2.5v7h-3v-7z'/%3E%3C/svg%3E")}
.pgrid .pcard-mail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2z M2 5l10 7.2L22 5v2.4L12 14.6 2 7.4z'/%3E%3C/svg%3E")}
.pgrid .pcard-mail a{display:inline;padding:0;background:none;border-radius:0;color:#1a2b44;font-weight:600;word-break:break-all}
.pgrid .pcard-mail a:hover{color:var(--c1);background:none;text-decoration:underline}
.pgrid .pcard-loc{margin:0 0 14px!important;color:#6b7684}
.pgrid .pcard-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;margin-top:auto;padding:13px 16px;border:2px solid var(--c1);border-radius:999px;background:transparent;color:var(--c1);font:700 1rem/1 var(--font);box-shadow:none;filter:none;transition:background .2s,color .2s}
.pgrid .pcard-btn:hover{background:var(--c1);color:#fff;filter:none}

/* Mobile: 2 cards per row */
@media (max-width:640px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pgrid>.pcard,.pgrid-featured>.pcard:nth-child(-n+3){grid-column:auto}
  .pgrid>.pcard{border-radius:18px}
  .pgrid .pcard-top{height:92px}
  .pgrid .pcard-photo{top:10px;width:92px;height:92px;border-width:3px;box-shadow:0 0 0 4px rgba(255,255,255,.45),0 8px 16px rgba(15,40,80,.25)}
  .pgrid .pcard-ini{font-size:1.8rem}
  .pgrid .pcard-body{padding:30px 9px 12px}
  .pgrid .pcard-name{font-size:.86rem;margin-bottom:8px}
  .pgrid .pcard-desig{padding:4px 10px;font-size:.7rem;margin-bottom:8px!important}
  .pgrid .pcard-prof,.pgrid .pcard-mail{gap:5px;padding:8px 0;font-size:.68rem}
  .pgrid .pcard-mail{font-size:.57rem;margin-bottom:10px!important}
  .pgrid .pcard-mail a{letter-spacing:-.02em}
  .pgrid .pcard-prof::before,.pgrid .pcard-mail::before{width:13px;height:13px}
  .pgrid .pcard-btn{padding:8px 6px;font-size:.74rem;border-width:1.5px}
}





/* ===== Member profile page: banner-style card (add at the END of app.css) ===== */
.pv-card{position:relative;max-width:1000px;margin:1.6rem auto 1rem;overflow:hidden;border-radius:28px;border:1px solid #fff;text-align:center;
  background:
    radial-gradient(circle,rgba(20,120,200,.22) 1.4px,transparent 2px) 0 190px/16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cg fill='%23224a7a' fill-opacity=%27.05%27%3E%3Cpath d='M150 14c-24 0-40 18-40 40h80c0-22-16-40-40-40z'/%3E%3Crect x='100' y='54' width='100' height='10'/%3E%3Crect x='60' y='64' width='180' height='12'/%3E%3Crect x='70' y='76' width='160' height='100'/%3E%3Crect x='30' y='100' width='40' height='76'/%3E%3Crect x='230' y='100' width='40' height='76'/%3E%3Crect x='20' y='176' width='260' height='14'/%3E%3C/g%3E%3C/svg%3E") right 18px bottom 70px/300px 220px no-repeat,
    linear-gradient(180deg,#eef6fd 0%,#f9fcff 100%);
  box-shadow:0 22px 60px rgba(11,58,99,.2)}
.pv-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2395d52a'/%3E%3Cstop offset='.45' stop-color='%2316b98a'/%3E%3Cstop offset='1' stop-color='%230b6fb8'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%230a3f8f'/%3E%3Cstop offset='1' stop-color='%230b5fae'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 55C250 100 520 30 1000 10V100H0z' fill='url(%23a)'/%3E%3Cpath d='M0 72C260 100 560 52 1000 36V100H0z' fill='url(%23b)'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* header */
.pv-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;min-height:240px;padding:2.2rem 3rem 5.5rem;text-align:left;color:#fff;
  background:linear-gradient(120deg,#0a2f7a 0%,#0b57a8 55%,#12a3b4 100%)}
.pv-head::before{content:"";position:absolute;inset:auto 0 -1px 0;height:90px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 55C200 100 380 90 560 62S860 30 1000 66V100H0z' fill='%23f3f9fe%27/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.pv-head::after{content:"";position:absolute;right:0;bottom:60px;width:46%;height:46px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2316b98a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%2395d52a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 46C120 40 250 28 400 0V14C260 40 130 50 0 50z' fill='url(%23g)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.pv-brand{position:relative;z-index:1;display:flex;align-items:center;gap:1.1rem}
.pv-logo{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.pv-logo img{width:62px;height:62px;object-fit:contain}
.pv-org{display:flex;flex-direction:column;gap:.3rem;padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.55)}
.pv-org strong{max-width:24ch;font:700 1.15rem/1.25 var(--font);letter-spacing:.02em;text-transform:uppercase}
.pv-org small{font:italic 500 .95rem/1.3 var(--font);color:#d6ebff}
.pv-tag{position:relative;z-index:1;margin:.4rem 0 0;text-align:right;font:italic 500 1.12rem/1.45 var(--font);color:#fff}
.pv-tag b{color:#9be22b;font-weight:800}

/* photo */
.pv-ring{position:relative;z-index:3;width:236px;height:236px;margin:-150px auto 0;padding:7px;border-radius:50%;
  background:conic-gradient(from 200deg,#1c6fd1,#16b98a,#95d52a,#1c6fd1);box-shadow:0 16px 36px rgba(11,58,99,.3)}
.pv-ring img,.pv-ring span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:7px solid #fff;border-radius:50%;object-fit:cover;object-position:center top;background:linear-gradient(135deg,#0b57a8,#12a3b4);color:#fff;font:700 5rem/1 var(--serif)}

/* main text */
.pv-main{position:relative;z-index:2;padding:1.4rem 1.5rem .8rem}
.pv-badge{display:inline-flex;align-items:center;gap:.7rem;padding:.7rem 1.7rem;border-radius:999px;background:#e3f6e9;border:1px solid #b5e3c5;color:#0e6a38;font:700 1.3rem/1 var(--font);box-shadow:0 8px 20px rgba(15,157,88,.12)}
.pv-desig{margin:1.4rem 0 .35rem;font:800 2.1rem/1.2 var(--font);color:#0c2a5b}
.pv-inst{margin:0 0 1rem;font:600 1.55rem/1.35 var(--font);color:#13427e}
.pv-mail{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:0;color:#13427e}
.pv-mail a{font-size:1.4rem;font-weight:500;color:#1066c4;text-decoration:underline;word-break:break-all}

/* three highlights */
.pv-feats{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;list-style:none;margin:1.4rem auto 0;padding:0 1rem 7.2rem;max-width:780px}
.pv-feats li{display:flex;align-items:center;gap:.9rem;padding:0 1.6rem;text-align:left;font:500 1.1rem/1.3 var(--font);color:#13427e}
.pv-feats li+li{border-left:1px solid #b9cde4}
.pv-ic{flex:none;width:44px;height:44px;background:#13427e;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.pv-ic1{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21h12M8 18h8M10 3l3 1 1.6 6-3.2 1.5L8 4.6zM9 6.5 7.5 7M13 12.5a5.5 5.5 0 1 1-6.5 5.2'/%3E%3C/svg%3E")}
.pv-ic2{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3'/%3E%3Ccircle cx='5' cy='10' r='2.2'/%3E%3Ccircle cx='19' cy='10' r='2.2'/%3E%3Cpath d='M6.5 20c0-3.3 2.4-5.5 5.5-5.5s5.5 2.2 5.5 5.5zM1.5 19c0-2.4 1.6-4 3.5-4M22.5 19c0-2.4-1.6-4-3.5-4'/%3E%3C/svg%3E")}
.pv-ic3{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21S3.5 15.6 3.5 9.7A4.7 4.7 0 0 1 12 7.2a4.7 4.7 0 0 1 8.5 2.5C20.5 15.6 12 21 12 21z'/%3E%3Cpath d='M3.5 12h4l2-3.2 3 6.2 2-3h6'/%3E%3C/svg%3E")}

.pv-extra{max-width:1000px;margin:1.2rem auto}

@media (max-width:760px){
  .pv-card{border-radius:20px}
  .pv-head{flex-direction:column;gap:.9rem;min-height:0;padding:1.4rem 1.2rem 6.4rem}
  .pv-logo{width:56px;height:56px;border-radius:12px}.pv-logo img{width:46px;height:46px}
  .pv-org strong{font-size:.95rem;max-width:none}.pv-org small{font-size:.78rem}
  .pv-tag{text-align:left;font-size:.9rem;margin:0}
  .pv-ring{width:170px;height:170px;margin-top:-86px;padding:5px}
  .pv-ring img,.pv-ring span{border-width:5px;font-size:3.4rem}
  .pv-badge{font-size:1rem;padding:.55rem 1.1rem}.pv-badge svg{width:22px;height:22px}
  .pv-desig{font-size:1.45rem}.pv-inst{font-size:1.12rem}.pv-mail a{font-size:1.05rem}.pv-mail svg{width:22px;height:22px}
  .pv-feats{flex-wrap:wrap;gap:.8rem 0;padding-bottom:6rem}
  .pv-feats li{padding:0 .9rem;font-size:.92rem}.pv-ic{width:34px;height:34px}
}



/* =====================================================================================================
   BACRS — Downloads page (/downloads) — CSS only.
   Paste at the very END of public/css/app.css. No HTML / JS / content change.
   Uses images that already exist: /static/img/ethics/{hero-photo,waves-left,waves-right}.jpg
   (The design switches on when at least one document is published; the empty state keeps the default look.)
   ===================================================================================================== */

/* ---------- page background ---------- */
main:has(.table-wrap a.btn[href^="/downloads/"]){position:relative;isolation:isolate;overflow:hidden;padding-bottom:4.5rem;
  background:radial-gradient(circle at 100% 0,rgba(130,195,235,.45),transparent 42%),radial-gradient(ellipse at 0 100%,rgba(110,190,230,.35),transparent 50%),linear-gradient(180deg,#eaf4fb,#f7fbfe 55%,#e3f0fa)}
main:has(.table-wrap a.btn[href^="/downloads/"])+.site-footer{margin-top:0}
main:has(.table-wrap a.btn[href^="/downloads/"])::before,main:has(.table-wrap a.btn[href^="/downloads/"])::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
main:has(.table-wrap a.btn[href^="/downloads/"])::before{left:0;top:0;width:408px;height:803px;max-height:100%;background:url(/static/img/ethics/waves-left.jpg) left top/408px auto no-repeat;opacity:.8;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,#000 65%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,#000 65%,transparent);mask-composite:intersect}
main:has(.table-wrap a.btn[href^="/downloads/"])::after{right:0;bottom:0;width:396px;height:631px;max-height:calc(100% - 170px);background:url(/static/img/ethics/waves-right.jpg) right bottom/396px auto no-repeat;opacity:.8;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to top,#000 65%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to top,#000 65%,transparent);mask-composite:intersect}

/* ---------- banner ---------- */
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head{position:relative;overflow:hidden;isolation:isolate;min-height:168px;padding:1.8rem 0 1.2rem;border-bottom:0;background:transparent}
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:640px;background:url(/static/img/ethics/hero-photo.jpg) right top/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(to bottom,#000 62%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(to bottom,#000 62%,transparent);mask-composite:intersect;pointer-events:none}
main:has(.table-wrap a.btn[href^="/downloads/"]) .breadcrumbs{font-size:.84rem;font-weight:600}
main:has(.table-wrap a.btn[href^="/downloads/"]) .breadcrumbs li+li::before{content:"\203A";color:#5b7a90;margin:0 .15rem 0 0}
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:1.1rem;align-items:center;margin:.7rem 0 0;color:#0b3a63;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15}
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1::before{content:"";grid-column:1;grid-row:1 / span 2;width:68px;height:68px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a93c4'/%3E%3Cstop offset='1' stop-color='%230b6a99'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='36.0' cy='36.0' r='36.0' fill='url(%23g)'/%3E%3Cg transform='translate(13.200000000000003 13.200000000000003) scale(1.9)' fill='none' stroke='%23ffffff' stroke-width='1.000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m-4-4 4 4 4-4'/%3E%3Cpath d='M4.5 16v2.5A1.5 1.5 0 0 0 6 20h12a1.5 1.5 0 0 0 1.5-1.5V16'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;box-shadow:0 0 0 6px rgba(255,255,255,.7),0 10px 24px rgba(20,136,184,.28)}
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1::after{content:"Official forms, guidelines and policy documents of the Bangladesh Academy of Clinical Research Society.";grid-column:2;grid-row:2;max-width:46ch;margin-top:.45rem;color:#3d5568;font:400 1rem/1.55 var(--font)}
html[lang="bn"] main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1::after{content:"বাংলাদেশ অ্যাকাডেমি অব ক্লিনিক্যাল রিসার্চ সোসাইটির অফিসিয়াল ফর্ম, নির্দেশিকা ও নীতিমালা।"}
main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head .container::after{content:"";display:block;width:46px;height:3px;margin:.8rem 0 0 86px;border-radius:3px;background:linear-gradient(90deg,#19a8b4,#0b7aa5)}

/* ---------- the list becomes a grid of document cards ---------- */
section.content:has(.table-wrap a.btn[href^="/downloads/"]){padding-top:2.4rem}
main:has(.table-wrap a.btn[href^="/downloads/"]) .table-wrap{overflow:visible;border:0;border-radius:0;background:transparent}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tbody,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td{display:block}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t thead{display:none}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr{position:relative;display:grid;grid-template-columns:repeat(3,max-content) 1fr;grid-template-rows:auto auto 1fr;align-items:center;column-gap:.6rem;row-gap:.85rem;padding:1.4rem 1.5rem 1.35rem 6.1rem;border:1px solid #d9e8f2;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(11,58,99,.09);transition:transform .22s,box-shadow .22s,border-color .22s}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tbody tr:hover{background:#fff;border-color:#9fd0e6;box-shadow:0 20px 40px rgba(11,106,153,.18);transform:translateY(-4px)}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr::before{content:"";position:absolute;left:1.4rem;top:1.4rem;width:64px;height:64px;border-radius:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f9ccb'/%3E%3Cstop offset='1' stop-color='%230b6a99'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='18' fill='url(%23g)'/%3E%3Cg transform='translate(14.600000000000001 14.600000000000001) scale(1.45)' fill='none' stroke='%23ffffff' stroke-width='1.379' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11.3v5.4m-2.5-2.5 2.5 2.5 2.5-2.5'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;box-shadow:0 10px 22px rgba(11,106,153,.28)}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td{padding:0;border:0}

/* title + description */
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(1){grid-column:1 / -1}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(1) strong{display:block;color:#0b3a63;font:700 1.18rem/1.3 var(--serif)}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(1) .small{margin-top:.4rem;color:#4d6a7e;font-size:.9rem;line-height:1.6}

/* category · language · version chips */
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(2),main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(3),main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(4){display:inline-flex;align-items:center;gap:.4rem;padding:.26rem .75rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(2)::before,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(3)::before,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(4)::before{content:"";width:.95rem;height:.95rem;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(2){background:#e3f1f8;color:#0b5a85}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2H10l2 2.5h6.5a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2H10l2 2.5h6.5a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(3){background:#e5f6ee;color:#0b6b3a}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.4 3.6 5.2 3.6 8.5S14.5 18.1 12 20.5M12 3.5C9.5 5.9 8.4 8.7 8.4 12s1.1 6.1 3.6 8.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.4 3.6 5.2 3.6 8.5S14.5 18.1 12 20.5M12 3.5C9.5 5.9 8.4 8.7 8.4 12s1.1 6.1 3.6 8.5'/%3E%3C/svg%3E")}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(4){background:#f0eafb;color:#5b3aa6;text-transform:none;letter-spacing:.02em}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(4)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V5.5a2 2 0 0 1 2-2h6.7l8.3 8.3a2 2 0 0 1 0 2.8l-6.6 6.6a2 2 0 0 1-2.8 0z'/%3E%3Ccircle cx='8.3' cy='8.3' r='1.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V5.5a2 2 0 0 1 2-2h6.7l8.3 8.3a2 2 0 0 1 0 2.8l-6.6 6.6a2 2 0 0 1-2.8 0z'/%3E%3Ccircle cx='8.3' cy='8.3' r='1.2'/%3E%3C/svg%3E")}

/* download button */
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5){grid-column:1 / -1;justify-self:end;align-self:end}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border:0;border-radius:999px;background:linear-gradient(90deg,#0b6a99,#1f86b5);color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.01em;box-shadow:0 8px 18px rgba(11,106,153,.3);transition:transform .2s,box-shadow .2s}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 0) scale(1)' fill='none' stroke='%23ffffff' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m-4-4 4 4 4-4'/%3E%3Cpath d='M4.5 16v2.5A1.5 1.5 0 0 0 6 20h12a1.5 1.5 0 0 0 1.5-1.5V16'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(11,106,153,.4)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  main:has(.table-wrap a.btn[href^="/downloads/"])::before,main:has(.table-wrap a.btn[href^="/downloads/"])::after{display:none}
}
@media (max-width:860px){
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tbody{grid-template-columns:minmax(0,1fr)}
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head::after{opacity:.45}
}
@media (max-width:640px){
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head{min-height:0;padding:1.3rem 0 .8rem}
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head::after{display:none}
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1{grid-template-columns:54px minmax(0,1fr);column-gap:.9rem}
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head h1::before{width:54px;height:54px}
  main:has(.table-wrap a.btn[href^="/downloads/"]) .page-head .container::after{margin-left:0}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr{padding:1.2rem 1.2rem 1.25rem}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr{grid-template-columns:repeat(3,max-content) 1fr}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr::before{position:static;grid-column:1 / -1;width:56px;height:56px;background-size:56px 56px;background-repeat:no-repeat}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5){justify-self:stretch}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn{width:100%;justify-content:center;padding:.75rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tr,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn{transition:none}
  main:has(.table-wrap a.btn[href^="/downloads/"]) table.t tbody tr:hover,main:has(.table-wrap a.btn[href^="/downloads/"]) table.t td:nth-child(5) .btn:hover{transform:none}
}




/* ===== Menu pages: IERC / Research Collaboration / Conference / Training / Gallery (add at the END of app.css) ===== */
main:has(.sec-page){background:radial-gradient(circle at 0 0,rgba(150,205,235,.4),transparent 38%),radial-gradient(circle at 100% 100%,rgba(120,220,200,.25),transparent 35%),linear-gradient(180deg,#eef7fc,#f8fcfe);padding-bottom:3rem}
.page-head:has(+ .sec-page){padding:2rem 0 1.4rem;border-bottom:0;background:transparent}
.page-head:has(+ .sec-page) .breadcrumbs{margin-bottom:.8rem;font-size:.92rem;font-weight:600;color:#46607a}
.page-head:has(+ .sec-page) h1{margin:0;font:700 clamp(2rem,4vw,2.6rem)/1.15 var(--serif);color:#0b4a6f}
.page-head:has(+ .sec-page) .container::after{content:"";display:block;width:64px;height:4px;margin-top:.9rem;border-radius:4px;background:linear-gradient(90deg,#0773a0,#19b4b5)}
.page-head:has(+ .sec-page) .muted{margin-top:.7rem;color:#3e5f6c;max-width:60ch}

/* IERC tabs */
.sec-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.8rem}
.sec-tabs a{padding:.6rem 1.1rem;border-radius:999px;background:#fff;border:1px solid #d5e6f2;color:#0b4a6f;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 4px 12px rgba(11,58,99,.06);transition:transform .2s,background .2s,color .2s}
.sec-tabs a:hover{transform:translateY(-2px);background:#eaf4fb}
.sec-tabs a[aria-current=page]{background:linear-gradient(90deg,#0773a0,#19b4b5);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(7,115,160,.3)}

/* empty */
.sec-empty{max-width:520px;margin:2rem auto;padding:2.4rem 1.6rem;text-align:center;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(20,60,110,.12)}
.sec-empty-ic{display:block;width:70px;height:70px;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(135deg,#0773a0,#19b4b5) center/34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.sec-empty h2{margin:0 0 .4rem;color:#0b4a6f;font:700 1.5rem/1.2 var(--serif)}
.sec-empty p{margin:0;color:#4b6575}

/* shared bits */
.sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sec-card{--c1:#1f78c1;--c2:#27a0e0;position:relative;display:flex;flex-direction:column;padding:1.6rem 1.4rem 1.4rem;border-radius:22px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(20,60,110,.12);transition:transform .3s,box-shadow .3s;overflow:hidden}
.sec-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.sec-card:nth-child(4n+2){--c1:#0e9a8c;--c2:#22c2b3}.sec-card:nth-child(4n+3){--c1:#6a5bc4;--c2:#8c7be0}.sec-card:nth-child(4n+4){--c1:#1f8fb0;--c2:#3cbad6}
.sec-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,60,110,.2)}
.sec-card h2,.sec-row h2{margin:0 0 .5rem;color:#0f2b4a;font:700 1.2rem/1.3 var(--serif);text-transform:none}
.sec-chip{display:inline-block;align-self:flex-start;margin:0 0 .7rem;padding:.3rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--c1,#1f78c1) 14%,#fff);color:var(--c1,#1f78c1);font-weight:700;font-size:.82rem}
.sec-meta,.sec-place{margin:0 0 .6rem;color:#34404f;font-size:.93rem}
.sec-place{position:relative;padding-left:1.35rem}
.sec-place::before{content:"";position:absolute;left:0;top:.2em;width:.9rem;height:1.1rem;background:var(--c1,#1f78c1) center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.sec-text{margin:0 0 1rem;color:#44566a;font-size:.95rem;line-height:1.7}
.sec-btn{display:inline-flex;align-self:flex-start;margin-top:auto;padding:.6rem 1.2rem;border-radius:999px;background:linear-gradient(90deg,var(--c1,#1f78c1),var(--c2,#27a0e0));color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 8px 18px rgba(20,60,110,.2);transition:transform .2s,filter .2s}
.sec-btn:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff}

/* collaboration */
.sec-logo{display:grid;place-items:center;width:96px;height:96px;margin:0 0 1rem;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,#fff),#fff);border:1px solid color-mix(in srgb,var(--c1) 22%,#fff);overflow:hidden}
.sec-logo img{width:100%;height:100%;object-fit:contain;padding:10px}
.sec-logo span{font:700 2.3rem/1 var(--serif);color:var(--c1)}

/* conference */
.sec-list{display:grid;gap:1.3rem}
.sec-row{--c1:#1f78c1;--c2:#27a0e0;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:stretch;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(20,60,110,.12);overflow:hidden;transition:transform .3s,box-shadow .3s}
.sec-row:nth-child(3n+2){--c1:#0e9a8c;--c2:#22c2b3}.sec-row:nth-child(3n+3){--c1:#6a5bc4;--c2:#8c7be0}
.sec-row:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(20,60,110,.18)}
.sec-date{display:grid;place-items:center;padding:1rem;text-align:center;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font:700 1.05rem/1.4 var(--serif)}
.sec-row-body{padding:1.4rem 1.6rem;display:flex;flex-direction:column}
.sec-row-img{width:230px;height:100%;object-fit:cover}

/* training */
.sec-train{padding:0}
.sec-train::before{display:none}
.sec-train-top{position:relative;height:130px;background:linear-gradient(135deg,var(--c1),var(--c2))}
.sec-train-top img{border-radius:22px 22px 0 0;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity}
.sec-train-ic{z-index:2;position:absolute;left:1.4rem;bottom:-26px;width:56px;height:56px;border-radius:16px;background:#fff center/30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4a6f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E");box-shadow:0 8px 18px rgba(11,58,99,.25)}
.sec-train-body{display:flex;flex-direction:column;flex:1;padding:2.1rem 1.4rem 1.4rem}

/* gallery */
.sec-gallery{columns:4 240px;column-gap:1rem}
.sec-gallery figure{break-inside:avoid;margin:0 0 1rem;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(20,60,110,.14);transition:transform .3s,box-shadow .3s}
.sec-gallery figure:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,60,110,.22)}
.sec-gallery img{display:block;width:100%;height:auto}
.sec-gallery figcaption{padding:.7rem .9rem;color:#0f2b4a;font-weight:600;font-size:.9rem}
.sec-gallery figcaption small{display:block;margin-top:.15rem;color:#667a89;font-weight:400}

@media (max-width:980px){.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-row{grid-template-columns:120px minmax(0,1fr)}.sec-row-img{display:none}}
@media (max-width:640px){.sec-grid{grid-template-columns:1fr}.sec-row{grid-template-columns:1fr}.sec-date{padding:.7rem}.sec-tabs a{font-size:.82rem;padding:.5rem .85rem}.sec-gallery{columns:2 140px}}

/* ===== IERC pages: 1, 2, 3 ... card thakle majhkhane dekhabe (app.css er SHESH e paste koro) ===== */
.sec-people .pgrid{--g:clamp(16px,2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.sec-people .pgrid>.pcard{box-sizing:border-box;grid-column:auto;flex:0 0 calc((100% - 3 * var(--g)) / 4 - 1px);max-width:calc((100% - 3 * var(--g)) / 4 - 1px)}
@media (max-width:1100px){
  .sec-people .pgrid>.pcard{flex-basis:calc((100% - 2 * var(--g)) / 3 - 1px);max-width:calc((100% - 2 * var(--g)) / 3 - 1px)}
}
@media (max-width:820px){
  .sec-people .pgrid>.pcard{flex-basis:calc((100% - var(--g)) / 2 - 1px);max-width:calc((100% - var(--g)) / 2 - 1px)}
}


/* ===== IERC pages background image ===== */
main:has(.sec-people){
  background:
    linear-gradient(rgba(243,249,253,.55),rgba(243,249,253,.55)),
    url(/static/img/members-bg.jpg) center top/cover no-repeat,
    linear-gradient(180deg,#eef7fc,#f8fcfe);
  padding-bottom:3rem}
/* Gallery fix: only the inner photo wall uses columns */
section.sec-page.sec-gallery{columns:auto;column-gap:normal}