/* ===== Effect ANZ Leadership — mobile web app ===== */
:root{
  --ink:#13223b; --ink2:#45566f; --mut:#8893a8;
  --line:#e7ebf3; --bg:#eef1f7; --card:#ffffff;
  --blue:#1b4df0; --navy:#0a2a86; --sc:#1b4df0;      /* --sc = sector accent, set per panel */
  --bar:52px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font); color:var(--ink); background:#0a1570;
  overflow:hidden; height:100vh; height:100dvh; width:100vw;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
a{color:var(--blue);text-decoration:none;}
img{display:block;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

/* ===== swipe deck ===== */
.deck{
  display:flex; height:100vh; height:100dvh; width:100vw;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
}
.deck::-webkit-scrollbar{display:none;}
.panel{
  flex:0 0 100%; width:100vw; height:100vh; height:100dvh;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-align:start; scroll-snap-stop:always;
  background:var(--bg);
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.panel::-webkit-scrollbar{display:none;}

/* ===== hero ===== */
.hero{
  position:relative; padding:calc(var(--bar) + env(safe-area-inset-top) + 20px) 22px 26px;
  text-align:center; color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--sc) 85%, #fff 0%) 0%, color-mix(in srgb, var(--sc) 60%, #0a2a86 40%) 55%, #0a2158 100%);
}
.hero .htop{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:0;right:0;display:flex;justify-content:center;gap:8px;padding:0 20px;}
.chip{font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);padding:4px 11px;border-radius:999px;backdrop-filter:blur(4px);}
.badge-low{font-size:11px;font-weight:700;color:#5a3a00;background:#ffd98a;padding:4px 10px;border-radius:999px;}
.face{
  width:150px;height:150px;border-radius:50%;object-fit:cover;margin:4px auto 14px;
  border:4px solid rgba(255,255,255,.92); box-shadow:0 10px 30px rgba(2,10,40,.35);
  background:#dde3ef;
}
.face.ph{display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2a5bf5,#7a5cff);}
.hero h1{font-size:27px;line-height:1.12;font-weight:800;margin:0 0 4px;letter-spacing:-.3px;}
.hero .role{font-size:14px;color:rgba(255,255,255,.9);font-weight:500;margin:0 auto;max-width:92%;}
.hmeta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.hmeta .loc{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.92);}
.hmeta .loc svg{width:13px;height:14px;fill:rgba(255,255,255,.92);}
.li{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);}
.li img{width:16px;height:16px;}
.cologo{margin:16px auto 0;background:#fff;border-radius:12px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;min-height:46px;box-shadow:0 6px 18px rgba(2,10,40,.22);}
.cologo img{max-height:30px;max-width:168px;object-fit:contain;}
.cologo .txt{font-weight:800;color:var(--navy);font-size:15px;}
.thesis{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92);font-style:italic;margin:16px auto 0;max-width:94%;}

/* curved transition into body */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--bg);border-radius:26px 26px 0 0;}

