/* Manheim Africa — premium interface layer, v1.0
 * Scoped to .ma-shell. Not a global stylesheet replacement.
 * Mount on the existing frontend only after component integration and QA.
 */
.ma-shell{--ma-ink:#181d23;--ma-muted:#68717a;--ma-bg:#fafaf8;--ma-surface:#fff;--ma-rule:#dedfdf;--ma-navy:#172a3a;--ma-accent:#1c5d88;--ma-rad:16px;--ma-shadow:0 12px 40px rgba(18,31,41,.045);color:var(--ma-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--ma-bg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ma-shell *{box-sizing:border-box}
.ma-shell a{color:inherit;text-decoration:none}
.ma-shell button,.ma-shell input,.ma-shell select{font:inherit}
.ma-shell .ma-wrap{width:min(1170px,calc(100% - 64px));margin-inline:auto}
.ma-shell .pkg-header{background:rgba(250,250,248,.95);border-bottom:1px solid var(--ma-rule);position:relative;z-index:5}
.ma-shell .pkg-header-in{height:85px;display:flex;align-items:center;gap:26px}
.ma-shell .ma-logo{min-width:230px;font-size:21px;letter-spacing:-1px;font-weight:770;line-height:1.05}
.ma-shell .ma-logo span{font-weight:390}
.ma-shell .ma-logo small{display:block;font-size:9px;font-weight:650;color:var(--ma-muted);letter-spacing:2.2px;margin-top:7px}
.ma-shell .pkg-nav{display:flex;gap:27px;align-items:center;margin-left:auto;font-size:13px;font-weight:600}
.ma-shell .pkg-nav a:hover,.ma-shell .ma-link:hover{color:var(--ma-accent)}
.ma-shell .ma-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;padding:13px 19px;min-height:46px;font-weight:650;font-size:14px;background:var(--ma-navy);color:#fff;border:1px solid var(--ma-navy);cursor:pointer;white-space:nowrap;transition:background .17s ease,transform .17s ease}
.ma-shell .ma-btn:hover{background:#263f54;transform:translateY(-1px)}
.ma-shell .ma-btn--quiet{background:#fff;color:var(--ma-ink);border:1px solid #b9bec2}
.ma-shell .ma-btn--quiet:hover{background:#f0f3f4}
.ma-shell .pkg-hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:520px;border-bottom:1px solid var(--ma-rule)}
.ma-shell .pkg-hero-copy{display:flex;flex-direction:column;align-items:start;justify-content:center;padding:76px 52px 76px max(32px,calc((100vw - 1170px)/2))}
.ma-shell .ma-eyebrow{font-size:11px;font-weight:700;color:#5b6570;letter-spacing:2.2px;text-transform:uppercase}

.ma-shell .pkg-hero h1{font-size:clamp(42px,4.1vw,66px);font-weight:690;letter-spacing:-3.9px;line-height:1.045;margin-top:18px;max-width:550px}
.ma-shell .pkg-hero-copy>p{font-size:16px;color:#56616c;max-width:425px;margin-top:24px;line-height:1.65}
.ma-shell .ma-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ma-shell .pkg-hero-media{position:relative;overflow:hidden;background:#283038;min-height:490px}
.ma-shell .pkg-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ma-shell .ma-image-caption{position:absolute;left:24px;bottom:22px;color:white;font-size:11px;letter-spacing:.08em;background:rgba(13,20,25,.52);border-radius:6px;padding:8px 12px}
.ma-shell .ma-section{padding:72px 0}
.ma-shell .ma-section--tone{background:#f2f3f2}
.ma-shell .ma-heading-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}
.ma-shell .pkg-heading{font-size:clamp(29px,3vw,40px);line-height:1.1;letter-spacing:-1.4px;font-weight:690;margin-top:11px}
.ma-shell .ma-lede{font-size:15px;color:var(--ma-muted);margin-top:11px}
.ma-shell .ma-link{font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:5px}
.ma-shell .ma-searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #cfd3d5;border-radius:12px;padding:9px;box-shadow:var(--ma-shadow)}
.ma-shell .pkg-search{flex:1;display:flex;align-items:center;gap:10px;padding:7px 14px;min-width:0}
.ma-shell .ma-search svg{color:#74808b;flex-shrink:0}
.ma-shell .ma-search input{width:100%;border:0;outline:0;background:transparent;min-width:0;color:var(--ma-ink);font-size:15px}
.ma-shell .ma-filter-drawer{position:relative}
.ma-shell .ma-filter-drawer>summary{cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:680;list-style:none;border:1px solid #d5d8da;border-radius:8px;padding:12px 15px;white-space:nowrap;min-height:46px;user-select:none}
.ma-shell .ma-filter-drawer>summary::-webkit-details-marker{display:none}
.ma-shell .ma-filter-drawer>summary svg{width:17px;height:17px;flex:none;transition:transform .18s ease}
.ma-shell .ma-filter-drawer[open]>summary .ma-chevron{transform:rotate(180deg)}
.ma-shell .ma-filter-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:3;width:min(510px,calc(100vw - 40px));background:white;border:1px solid var(--ma-rule);border-radius:12px;box-shadow:0 22px 54px rgba(13,23,33,.17);padding:22px}
.ma-shell .ma-fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ma-shell .ma-field{display:flex;flex-direction:column;gap:7px;font-weight:620;font-size:12px;color:#404953}
.ma-shell .ma-field input,.ma-shell .ma-field select{min-width:0;max-width:100%;padding:12px 12px;border:1px solid #cdd2d6;background:white;border-radius:8px;color:var(--ma-ink);font-size:14px}
.ma-shell .ma-field input:focus-visible,.ma-shell .ma-field select:focus-visible{outline:2px solid #2a779f;outline-offset:2px}
.ma-shell .ma-filter-panel .ma-btn{margin-top:17px;width:100%}
.ma-shell .ma-note{font-size:13px;color:var(--ma-muted);margin-top:14px}
.ma-shell .ma-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ma-shell .ma-service{display:flex;align-items:center;gap:19px;background:#fff;border:1px solid var(--ma-rule);border-radius:12px;padding:29px 28px;min-height:132px;transition:border-color .15s ease,box-shadow .15s ease}
.ma-shell .ma-service:hover{border-color:#a7b4bf;box-shadow:var(--ma-shadow)}
.ma-shell .ma-service-icon{display:grid;place-items:center;background:#f0f3f4;border-radius:9px;width:46px;height:46px;flex:none;color:var(--ma-navy)}
.ma-shell .ma-service h3{font-size:18px;font-weight:670;letter-spacing:-.35px}
.ma-shell .ma-service p{font-size:13px;color:var(--ma-muted);margin-top:4px}
.ma-shell .ma-arrow{margin-left:auto;flex:none;color:#58646f;width:19px;height:19px}
.ma-shell .ma-footer{border-top:1px solid var(--ma-rule);padding:27px 0 45px;background:#fafaf8}
.ma-shell .ma-footer-in{display:flex;justify-content:space-between;gap:20px;color:#75808a;font-size:13px}
.ma-shell :focus-visible{outline:2px solid #1e6d9f;outline-offset:3px}
@media(max-width:950px){.ma-shell .pkg-header-in{height:72px}.ma-shell .pkg-nav{gap:14px}.ma-shell .pkg-hero{grid-template-columns:1fr 1fr}.ma-shell .pkg-hero-copy{padding:50px 32px}.ma-shell .pkg-hero h1{font-size:clamp(42px,5.5vw,62px)}}
@media(max-width:690px){.ma-shell .ma-wrap{width:min(100% - 34px,1170px)}.ma-shell .pkg-header-in{height:69px;gap:10px}.ma-shell .ma-logo{min-width:0;font-size:18px}.ma-shell .ma-logo small{font-size:8px;letter-spacing:1.5px}.ma-shell .pkg-nav{display:none}.ma-shell .pkg-header .ma-btn{margin-left:auto;font-size:12px;min-height:39px;padding:8px 11px}.ma-shell .pkg-hero{grid-template-columns:1fr}.ma-shell .pkg-hero-copy{padding:51px 21px 47px}.ma-shell .pkg-hero h1{font-size:clamp(40px,11vw,56px);letter-spacing:-2.8px;max-width:410px}.ma-shell .pkg-hero-copy>p{font-size:15px;margin-top:17px}.ma-shell .pkg-hero-media{min-height:290px;max-height:380px}.ma-shell .ma-section{padding:54px 0}.ma-shell .ma-heading-row{align-items:start}.ma-shell .ma-heading-row .ma-link{margin-top:12px;white-space:nowrap}.ma-shell .ma-searchbar{flex-wrap:wrap}.ma-shell .pkg-search{flex-basis:100%;min-height:48px}.ma-shell .ma-searchbar .ma-filter-drawer{flex:1}.ma-shell .ma-searchbar .ma-btn{flex:1}.ma-shell .ma-filter-drawer>summary{justify-content:center}.ma-shell .ma-filter-panel{right:auto;left:0}.ma-shell .ma-feature-grid{grid-template-columns:1fr}.ma-shell .ma-service{min-height:108px;padding:20px}.ma-shell .ma-footer-in{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.ma-shell *, .ma-shell *::before,.ma-shell *::after{transition:none!important;scroll-behavior:auto!important}}
/* Keep expanded filters within narrow mobile screens. */
.ma-shell .ma-fieldgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-shell .ma-field{min-width:0}
.ma-shell .ma-field input,.ma-shell .ma-field select{width:100%;min-width:0}
