@font-face{font-family:Chivo;src:url('assets/chivo-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Chivo;src:url('assets/chivo-bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Chivo;src:url('assets/chivo-black.ttf') format('truetype');font-weight:900;font-display:swap}
:root{--bg:#f7f9f8;--surface:#ebf0ee;--ink:#06525c;--muted:#2f737d;--accent:#06525c;--accent-ink:#f7f9f8;--field-1:#06525c;--field-1-ink:#f7f9f8;--gutter:clamp(22px,4.2vw,72px);--small:14px;--body:clamp(17px,1.35vw,19px);--lead:clamp(21px,1.8vw,26px);--head:clamp(38px,4.5vw,68px);--display:clamp(64px,12.3vw,192px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Chivo,Arial,sans-serif;font-size:var(--body);line-height:1.5;letter-spacing:-.02em}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a,button,summary{transition:transform .2s ease,opacity .2s ease}a:hover,button:hover{transform:translateY(-2px)}a:active,button:active{transform:translateY(1px)}:focus-visible{outline:3px solid currentColor;outline-offset:6px}img{display:block;width:100%;height:auto}button{border:0}button[hidden]{display:none}.frame{padding-inline:var(--gutter)}.masthead{padding-top:34px;display:flex;align-items:flex-start;justify-content:space-between}.wordmark{font-size:22px;font-weight:700;line-height:1.05;letter-spacing:-.05em;text-decoration:none}.masthead nav{display:flex;gap:36px}.masthead nav a,.profile-link{font-size:16px;text-decoration:none}.profile-link{text-decoration:underline}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-200%);z-index:20;padding:12px;background:var(--ink);color:var(--bg)}.skip-link:focus{transform:translateY(0)}
.hero{padding-top:105px;padding-bottom:48px}.hero h1{font-size:var(--display);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.065em}.mask{display:block;overflow:hidden;padding-bottom:.07em}.mask>span{display:block;animation:headline-in 1s cubic-bezier(.16,1,.3,1) both}.mask:nth-child(2)>span{animation-delay:.12s}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:40px;gap:50px}.lead{font-size:var(--lead);line-height:1.4;max-width:660px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;background:var(--ink);color:var(--bg);padding:20px 28px;min-height:60px;text-decoration:none;white-space:nowrap;font-size:17px}.button span{font-size:24px}.hero-context{display:flex;justify-content:space-between;margin-top:65px;font-size:var(--small)}
.work{padding-top:100px;padding-bottom:110px}.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:64px}h2{font-size:var(--head);line-height:1;letter-spacing:-.055em;font-weight:700}.section-intro p{max-width:430px}.project{display:grid;grid-template-columns:1.35fr 1fr;gap:7vw;align-items:center;margin-bottom:120px}.project h3{font-size:clamp(36px,4vw,60px);font-weight:700;line-height:1.03;letter-spacing:-.05em}.project-copy p{margin-top:24px}.project-copy .project-kind{font-size:var(--small);margin-top:20px}.project-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:32px}.project-links a,.text-link{font-size:16px}.product-media{position:relative}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison figure{position:relative;overflow:hidden}.comparison img{aspect-ratio:3/4;object-fit:cover}.comparison figcaption{position:absolute;left:15px;bottom:16px;background:var(--bg);color:var(--ink);padding:8px 12px;font-size:var(--small)}.js .comparison{display:block}.js .comparison figure img{aspect-ratio:1/1.05;object-fit:cover}.js .product-input{display:none}.js .comparison.original .product-result{display:none}.js .comparison.original .product-input{display:block}.image-toggle{position:absolute;top:18px;left:18px;min-height:46px;padding:10px 18px;background:var(--bg);font-size:var(--small)}.product-result img{animation:picture-drift 14s ease-in-out infinite alternate}.product-result figcaption{z-index:1}.result-visual{background:var(--ink);color:var(--bg);padding:40px;min-height:530px;display:flex;flex-direction:column;justify-content:center}.result-number{font-size:clamp(130px,16vw,240px);font-weight:900;letter-spacing:-.08em;line-height:.9}.result-caption{font-size:var(--lead);margin-top:18px}.result-spend{display:flex;align-items:center;gap:24px;margin-top:50px}.result-spend strong{font-size:34px;letter-spacing:-.05em}.result-spend span{font-size:var(--small)}.result-footnote{font-size:var(--small);margin-top:36px}.project details{margin-top:28px}summary{cursor:pointer;padding-block:12px;font-size:16px;min-height:48px;text-decoration:underline;text-underline-offset:5px}summary::marker{font-size:12px}.detail-body{padding-top:12px}.detail-body p{font-size:16px;margin-block:16px}.evidence{display:block;font-size:14px}.evidence img{margin-block:20px;width:100%;height:auto}.campaigns{margin-bottom:120px}.campaign{display:grid;grid-template-columns:1fr 1fr;gap:24px 7vw;padding:40px 0}.campaign:nth-child(2){background:var(--surface);padding:40px}.campaign h3{font-size:34px;line-height:1.1;letter-spacing:-.04em}.campaign>div>p{font-size:var(--small);margin-top:14px}.campaign>details{grid-column:2}.campaign>p{max-width:440px}.campaign details>summary{padding-top:0}.project-tours{margin-bottom:50px}.tour-media{max-width:100%;overflow:hidden}.tour-media img{aspect-ratio:1/1;object-fit:cover}.tour-media figcaption{font-size:var(--small);margin-top:16px}.text-link{display:inline-block;margin-top:30px}.source-note{font-size:var(--small);max-width:760px;margin-left:auto}
.about{background:var(--surface);padding-block:90px}.about h2{margin-bottom:60px}.about-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:9vw}.portrait img{aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);object-position:center}.portrait figcaption{font-size:var(--small);margin-top:18px}.statement{font-size:clamp(24px,2.4vw,36px);line-height:1.3;letter-spacing:-.035em}.about-story>p+p{margin-top:32px}.expertise{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:38px;font-size:16px;font-weight:700}.career{display:grid;grid-template-columns:1fr 1.65fr;gap:9vw;margin-top:80px}.career h3{font-size:34px;letter-spacing:-.04em}.career-row{display:flex;justify-content:space-between;gap:20px;margin-bottom:28px}.career-row strong{display:block;font-size:18px}.career-row span,.career-row p,.career-source{font-size:var(--small)}.career-row p{text-align:right;white-space:nowrap}.career-row span{display:block;margin-top:7px}.career-source{margin-top:35px}
.contact{padding-block:120px 85px}.contact-top{display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:end}.contact h2{font-size:clamp(62px,8vw,124px);text-transform:uppercase;font-weight:900;letter-spacing:-.06em;line-height:.9}.contact-copy .button{margin-top:32px}.contact-resources{display:flex;gap:40px;justify-content:flex-end;margin-top:70px;font-size:16px}.print-button{background:none;padding:0;text-decoration:underline;text-underline-offset:5px}footer{background:var(--ink);color:var(--bg);padding-block:45px 30px}.footer-name{font-size:clamp(44px,9.6vw,148px);font-weight:900;letter-spacing:-.06em;line-height:1.1}.footer-bottom{display:flex;justify-content:space-between;gap:35px;align-items:start;margin-top:40px;font-size:var(--small)}.credits{max-width:400px}.credits summary{padding:0;min-height:30px;font-size:var(--small)}.credits p{margin-top:18px}.footer-bottom>a{white-space:nowrap}.enter.is-visible{animation:rise-in .8s cubic-bezier(.16,1,.3,1) both}@keyframes headline-in{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes rise-in{from{transform:translateY(28px);opacity:.25}to{transform:translateY(0);opacity:1}}@keyframes picture-drift{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(min-width:1600px){body{max-width:1900px;margin-inline:auto}}@media(max-width:900px){.hero{padding-top:90px}.hero-bottom{gap:30px}.hero-bottom .lead{max-width:480px}.button{gap:25px;padding:18px 22px}.hero-context{margin-top:45px}.section-intro{align-items:start;gap:32px}.section-intro p{max-width:330px}.project{gap:35px;margin-bottom:90px}.result-visual{min-height:430px;padding:25px}.result-spend{flex-direction:column;align-items:start;gap:0}.result-footnote{margin-top:30px}.about-grid,.career{gap:40px}.career-row{flex-direction:column;gap:8px}.career-row p{text-align:left}.contact-top{gap:35px}.contact-resources{justify-content:flex-start}.footer-bottom{flex-wrap:wrap}.footer-bottom>p{width:100%}}
@media(max-width:600px){:root{--gutter:22px;--display:12.5vw;--head:42px}.masthead{padding-top:25px;align-items:center}.wordmark{font-size:20px}.masthead nav{gap:21px}.masthead nav a{font-size:14px;padding-block:12px}.profile-link{display:none}.hero{padding-top:85px;padding-bottom:25px}.hero h1{line-height:.95;letter-spacing:-.055em}.hero-bottom{display:block;margin-top:32px}.lead{font-size:21px}.hero-bottom .button{margin-top:30px;width:100%;justify-content:space-between}.hero-context{display:block;margin-top:32px}.hero-context p+p{margin-top:6px}.work{padding-top:65px;padding-bottom:65px}.section-intro{display:block;margin-bottom:35px}.section-intro p{margin-top:24px;max-width:none}.project{grid-template-columns:1fr;gap:30px;margin-bottom:72px}.project h3{font-size:41px}.project-copy p{margin-top:20px}.project-copy .project-kind{margin-top:14px}.product-media{margin-inline:0}.js .comparison figure img{aspect-ratio:1/1.05}.result-visual{min-height:385px;padding:28px}.result-number{font-size:152px}.result-caption{font-size:21px}.result-spend{flex-direction:row;align-items:center;gap:18px;margin-top:30px}.result-spend strong{font-size:30px}.result-footnote{margin-top:28px}.campaigns{margin-bottom:65px}.campaign{grid-template-columns:1fr;gap:22px;padding:30px 0}.campaign:nth-child(2){padding:30px 22px;margin-inline:-22px}.campaign>details{grid-column:1}.campaign h3{font-size:32px}.project-tours{margin-bottom:34px}.about{padding-block:60px}.about h2{font-size:41px;margin-bottom:35px}.about-grid{grid-template-columns:1fr;gap:35px}.portrait img{aspect-ratio:1/1}.statement{font-size:24px}.about-story>p+p{margin-top:24px}.career{grid-template-columns:1fr;gap:28px;margin-top:55px}.career h3{font-size:32px}.career-row{margin-bottom:25px}.career-row strong{font-size:18px}.contact{padding-block:65px 55px}.contact-top{grid-template-columns:1fr;gap:35px}.contact h2{font-size:65px}.contact-copy .button{width:100%;justify-content:center}.contact-resources{flex-direction:column;gap:22px;margin-top:40px;align-items:start}.footer-name{font-size:11.2vw}.footer-bottom{display:flex;flex-direction:column;gap:22px;margin-top:28px}.footer-bottom>p{width:auto}.credits{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{body{font-size:11pt;background:white;color:#111}.masthead,.hero .button,.image-toggle,.contact,.print-button,.skip-link,footer,.product-media{display:none!important}.frame{padding-inline:0}.hero,.work,.about{padding-block:20px}.hero h1{font-size:42pt}.hero-context{margin-top:20px}.section-intro{margin-bottom:25px}h2{font-size:26pt}.project{margin-bottom:30px;gap:24px;break-inside:avoid}.project h3{font-size:22pt}.result-visual{min-height:250px;padding:20px}.result-number{font-size:95pt}.project-ecom{display:block}.project-tours .tour-media{max-width:220px}.campaigns{margin-bottom:30px}.about{background:white}.portrait{max-width:200px}.career{margin-top:30px}.statement{font-size:18pt}.enter{animation:none!important}.source-note{max-width:none}summary{display:none}.detail-body{display:block}.hero-bottom{margin-top:20px}.hero .lead{max-width:none}.about-grid{gap:30px}.about h2{margin-bottom:25px}a{text-decoration:none}.career-source a:after{content:' (linkedin.com/in/mhd-ajmal)'}}

/* Final hierarchy: small, body, lead, heading and display. */
:root{--small:14px;--body:18px;--lead:26px;--head:clamp(38px,4.5vw,68px)}
.hero h1{letter-spacing:-.045em;word-spacing:.045em}
.wordmark,.lead,.statement,.result-caption,.result-spend strong,.campaign h3,.career h3{font-size:var(--lead)}
.masthead nav a,.profile-link,.button,.project-links a,.text-link,summary,.detail-body p,.expertise,.career-row strong,.contact-resources{font-size:var(--body)}
.project h3,.contact h2,.footer-name{font-size:var(--head)}
.result-number{font-size:var(--display)}
.button span{font-size:var(--lead)}
.contact h2{line-height:1}.contact-top{align-items:center}
.footer-name{letter-spacing:-.045em}.footer-bottom{margin-top:30px}.contact-resources{margin-top:30px;justify-content:flex-start}
.js .comparison .product-input{display:block;position:absolute;width:31%;bottom:18px;right:18px}
.js .comparison .product-input img{aspect-ratio:1/1;object-fit:cover}
.js .comparison .product-input figcaption{position:static;font-size:var(--small);padding:8px}
.js .comparison.original .product-input{position:relative;width:100%;bottom:auto;right:auto}
.js .comparison.original .product-input img{aspect-ratio:1/1.05}
.js .comparison.original .product-input figcaption{position:absolute;left:15px;bottom:16px;padding:8px 12px}
.js .comparison .product-result figcaption{max-width:55%}
@media(max-width:900px){.wordmark{font-size:var(--body)}.result-spend strong{font-size:var(--lead)}}
@media(max-width:600px){:root{--body:17px;--lead:21px;--head:41px}.masthead nav a{font-size:var(--small)}.hero{padding-top:70px}.hero h1{letter-spacing:-.04em}.project h3,.about h2{font-size:var(--head)}.campaign h3,.career h3{font-size:var(--lead)}.statement{font-size:var(--lead)}.contact h2{font-size:var(--head)}.career-row strong{font-size:var(--body)}.result-number{font-size:calc(var(--display)*3)}.result-spend strong{font-size:var(--lead)}.footer-name{font-size:var(--head)}.js .comparison .product-input{right:12px;bottom:12px}.comparison figcaption{font-size:var(--small);left:10px;bottom:12px;padding:6px 8px}.image-toggle{top:12px;left:12px}}

@media(min-width:601px) and (max-width:900px){:root{--lead:21px}}
@media(max-width:600px){.project-ecom{margin-bottom:120px}.comparison .product-result figcaption{top:72px;bottom:auto;max-width:none}.js .comparison .product-input figcaption{position:absolute;top:0;left:0;right:0;bottom:auto}.js .comparison.original .product-input figcaption{top:72px;left:10px;right:auto;bottom:auto}.js .comparison .product-input img{aspect-ratio:3/4}}