:root{
 --bg:#f6f5f0;--ink:#111310;--muted:#6b6d66;--line:#dcdcd4;--card:#fff;
 --accent:#0f7b58;--accent-soft:#e6f1eb;--dark:#121513;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:auto;padding:0 28px}
nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:14px}
.brand{font-weight:850;font-size:21px;letter-spacing:-.06em}
.navlinks{display:flex;gap:28px;color:var(--muted)}
.pill{display:inline-flex;border:1px solid var(--ink);border-radius:999px;padding:10px 16px;white-space:nowrap}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--muted);margin-bottom:18px}
.hero{padding:88px 0 86px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
h1{font-size:clamp(54px,8vw,112px);line-height:.9;letter-spacing:-.08em;margin:0 0 28px;max-width:900px}
h1 span{color:#7b7d74}
.lead{font-size:19px;color:#4f514b;max-width:650px}
.hero-side{border-left:1px solid var(--line);padding-left:30px}
.hero-side strong{font-size:52px;line-height:1;letter-spacing:-.07em;display:block}
.hero-side p{font-size:14px;color:var(--muted);max-width:300px;margin:8px 0 30px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;padding:13px 19px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px}
.button.alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.section{padding:82px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:25px;align-items:baseline;margin-bottom:35px}
.section h2{font-size:clamp(36px,5vw,68px);line-height:.95;letter-spacing:-.07em;margin:0}
.section-head p{max-width:360px;color:var(--muted);font-size:14px}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.project{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.25s transform,.25s box-shadow}
.project:hover{transform:translateY(-5px);box-shadow:0 18px 50px #0000000d}
.project-visual{height:330px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#e8e9e4;padding:28px}
.project-visual.blue{background:#e6eee9}.project-visual.dark{background:#1b1e1c}.project-visual.green{background:#e9eedf}
.project-visual img{height:100%;width:auto;max-width:70%;object-fit:contain;object-position:center;border-radius:15px;box-shadow:0 22px 50px #0003}
.project-visual .desktop-shot{width:82%;max-width:none;height:auto;border-radius:12px}
.project-info{padding:24px 25px 25px}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.project-info h3{font-size:29px;letter-spacing:-.055em;margin:9px 0}
.project-info p{color:var(--muted);margin:0;max-width:520px}
.project-foot{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font-size:13px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.about p{font-size:25px;letter-spacing:-.035em;line-height:1.2;margin:0}
.skills{display:flex;flex-wrap:wrap;gap:9px;align-content:start}
.skill{border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:13px;background:#fafaf7}
.timeline{display:grid}
.role{display:grid;grid-template-columns:1fr 2fr;gap:25px;padding:23px 0;border-bottom:1px solid var(--line)}
.role .date{color:var(--muted);font-size:13px}.role h3{margin:0 0 5px;font-size:21px}.role p{margin:0;color:var(--muted)}
.contact{background:var(--dark);color:#fff;border-radius:25px;padding:58px;display:flex;justify-content:space-between;align-items:end;gap:35px}
.contact h2{font-size:clamp(44px,6vw,80px);line-height:.92;letter-spacing:-.075em;margin:0}
.contact p{color:#bfc4bd;max-width:430px}.contact .button{background:#fff;color:var(--ink)}
.contact-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.contact-links a{border:1px solid #ffffff30;border-radius:999px;padding:9px 12px;font-size:12px;color:#e6e9e5}.contact-links a:hover{background:#ffffff10}.footer-links{display:flex;gap:18px}.footer-links a:hover{text-decoration:underline}
footer{padding:28px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}

/* Case studies */
.case-crumb{padding:28px 0 12px;font-size:13px;color:var(--muted)}
.case-hero{padding:58px 0 68px}
.case-hero h1{max-width:1050px}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.case-meta div{background:var(--bg);padding:20px}.case-meta small{display:block;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:10px;margin-bottom:5px}
.hero-frame{margin:10px 0 95px;border-radius:28px;padding:44px;background:linear-gradient(145deg,#dce8f7,#bfd2ee);display:flex;justify-content:center;overflow:hidden}
.hero-frame img{max-height:680px;width:auto;border-radius:24px;box-shadow:0 30px 70px #0003}
.hero-frame.desktop{background:#e6eee9}.hero-frame.desktop img{max-width:92%;height:auto;border-radius:12px}
.two{display:grid;grid-template-columns:1fr 1.55fr;gap:70px}
.copy{font-size:18px;max-width:720px;color:#4e514b}.copy p{margin:0 0 21px}
.statement{font-size:31px!important;line-height:1.1;letter-spacing:-.04em;color:var(--ink)!important}
.journeys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.journey{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:21px}
.journey b{font-size:20px;display:block;letter-spacing:-.04em;margin-bottom:7px}.journey span{font-size:13px;color:var(--muted)}
.decision-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:35px}
.decision{border-top:1px solid var(--ink);padding-top:17px}.decision b{font-size:20px;letter-spacing:-.03em}.decision p{font-size:14px;color:var(--muted);margin:8px 0 0}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:38px}
.gallery figure{margin:0;background:#e9ebe7;border-radius:20px;padding:24px;overflow:hidden;grid-column:span 6}
.gallery figure.wide{grid-column:span 12}.gallery figure.tall{grid-column:span 4}
.gallery img{display:block;max-width:100%;max-height:760px;width:auto;margin:auto;border-radius:13px;box-shadow:0 18px 42px #0002}
.gallery img.full{width:100%;max-height:none}
figcaption{font-size:11px;color:var(--muted);padding-top:15px}
.callout{background:var(--dark);color:#fff;border-radius:26px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:55px}
.callout h2{font-size:55px}.callout p{color:#bec4bd}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.chip{border:1px solid #ffffff30;border-radius:999px;padding:9px 13px;font-size:12px}
.outcome-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.outcome{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.outcome b{font-size:18px}.outcome p{font-size:13px;color:var(--muted);margin:8px 0 0}
.next{display:flex;justify-content:space-between;align-items:center;padding:70px 0}.next h3{font-size:42px;letter-spacing:-.06em;margin:0}
.small-note{font-size:12px;color:var(--muted);margin-top:18px}
@media(max-width:800px){
 .navlinks{display:none}.hero,.about,.two,.callout{grid-template-columns:1fr}.hero{padding:55px 0 65px}.hero-side{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}
 .work-grid{grid-template-columns:1fr}.project-visual{height:270px}.project-visual img{max-width:78%}
 .contact{padding:35px;display:block}.contact .button{margin-top:20px}.role{grid-template-columns:1fr;gap:8px}
 .case-meta{grid-template-columns:1fr 1fr}.hero-frame{padding:22px}.hero-frame img{max-width:78%}
 .journeys,.decision-grid,.outcome-list{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.gallery figure,.gallery figure.wide,.gallery figure.tall{grid-column:auto}
}

.project-visual.website{background:#dfe9f4}.project-visual.website img{width:88%;max-width:none;height:auto}.project-visual.tms{background:#eef0f8}.project-visual.tms img{width:92%;max-width:none;height:auto}.project-visual.photo{padding:0;background:#0e1b12}.project-visual.photo img{width:100%;max-width:none;height:100%;object-fit:cover;border-radius:0;box-shadow:none}.coming{display:block;margin-top:18px;border:1px solid #2d403255;border-radius:999px;padding:8px 12px;font-size:11px;letter-spacing:.05em}.dark-frame{background:linear-gradient(145deg,#eef0f8,#dfe3ef)}.tms-gallery figure{background:#f0f1f5}.ev-hero{margin:10px 0 95px;border-radius:28px;overflow:hidden;background:#10231b}.ev-hero img{display:block;width:100%;height:auto;max-height:720px;object-fit:cover}.ev-photo{box-shadow:none!important;border-radius:13px!important}
@media(max-width:800px){.project-visual.website img,.project-visual.tms img{width:92%}.ev-hero{margin-bottom:65px}}

.evs-screen-frame{position:relative;background:#11251d}.evs-screen-frame img{display:block;width:100%;height:auto;max-height:none}.screen-label{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 18px;background:#10231b;color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.screen-label span:last-child{opacity:.65;letter-spacing:.03em;text-transform:none}.evs-gallery{align-items:start}.evs-gallery figure{padding:18px;background:#f2f3ef;border:1px solid #e3e5df}.evs-gallery figure.wide{padding:22px}.evs-screen{width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;border-radius:12px!important;box-shadow:0 14px 34px #0001!important}.evs-gallery figcaption{padding:15px 4px 3px;color:#555}.section-intro{max-width:720px;color:#666;font-size:18px;line-height:1.7;margin:14px 0 0}@media(max-width:760px){.screen-label{font-size:10px;padding:10px 12px}.evs-gallery figure,.evs-gallery figure.wide{padding:12px}.section-intro{font-size:16px}}


/* Portfolio v3 additions */
.project>a{display:block;height:100%}.project-link{font-weight:600}.live-badge{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#ffffffea;border:1px solid #ffffffaa;color:#111;font-size:10px;text-transform:uppercase;letter-spacing:.12em;box-shadow:0 8px 24px #0002}.live-dot{width:6px;height:6px;border-radius:50%;background:#15966c}.project-live{color:#0f7b58;font-weight:650}.project-live:hover{text-decoration:underline}.project-visual.keymobile-hero{padding:0;background:#173e7a}.project-visual.keymobile-hero img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}.project-visual.brand-id{padding:0;background:#201c18}.project-visual.brand-id img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}.project-foot a{white-space:nowrap}.case-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.case-actions .button{font-size:13px}.case-live{background:#0f7b58;color:#fff;border-color:#0f7b58}.case-live:hover{filter:brightness(.95)}.case-hero+.hero-frame{margin-top:0}.hero-frame.keymobile-hero-frame{padding:20px;background:linear-gradient(145deg,#173b74,#0b2b5c)}.hero-frame.keymobile-hero-frame img{width:100%;max-width:none;height:auto;max-height:none;border-radius:20px;box-shadow:0 24px 60px #0004}.brand-hero{margin:10px 0 95px;border-radius:28px;overflow:hidden;background:#201b17}.brand-hero img{display:block;width:100%;height:auto}.brand-logo-frame{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:center;margin-top:32px}.brand-logo-frame figure{margin:0;background:#f0efe9;border-radius:20px;padding:35px;min-height:360px;display:flex;align-items:center;justify-content:center}.brand-logo-frame img{max-height:480px;width:auto;max-width:100%;object-fit:contain}.brand-swatch{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.swatch{height:54px;min-width:120px;border-radius:12px;padding:10px 12px;display:flex;align-items:end;font-size:11px;color:#fff}.swatch.gold{background:#f6a619}.swatch.orange{background:#ed7b17}.swatch.charcoal{background:#231f20}.swatch.red{background:#c9252d}.brand-gallery figure{background:#f0eee8}.brand-gallery img{width:100%;max-height:none}.brand-gallery figure.tall img{max-height:760px;width:auto}.brand-note{max-width:750px;color:#666;font-size:18px;line-height:1.7}.navlinks a.live-nav{color:#0f7b58;font-weight:600}.brand-gallery{margin-top:38px}
@media(max-width:800px){.brand-logo-frame{grid-template-columns:1fr}.brand-logo-frame figure{min-height:260px}.brand-note{font-size:16px}.project-visual.keymobile-hero,.project-visual.brand-id{height:270px}.case-actions{margin-top:22px}}


/* BarakaPay brand showcase */
.brand-project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.brand-project-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.25s transform,.25s box-shadow}.brand-project-card:hover{transform:translateY(-5px);box-shadow:0 18px 50px #0000000d}.brand-project-image{height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}.brand-project-image.cocoa{background:#201c18}.brand-project-image.baraka{background:#eef0f7}.brand-project-image img{width:100%;height:100%;object-fit:cover}.brand-project-image.baraka img{object-fit:contain;padding:22px}.brand-project-copy{padding:24px 25px 26px}.brand-project-copy h3{font-size:30px;letter-spacing:-.05em;margin:8px 0}.brand-project-copy p{color:var(--muted);margin:0 0 17px}.brand-project-copy span{font-size:13px;font-weight:650;color:#0f7b58}.baraka-brand-hero{background:#eef0f7}.baraka-brand-hero img{object-fit:cover}.baraka-swatches .swatch{color:#fff}.swatch.baraka-blue{background:#243a77}.swatch.halal{background:#2fa44f}.swatch.white{background:#fff;color:#111;border:1px solid #dcdcd4}.status-inline{color:#0f7b58;font-weight:700;letter-spacing:.08em}.baraka-gallery figure{background:#f0f1f7}@media(max-width:800px){.brand-project-grid{grid-template-columns:1fr}.brand-project-image{height:250px}}


/* Portfolio service sections */
.section-alt{padding-top:10px}.brand-web-grid{margin-top:32px}.section-bridge{display:flex;justify-content:flex-end;margin-top:24px}.papi-visual{padding:0;background:#1d3150}.papi-visual img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}.papi-brand{background:#19345e}.papi-brand img{object-fit:cover}.papi-hero{background:#18365f}.papi-hero img{width:100%;max-height:650px;object-fit:cover}.papi-gallery figure{background:#edf0f4}.papi-mini-gallery figure{background:#edf0f4}.featured-brand-web{grid-column:span 2}.featured-brand-web .project-visual{height:340px}.featured-brand-web .project-info{padding-bottom:28px}@media(max-width:800px){.featured-brand-web{grid-column:auto}.featured-brand-web .project-visual{height:270px}.section-bridge{justify-content:flex-start}.papi-gallery figure.wide{grid-column:auto}}

.project-visual.lockam-id{padding:0;background:#f2bd00}.project-visual.lockam-id img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}.brand-project-image.lockam{background:#f2bd00}.brand-project-image.lockam img{object-fit:cover}.lockam-hero{background:#111}.lockam-gallery figure{background:#111}.lockam-gallery img{box-shadow:none}.lockam-gallery figcaption{color:#d6d6d0}.lockam-gallery figure{border:1px solid #2c2c2c}


/* Subsecute brand identity */
.project-visual.subsecute-id{padding:0;background:#ef6f17}.project-visual.subsecute-id img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none}.brand-project-image.subsecute{background:#ef6f17}.brand-project-image.subsecute img{object-fit:cover}.subsecute-hero{background:#ef6f17}.subsecute-hero img{display:block;width:100%;height:auto}.subsecute-gallery figure{background:#f5f5f3}.subsecute-gallery img{width:100%;max-height:none}.subsecute-dark{background:#111;color:#fff;border-radius:22px;padding:38px}.subsecute-dark h3,.subsecute-dark p{color:#fff}.subsecute-swatches .swatch.orange{background:#E96D1F}.subsecute-swatches .swatch.black{background:#0F0F0F}.subsecute-swatches .swatch.smoke{background:#F2F4F3;color:#111;border:1px solid #ddd}.subsecute-swatches .swatch.yellow{background:#FFCB47;color:#111}.subsecute-swatches .swatch.blue{background:#0349D3}.subsecute-logo-frame{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}.subsecute-logo-frame figure{margin:0;background:#f1f1ef;border-radius:20px;padding:28px;display:flex;justify-content:center;align-items:center}.subsecute-logo-frame img{max-width:100%;max-height:520px}.subsecute-note{max-width:760px;color:#666;font-size:18px;line-height:1.7}.subsecute-gallery figure.wide{grid-column:span 12}@media(max-width:800px){.subsecute-logo-frame{grid-template-columns:1fr}.subsecute-note{font-size:16px}}