@font-face{font-family:'Tajawal';src:url(fonts/Tajawal-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url(fonts/Tajawal-Bold.woff2) format('woff2');font-weight:600 700;font-display:swap}
/* Colours match abdulhakeemor.com (assets/css/style.css). */
:root{--navy:#18211f;--teal:#9b422b;--teal-hover:#7e3523;--accent-light:#e78d70;--soft:#eaf1ed;--bg:#f7f9f7;--line:#d3ddd7;--ink:#18211f;--muted:#4f5d57;--warn:#b42318;--ok:#067647}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.55}
a{color:var(--teal)}
h1{font-size:1.5rem;margin:.2rem 0 .6rem}h2{font-size:1.15rem;margin:.2rem 0 .6rem}h3{font-size:1.05rem;margin:0 0 .2rem}
.wrap{max-width:1100px;margin-inline:auto;padding:1rem}
.topbar{background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.topbar a,.topbar .link{color:#fff;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;padding:.2rem .1rem}
.topbar nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.topbar nav a.on{border-bottom:2px solid var(--accent-light)}
.brand{font-weight:700;display:inline-flex;align-items:center;gap:.5rem}.brand img{background:#fff;border-radius:4px;padding:2px;height:29px;width:auto}.mark{background:var(--accent-light);color:var(--navy);border-radius:6px;padding:.05rem .45rem;font-weight:700;margin-inline-end:.3rem}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;margin:.8rem 0}
.card.narrow{max-width:420px;margin-inline:auto}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.grid .card{margin:0}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.row.between{justify-content:space-between}
.two,.three{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:1fr 1fr 1fr}}
.form label,form>label{display:block;margin:.5rem 0;font-weight:600;font-size:.92rem}
input,select,textarea{display:block;width:100%;margin-top:.2rem;padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input[readonly],textarea[readonly],input:disabled{background:var(--soft)}
input[type=checkbox]{display:inline-block;width:1.25rem;height:1.25rem;margin:0;vertical-align:middle;accent-color:var(--teal)}
.check{padding:.35rem 0}
fieldset{border:1px solid var(--line);border-radius:8px;margin:.5rem 0;padding:.4rem .8rem}
.check{display:inline-block!important;margin-inline-end:1rem!important}
.field-error{display:block;color:var(--warn);font-weight:400;font-size:.85rem}
.btn{display:inline-block;background:var(--teal);color:#fff;border:1px solid var(--teal);border-radius:8px;padding:.5rem .95rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal-hover);border-color:var(--teal-hover)}.btn.ghost{background:#fff;color:var(--teal)}.btn.ghost:hover{background:var(--soft);color:var(--teal-hover)}.btn.small{padding:.2rem .6rem;font-size:.85rem}
summary.btn{list-style:none;display:inline-block}
form.inline{display:inline}
.flash{padding:.6rem .9rem;border-radius:8px;margin:.6rem 0;border:1px solid}
.flash.ok{background:#ecfdf3;border-color:#abefc6;color:var(--ok)}.flash.error{background:#fef3f2;border-color:#fecdca;color:var(--warn)}.flash.info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.muted{color:var(--muted)}.small{font-size:.88rem}.nowrap{white-space:nowrap}.break{word-break:break-all}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 .6rem;font-size:.8rem}
.badge{display:inline-block;border-radius:6px;padding:0 .5rem;font-size:.8rem;font-weight:600;background:#eef0f3}
.s-live{background:#d1fadf;color:var(--ok)}.s-planned{background:#e0eaff;color:#1849a9}.s-paused{background:#fef0c7;color:#93370d}.s-completed{background:#e9eaeb;color:#414651}
.c-approved{background:#d1fadf;color:var(--ok)}.c-pending{background:#fef0c7;color:#93370d}.c-rejected{background:#fee4e2;color:var(--warn)}
.group small{color:var(--muted);font-weight:400}
progress{width:100%;height:.7rem;accent-color:var(--muted)}progress.over{accent-color:var(--warn)}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:.5rem .9rem;text-decoration:none;color:var(--ink);border-bottom:3px solid transparent;white-space:nowrap}.tabs a.on{border-color:var(--teal);font-weight:700}
.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:.4rem .6rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}th{background:var(--soft)}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem;margin:0}.facts dt{font-weight:600}.facts dd{margin:0}
.item{border-top:1px solid var(--line);padding:.6rem 0}.item:first-of-type{border-top:0}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}.filters label{flex:1 1 150px;margin:0}
/* added in v2 */
.skip{position:absolute;inset-inline-start:-999px;top:0;background:#fff;color:var(--navy);padding:.5rem 1rem;z-index:10}.skip:focus{inset-inline-start:0}
:focus-visible{outline:3px solid var(--accent-light);outline-offset:2px}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.split{display:grid;gap:.8rem;grid-template-columns:1fr}@media(min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}.split .card{margin:0}
h2.spaced{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
tr.current td{background:var(--soft)}
table.compact{margin-top:.8rem;font-size:.85rem}
.tiles{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:.8rem 0}
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem}.tile span{display:block;color:var(--muted);font-size:.85rem}.tile strong{font-size:1.3rem}
.card.best{border-inline-start:4px solid var(--teal)}
.creative-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.creative{border:1px solid var(--line);border-radius:10px;padding:.7rem}.creative p{margin:.3rem 0}
.thumb{aspect-ratio:4/3;background:var(--soft);border-radius:8px;display:grid;place-items:center;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}
.logo{background:#fff;border-radius:8px;padding:4px;height:64px;width:auto}
.view-head{margin:.8rem 0}.view-head .logo{height:56px}
/* report */
.report{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem;margin:.8rem 0}
.report-head{display:flex;gap:1rem;align-items:center;background:var(--navy);color:#fff;border-radius:8px;padding:1rem}
.report-head h1{margin:0;color:#fff}.report-head p{margin:0}
.mark.big{font-size:1.6rem;padding:.2rem .8rem;margin:0}
.report h2{border-bottom:2px solid var(--teal);padding-bottom:.2rem;margin-top:1.4rem}
.report tfoot th{background:var(--soft)}.prose{white-space:normal}.report-foot{margin-top:1.6rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:.5rem}
@page{size:A4;margin:14mm}
@media print{
  body{background:#fff;font-size:11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print,.topbar,.flash{display:none!important}
  .wrap{max-width:none;padding:0}
  .report{border:0;padding:0;margin:0}
  .report-head{background:var(--navy)!important;color:#fff!important}
  .table-wrap{overflow:visible}table{font-size:9.5pt}
  tr,.keep,h2{break-inside:avoid;page-break-inside:avoid}h2{break-after:avoid}
  a{color:inherit;text-decoration:none}
}

/* AOR site finish: same glossy pill buttons and soft cards as abdulhakeemor.com (assets/css/style.css). */
.btn, button:not(.link) {
  border-radius: 999px; position: relative; isolation: isolate; overflow: hidden;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 12%, transparent),
    0 8px 24px color-mix(in srgb, var(--teal) 30%, transparent), inset 0 2px 10px rgb(255 255 255 / 22%);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
:is(.btn, button:not(.link))::before {
  content: ""; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 5%) 45%, transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.btn, button:not(.link)):hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--teal) 16%, transparent),
      0 14px 34px color-mix(in srgb, var(--teal) 40%, transparent), inset 0 2px 10px rgb(255 255 255 / 28%);
  }
  :is(.btn, button:not(.link)):active:not(:disabled) { transform: scale(.98); }
  :is(.grid > .card, .creative, .tile) { transition: transform 180ms ease, box-shadow 180ms ease; }
  :is(.grid > .card, .creative, .tile):hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(24 33 31 / 14%); }
}
:is(.card, .tile, .creative, .report) { box-shadow: 0 10px 28px rgb(24 33 31 / 8%); }
.btn.small { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 10%, transparent), 0 4px 12px color-mix(in srgb, var(--teal) 22%, transparent); }
.card { border-radius: 12px; }