/* ============================================================================
   DELTA MoBSE  -  mobse.css
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   PALETTE   Delta State MoBSE identity: blue field, deep navy ink.
             sun #0B57B4 (the blue SURFACE - the token keeps its old name so
             nothing else in the solution had to be renamed)
             sun-2 #1F6FD0 hover - sun-3 #DCE9F9 tint - sun-lite #9DC4F5
             amber #083F86 (deep blue for eyebrows and edges)
             ink #0B1B33 - slate #16294A - wash #F3F7FC - line #D5E0EE

   CONTRAST RULE, and it is the whole design system:
             Blue is a SURFACE. White type on blue (--on-sun), light-blue
             type on navy (--sun-lite), deep-blue type on white (--amber).
             The mid blue is never used as running text on white.

   HOUSE RULES ENFORCED HERE
     - border-radius never exceeds 8px. Badges are square (radius 0).
     - No pill shapes anywhere. No border-radius:999px.
     - No left-edge colour bars on list rows.
     - Every class is prefixed 'aps-' so nothing collides with Bootstrap
       should it ever be added to a sub-application.
   ============================================================================ */

/* ===================== TOKENS ===================== */
:root{
  --sun:#0B57B4;
  --sun-2:#1F6FD0;
  --sun-3:#DCE9F9;
  --sun-lite:#9DC4F5;
  --on-sun:#FFFFFF;
  --amber:#083F86;
  --ink:#0B1B33;
  --slate:#16294A;
  --slate-2:#223A63;
  --wash:#F3F7FC;
  --paper:#FFFFFF;
  --line:#D5E0EE;
  --muted:#5A6B82;
  --fd:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  /* Navigation face. Manrope, at the client's request for something finer
     than Plus Jakarta Sans in the menu: same geometric family, but tighter
     apertures, lighter joins and cleaner terminals, so a row of short words
     reads as a crisp instrument panel rather than display type. The brand
     block and every heading stay on Plus Jakarta Sans. */
  --fn:'Manrope','Inter',system-ui,sans-serif;
  --r:8px;
  --max:1240px;
  --hdrH:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fd);margin:0;line-height:1.16;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.aps-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.aps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.aps-eyebrow{
  font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:10px;
}
.aps-eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
.aps-eyebrow--on-dark{color:var(--sun-lite)}
.aps-eyebrow--on-dark::after{background:rgba(255,255,255,.18)}
.aps-eyebrow--on-sun{color:var(--on-sun)}
.aps-eyebrow--on-sun::after{background:rgba(255,255,255,.35)}

