/* Same palette and fonts as the About Us / Examination / Results pages */
.eo{
  --b:var(--burgundy,#8B1E2D); --bd:var(--burgundy-dk,#5f1220); --r:var(--red,#C62828);
  --o:var(--orange,#F57C00);   --g:var(--gold,#F4B942);        --ink:var(--charcoal,#292929);
  --line:rgba(139,30,45,.16);  --ease:cubic-bezier(.2,.7,.2,1);
  --hd:'Bebas Neue','Arial Narrow',Impact,sans-serif; --tx:'Poppins','Segoe UI',Arial,sans-serif;
  font-family:var(--tx);font-size:1rem;line-height:1.7;color:var(--ink);background:#fff;overflow-x:clip
}
.eo *,.eo *::before,.eo *::after{box-sizing:border-box}
:where(.eo) :is(h1,h2,p){margin:0;padding:0}
:where(.eo) a{color:inherit;text-decoration:none}
:where(.eo) img{display:block;max-width:100%}
.eo [hidden]{display:none !important}
.eo-wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.eo :focus-visible{outline:3px solid var(--g);outline-offset:3px}

/* ── Hero ── */
.eo-hero{position:relative;background:var(--bd);color:#fff;overflow:hidden}
.eo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.eo-hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(95,18,32,.95),rgba(95,18,32,.8) 45%,rgba(95,18,32,.3))}
.eo-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;z-index:3;background:linear-gradient(90deg,var(--b) 0 38%,var(--r) 38% 52%,var(--o) 52% 78%,var(--g) 78%)}
.eo-hero .eo-wrap{position:relative;z-index:2;max-width:1180px;padding-top:72px;padding-bottom:64px}
.eo-hero h1{font:400 clamp(3rem,7vw,5.4rem)/.97 var(--hd);letter-spacing:.015em;text-transform:uppercase;animation:eo-up .8s var(--ease) both}
.eo-hero h1 span{color:var(--g)}
.eo-bc{margin-top:16px;font-size:.85rem;color:rgba(255,255,255,.85);animation:eo-up .8s var(--ease) .15s both}
.eo-bc a:hover{color:var(--g)}
.eo-bc i{margin:0 8px;font-style:normal;opacity:.6}
@keyframes eo-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── Content ── */
.eo-main{background:#FAF6EE;padding:52px 0 88px}

/* Year chips */
.eo-label{margin-bottom:14px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b)}
.eo-years{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:32px;animation:eo-up .7s var(--ease) both}
.eo-yr{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:10px 8px;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;color:var(--b);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)
}
.eo-yr b{font:400 1.45rem/1 var(--hd);letter-spacing:.04em}
.eo-yr em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:0 8px;border-radius:999px;color:var(--bd);background:var(--g)}
.eo-yr:hover{transform:translateY(-3px);border-color:rgba(139,30,45,.4);box-shadow:0 8px 20px rgba(95,18,32,.12)}
.eo-yr.active{background:var(--b);border-color:var(--b);color:#fff;box-shadow:0 10px 24px rgba(95,18,32,.22)}

/* Document panel */
.eo-panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(95,18,32,.08);animation:eo-up .7s var(--ease) .1s both;scroll-margin-top:24px}
.eo-panel::before{content:'';display:block;height:5px;background:linear-gradient(90deg,var(--b) 0 38%,var(--r) 38% 52%,var(--o) 52% 78%,var(--g) 78%)}
.eo-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:22px 28px;border-bottom:1px solid var(--line)}
.eo-bar h2{font:400 clamp(1.7rem,3vw,2.2rem)/1.05 var(--hd);letter-spacing:.03em;text-transform:uppercase;color:var(--b)}
.eo-meta{margin-top:2px;font-size:.8rem;color:#7a6a6a}
.eo-actions{display:flex;flex-wrap:wrap;gap:10px}
.eo-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:600 .85rem/1 var(--tx);
  border:2px solid var(--b);white-space:nowrap;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)
}
.eo-btn svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0}
.eo-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(95,18,32,.16)}
.eo-btn.solid{background:var(--b);color:#fff}
.eo-btn.solid:hover{background:var(--bd);border-color:var(--bd)}
.eo-btn.line{background:#fff;color:var(--b)}
.eo-btn.line:hover{background:var(--b);color:#fff}

/* Viewer */
.eo-viewer{min-height:400px;padding:28px;background:#f1ebe0}
.eo-status{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 20px;text-align:center;font-size:.92rem;color:#5a4d4d}
.eo-spin{width:38px;height:38px;border:4px solid rgba(139,30,45,.15);border-top-color:var(--b);border-radius:50%;animation:eo-rot .8s linear infinite}
@keyframes eo-rot{to{transform:rotate(360deg)}}
.eo-pages{display:flex;flex-direction:column;align-items:center;gap:24px}
.eo-page{position:relative;width:100%;max-width:860px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 26px rgba(95,18,32,.12);overflow:hidden}
.eo-page:not(.ready){background:linear-gradient(100deg,#fff 30%,#f4ede0 50%,#fff 70%);background-size:200% 100%;animation:eo-shimmer 1.4s linear infinite}
@keyframes eo-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.eo-page canvas{display:block;width:100%;height:auto;animation:eo-fade .6s var(--ease) both}
@keyframes eo-fade{from{opacity:0}to{opacity:1}}
.eo-no{position:absolute;right:12px;bottom:10px;padding:2px 10px;border-radius:999px;font-size:.7rem;font-weight:500;color:#7a6a6a;background:rgba(255,255,255,.85);pointer-events:none}

@media (max-width:760px){
  .eo-wrap{padding:0 14px}
  .eo-hero .eo-wrap{padding:52px 24px 48px}
  .eo-main{padding:36px 0 64px}
  .eo-years{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .eo-yr b{font-size:1.25rem}
  .eo-bar{padding:18px 16px}
  .eo-actions{width:100%}
  .eo-btn{flex:1;justify-content:center}
  .eo-viewer{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .eo-hero h1,.eo-bc,.eo-years,.eo-panel,.eo-page canvas{animation:none}
  .eo-page:not(.ready){animation:none}
  .eo-yr,.eo-btn{transition:none}
  .eo-yr:hover,.eo-btn:hover{transform:none}
}