/* Abilities Bountiful — brand sheet v3 (October 2026). The colours of the Abilities Bountiful mark —
   royal blue, sky blue, black and white — carried through the whole site. By day: white ground, black ink,
   royal blue for the one action and the links, sky blue for light and accent. After dark: black ground,
   white ink, the same blues. Type: Cormorant Garamond for headlines and figures (the voice), Inter for
   running text and everything a reader presses or types into (the hand); self-hosted under /fonts/ under
   the SIL Open Font License. Loaded after each page's own styles: it supplies the tokens every page reads. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/cormorant-garamond-400.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-500.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cormorant-garamond-600.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/cormorant-garamond-600.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/cormorant-garamond-400-italic.woff") format("woff")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-500-italic.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-600.woff") format("woff")}

/* ---- Tokens. White, black and the two blues (default) ---- */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#eef3fb;
  --ink:#0b0b0b; --muted:#4f5b6e; --line:rgba(51,97,225,.22);
  --blue:#3361e1; --blue-deep:#2449ad; --blue-soft:#e9eefc;
  --sky:#51a8db; --sky-deep:#1f7fb3; --sky-soft:#e6f3fa;
  --accent:#3361e1; --accent-ink:#ffffff; --accent-soft:#e9eefc; --gold:#2449ad; --gold-deep:#2449ad; --gold-soft:#e9eefc;
  --good:#2f7a4a; --good-soft:#e5f1e8; --warn:#9a5b12; --warn-soft:#f8ecd9;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --btn-bg:#3361e1; --btn-bg-hover:#2b55c9; --btn-ink:#ffffff; --glow:rgba(81,168,219,.35);
  --radius:6px; --radius-sm:4px;
}
/* ---- After dark: black, white and the blues ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0b0b; --surface:#141414; --surface-2:#1a1e27;
    --ink:#f5f7fa; --muted:#b3bac6; --line:rgba(81,168,219,.30);
    --blue:#7aa0ff; --blue-deep:#a3bcff; --blue-soft:#16224a;
    --sky:#51a8db; --sky-deep:#7cc4ea; --sky-soft:#10232e;
    --accent:#7aa0ff; --accent-ink:#0b0b0b; --accent-soft:#16224a; --gold:#7aa0ff; --gold-deep:#a3bcff; --gold-soft:#16224a;
    --good:#7cc497; --good-soft:#15301f; --warn:#e0a65a; --warn-soft:#3a2a12; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0b0b; --surface:#141414; --surface-2:#1a1e27;
  --ink:#f5f7fa; --muted:#b3bac6; --line:rgba(81,168,219,.30);
  --blue:#7aa0ff; --blue-deep:#a3bcff; --blue-soft:#16224a;
  --sky:#51a8db; --sky-deep:#7cc4ea; --sky-soft:#10232e;
  --accent:#7aa0ff; --accent-ink:#0b0b0b; --accent-soft:#16224a; --gold:#7aa0ff; --gold-deep:#a3bcff; --gold-soft:#16224a;
  --good:#7cc497; --good-soft:#15301f; --warn:#e0a65a; --warn-soft:#3a2a12; color-scheme:dark;
}

/* ---- The house's few rules ---- */
html,body{overflow-x:hidden}
body{font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:.01em}
.accent,h1 .accent{color:var(--blue);font-style:italic;font-weight:500}
a{color:var(--blue-deep)}
.lede{font-size:1.15rem}
ol.stages span,.step p,.vol p,.note,.notice,.small{font-size:1rem}
ol.stages strong{font-family:var(--display);font-weight:600;font-size:1.25rem}
ol.stages li::before,.step .n{font-family:var(--ui);font-weight:600;background:var(--blue-soft);color:var(--blue-deep)}
h3{font-weight:500}
table{font-family:var(--ui);font-size:.95rem}
.btn{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:.02em;border-radius:var(--radius);border:1px solid var(--btn-bg);padding:13px 24px;background:var(--btn-bg);color:var(--btn-ink);box-shadow:0 8px 24px -12px rgba(51,97,225,.55);text-decoration:none}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn.secondary{background:transparent;color:var(--blue-deep);border:1px solid var(--blue);box-shadow:none}
.btn.quiet{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.eyebrow,.es-eyebrow{font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--blue-deep)}
hr,.es-rule{border:0;border-top:1px solid var(--line)}
::selection{background:var(--blue-soft)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
header.top{position:relative;z-index:2}
.top .btn{box-shadow:none;padding:10px 18px}

/* ---- The lockup: the Abilities Bountiful mark beside the name, set like the ring of the logo ---- */
.es-brand{display:inline-flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.es-brand .es-seal{width:44px;height:44px;flex:0 0 auto;color:var(--blue-deep);border-radius:50%}
.es-brand .es-seal svg,.es-brand .es-seal img{width:100%;height:100%;display:block;border-radius:50%}
.es-brand .ab-plate{width:44px;height:44px;padding:2px}
.es-brand .es-name{display:flex;flex-direction:column;line-height:1.05}
.es-brand .es-word{font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--ink)}
.es-brand .es-desc{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--blue-deep);margin-top:4px;letter-spacing:.01em}
.es-brand.small .es-seal,.es-brand.small .ab-plate{width:34px;height:34px}
.es-brand.small .es-word{font-size:11px;letter-spacing:.3em;text-indent:.3em}
.es-brand.small .es-desc{font-size:1rem;margin-top:3px}