/* ===== body sections ===== */
.body{padding:16px 16px 0;}
.sec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 17px;margin-bottom:13px;box-shadow:0 1px 3px rgba(16,32,80,.04);}
.sec h2{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sc);margin:0 0 10px;}
.sec p{margin:0 0 2px;font-size:14.5px;line-height:1.55;color:var(--ink2);}
.sec.why{background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 8%,#fff),#fff);border-color:color-mix(in srgb,var(--sc) 22%,var(--line));}
.sec.why .wt{font-size:14.5px;line-height:1.58;color:var(--ink);}
.sec a{color:var(--sc);font-weight:600;}
.item{margin-bottom:13px;}
.item:last-child{margin-bottom:0;}
.item .t{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.35;}
.item .b{font-size:13.5px;line-height:1.5;color:var(--ink2);}
.sec.fit .item .t{color:var(--sc);}
ol.qs{margin:0;padding:0;list-style:none;counter-reset:q;}
ol.qs li{counter-increment:q;position:relative;padding:0 0 0 32px;margin-bottom:13px;font-size:14px;line-height:1.5;color:var(--ink);}
ol.qs li:last-child{margin-bottom:0;}
ol.qs li:before{content:counter(q);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--sc) 14%,#fff);color:var(--sc);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.notes p{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0 0 7px;}
.notes ul{margin:4px 0 7px;padding-left:18px;}
.notes li{font-size:13.5px;line-height:1.5;color:var(--ink2);margin:4px 0;}
.notes .src{font-size:11.5px;color:var(--mut);border-top:1px dashed var(--line);padding-top:8px;margin-top:8px;}
.lowfit-note{font-size:12px;color:#8a5a00;background:#fff6e2;border:1px solid #f0dca6;border-radius:10px;padding:8px 11px;margin-top:6px;}

.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 10px;}
.pager button{flex:1;font-size:13px;font-weight:700;color:var(--sc);background:color-mix(in srgb,var(--sc) 9%,#fff);border:1px solid color-mix(in srgb,var(--sc) 22%,var(--line));border-radius:12px;padding:12px 8px;}
.pager button:disabled{opacity:.35;}
.pager .pc{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--mut);min-width:52px;text-align:center;}

/* ===== top bar ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;
  height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(16,32,80,.08);transition:opacity .25s;}
.topbar .tb{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--navy);padding:8px 10px;border-radius:10px;}
.topbar .tb svg{width:17px;height:17px;fill:currentColor;}
.topbar .tb:active{background:rgba(16,32,80,.06);}
.topbar .ctr{flex:1;text-align:center;}
.topbar .cname{font-size:13px;font-weight:800;color:var(--navy);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .cnum{font-size:10.5px;color:var(--mut);font-weight:600;}
.progress{position:fixed;top:calc(var(--bar) + env(safe-area-inset-top));left:0;right:0;height:3px;z-index:31;background:rgba(16,32,80,.08);}
.progress i{display:block;height:100%;width:2%;background:var(--sc);transition:width .2s,background .25s;}

/* ===== overlays (home / agenda) ===== */
.overlay{position:fixed;inset:0;z-index:40;background:var(--bg);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  transform:translateY(0);transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .34s;padding-bottom:calc(30px + env(safe-area-inset-bottom));}
.overlay.hide{transform:translateY(100%);opacity:0;pointer-events:none;}

/* home cover */
.cover{position:relative;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 30px) 24px 26px;color:#fff;
  background:linear-gradient(150deg,#0a1570 0%,#13299e 52%,#1f54d6 100%);overflow:hidden;}
.cover .sap{position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:22px;width:56px;height:28px;}
.cover .kick{font-size:10px;letter-spacing:.18em;font-weight:800;color:#adbdf0;text-transform:uppercase;margin:36px 0 8px;}
.cover h1{font-size:33px;line-height:1.08;font-weight:800;margin:0;letter-spacing:-.4px;}
.cover .sub{font-size:16px;color:#cdd8ff;margin-top:6px;font-weight:500;}
.cover .evt{margin-top:16px;font-size:12.5px;line-height:1.45;color:#dbe4ff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:inline-block;max-width:100%;padding:8px 14px;border-radius:14px;}
.cover .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.cta .primary{flex:1;background:#fff;color:#0a2a86;font-weight:800;font-size:15px;padding:15px;border-radius:14px;box-shadow:0 10px 24px rgba(2,10,40,.3);}
.cta .ghost{flex:1 0 auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:15px;padding:15px 18px;border-radius:14px;}
.cover:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;background:var(--bg);border-radius:22px 22px 0 0;}

.searchwrap{position:sticky;top:0;z-index:5;padding:14px 16px 10px;background:var(--bg);}
.search{width:100%;font-size:15px;padding:13px 15px;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,32,80,.05);}
.search:focus{outline:none;border-color:var(--blue);}
.listwrap{padding:2px 16px 0;}
.secgroup{margin-bottom:16px;}
.secgroup h3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:6px 2px 9px;}
.secgroup h3 .dot{width:11px;height:11px;border-radius:50%;}
.erow{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,32,80,.04);}
.erow:active{background:#f3f6fd;}
.erow .th{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#dde3ef;}
.erow .th.ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:16px;background:linear-gradient(135deg,#2a5bf5,#7a5cff);}
.erow .en{font-size:15px;font-weight:700;color:var(--navy);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.erow .ec{font-size:12.5px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.erow .ei{flex:0 0 auto;color:#c3ccdd;font-size:20px;}
.nores{text-align:center;color:var(--mut);font-size:14px;padding:30px;}

/* agenda */
.ahead{position:relative;padding:calc(env(safe-area-inset-top) + 54px) 20px 20px;color:#fff;background:linear-gradient(150deg,#0a1570,#1f54d6);}
.ahead h1{font-size:24px;font-weight:800;margin:0;}
.ahead .asub{font-size:13px;color:#cdd8ff;margin-top:5px;}
.ahead .alink{display:inline-block;margin-top:12px;font-size:12.5px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:7px 13px;border-radius:999px;}
.aday{padding:16px 16px 0;}
.adtitle{font-size:15px;font-weight:800;color:var(--navy);border-bottom:2px solid var(--blue);padding-bottom:7px;margin:8px 2px 10px;}
.adtitle span{font-size:11.5px;font-weight:600;color:var(--mut);}
.arow{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);}
.arow .at{flex:0 0 60px;font-size:12px;font-weight:800;color:var(--blue);}
.arow .as{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;}
.arow .ad{font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.45;}
.arow .asp{font-size:12px;color:var(--mut);margin-top:3px;}
.arow .asp strong{color:var(--navy);}

/* back bar for agenda */
.backbar{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;display:flex;align-items:center;}
.backbar button{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#fff;padding:8px 10px;}
.backbar button svg{width:18px;height:18px;fill:#fff;}

.hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;
  font-size:11.5px;color:#fff;background:rgba(10,20,60,.5);backdrop-filter:blur(6px);padding:7px 14px;border-radius:999px;
  pointer-events:none;transition:opacity .5s;display:flex;align-items:center;gap:7px;}
.hint.gone{opacity:0;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}
@media (min-width:620px){ /* tablet/desktop: center a phone-width column */
  body{background:#0a1327;}
  .frame{max-width:460px;margin:0 auto;height:100dvh;box-shadow:0 0 60px rgba(0,0,0,.5);position:relative;overflow:hidden;}
}

@supports not (color: color-mix(in srgb, red, blue)){
  .hero{background:var(--sc);}
  .sec.why{background:#f3f6ff;border-color:#d8e0f7;}
  .sec.fit .item .t{color:var(--sc);}
  .pager button{background:#eef2ff;border-color:#d6ddf6;}
  ol.qs li:before{background:#e9ecfb;}
  .chip{background:rgba(255,255,255,.2);}
}
