@font-face{font-family:"Cairo";src:url("assets/Cairo.ttf") format("truetype");font-weight:200 1000;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;color:#3a302d;background:#fdfbf9;line-height:1.75;-webkit-text-size-adjust:100%}
.cover{height:120px;background:linear-gradient(135deg,#c9a99a 0%,#8d3127 50%,#3e1712 100%)}
.page{max-width:720px;margin:0 auto;padding:0 18px 24px}
.head{margin-top:-46px}
.logo{display:flex;align-items:center;justify-content:center;width:168px;height:92px;border-radius:20px;box-shadow:0 4px 14px rgba(62,23,18,.22);background:#f7f7f7;padding:8px 10px}
.logo img{display:block;width:100%;height:100%;object-fit:contain}
.client{margin:14px 0 0;color:#787774;font-weight:600;font-size:15px}
h1{margin:0;font-size:30px;line-height:1.35;font-weight:800;color:#1f1d1a}
.date{margin:4px 0 16px;color:#787774;font-size:14px}
.callout{display:flex;gap:10px;background:#f5eee9;border-radius:10px;padding:12px 14px}
.callout span{font-size:20px;line-height:1.6}
.callout p{margin:0;font-size:15px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.toc a{color:#37352f;text-decoration:none;font-size:14px;font-weight:600;border:1px solid #e9e9e7;border-radius:999px;padding:4px 12px;background:#fff}
.toc a:hover,.toc a:focus-visible{background:#f1f1ef}
.group{margin-top:28px}
h2{font-size:22px;font-weight:800;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid #e9e9e7}
.creative{border:1px solid #eadfd9;border-radius:14px;padding:16px;margin:0 0 20px;background:#fff}
.creative h3{margin:0;font-size:18px;font-weight:800;color:#1f1d1a}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.chip{font-size:12.5px;background:#f3ebe6;color:#6b4a42;border-radius:6px;padding:1px 8px;direction:rtl}
.frame{background:#f5eee9;border-radius:10px;display:flex;justify-content:center;overflow:hidden}
.media{display:block;max-width:100%;height:auto;background:#111}
.media.vertical{width:100%;max-width:340px;aspect-ratio:9/16;object-fit:cover}
.media.square{width:100%;aspect-ratio:1/1;object-fit:cover}
.media.portrait{width:100%;max-width:440px;aspect-ratio:4/5;object-fit:cover}
details{margin-top:12px}
summary{cursor:pointer;font-weight:800;font-size:16px;list-style:none;padding:4px 0}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";display:inline-block;margin-left:6px;transition:transform .15s;transform:scaleX(-1)}
details[open] summary::before{transform:rotate(90deg)}
.why{list-style:none;margin:6px 0 0;padding:0}
.why li{padding:8px 0;border-bottom:1px dashed #ecebe8;font-size:15px}
.why li:last-child{border-bottom:0}
.why strong{display:block;font-weight:800;font-size:14.5px;color:#1f1d1a}
.download{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;min-height:46px;border-radius:10px;background:#8d3127;color:#fff;text-decoration:none;font-weight:800;font-size:16px}
.download:hover{background:#6e241c}
a:focus-visible,summary:focus-visible{outline:3px solid #c0503f;outline-offset:2px}
.foot{border-top:1px solid #eadfd9;text-align:center;padding:28px 18px 40px;background:#f5eee9}
.by{margin:0;color:#9b9a97;font-size:13px}
.name{margin:0 0 14px;font-weight:800;font-size:18px}
@media (min-width:700px){.cover{height:180px}h1{font-size:36px}}

.goal{background:#f8efea;border-right:4px solid #8d3127;border-radius:8px;padding:10px 12px;margin:8px 0 10px;line-height:1.8;font-size:15px}
.goal strong{color:#8d3127}
.goal p{margin:0 0 4px}.goal p:last-child{margin:0}

.download-all{display:block;text-align:center;background:#3e1712;color:#fff;text-decoration:none;font-weight:700;padding:14px;border-radius:12px;margin:14px 0;font-size:17px}