/* the publisher line in every footer */
footer,.foot{border-top:1px solid var(--line)}
.es-colophon{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:var(--ui);font-size:.95rem}
.foot>span:not(.ab-plate){flex:1 1 480px;min-width:0}
.foot{font-size:.95rem}

/* the large mark on the summaries page: the Employment Services seal in blue */
.seal-head{color:var(--blue);filter:drop-shadow(0 0 18px var(--glow))}

/* cards and notices keep a blue hairline, never a heavy shadow */
.card,.step,.stat,.kpi,.vol,.cta,.note,.notice,.panel,details{border-color:var(--line)!important;box-shadow:none!important}
.glance>div{border-color:var(--line)}

/* the hero carries the mark's light: a sky-blue glow, soft, off the top-left */
.hero{position:relative;z-index:0}
.hero::before{content:"";position:absolute;z-index:-1;left:-260px;top:-320px;width:900px;height:900px;background:radial-gradient(circle closest-side,rgba(81,168,219,.28),rgba(51,97,225,.08) 45%,transparent 100%);pointer-events:none}

/* ---- The publisher's mark: the Abilities Bountiful logo, always on its own white plate ---- */
.ab-plate{display:inline-block;flex:0 0 auto;background:#ffffff;border-radius:50%;padding:5%;box-shadow:0 0 0 1px var(--line);line-height:0}
.ab-plate .ab-logo{display:block;width:100%;height:auto;border-radius:50%}
.ab-plate.ab-small{width:56px;height:56px;padding:3px}
.es-colophon .ab-plate.ab-small{margin-right:2px}
.foot .ab-plate.ab-small{width:44px;height:44px;margin-right:10px}
.publisher{border-top:1px solid var(--line);padding:48px 0}
.publisher .pub-grid{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:start}
.publisher .pub-grid>.ab-plate{width:180px;height:180px;padding:10px}
.publisher h2{margin:4px 0 8px}
@media (max-width:640px){.publisher .pub-grid{grid-template-columns:1fr}.publisher .pub-grid>.ab-plate{width:140px;height:140px}}

/* ---- Zuri's room: the right-hand side of the hero ---- */
.zuri-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 26px 24px;text-align:center;margin:28px 0 8px;max-width:420px}
.zuri-card .portrait{width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto 18px;box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--blue),0 0 40px var(--glow)}
.zuri-card .portrait img{width:100%;height:100%;display:block;object-fit:cover}
.zuri-card .eyebrow{margin:0 0 6px}
.zuri-card h2{font-size:1.9rem;margin:0 0 8px}
.zuri-card p{max-width:none;font-size:1rem;color:var(--muted);margin:0}
.zuri-card .actions{display:flex;justify-content:center;margin-top:18px}
.zuri-card .room{margin-top:18px}
.zuri-card .room:empty{display:none}
.zuri-card .disclosure{font-size:.86rem;margin-top:14px}
@media (min-width:980px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-items:center}
  .hero>*{grid-column:1}
  .hero>.stats{grid-column:1 / -1}
  .hero>.zuri-card{grid-column:2;grid-row:1 / span 4;margin:0;justify-self:end;width:400px;max-width:none}
}