/* Afric Business modern polish — 2026-08-28 */
:root{--ab-gold:#b88d42;--ab-navy:#17384a;--ab-ink:#263944;--ab-soft:#f5f6f5;--ab-line:#dfe3e4}

/* Fix homepage service cards: identical visual rhythm on desktop/tablet. */
#main .cards{align-items:stretch}
#main .cards>.card{display:flex;flex-direction:column;min-width:0;height:100%;padding-bottom:26px!important}
#main .cards>.card .card-media{height:250px!important;margin:0 0 22px!important;overflow:hidden;background:#ecefed}
#main .cards>.card .card-media img{width:100%;height:100%;object-fit:cover;object-position:center}
#main .cards>.card h3{min-height:3.3rem}
#main .cards>.card p{flex:1}
#main .cards>.card .card-link{margin-top:auto;padding-top:18px}

/* Modern focus treatment and keyboard accessibility. */
:where(a,button,select,input,textarea):focus-visible{outline:3px solid rgba(184,141,66,.42);outline-offset:4px}
.skip-link{position:fixed;left:16px;top:12px;z-index:99999;transform:translateY(-160%);background:#fff;color:var(--ab-navy);padding:10px 14px;border:1px solid var(--ab-line);box-shadow:0 10px 30px rgba(23,56,74,.12);text-decoration:none;font-weight:700}
.skip-link:focus{transform:translateY(0)}

/* Fine premium hover polish – subtle, not template-like. */
@media (hover:hover) and (pointer:fine){
  #main .cards>.card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s ease}
  #main .cards>.card::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(209,174,103,.12),transparent 42%);transition:opacity .25s ease}
  #main .cards>.card:hover::after{opacity:1}
  #main .cards>.card:hover{transform:translateY(-3px)}
}

/* Thin reading/progress line, common on modern editorial/corporate sites. */
#ab-scroll-progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:99998;pointer-events:none;background:linear-gradient(90deg,#9a7534,#d9bc75,#9ba4a8);box-shadow:0 0 12px rgba(184,141,66,.3)}

/* Back-to-top control appears only after meaningful scrolling. */
#ab-back-top{position:fixed;right:24px;bottom:100px;z-index:880;width:44px;height:44px;border-radius:50%;border:1px solid rgba(23,56,74,.14);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);color:var(--ab-navy);font:700 18px/1 system-ui;display:grid;place-items:center;box-shadow:0 12px 32px rgba(23,56,74,.13);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s ease;cursor:pointer}
#ab-back-top.show{opacity:1;visibility:visible;transform:none}
#ab-back-top:hover{border-color:rgba(184,141,66,.5);box-shadow:0 14px 34px rgba(23,56,74,.18)}

/* Prevent modern motion from ever creating layout overlap. */
.lux-reveal,.reveal,.in-view{backface-visibility:hidden}
main section{overflow:clip}

/* Mobile/tablet cleanup. */
@media(max-width:1040px){
  #main .cards>.card .card-media{height:230px!important}
  #main .cards>.card h3{min-height:0}
}
@media(max-width:700px){
  #main .cards{display:grid!important;grid-template-columns:1fr!important;gap:28px!important}
  #main .cards>.card{padding-bottom:20px!important}
  #main .cards>.card .card-media{height:auto!important;aspect-ratio:16/10;margin:0 0 18px!important}
  #ab-back-top{right:18px;bottom:88px;width:42px;height:42px}
  main section{overflow:visible}
}

@media(prefers-reduced-motion:reduce){
  #ab-back-top{transition:none}
  #main .cards>.card{transition:none!important;transform:none!important}
}