/* square. never a pill. */
.aps-badge{
  display:inline-block;border-radius:0;padding:3px 9px;
  font-family:var(--fd);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;white-space:nowrap;
}
.aps-badge--sun{background:var(--sun);color:var(--on-sun)}
.aps-badge--ink{background:var(--ink);color:var(--sun-lite)}
.aps-badge--line{border:1px solid var(--line);color:var(--muted);background:#fff}
.aps-badge--line-dark{border:1px solid rgba(255,255,255,.45);color:var(--on-sun);background:transparent}

.aps-btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--fd);font-weight:700;font-size:.9rem;
  padding:13px 22px;border-radius:var(--r);text-decoration:none;
  transition:transform .16s,background .16s,box-shadow .16s;
}
.aps-btn:hover{transform:translateY(-2px)}
.aps-btn--sun{background:var(--sun);color:var(--on-sun);box-shadow:0 10px 26px -16px rgba(11,87,180,.9)}
.aps-btn--sun:hover{background:var(--sun-2)}
.aps-btn--ink{background:var(--ink);color:var(--sun-lite)}
.aps-btn--ink:hover{background:var(--slate)}
.aps-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.aps-btn--ghost:hover{background:rgba(255,255,255,.14)}
.aps-btn--quiet{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.aps-btn--quiet:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ===================== TOP BAR ===================== */
.aps-top{
  position:relative;z-index:130;background:var(--ink);color:#C3D3E8;
  font-size:.78rem;border-bottom:1px solid rgba(157,196,245,.25);
}
.aps-top__in{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.aps-top__gov{font-family:var(--fd);font-weight:600;color:#fff;white-space:nowrap}
.aps-top__gov span{color:var(--sun-lite)}
.aps-top__sp{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.aps-top a{color:#C3D3E8;text-decoration:none;white-space:nowrap;font-family:var(--fn);letter-spacing:.01em}
.aps-top a:hover{color:#fff}

/* ===================== HEADER (overlays hero) ===================== */
/* FIX 3: min-width:0 guards, nowrap on nav, burger at 1180px. */
.aps-hdr{
  position:absolute;top:38px;left:0;right:0;z-index:120;background:transparent;
  transition:background .25s,box-shadow .25s,top .25s;
}
.aps-hdr.is-stuck{
  position:fixed;top:0;background:var(--sun);
  box-shadow:0 10px 30px -22px rgba(11,27,51,.8);border-bottom:1px solid var(--amber);
}
.aps-hdr__in{display:flex;align-items:center;gap:18px;min-height:var(--hdrH);transition:min-height .25s}
.aps-hdr.is-stuck .aps-hdr__in{min-height:70px}

.aps-brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto;min-width:0}
.aps-seal{
  width:54px;height:54px;flex:0 0 54px;border-radius:50%;
  background:var(--sun);display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 3px rgba(255,255,255,.25);
  transition:width .25s,height .25s,flex-basis .25s,box-shadow .25s,background .25s;
}
.aps-hdr.is-stuck .aps-seal{
  width:44px;height:44px;flex-basis:44px;background:#fff;
  box-shadow:inset 0 0 0 2px rgba(11,87,180,.35),0 0 0 3px rgba(255,255,255,.3);
}
.aps-seal svg{width:29px;height:29px;stroke:var(--on-sun);transition:width .25s,height .25s,stroke .25s}
.aps-hdr.is-stuck .aps-seal svg{width:24px;height:24px;stroke:var(--sun)}
.aps-brand__t{line-height:1.18;min-width:0}
.aps-brand__t b{
  display:block;font-family:var(--fd);font-weight:800;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sun-lite);
}
.aps-brand__t i{
  display:block;font-style:normal;font-family:var(--fd);font-weight:700;
  font-size:1.02rem;color:#fff;letter-spacing:-.015em;
}
.aps-brand__t em{display:block;font-style:normal;font-size:.73rem;color:rgba(255,255,255,.72)}
.aps-hdr.is-stuck .aps-brand__t b{color:rgba(255,255,255,.78)}
.aps-hdr.is-stuck .aps-brand__t i,
.aps-hdr.is-stuck .aps-brand__t em{color:#fff}

.aps-nav{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.aps-nav__i{position:relative}
.aps-nav__i>a{
  display:block;text-decoration:none;color:#fff;font-family:var(--fn);
  font-weight:600;font-size:.875rem;letter-spacing:.012em;padding:11px 13px;border-radius:var(--r);
  position:relative;white-space:nowrap;transition:color .18s,background .18s;
}
.aps-hdr.is-stuck .aps-nav__i>a{color:#fff}
.aps-nav__i>a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
  background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.aps-hdr.is-stuck .aps-nav__i>a::after{background:#fff}
.aps-nav__i:hover>a::after,.aps-nav__i:focus-within>a::after{transform:scaleX(1)}
.aps-nav__i.is-on>a{background:var(--sun);color:var(--on-sun)}
.aps-nav__i.is-on>a::after{display:none}
.aps-hdr.is-stuck .aps-nav__i.is-on>a{background:#fff;color:var(--sun)}

.aps-drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:7px;
  box-shadow:0 26px 54px -30px rgba(11,27,51,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;
}
.aps-nav__i:hover .aps-drop,.aps-nav__i:focus-within .aps-drop{opacity:1;visibility:visible;transform:none}
.aps-drop a{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;font-size:.87rem;color:var(--ink);font-weight:500}
.aps-drop a:hover{background:var(--wash)}

.aps-hdr__cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.aps-hdr__ph{text-decoration:none;line-height:1.2;text-align:right;white-space:nowrap}
.aps-hdr__ph small{display:block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.aps-hdr__ph b{font-family:var(--fd);font-size:.92rem;color:#fff}
.aps-hdr.is-stuck .aps-hdr__ph small{color:rgba(255,255,255,.72)}
.aps-hdr.is-stuck .aps-hdr__ph b{color:#fff}
.aps-burger{
  display:none;width:46px;height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;place-items:center;
}
.aps-hdr.is-stuck .aps-burger{background:rgba(255,255,255,.18);color:#fff}
.aps-burger svg{width:22px;height:22px}

/* drawer */
.aps-scrim{position:fixed;inset:0;background:rgba(11,27,51,.6);opacity:0;visibility:hidden;transition:.25s;z-index:190}
.aps-scrim.is-open{opacity:1;visibility:visible}
.aps-draw{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:200;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(11,27,51,.7);
}
.aps-draw.is-open{transform:none}
.aps-draw__h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--sun);border-bottom:1px solid var(--amber)}
.aps-draw__h b{font-family:var(--fd);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-sun)}
.aps-draw__x{width:40px;height:40px;border:1px solid rgba(255,255,255,.45);background:transparent;border-radius:var(--r);cursor:pointer;display:grid;place-items:center;color:var(--on-sun)}
.aps-draw__b{padding:12px;overflow-y:auto;flex:1}
.aps-draw__b a{display:block;padding:12px 14px;text-decoration:none;color:var(--ink);font-family:var(--fn);font-weight:600;font-size:.94rem;letter-spacing:.012em;border-radius:6px}
.aps-draw__b a:hover{background:var(--wash)}
.aps-draw__b .aps-sub{padding-left:26px;font-weight:500;font-family:var(--fb);font-size:.88rem;color:var(--muted)}

/* ===================== HERO ===================== */
/* FIX 8: stage reserves header height; caption clears the control row. */
.aps-hero{position:relative;background:var(--ink);isolation:isolate}
.aps-stage{position:relative;height:clamp(560px,80vh,780px);overflow:hidden}
.aps-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
  background-image:var(--img);background-size:cover;background-position:center;
  transform:scale(1.06);
}
.aps-slide.is-on{opacity:1;animation:apsKen 9s linear forwards}
@keyframes apsKen{from{transform:scale(1.06)}to{transform:scale(1)}}
.aps-stage::before{
  content:"";position:absolute;inset:0 0 auto;height:230px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,27,51,.78),rgba(11,27,51,0));
}
.aps-stage::after{
  content:"";position:absolute;inset:auto 0 0;height:62%;z-index:5;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,27,51,.95) 8%,rgba(11,27,51,.6) 45%,rgba(11,27,51,0));
}
.aps-cap{position:absolute;left:0;right:0;bottom:0;z-index:8;padding-bottom:112px}
.aps-cap__in{max-width:640px}
.aps-cap .aps-badge{margin-bottom:14px}
.aps-cap h1{font-size:clamp(1.75rem,3.6vw,2.75rem);color:#fff;font-weight:800;margin-bottom:12px}
.aps-cap p{color:rgba(255,255,255,.85);font-size:1rem;max-width:540px;margin-bottom:22px}
.aps-cap__btns{display:flex;gap:12px;flex-wrap:wrap}
.aps-slide__body{opacity:0;transform:translateY(18px);transition:opacity .55s .2s,transform .55s .2s}
.aps-slide__body.is-on{opacity:1;transform:none}

/* FIX 2: controls live in one row inside the container. No mid-height arrows. */
.aps-ctrl{position:absolute;left:0;right:0;bottom:30px;z-index:9}
.aps-ctrl__in{display:flex;align-items:center;gap:14px}
.aps-dots{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.aps-dot{width:52px;height:4px;background:rgba(255,255,255,.3);border:0;padding:0;cursor:pointer;border-radius:0;position:relative;overflow:hidden}
.aps-dot i{position:absolute;inset:0 100% 0 0;background:var(--sun);transition:right 0s}
.aps-dot.is-on i{right:0;transition:right 6.5s linear}
.aps-count{font-family:var(--fd);font-size:.78rem;color:rgba(255,255,255,.78);letter-spacing:.08em;white-space:nowrap}
.aps-count b{color:var(--sun-lite)}
.aps-arrs{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
.aps-arr{
  width:46px;height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,color .2s;
}
.aps-arr:hover{background:var(--sun);color:var(--on-sun)}
.aps-arr svg{width:21px;height:21px}

/* ===================== PLEDGE STRIP ===================== */
/* FIX 4: text block is a flex column. */
.aps-pledge{background:var(--ink);color:var(--sun-3)}
.aps-pledge__in{display:flex;align-items:center;gap:18px;padding:18px 0;flex-wrap:wrap}
.aps-pledge__ico{width:28px;height:28px;flex:0 0 28px;color:var(--sun-lite)}
.aps-pledge__t{display:flex;flex-direction:column;min-width:240px;flex:1 1 340px}
.aps-pledge__t b{display:block;font-family:var(--fd);font-size:1rem;color:#fff;line-height:1.35}
.aps-pledge__t span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.45;margin-top:2px}
.aps-pledge a{
  flex:0 0 auto;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:.86rem;
  background:var(--sun);color:var(--on-sun);padding:11px 18px;border-radius:var(--r);
  display:inline-flex;gap:8px;align-items:center;white-space:nowrap;
}
.aps-pledge a:hover{background:var(--sun-2)}

/* ===================== SECTION SHELL ===================== */
.aps-sec{padding:84px 0}
.aps-sec--wash{background:var(--wash)}
.aps-sec__h{display:flex;align-items:flex-end;gap:28px;margin-bottom:34px;flex-wrap:wrap}
.aps-sec__h>div:first-child{flex:1 1 320px;min-width:0}
.aps-sec__h h2{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;margin-top:12px}
.aps-sec__h p{color:var(--muted);max-width:430px;font-size:.95rem;flex:0 1 430px}

/* ===================== SERVICES ===================== */
.aps-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aps-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:178px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.aps-tile:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 46px -34px rgba(11,27,51,.75)}
.aps-tile__ico{width:42px;height:42px;border-radius:6px;background:var(--wash);color:var(--ink);display:grid;place-items:center;border:1px solid var(--line)}
.aps-tile:hover .aps-tile__ico{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.aps-tile__ico svg{width:21px;height:21px}
.aps-tile h3{font-size:1rem;font-weight:700}
.aps-tile p{font-size:.86rem;color:var(--muted);line-height:1.5}
.aps-tile__go{margin-top:auto;font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:6px;transition:gap .18s}
.aps-tile:hover .aps-tile__go{gap:11px}
.aps-tile--wide{grid-column:span 2}
/* featured card: solid Delta yellow, black type. */
.aps-tile--sun{background:var(--sun);border-color:var(--sun);color:#fff}
.aps-tile--sun h3{color:#fff}
.aps-tile--sun .aps-tile__go{color:#fff}
.aps-tile--sun .aps-badge--line{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.9);background:transparent}
.aps-tile--sun p{color:rgba(255,255,255,.82)}
.aps-tile--sun .aps-tile__ico{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.aps-tile--sun:hover{border-color:var(--sun-2);background:var(--sun-2)}
.aps-tile--sun:hover .aps-tile__ico{background:#fff;color:var(--sun)}

/* ===================== LEDGER + 21 CURRENTS ===================== */
/* FIX 5: smaller clamp, tabular figures, earlier column steps. */
.aps-ledger{background:var(--ink);color:#fff;padding:62px 0 0}
.aps-ledger__g{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.aps-cell{background:var(--ink);padding:22px 16px;min-width:0}
.aps-cell b{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.35rem,2vw,1.8rem);color:var(--sun-lite);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.1;
}
.aps-cell span{display:block;font-size:.77rem;color:rgba(255,255,255,.6);margin-top:5px;line-height:1.35}
.aps-ledger__note{font-size:.76rem;color:rgba(255,255,255,.4);margin-top:14px}

.aps-band{margin-top:36px;padding-bottom:36px}
.aps-band__lbl{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.aps-band__lbl>span{font-family:var(--fd);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
/* FIX 1: lit LGA names live here and wrap. No absolute labels on the strokes. */
.aps-band__lit{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:640px}
.aps-band__lit span{
  font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.04em;
  color:var(--on-sun);background:var(--sun);padding:3px 8px;border-radius:0;white-space:nowrap;
}
.aps-strokes{display:flex;gap:5px;height:56px;align-items:flex-end}
.aps-stroke{
  flex:1;min-width:0;background:rgba(255,255,255,.14);height:34%;position:relative;
  border:0;padding:0;cursor:pointer;border-radius:0;
  transition:height .5s cubic-bezier(.4,0,.2,1),background .35s;
}
.aps-stroke.is-on{background:var(--sun);height:100%}
.aps-stroke:hover{background:var(--sun-2)}
/* hover label only, one at a time, so nothing can collide */
.aps-stroke::after{
  content:attr(data-lga);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%);white-space:nowrap;font-family:var(--fd);
  font-size:.68rem;font-weight:700;color:var(--on-sun);background:var(--sun);
  padding:4px 9px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:4;
}
.aps-stroke:hover::after,.aps-stroke:focus-visible::after{opacity:1}

/* ===================== ZONES ===================== */
.aps-ztabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.aps-ztab{
  border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:var(--r);
  padding:12px 18px;font-family:var(--fd);font-weight:700;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:9px;transition:.18s;white-space:nowrap;
}
.aps-ztab small{font-weight:600;font-size:.71rem;color:var(--muted)}
.aps-ztab:hover{border-color:var(--ink)}
.aps-ztab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.aps-ztab.is-on small{color:var(--sun-lite)}

.aps-zpanel{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:1.15fr .85fr}
.aps-zpanel.is-on{display:grid}
.aps-zpanel__l{padding:34px;min-width:0}
.aps-zpanel__l h3{font-size:1.55rem;font-weight:700;margin-bottom:6px}
.aps-zpanel__l>p{color:var(--muted);font-size:.93rem;margin-bottom:22px}
.aps-zmeta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.aps-zmeta div{background:#fff;padding:15px 16px;min-width:0}
.aps-zmeta small{display:block;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.aps-zmeta b{font-family:var(--fd);font-size:.97rem;font-weight:700;font-variant-numeric:tabular-nums}
.aps-zlga{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.aps-zbtns{display:flex;gap:10px;flex-wrap:wrap}
/* right column is the yellow field */
.aps-zpanel__r{background:var(--sun);color:var(--on-sun);padding:34px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.aps-zpanel__r .aps-eyebrow{margin-bottom:18px}
.aps-mic{display:flex;gap:16px;align-items:center;min-width:0}
.aps-mic__av{
  width:68px;height:68px;flex:0 0 68px;border-radius:var(--r);background:var(--ink);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--sun-lite);
}
.aps-mic__t{min-width:0}
.aps-mic__t b{display:block;font-family:var(--fd);font-size:1.04rem;line-height:1.3}
.aps-mic__t span{display:block;font-size:.84rem;color:rgba(255,255,255,.75);margin-top:2px}
.aps-zpanel__r hr{border:0;border-top:1px solid rgba(255,255,255,.3);margin:24px 0}
.aps-zcontact{font-size:.89rem;color:rgba(255,255,255,.84);line-height:1.8}
.aps-zcontact b{color:#fff;font-family:var(--fd)}

/* ===================== MANDATE ===================== */
.aps-mandate{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aps-mrow{background:#fff;padding:28px 26px;transition:background .2s;min-width:0}
.aps-mrow:hover{background:var(--wash)}
.aps-mrow__k{display:block;font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--amber);margin-bottom:12px}
.aps-mrow b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.aps-mrow p{font-size:.88rem;color:var(--muted);line-height:1.6}

/* ===================== LEADERSHIP ===================== */
.aps-leads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aps-lead{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aps-lead__ph{aspect-ratio:4/3.4;background:var(--wash) var(--img) center/cover no-repeat;position:relative}
.aps-lead__ph .aps-badge{position:absolute;left:12px;bottom:12px}
.aps-lead__b{padding:16px 18px 20px;min-width:0}
.aps-lead__b b{display:block;font-family:var(--fd);font-size:.98rem;font-weight:700;line-height:1.32}
.aps-lead__b span{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.4}

/* ===================== NEWS ===================== */
.aps-split{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.aps-nlist{border-top:1px solid var(--line)}
.aps-nitem{display:flex;gap:18px;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;align-items:flex-start;transition:background .18s}
.aps-nitem:hover{background:var(--wash)}
/* FIX 6: fixed square, clipped, reduced tracking. */
.aps-date{
  flex:0 0 62px;width:62px;height:62px;border-radius:0;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;line-height:1;
}
.aps-date b{font-family:var(--fd);font-size:1.3rem;font-weight:800;line-height:1}
.aps-date span{font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-lite);margin-top:4px;line-height:1}
.aps-nitem__t{min-width:0}
.aps-nitem__t h4{font-size:1rem;font-weight:700;margin:7px 0 5px;line-height:1.36}
.aps-nitem__t p{font-size:.86rem;color:var(--muted);line-height:1.55}

.aps-pager{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.aps-pager button{min-width:38px;height:38px;border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:6px;font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--ink)}
.aps-pager button:hover:not(:disabled){border-color:var(--ink)}
.aps-pager button.is-on{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.aps-pager button:disabled{opacity:.4;cursor:not-allowed}
.aps-pager span{margin-left:auto;font-size:.81rem;color:var(--muted);white-space:nowrap}

.aps-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.aps-side h3{font-size:1.04rem;font-weight:700;margin-bottom:4px}
.aps-side>p{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.aps-circ{border-top:1px solid var(--line)}
.aps-circ a{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.aps-circ a:hover b{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-circ svg{width:18px;height:18px;color:var(--amber);flex:0 0 18px;margin-top:2px}
.aps-circ span{min-width:0}
.aps-circ b{display:block;font-family:var(--fb);font-weight:600;font-size:.88rem;line-height:1.4}
.aps-circ small{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}

/* inline note panel - this is what replaces alert() */
.aps-note{display:none;margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--wash);padding:14px 16px;font-size:.86rem}
.aps-note.is-on{display:block}
.aps-note b{font-family:var(--fd);display:block;margin-bottom:3px;font-size:.89rem}

/* ===================== EXEC STRIP ===================== */
/* FIX 7: .aps-exec__t is a flex column. */
.aps-exec{background:var(--ink);color:#fff}
.aps-exec__in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14)}
.aps-exec__c{background:var(--ink);padding:32px 32px 32px 0;display:flex;gap:20px;align-items:center;min-width:0}
.aps-exec__c:last-child{padding-left:32px}
.aps-exec__ph{width:86px;height:86px;flex:0 0 86px;border-radius:var(--r);background:var(--slate) var(--img) center/cover no-repeat}
.aps-exec__t{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.aps-exec__t b{font-family:var(--fd);font-size:1.12rem;font-weight:700;line-height:1.3}
.aps-exec__t>span:last-child{font-size:.86rem;color:rgba(255,255,255,.66)}

/* ===================== FOOTER ===================== */
/* ============================================================================
   LONG-TOKEN SAFETY
   An email address, a web address, a long phone string is ONE unbreakable
   word to the browser; typed by an administrator into a card narrower than
   itself, it escapes the border and the page looks broken (the Ministry's
   own mailbox did exactly this on the contact card). overflow-wrap:anywhere
   inherits, splits a token ONLY when it would otherwise overflow, and lets
   grid and flex children shrink past the token's natural width - so one
   rule per container family covers every email, link and code inside it,
   today's and every one an administrator types later.
   ============================================================================ */
.aps-side,.aps-zcontact,.aps-zcontact--light,.aps-dl,.aps-stable,
.aps-prose,.aps-pop__b,.aps-foot,.aps-catlist,.aps-empty{overflow-wrap:anywhere}

.aps-foot{background:var(--ink);color:#9FB3CC;padding:64px 0 0;font-size:.88rem;border-top:3px solid var(--sun)}
.aps-foot__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.aps-foot h5{font-family:var(--fd);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun-lite);margin:0 0 16px}
.aps-foot a{display:block;color:#9FB3CC;text-decoration:none;padding:5px 0}
.aps-foot a:hover{color:#fff}
.aps-foot__b{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.aps-foot__b .aps-brand__t i{color:#fff}
.aps-foot p{line-height:1.75;color:#8D8676;font-size:.85rem}
.aps-foot__sub{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem;color:#7D7767}
.aps-foot__sub a{display:inline;color:var(--sun-lite)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1280px){
  .aps-hdr__ph{display:none}            /* FIX 3 */
}
@media (max-width:1180px){
  .aps-nav{display:none}                /* FIX 3 */
  .aps-burger{display:grid}
  .aps-svc{grid-template-columns:repeat(2,1fr)}
  .aps-tile--wide{grid-column:span 2}
  .aps-leads{grid-template-columns:repeat(2,1fr)}
  .aps-mandate{grid-template-columns:repeat(2,1fr)}
  .aps-ledger__g{grid-template-columns:repeat(3,1fr)}   /* FIX 5 */
  .aps-split{grid-template-columns:1fr}
  .aps-foot__g{grid-template-columns:1fr 1fr}
  .aps-band__lit{justify-content:flex-start;max-width:none}
}
@media (max-width:900px){
  .aps-zpanel.is-on{grid-template-columns:1fr}
  .aps-exec__in{grid-template-columns:1fr}
  .aps-exec__c{padding:26px 0}
  .aps-exec__c:last-child{padding-left:0;border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:680px){
  :root{--hdrH:78px}
  .aps-wrap{padding:0 18px}
  .aps-sec{padding:56px 0}
  .aps-svc{grid-template-columns:1fr}
  .aps-tile--wide{grid-column:span 1}
  .aps-leads,.aps-mandate{grid-template-columns:1fr}
  .aps-ledger__g{grid-template-columns:repeat(2,1fr)}   /* FIX 5 */
  .aps-cap{padding-bottom:104px}
  .aps-dot{width:30px}
  .aps-count{display:none}
  .aps-top__sp{display:none}
  .aps-zpanel__l,.aps-zpanel__r{padding:24px}
  .aps-zmeta{grid-template-columns:1fr}
  .aps-foot__g{grid-template-columns:1fr}
  .aps-brand__t i{font-size:.92rem}
  .aps-brand__t em{display:none}
  .aps-strokes{height:44px}
}
@media (max-width:480px){
  .aps-strokes{gap:3px;height:38px}
  .aps-band__lit span{font-size:.63rem;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .aps-slide.is-on{animation:none;transform:none}
}/* ============================================================================
   DELTA MoBSE  -  ADDITIONS FOR THE ASP.NET BUILD
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Everything above this point is the approved v2 demo stylesheet, unchanged.
   Below are the components that only exist once the site is real: the inner
   page hero, breadcrumbs, CMS prose, the accordion and card templates, the
   notice ticker, empty states, and the anchor-based pager (the demo used
   buttons; the server pager emits links so pages are crawlable and shareable).
   ========================================================================== */

/* ------------------------------------------------- header state per page */
/* On the home page the header overlays the hero. On every inner page it is
   solid from the first paint, so .is-stuck is applied server-side and the
   scroll handler only manages the home page. */
.aps-hdr--solid{position:sticky;top:0}
.aps-hdr--solid.is-stuck{position:sticky}
.aps-body--inner{padding-top:0}

/* ------------------------------------------------------------ page hero */
.aps-phero{
  background:var(--ink);color:#fff;padding:44px 0 52px;
  border-bottom:3px solid var(--sun);
}
.aps-phero h1{
  font-size:clamp(1.65rem,3.4vw,2.6rem);font-weight:800;color:#fff;
  max-width:900px;margin-top:14px;
}
.aps-phero__sub{
  color:rgba(255,255,255,.72);font-size:1rem;max-width:640px;margin-top:12px;line-height:1.6;
}
.aps-phero .aps-eyebrow{margin-top:16px}

/* ============================================================================
   THE POPUP ANNOUNCEMENT
   One dialog over the page on arrival, when the Ministry has switched one on.
   Rendered hidden by the master; mobse.js shows it, honouring the visitor's
   earlier dismissal. Veil + card, image banner optional, entry is a short
   rise that respects prefers-reduced-motion.
   ============================================================================ */
.aps-pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.aps-pop[hidden]{display:none}
.aps-pop__veil{position:absolute;inset:0;background:rgba(11,27,51,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.aps-pop__card{
  position:relative;width:min(560px,100%);max-height:min(86vh,720px);overflow:auto;
  background:#fff;border-radius:var(--r);box-shadow:0 30px 80px rgba(3,10,24,.45);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.8,.25,1);
}
.aps-pop.is-in .aps-pop__veil{opacity:1}
.aps-pop.is-in .aps-pop__card{opacity:1;transform:none}
.aps-pop__img{height:220px;background:var(--ink) center/cover no-repeat}
.aps-pop__b{padding:26px 28px 24px}
.aps-pop__b h2{font-family:var(--fd);font-size:1.42rem;line-height:1.22;margin:9px 0 10px;color:var(--ink)}
.aps-pop__b p{margin:0 0 12px;font-size:.94rem;line-height:1.62;color:var(--body,#3D4C63)}
.aps-pop__b p:last-of-type{margin-bottom:0}
.aps-pop__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.aps-pop__x{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
}
.aps-pop__x:hover{background:#fff}
.aps-noscroll{overflow:hidden}
@media (max-width:640px){
  .aps-pop{padding:14px;align-items:flex-end}
  .aps-pop__img{height:160px}
  .aps-pop__b{padding:20px 18px 18px}
  .aps-pop__card{transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){
  .aps-pop__veil,.aps-pop__card{transition:none;transform:none}
}

/* The education officer's photograph on the field offices table: a small
   square avatar beside the name, the shipped placeholder standing in until
   the real picture is uploaded, initials if even that file is removed. */
.aps-offcell{display:flex;align-items:center;gap:10px;min-width:0}
.aps-offav{
  width:38px;height:38px;flex:0 0 38px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--wash) center/cover no-repeat;
}
.aps-offav--i{
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.04em;
}
@media (max-width:900px){
  .aps-offcell{gap:9px}
  .aps-offav{width:34px;height:34px;flex-basis:34px}
}

/* A page's portrait: the Commissioner's or Permanent Secretary's photograph
   beside their text. Floated on wide screens, stacked on narrow; inside the
   sidebar it fills the panel. */
.aps-portrait{
  float:right;width:min(260px,42%);margin:6px 0 18px 26px;
}
.aps-portrait img{
  display:block;width:100%;border-radius:var(--r,8px);border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(11,27,51,.12);
}
.aps-portrait figcaption{
  margin-top:9px;font-size:.82rem;line-height:1.45;color:var(--muted);
}
.aps-side .aps-portrait{float:none;width:100%;margin:0 0 18px}
.aps-portrait--solo{display:flex;justify-content:center;margin-bottom:26px}
.aps-portrait--solo .aps-portrait{float:none;width:min(280px,72%);margin:0}
@media (max-width:640px){
  .aps-portrait{float:none;width:min(300px,86%);margin:0 auto 20px}
}

/* The photograph behind the title band. The master page writes the whole
   background-image value (navy gradient over the picture) into --aps-phero on
   <body> and adds has-phero; with no picture neither is present and the band
   is the solid navy above. The gradient is darkest on the left, under the
   text, so legibility does not depend on what the photograph happens to be. */
.aps-body.has-phero .aps-phero{
  background-image:var(--aps-phero);
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;
  padding:52px 0 60px;
}
.aps-body.has-phero .aps-phero h1{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.aps-body.has-phero .aps-phero__sub{color:rgba(255,255,255,.86);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.aps-body.has-phero .aps-crumb a{color:rgba(255,255,255,.8)}

.aps-crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.aps-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.aps-crumb a:hover{color:#fff}
.aps-crumb .is-on{color:var(--sun-lite);font-weight:600}

/* ---------------------------------------------------------------- prose */
/* CMS body content. Every element an editor can produce is styled here so a
   page written in the rich-text editor cannot render unstyled. */
.aps-prose{max-width:74ch;font-size:1.02rem;line-height:1.75;color:#3D4C63}
.aps-prose--wide{max-width:none}
.aps-prose>*+*{margin-top:1.05em}
.aps-prose h2{font-size:1.5rem;font-weight:700;margin-top:1.8em;letter-spacing:-.02em}
.aps-prose h3{font-size:1.2rem;font-weight:700;margin-top:1.7em}
.aps-prose h4{font-size:1.03rem;font-weight:700;margin-top:1.5em}
.aps-prose h2:first-child,.aps-prose h3:first-child{margin-top:0}
.aps-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-prose a:hover{background:var(--sun-3)}
.aps-prose ul,.aps-prose ol{padding-left:1.35em}
.aps-prose li+li{margin-top:.45em}
.aps-prose ul{list-style:none;padding-left:0}
.aps-prose ul li{position:relative;padding-left:1.5em}
.aps-prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--sun);border-radius:0;
}
.aps-prose blockquote{
  border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
  padding:20px 24px;font-size:1.02rem;color:#3D4C63;
}
.aps-prose blockquote p+p{margin-top:.8em}
.aps-prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.aps-prose img{border-radius:var(--r);border:1px solid var(--line);margin:1.4em 0}
.aps-prose figure{margin:1.6em 0}
.aps-prose figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
.aps-prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.aps-prose th,.aps-prose td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.aps-prose th{background:var(--wash);font-family:var(--fd);font-weight:700;font-size:.84rem;letter-spacing:.02em}
.aps-prose caption{caption-side:bottom;font-size:.82rem;color:var(--muted);padding-top:8px;text-align:left}

/* prose + sidebar template */
.aps-psplit{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}

/* -------------------------------------------------------- accordion tpl */
.aps-acc{max-width:860px;border-top:1px solid var(--line)}
.aps-acc__i{border-bottom:1px solid var(--line)}
.aps-acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;padding:20px 4px;text-align:left;
  font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.aps-acc__q:hover{color:var(--amber)}
.aps-acc__q svg{width:20px;height:20px;flex:0 0 20px;transition:transform .24s}
.aps-acc__q[aria-expanded="true"] svg{transform:rotate(180deg)}
.aps-acc__a{display:none;padding:0 4px 24px}
.aps-acc__a.is-on{display:block}

/* ------------------------------------------------------------ cards tpl */
.aps-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aps-pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.aps-pcard h3{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.aps-pcard .aps-prose{font-size:.92rem;line-height:1.65}

/* --------------------------------------------------- sibling page links */
.aps-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.aps-plist__i{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-plist__i:hover{border-color:var(--ink);transform:translateY(-2px)}
.aps-plist__i b{display:block;font-family:var(--fd);font-size:.98rem;font-weight:700;line-height:1.35}
.aps-plist__i span{display:block;font-size:.85rem;color:var(--muted);margin-top:5px;line-height:1.5}


/* --------------------------------- tile variant used by "Report a levy" */
.aps-tile--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.aps-tile--ink h3{color:#fff}
.aps-tile--ink p{color:rgba(255,255,255,.74)}
.aps-tile--ink .aps-tile__ico{background:rgba(255,255,255,.12);border-color:transparent;color:var(--sun-lite)}
.aps-tile--ink .aps-tile__go{color:var(--sun-lite)}
.aps-tile--ink:hover{border-color:var(--sun)}
.aps-tile--ink:hover .aps-tile__ico{background:var(--sun);color:var(--on-sun)}
.aps-tile--ink .aps-badge--line{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.8);background:transparent}

/* ------------------------- leadership card with no photograph uploaded */
/* Renders the person's initials rather than a broken image or a grey box
   that reads as a missing asset. */
.aps-lead__ph[data-initials]::after{
  content:attr(data-initials);position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:2.2rem;
  color:var(--amber);background:var(--wash);
}

/* ------------------------------------------------------------ pager (a) */
/* The server pager emits anchors and spans, not buttons, so each page has a
   real crawlable URL. Shapes match the demo exactly. */
.aps-pager a,
.aps-pager span.is-on,
.aps-pager span.is-off,
.aps-pager span.is-gap{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;border-radius:6px;
  font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--ink);
  text-decoration:none;padding:0 10px;
}
.aps-pager a:hover{border-color:var(--ink)}
.aps-pager span.is-on{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.aps-pager span.is-off{opacity:.4}
.aps-pager span.is-gap{border-color:transparent;background:transparent}
.aps-pager .aps-pager__c{
  margin-left:auto;border:0;background:none;min-width:0;height:auto;padding:0;
  font-family:var(--fb);font-weight:400;font-size:.81rem;color:var(--muted);white-space:nowrap;
}

/* ------------------------------------------------------------ empty state */
/* An empty screen is an invitation to act, not an apology. */
.aps-empty{
  border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
  padding:26px;text-align:left;
}
.aps-empty b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:5px}
.aps-empty span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55}
.aps-empty--lg{padding:44px;max-width:640px}

/* -------------------------------------------------------------- helpers */
.aps-more{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.aps-gap-22{height:22px}

/* ---------------------------------------------------------- forms (P4) */
.aps-field{margin-bottom:18px}
.aps-field label{display:block;font-family:var(--fd);font-weight:600;font-size:.87rem;margin-bottom:7px}
.aps-field .hint{display:block;font-size:.8rem;color:var(--muted);margin-bottom:7px;font-weight:400}
.aps-input,.aps-select,.aps-textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:12px 14px;font-family:var(--fb);font-size:.95rem;color:var(--ink);
}
.aps-input:focus,.aps-select:focus,.aps-textarea:focus{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.aps-textarea{min-height:150px;resize:vertical}
.aps-err{display:block;font-size:.83rem;color:#A11B1B;margin-top:6px;font-weight:600}
.aps-input.has-err,.aps-select.has-err,.aps-textarea.has-err{border-color:#A11B1B}

/* result panel shown after a form posts. never an alert(). */
.aps-result{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:24px}
.aps-result--ok{background:var(--wash);border-color:var(--amber)}
.aps-result--bad{background:#FDF2F2;border-color:#E0B4B4}
.aps-result b{display:block;font-family:var(--fd);font-size:1.02rem;margin-bottom:5px}
.aps-result span{display:block;font-size:.92rem;color:var(--muted);line-height:1.6}
.aps-result .aps-ref{
  display:inline-block;margin-top:12px;background:var(--ink);color:var(--sun-lite);
  font-family:var(--fd);font-weight:700;letter-spacing:.08em;padding:9px 14px;border-radius:0;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .aps-pcards{grid-template-columns:repeat(2,1fr)}
  .aps-plist{grid-template-columns:repeat(2,1fr)}
  .aps-psplit{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .aps-phero{padding:32px 0 38px}
  .aps-body.has-phero .aps-phero{padding:36px 0 42px;background-position:center 30%}
  .aps-pcards,.aps-plist{grid-template-columns:1fr}
  .aps-prose{font-size:.98rem}
  .aps-empty--lg{padding:28px}
}

/* ============================================================================
   PHASE 2  -  PUBLIC INNER PAGES
   Bronzebit Consult Ltd
   Filter bars, the school register table, article layout, zone cards,
   department cards, download rows and search results.
   ========================================================================== */

/* ------------------------------------------------------------- filter bar */
.aps-filter{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:14px;align-items:end;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-bottom:20px;
}
.aps-filter--4{grid-template-columns:1.5fr 1fr 1fr 1fr auto}
.aps-filter__f{min-width:0}
.aps-filter__f--wide{grid-column:span 1}
.aps-filter__f label{
  display:block;font-family:var(--fd);font-weight:600;font-size:.78rem;
  letter-spacing:.04em;margin-bottom:7px;color:var(--muted);
}
.aps-filter__a{display:flex;gap:9px;align-items:end;flex-wrap:wrap}
.aps-filter__a .aps-btn{padding:12px 20px}

/* active filter chips. square, per house rule. */
.aps-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.aps-chips__l{font-size:.8rem;color:var(--muted);font-family:var(--fd);font-weight:600}
.aps-chip{
  display:inline-flex;align-items:center;gap:7px;border-radius:0;
  background:var(--sun);color:var(--on-sun);text-decoration:none;
  font-family:var(--fd);font-weight:700;font-size:.78rem;padding:6px 10px;
}
.aps-chip:hover{background:var(--ink);color:var(--sun-lite)}
.aps-chip svg{width:13px;height:13px}

/* --------------------------------------------------- school register table */
/* Real table on desktop, stacked cards below 860px, one set of markup.
   data-label on each cell supplies the row heading in the stacked view. */
.aps-tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.aps-stable{width:100%;border-collapse:collapse;font-size:.92rem}
.aps-stable thead th{
  background:var(--sun);color:var(--on-sun);text-align:left;
  font-family:var(--fd);font-weight:700;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 16px;white-space:nowrap;
}
.aps-stable tbody td{padding:15px 16px;border-top:1px solid var(--line);vertical-align:top}
.aps-stable tbody tr:hover{background:var(--wash)}
.aps-stable__n{
  font-family:var(--fd);font-weight:700;color:var(--ink);text-decoration:none;
  display:block;line-height:1.35;
}
.aps-stable__n:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-stable__s{display:block;font-size:.79rem;color:var(--muted);margin-top:3px}
.aps-stable a{color:var(--ink)}

@media (max-width:860px){
  .aps-tablewrap{border:0;background:none;overflow:visible}
  .aps-stable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .aps-stable,.aps-stable tbody,.aps-stable tr,.aps-stable td{display:block;width:100%}
  .aps-stable tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:12px;padding:6px 0;
  }
  .aps-stable tbody td{border-top:0;padding:9px 18px;display:flex;gap:14px;align-items:baseline}
  .aps-stable tbody td:first-child{
    padding-top:16px;padding-bottom:12px;border-bottom:1px solid var(--line);
    margin-bottom:8px;display:block;
  }
  .aps-stable tbody td::before{
    content:attr(data-label);flex:0 0 40%;font-family:var(--fd);font-weight:600;
    font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  }
  .aps-stable tbody td:first-child::before{display:none}
  .aps-stable tbody td:last-child{padding-bottom:16px}
}

/* ------------------------------------------------------------- article page */
.aps-artmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.aps-artmeta__d{font-size:.85rem;color:rgba(255,255,255,.7)}
.aps-artimg{margin-bottom:28px}
.aps-artimg img{width:100%;border-radius:var(--r);border:1px solid var(--line)}

.aps-nitem__d{display:block;font-size:.78rem;color:var(--muted);margin-top:7px}

.aps-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.aps-prevnext__i{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-prevnext__i:hover{border-color:var(--ink);transform:translateY(-2px)}
.aps-prevnext__i small{
  display:block;font-family:var(--fd);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
.aps-prevnext__i b{display:block;font-family:var(--fd);font-size:.94rem;font-weight:700;line-height:1.4}
.aps-prevnext__i.is-next{text-align:right}
.aps-prevnext__i.is-off{border:0;background:none}

.aps-share{display:flex;gap:8px;flex-wrap:wrap}
.aps-share__b{
  border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;
  padding:10px 16px;font-family:var(--fd);font-weight:600;font-size:.85rem;
  color:var(--ink);text-decoration:none;
}
.aps-share__b:hover{border-color:var(--ink);background:var(--wash)}

/* --------------------------------------------------------- sidebar pieces */
.aps-sidebreak{border-top:1px solid var(--line);margin:26px 0 22px}
.aps-catlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.aps-catlist__i{
  padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:.89rem;color:var(--ink);line-height:1.45;
}
.aps-catlist__i:hover{color:var(--amber)}
.aps-catlist__i.is-on{font-weight:700;color:var(--amber)}

/* ---------------------------------------------------------- zone cards */
.aps-zcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 32px;margin-bottom:16px;scroll-margin-top:110px;
}
.aps-zcard__h{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.aps-zcard__h h2{font-size:1.5rem;font-weight:700;margin-top:8px}
.aps-zcard__av{
  width:62px;height:62px;flex:0 0 62px;border-radius:var(--r);background:var(--sun);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;
  font-size:1.2rem;color:var(--on-sun);
}
.aps-zcard__g{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px;
}
.aps-zcard__g div{background:#fff;padding:15px 16px;min-width:0}
.aps-zcard__g small{
  display:block;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.aps-zcard__g b{font-family:var(--fd);font-size:.95rem;font-weight:700;line-height:1.35;display:block}
.aps-zcard__a{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:18px}
.aps-zcard__a b{color:var(--ink);font-family:var(--fd);font-size:.85rem}
.aps-zcontact--light{color:var(--muted);font-size:.89rem;line-height:1.75}
.aps-zcontact--light b{color:var(--ink);font-family:var(--fd)}

/* ------------------------------------------------------- department cards */
.aps-pcard__s{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:12px}
.aps-pcard__h{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.aps-pcard__av{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--r);background:var(--ink);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;
  font-size:.85rem;color:var(--sun-lite);
}
.aps-pcard__h b{display:block;font-family:var(--fd);font-size:.9rem;font-weight:700;line-height:1.3}
.aps-pcard__h small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}

/* --------------------------------------------------------- download rows */
.aps-dlist{border-top:1px solid var(--line)}
.aps-dfile{
  display:flex;gap:18px;align-items:flex-start;padding:20px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .18s;
}
.aps-dfile:hover{background:var(--wash)}
.aps-dfile__x{
  flex:0 0 58px;width:58px;height:58px;border-radius:var(--r);background:var(--ink);
  color:var(--sun-lite);display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.04em;
}
.aps-dfile__t{min-width:0;flex:1}
.aps-dfile__t b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;line-height:1.35;margin:7px 0 4px}
.aps-dfile__t p{font-size:.87rem;color:var(--muted);line-height:1.55;margin-bottom:5px}
.aps-dfile__t small{display:block;font-size:.78rem;color:var(--muted)}
.aps-dfile__g{
  flex:0 0 42px;width:42px;height:42px;border-radius:var(--r);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);
  align-self:center;transition:.18s;
}
.aps-dfile:hover .aps-dfile__g{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.aps-dfile__g svg{width:19px;height:19px}

/* ---------------------------------------------------------- search results */
.aps-searchcount{font-size:.92rem;color:var(--muted);margin-bottom:18px}
.aps-searchcount b{color:var(--ink)}
.aps-slist{border-top:1px solid var(--line)}
.aps-sitem{
  display:block;padding:20px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .18s;
}
.aps-sitem:hover{background:var(--wash)}
.aps-sitem b{display:block;font-family:var(--fd);font-size:1.02rem;font-weight:700;line-height:1.35;margin:8px 0 5px}
.aps-sitem p{font-size:.88rem;color:var(--muted);line-height:1.55}
.aps-sitem small{display:block;font-size:.78rem;color:var(--muted);margin-top:6px}

/* ------------------------------------------------------ definition record */
.aps-dl dl{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.aps-dl__r{display:grid;grid-template-columns:200px 1fr;gap:0;border-bottom:1px solid var(--line)}
.aps-dl__r:last-child{border-bottom:0}
.aps-dl dt{
  padding:14px 18px;background:var(--wash);font-family:var(--fd);font-weight:600;
  font-size:.82rem;color:var(--muted);
}
.aps-dl dd{margin:0;padding:14px 18px;font-size:.94rem}
.aps-dl dd a{color:var(--ink)}
@media (max-width:640px){
  .aps-dl__r{grid-template-columns:1fr}
  .aps-dl dt{padding-bottom:4px}
  .aps-dl dd{padding-top:4px}
}

/* ------------------------------------------------------------- misc phase 2 */
.aps-h2{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;margin-top:10px}
.aps-leads--2{grid-template-columns:repeat(2,1fr);max-width:660px}

@media (max-width:1180px){
  .aps-filter,.aps-filter--4{grid-template-columns:1fr 1fr}
  .aps-filter__a{grid-column:1 / -1}
  .aps-zcard__g{grid-template-columns:repeat(2,1fr)}
  .aps-leads--2{grid-template-columns:repeat(2,1fr);max-width:none}
}
@media (max-width:680px){
  .aps-filter,.aps-filter--4{grid-template-columns:1fr;padding:18px}
  .aps-prevnext{grid-template-columns:1fr}
  .aps-prevnext__i.is-next{text-align:left}
  .aps-prevnext__i.is-off{display:none}
  .aps-zcard{padding:24px}
  .aps-zcard__g{grid-template-columns:1fr}
  .aps-leads--2{grid-template-columns:1fr}
  .aps-dfile{gap:14px}
  .aps-dfile__x{flex:0 0 48px;width:48px;height:48px;font-size:.66rem}
  .aps-dfile__g{display:none}
}

/* ============================================================================
   PHASE 3  -  INTERACTIVE PAGES
   Bronzebit Consult Ltd
   Form groups, the honeypot, the school autocomplete, FAQ groups, events,
   the gallery grid and the lightbox.
   ========================================================================== */

/* ------------------------------------------------------------ form layout */
.aps-fgroup{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;margin-bottom:16px;
}
.aps-fgroup h2{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.aps-fgroup__h{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:20px}
.aps-frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aps-req{
  display:inline-block;background:var(--sun);color:var(--on-sun);border-radius:0;
  font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;margin-left:6px;vertical-align:middle;
}
.aps-input--ref{
  font-family:var(--fd);font-size:1.15rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
}
.aps-errlist{margin:8px 0 0;padding-left:1.2em;font-size:.9rem;line-height:1.6}
.aps-errlist li+li{margin-top:5px}

/* checkbox with a full explanation beside it, not a bare label */
.aps-check{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.aps-check input[type="checkbox"]{
  width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--ink);cursor:pointer;
}
.aps-check label{cursor:pointer;min-width:0}
.aps-check label b{display:block;font-family:var(--fd);font-size:.95rem;font-weight:700}
.aps-check label span{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:4px}

/* block revealed by the anonymity toggle */
.aps-reveal{overflow:hidden}
.aps-reveal.is-hidden{display:none}

/* HONEYPOT.
   Off-screen rather than display:none. Bots increasingly skip fields hidden
   with display:none or visibility:hidden, so those defeat the trap. */
.aps-hp{position:absolute!important;left:-9999px!important;top:auto!important;
        width:1px!important;height:1px!important;overflow:hidden!important}

/* -------------------------------------------------- school autocomplete */
.aps-ac{position:relative}
.aps-ac__list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--ink);border-radius:var(--r);
  box-shadow:0 24px 48px -28px rgba(11,27,51,.6);
  max-height:290px;overflow-y:auto;display:none;
}
.aps-ac__list.is-open{display:block}
.aps-ac__i{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:12px 15px;border-bottom:1px solid var(--line);font-family:var(--fb);
}
.aps-ac__i:last-child{border-bottom:0}
.aps-ac__i:hover,.aps-ac__i.is-on{background:var(--sun);color:#fff}
.aps-ac__i:hover small,.aps-ac__i.is-on small{color:rgba(255,255,255,.75)}
.aps-ac__i b{display:block;font-family:var(--fd);font-size:.92rem;font-weight:700;line-height:1.35}
.aps-ac__i small{display:block;font-size:.79rem;color:var(--muted);margin-top:2px}
.aps-ac__i.is-on small{color:rgba(255,255,255,.75)}
.aps-ac__none{padding:13px 15px;font-size:.87rem;color:var(--muted)}

/* ---------------------------------------------------------- status legend */
.aps-statuskey{display:flex;flex-direction:column;gap:11px}
.aps-statuskey>div{display:flex;gap:11px;align-items:flex-start}
.aps-statuskey>div>span:last-child{font-size:.85rem;color:var(--muted);line-height:1.45}
.aps-catlist__s{display:block;font-size:.79rem;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- FAQ */
.aps-faqgroup{margin-bottom:38px}
.aps-faqgroup:last-child{margin-bottom:0}
.aps-faqgroup .aps-acc{margin-top:14px}

/* -------------------------------------------------------------- events */
.aps-elist{border-top:1px solid var(--line)}
.aps-eitem{display:flex;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.aps-elist--past .aps-eitem{opacity:.72}
.aps-date--lg{flex:0 0 72px;width:72px;height:72px}
.aps-date--lg b{font-size:1.5rem}
.aps-eitem__t{min-width:0}
.aps-eitem__t h3{font-size:1.06rem;font-weight:700;line-height:1.35;margin-bottom:6px}
.aps-eitem__t p{font-size:.89rem;color:var(--muted);line-height:1.55;margin-bottom:8px}
.aps-eitem__m{
  display:block;font-family:var(--fd);font-size:.8rem;font-weight:600;color:var(--amber);
}

/* -------------------------------------------------------------- gallery */
.aps-agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.aps-album{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-album:hover{border-color:var(--ink);transform:translateY(-3px)}
.aps-album__c{
  display:block;aspect-ratio:4/3;background:var(--wash) var(--img) center/cover no-repeat;
  position:relative;
}
.aps-album__c .aps-badge{position:absolute;left:12px;bottom:12px}
.aps-album__t{display:block;padding:16px 18px 20px}
.aps-album__t b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;line-height:1.35}
.aps-album__t p{font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:5px}
.aps-album__t small{display:block;font-size:.78rem;color:var(--muted);margin-top:7px}

.aps-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.aps-photo{
  display:block;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--wash);aspect-ratio:1/1;
}
.aps-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.aps-photo:hover img{transform:scale(1.05)}
.aps-photo__c{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  background:linear-gradient(0deg,rgba(11,27,51,.85),transparent);
  color:#fff;font-size:.78rem;line-height:1.35;
  opacity:0;transition:opacity .22s;
}
.aps-photo:hover .aps-photo__c,.aps-photo:focus-visible .aps-photo__c{opacity:1}

/* ------------------------------------------------------------- lightbox */
.aps-lb{
  position:fixed;inset:0;z-index:300;background:rgba(11,27,51,.94);
  display:flex;align-items:center;justify-content:center;padding:64px 24px;
}
.aps-lb[hidden]{display:none}
.aps-lb__f{margin:0;max-width:1100px;max-height:100%;display:flex;flex-direction:column;gap:14px}
.aps-lb__f img{
  max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;
  border-radius:var(--r);display:block;margin:0 auto;
}
.aps-lb__f figcaption{color:rgba(255,255,255,.82);font-size:.88rem;text-align:center;line-height:1.5}
.aps-lb__x,.aps-lb__p,.aps-lb__n{
  position:absolute;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;
  width:50px;height:50px;transition:background .2s,color .2s;
}
.aps-lb__x:hover,.aps-lb__p:hover,.aps-lb__n:hover{background:var(--sun);color:var(--on-sun)}
.aps-lb__x{top:18px;right:18px}
.aps-lb__p{left:18px;top:50%;transform:translateY(-50%)}
.aps-lb__n{right:18px;top:50%;transform:translateY(-50%)}
.aps-lb__x svg,.aps-lb__p svg,.aps-lb__n svg{width:22px;height:22px}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .aps-agrid{grid-template-columns:repeat(2,1fr)}
  .aps-pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .aps-fgroup{padding:20px}
  .aps-frow{grid-template-columns:1fr;gap:0}
  .aps-agrid{grid-template-columns:1fr}
  .aps-pgrid{grid-template-columns:repeat(2,1fr)}
  .aps-eitem{gap:14px}
  .aps-date--lg{flex:0 0 58px;width:58px;height:58px}
  .aps-date--lg b{font-size:1.2rem}
  .aps-lb{padding:70px 12px}
  .aps-lb__p,.aps-lb__n{width:42px;height:42px}
  .aps-lb__p{left:8px}
  .aps-lb__n{right:8px}
  .aps-input--ref{font-size:1rem;letter-spacing:.08em}
}

/* ============================================================================
   FIELD ORDER  -  label, then control, then the note
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   THE PROBLEM THIS FIXES

   Two fields side by side, one with a hint line and one without, do not line
   up: the hint pushes its input down and the row reads as a staircase. The
   levy report showed it clearly - "Type of charge" had its select directly
   under the label while "Amount in naira" had a hint in between, so the two
   controls sat at different heights.

   THE FIX IS FLEXBOX ORDER, NOT MARKUP

   Making .aps-field a flex column and reordering the children puts the control
   immediately under the label everywhere, with the note beneath it. Doing it
   in CSS rather than by editing forty .aspx files means it also applies to any
   field added later, and to the ones built dynamically at runtime.

   A note on screen readers: they follow DOM order, so they still read
   label, then hint, then control - which is the better order for someone who
   cannot see the layout. Sighted users get label, control, note. Both orders
   are correct for their audience, which is a happy accident of doing this the
   lazy way.
   ========================================================================== */

.aps-field{display:flex;flex-direction:column;align-items:stretch}

.aps-field > label            { order:1 }
.aps-field > .aps-input,
.aps-field > .aps-select,
.aps-field > .aps-textarea,
.aps-field > .aps-ac,
.aps-field > input,
.aps-field > select,
.aps-field > textarea         { order:2 }
.aps-field > .hint            { order:3; margin:7px 0 0 }
.aps-field > .aps-err         { order:4 }

/* Rows: tops aligned, and each column is itself a column so the rule above
   keeps working inside them. */
.aps-frow{align-items:start}

/* The checkbox blocks are label-on-the-right, so they must not be reordered. */
.aps-check{display:flex;flex-direction:row}

/* ============================================================================
   TINTED SERVICE TILES  -  the softer, colourful treatment
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Modelled on the card grid the Ministry pointed at (waeconline.org.ng):
   a soft gradient wash, a solid icon chip in a stronger shade of the same hue,
   black type.

   TWO THINGS HELD BACK DELIBERATELY

   1. THE TYPE STAYS BLACK ON EVERY TINT. That is the same contrast rule the
      whole site runs on. Coloured headings on a coloured wash is where these
      grids usually stop being readable in sunlight on a cheap phone screen.

   2. THE CORNER RADIUS STAYS AT 8px. The reference cards use roughly double
      that. Matching it here would leave these six tiles softer than the fifty
      other cards on the site, which reads as an inconsistency rather than a
      style. Say the word and it is one token change across the whole thing.

   Each wash is a pair: a pale gradient for the card, a saturated flat for the
   icon chip. They are tuned to sit beside Delta yellow without competing
   with it, which is why none of them is a strong blue or a true red.
   ========================================================================== */

.aps-tile{position:relative;overflow:hidden}

/* the wash */
/* sun and ink are already defined above and keep their existing treatment:
   sun is the flat Delta yellow for the primary action, ink is black for
   the serious one. Only the six new washes are declared here. */
.aps-tile--mint  { background:linear-gradient(150deg,#E4F6EC,#C8EBDA); border-color:#BCE3D0 }
.aps-tile--sky   { background:linear-gradient(150deg,#E6F1FB,#CBE2F7); border-color:#BFD8F0 }
.aps-tile--lilac { background:linear-gradient(150deg,#EFE8FA,#DCCEF5); border-color:#D0C0EE }
.aps-tile--rose  { background:linear-gradient(150deg,#FCE9EF,#F8D2DE); border-color:#F0C4D3 }
.aps-tile--sand  { background:linear-gradient(150deg,#FBF1DF,#F4E2C2); border-color:#EBD6B2 }
.aps-tile--teal  { background:linear-gradient(150deg,#E2F4F4,#C4E8E8); border-color:#B6DEDE }

/* the icon chip */
.aps-tile--mint  .aps-tile__ico{background:#1F9D6B;border-color:#1F9D6B;color:#fff}
.aps-tile--sky   .aps-tile__ico{background:#2E7FD4;border-color:#2E7FD4;color:#fff}
.aps-tile--lilac .aps-tile__ico{background:#7B54C9;border-color:#7B54C9;color:#fff}
.aps-tile--rose  .aps-tile__ico{background:#D24C7B;border-color:#D24C7B;color:#fff}
.aps-tile--sand  .aps-tile__ico{background:#C08A2E;border-color:#C08A2E;color:#fff}
.aps-tile--teal  .aps-tile__ico{background:#1B8C90;border-color:#1B8C90;color:#fff}

/* type and affordances on a wash */
.aps-tile--mint  p,.aps-tile--sky p,.aps-tile--lilac p,
.aps-tile--rose  p,.aps-tile--sand p,.aps-tile--teal p{color:rgba(11,27,51,.68)}

.aps-tile--mint  .aps-tile__go,.aps-tile--sky .aps-tile__go,.aps-tile--lilac .aps-tile__go,
.aps-tile--rose  .aps-tile__go,.aps-tile--sand .aps-tile__go,.aps-tile--teal .aps-tile__go{color:var(--ink)}

.aps-tile--mint  .aps-badge--line,.aps-tile--sky .aps-badge--line,
.aps-tile--lilac .aps-badge--line,.aps-tile--rose .aps-badge--line,
.aps-tile--sand  .aps-badge--line,.aps-tile--teal .aps-badge--line{
  background:rgba(255,255,255,.7);border-color:rgba(11,27,51,.18);color:rgba(11,27,51,.72);
}

/* hover: lift, and darken the border rather than the fill, so the wash stays
   the same colour the eye first registered */
.aps-tile--mint:hover,.aps-tile--sky:hover,.aps-tile--lilac:hover,
.aps-tile--rose:hover,.aps-tile--sand:hover,.aps-tile--teal:hover{
  border-color:var(--ink);
}

@media (prefers-contrast:more){
  /* On a high-contrast setting the washes flatten to white so the black type
     keeps its full ratio. */
  .aps-tile--mint,.aps-tile--sky,.aps-tile--lilac,
  .aps-tile--rose,.aps-tile--sand,.aps-tile--teal{background:#fff}
}

/* ============================================================================
   DOWNLOADS AS A CARD GRID
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   The list gave every document the same weight and the page read as a
   spreadsheet. A grid of covers lets someone find the school calendar by
   recognising it rather than by reading nine titles.

   Cards with no uploaded cover draw one from the category wash plus the file
   type in large figures. Consistency matters more than fidelity here: a grid
   where some cards have artwork and the rest have a grey box looks broken.
   ========================================================================== */

.aps-dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}

.aps-dcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.aps-dcard:hover{
  border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 22px 46px -32px rgba(11,27,51,.6);
}

/* ---- the cover ---- */
.aps-dcard__c{
  position:relative;display:block;aspect-ratio:16/10;
  background-image:var(--img);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.aps-dcard__c--sun  { background-color:#FFE9A8; color:#8A6200 }
.aps-dcard__c--sky  { background-color:#E6F1FB; color:#2E7FD4 }
.aps-dcard__c--mint { background-color:#E4F6EC; color:#1F9D6B }
.aps-dcard__c--lilac{ background-color:#EFE8FA; color:#7B54C9 }
.aps-dcard__c--rose { background-color:#FCE9EF; color:#D24C7B }
.aps-dcard__c--teal { background-color:#E2F4F4; color:#1B8C90 }
.aps-dcard__c--sand { background-color:#FBF1DF; color:#C08A2E }

.aps-dcard__glyph{position:absolute;inset:0;display:grid;place-items:center;opacity:.24}
.aps-dcard__glyph svg{width:74px;height:74px}
.aps-dcard__ext{
  position:relative;font-family:var(--fd);font-weight:800;font-size:1.55rem;
  letter-spacing:.1em;
}
/* When a real cover is present the type moves to a corner tag so it never
   sits on top of the artwork. */
.aps-dcard__tag{
  position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--sun-lite);
  font-family:var(--fd);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  padding:3px 8px;border-radius:0;
}

/* ---- the body ---- */
.aps-dcard__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;min-width:0}
.aps-dcard__b b{
  display:block;font-family:var(--fd);font-size:1rem;font-weight:700;
  line-height:1.35;margin:8px 0 6px;color:var(--ink);
}
.aps-dcard__b p{font-size:.86rem;color:var(--muted);line-height:1.55}
.aps-dcard__m{display:block;font-size:.77rem;color:var(--muted);margin-top:10px}
.aps-dcard__go{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;
  font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--ink);
  transition:gap .18s;
}
.aps-dcard:hover .aps-dcard__go{gap:12px}

@media (max-width:1080px){ .aps-dgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .aps-dgrid{grid-template-columns:1fr} }

/* ============================================================================
   IN-BROWSER DOCUMENT READER
   ----------------------------------------------------------------------------
   The browser's own PDF viewer in a frame, with the Ministry's chrome around
   it. Not a flipbook: see the note at the top of Read.aspx.cs for why.
   ========================================================================== */

.aps-readbar{background:var(--ink);padding:16px 0;position:sticky;top:0;z-index:60}
.aps-readbar__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aps-readbar__t{flex:1;min-width:220px}
.aps-readbar__t b{
  display:block;font-family:var(--fd);font-size:1.02rem;font-weight:700;
  color:#fff;line-height:1.3;margin-top:6px;
}
.aps-readbar__t small{display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:3px}
.aps-readbar__a{display:flex;gap:9px;flex-wrap:wrap}
.aps-readbar .aps-btn--ghost{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.aps-readbar .aps-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sun-lite);color:var(--sun-lite)}

.aps-reader{background:#2A3B57;padding:0}
.aps-reader__f{
  display:block;width:100%;height:82vh;min-height:520px;border:0;background:#2A3B57;
}
.aps-reader__none{
  max-width:520px;margin:0 auto;padding:60px 24px;text-align:center;color:#fff;
}
.aps-reader__none b{display:block;font-family:var(--fd);font-size:1.05rem;margin-bottom:8px}
.aps-reader__none span{
  display:block;font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:20px;
}

.aps-catlist{display:flex;flex-direction:column}
.aps-catlist__i{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.45;
}
.aps-catlist__i:last-child{border-bottom:0}
.aps-catlist__i:hover{color:var(--amber)}

@media (max-width:760px){
  /* A PDF frame on a phone is a poor experience in every browser, so it gets
     less of the screen and the Download button carries more of the weight. */
  .aps-reader__f{height:60vh;min-height:360px}
  .aps-readbar{position:static}
}

/* ============================================================================
   HOME PAGE REVISIONS
   ----------------------------------------------------------------------------
   The ledger band was removed and the Delta band now stands alone, so it
   needs the vertical breathing room the ledger used to give it.
   ========================================================================== */

.aps-band--solo{margin-top:0;padding:38px 0}

/* ---- notice strip: continuous scroll, no underline ----
   ROOT CAUSE OF "IT DOES NOT SCROLL AND IT IS UNDERLINED"
   Two .aps-ticker__track blocks existed: an early one that underlined the
   links and gave the track overflow-x:auto, and a later one that animated it.
   The later block never reset overflow, so the track became its own scroll
   container and the translate had nothing to move in several browsers; and
   text-decoration was being set in two places. There is now exactly ONE
   definition of every ticker rule, here.

   HOW THE LOOP WORKS
   Default.aspx renders the notices twice (the second copy aria-hidden). Both
   copies sit side by side inside the viewport and slide left together; when
   the first copy has fully left, the second is exactly where the first began,
   so the jump back to 0 is invisible. mobse.js pads the copies out to at
   least the viewport width and sets the duration from the measured width, so
   one short notice scrolls at the same speed as twelve long ones.

   It pauses on hover and on keyboard focus: a notice that will not hold still
   long enough to be read or clicked is decoration, not information.          */

.aps-ticker{background:var(--sun);border-bottom:1px solid var(--amber);color:var(--on-sun)}
.aps-ticker__in{display:flex;align-items:center;gap:16px;padding:11px 0;min-width:0}
.aps-ticker .aps-badge--ink{background:var(--ink);color:var(--sun-lite);flex:0 0 auto}
.aps-ticker__vp{
  flex:1;min-width:0;overflow:hidden;position:relative;
  display:flex;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.aps-ticker__track{
  display:flex;align-items:center;gap:0;flex:0 0 auto;
  white-space:nowrap;overflow:visible;min-width:0;padding-right:0;
  animation:aps-tick var(--tick,42s) linear infinite;
  will-change:transform;
}
.aps-ticker__vp:hover .aps-ticker__track,
.aps-ticker__vp:focus-within .aps-ticker__track{animation-play-state:paused}

@keyframes aps-tick{
  from{transform:translateX(0)}
  to  {transform:translateX(-100%)}
}

/* no underline, on any state, on the blue strip */
.aps-ticker__track a,
.aps-ticker__track a:link,
.aps-ticker__track a:visited{
  color:var(--on-sun);font-size:.89rem;font-weight:500;white-space:nowrap;
  text-decoration:none;border-bottom:0;padding:0 4px;
}
.aps-ticker__track a:hover,
.aps-ticker__track a:focus{text-decoration:none;border-bottom:0;color:#fff;opacity:.85}
.aps-ticker__dot{padding:0 14px;opacity:.5;color:var(--on-sun);flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  /* Do not move it at all for anyone who has asked for that. The strip becomes
     a normal scrollable row instead of an animated one. */
  .aps-ticker__track{animation:none}
  .aps-ticker__vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .aps-ticker__track + .aps-ticker__track{display:none}
}

/* ---- uploaded logo ----
   The built-in seal is a 54px yellow disc with a ring, which is right for the
   inline SVG emblem it was drawn for. An uploaded logo is a different problem:
   the Delta mark supplied is 133x177, i.e. PORTRAIT, and forcing that into a
   circle letterboxes it to 41x54 with dead space either side and a ring
   cropping the corners of the map.

   So when a real image is present the container drops the disc entirely: no
   circle, no yellow fill, no ring, and the width is free to follow the image's
   own aspect ratio up to a sensible cap. Height stays fixed so the header does
   not change height when the logo is swapped.

   The result is that a portrait crest, a square coat of arms and a wide
   wordmark all render correctly without anyone editing CSS. */
.aps-seal--img{
  background:transparent;border-radius:0;box-shadow:none;padding:0;
  width:auto;flex:0 0 auto;max-width:96px;height:54px;
  display:flex;align-items:center;justify-content:flex-start;
  transition:height .25s;
}
.aps-seal--img img{
  width:auto;height:100%;max-width:96px;object-fit:contain;display:block;
}

/* ---- the stuck header must not re-apply the disc ----
   .aps-hdr.is-stuck .aps-seal sets a black fill and a gold ring, which is right
   for the inline SVG emblem and wrong for an uploaded logo: it puts the client's
   map inside a dark bordered box on a yellow bar, which is what the "logo on
   other pages" screenshot showed.

   That rule has two classes and therefore beats a single .aps-seal--img. These
   selectors match its specificity so the plain image treatment holds in every
   header state. */
.aps-hdr .aps-seal--img,
.aps-hdr.is-stuck .aps-seal--img{
  background:transparent;box-shadow:none;border-radius:0;
  width:auto;flex:0 0 auto;
}
.aps-hdr.is-stuck .aps-seal--img{height:38px}
.aps-hdr .aps-seal--img img,
.aps-hdr.is-stuck .aps-seal--img img{width:auto;height:100%}

.aps-foot .aps-seal--img{height:44px;background:transparent;box-shadow:none}

@media (max-width:760px){
  .aps-seal--img{height:42px;max-width:76px}
  .aps-seal--img img{max-width:76px}
}

/* ============================================================================
   TYPEFACE
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Sora out, Plus Jakarta Sans in, at the client's request after comparing the
   site against waeconline.org.ng.

   The complaint was correct and worth naming precisely rather than treating as
   taste. Sora is a display face with tight sidebearings and idiosyncratic
   letterforms - the single-storey 'a', the flat-sided 'e' - which read as
   deliberate at 60px and as cramped and slightly odd at 16px. Set across a
   whole government site it made the headings feel narrow and the running text
   feel crowded, which is exactly the difference visible between the two
   screenshots.

   Plus Jakarta Sans is more open, rounder in the bowls, and holds its shape
   from 12px to 72px. It carries the same friendly geometric feel as the
   reference site without Poppins' problem, which is that Poppins' near-circular
   letterforms are lovely in a heading and tiring in a paragraph.

   Inter stays for body copy. It is the most legible screen face available for
   small sizes and its tabular numerals matter on a site full of dates, file
   sizes and reference numbers.

   TO CHANGE IT AGAIN: one line. The --fd token at the top of this file and the
   same token in admin.css, plus the Google Fonts href in the four master and
   standalone pages. Nothing else names a typeface.
   ========================================================================== */

:root{
  /* Plus Jakarta Sans sits slightly wider than Sora at the same size, so the
     display sizes come down a touch to keep the same measure per line. */
  --fd:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}

h1,h2,h3,h4,.aps-btn,.aps-eyebrow{letter-spacing:-.01em}
.aps-hero__h{letter-spacing:-.025em}

/* ---- four-column document grid ----
   Three columns left each card around 400px wide, which is far more than a
   title and two lines of metadata need; the cards read as oversized and the
   page as sparse. Four brings each card to roughly 300px, which is about the
   width of the cover image at its natural size.

   The breakpoints step down 4 -> 3 -> 2 -> 1 rather than jumping, so there is
   never a row with one card stranded on its own. */

.aps-dgrid--4{grid-template-columns:repeat(4,1fr);gap:14px}

@media (max-width:1320px){ .aps-dgrid--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1020px){ .aps-dgrid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){  .aps-dgrid--4{grid-template-columns:1fr} }

/* Narrower cards need tighter interiors or the text runs out of room. */
.aps-dgrid--4 .aps-dcard__b{padding:15px 16px 17px}
.aps-dgrid--4 .aps-dcard__b b{font-size:.94rem;margin:7px 0 5px}
.aps-dgrid--4 .aps-dcard__b p{font-size:.82rem}
.aps-dgrid--4 .aps-dcard__m{font-size:.74rem}
.aps-dgrid--4 .aps-dcard__ext{font-size:1.3rem}
.aps-dgrid--4 .aps-dcard__glyph svg{width:60px;height:60px}

/* ============================================================================
   PROSE  -  justification and measure
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Two changes, and the second matters more than the one that was asked for.

   1. JUSTIFIED, AS REQUESTED - BUT ONLY WITH HYPHENATION ON.

      text-align:justify on its own is how you get rivers: the browser has no
      permission to break words, so it stretches the spaces instead, and on a
      line with two long words it stretches them a long way. hyphens:auto gives
      it somewhere else to go. The two belong together and justify without it
      looks worse than ragged-right, not better.

      Turned off below 760px. On a phone the measure is short enough that even
      with hyphenation the gaps become obvious, and ragged-right is cleaner.

   2. THE MEASURE WAS THE ACTUAL PROBLEM.

      The About page is on the Wide template, which sets max-width:none, so its
      paragraphs were running to roughly 134 characters a line. Comfortable is
      60-75; past about 90 the eye loses its place returning to the left margin,
      and the page reads as unfinished however it is aligned.

      "Wide" should mean wide TABLES and wide IMAGES, not wide paragraphs. So
      the wide template keeps its full width for everything else and its running
      text is capped at 86ch - generous, still visibly wider than Standard, and
      inside the range where justification behaves.
   ========================================================================== */

.aps-prose{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
     -moz-hyphens:auto;
          hyphens:auto;
  hyphenate-limit-chars:6 3 3;   /* no hyphenating short words */
}

/* Only running text is justified. A justified heading, list item or caption
   reads as a mistake, and a justified table cell is unreadable. */
.aps-prose h2,
.aps-prose h3,
.aps-prose h4,
.aps-prose li,
.aps-prose td,
.aps-prose th,
.aps-prose figcaption,
.aps-prose blockquote cite{
  text-align:left;
  -webkit-hyphens:manual;
     -moz-hyphens:manual;
          hyphens:manual;
}

/* The last line of a paragraph stays left, never stretched across the column. */
.aps-prose p{text-align-last:auto}

/* Wide template: full width for tables and images, readable measure for text. */
.aps-prose--wide{max-width:none}
.aps-prose--wide > p,
.aps-prose--wide > ul,
.aps-prose--wide > ol,
.aps-prose--wide > h2,
.aps-prose--wide > h3,
.aps-prose--wide > h4,
.aps-prose--wide > blockquote{max-width:86ch}
.aps-prose--wide > table,
.aps-prose--wide > figure,
.aps-prose--wide > img,
.aps-prose--wide > .aps-tablewrap{max-width:none;width:100%}

@media (max-width:760px){
  .aps-prose{
    text-align:left;
    -webkit-hyphens:manual;
       -moz-hyphens:manual;
            hyphens:manual;
  }
}

@media print{
  /* Hyphenation across a page break is a nuisance in a printed circular. */
  .aps-prose{-webkit-hyphens:manual;-moz-hyphens:manual;hyphens:manual}
}

/* ============================================================================
   DELTA MoBSE ADDITIONS
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Field office table on the zones page, the website line on a school record,
   and small utilities. The school websites themselves have their own
   stylesheet (assets/css/school.css) and never load this one.
   ========================================================================== */

.aps-dim{color:var(--muted)}
.aps-zcard__sub{font-size:1.05rem;font-weight:700;margin:4px 0 12px}
.aps-stable--offices{font-size:.9rem}
.aps-stable--offices tbody td{padding:12px 16px}
.aps-stable--offices .aps-stable__n{font-size:.92rem}
.aps-stable__tel a{white-space:nowrap;text-decoration:none;font-weight:600}
.aps-stable__tel a:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-zcard .aps-tablewrap{margin-bottom:22px}

/* the school record: a website row gets a real link and a small globe */
.aps-rec__site{display:inline-flex;align-items:center;gap:8px;color:var(--amber);text-decoration:none;font-weight:700}
.aps-rec__site svg{width:16px;height:16px;flex:0 0 16px}
.aps-rec__site:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}

@media (max-width:860px){
  .aps-stable--offices tbody td:first-child{padding-top:14px}
}