/* A shared portfolio frame, with a distinct visual world for each project. */
:root{--paper:#faf7f2;--paper-deep:#f0ebe4}
::selection{background:#d8c3a4;color:#211d27}
:focus-visible{outline:3px solid #a92f3a;outline-offset:5px}
.site-header.scrolled{box-shadow:0 10px 40px #221d2810}
.brand-mark{border-radius:12px}
.nav-cta,.button{font-weight:700}
.home-page .hero{background:radial-gradient(ellipse at 12% 20%,#e5d5c755,transparent 55%),radial-gradient(ellipse at 90% 85%,#d5c7b533,transparent 50%),#faf7f2}
.home-page .hero::before{background-size:96px 96px;opacity:.55}
.home-page .hero h1{font-size:clamp(46px,5.1vw,74px);line-height:1.32;letter-spacing:-2px}
.home-page .hero h1 span{color:#a92f3a}
.home-page .hero h1 span::after{height:3px;bottom:-2px;opacity:.3}
.home-page .hero-copy>p{font-size:16px;line-height:1.95}
.home-page .hero-feature{padding:12px;border-color:#d8cec2;background:#fffdfa;box-shadow:0 24px 70px #30233814,0 2px 6px #30233808}
.home-page .feature-caption{background:linear-gradient(120deg,#102143,#1b3560)}
.home-page .metrics{border-block:1px solid #29212a15;padding-block:28px}
.home-page .section-heading .eyebrow{font-weight:800;letter-spacing:.6px}
.home-page .projects{background:linear-gradient(180deg,#f0ebe4,#faf7f2)}
.home-page .project-card{border-radius:24px;box-shadow:0 12px 40px #33243c08}
.home-page .project-shot{background:linear-gradient(135deg,#eee9e3,#f7f4ef)}
.home-page .project-almham .project-shot{background:radial-gradient(ellipse at top,#e7dbff,#f4f0fb)}
.home-page .project-injaz .project-shot{background:linear-gradient(145deg,#e8e0d5,#f6efe5)}
.home-page .project-labbaik .project-shot{background:radial-gradient(ellipse at top,#d0e8dc,#eef7f1)}
.home-page .project-yafe .project-shot{background:linear-gradient(145deg,#ffedbf,#f9f3e3)}
.home-page .project-labbaik .project-meta>div>span{color:#17835a;border-color:#17835a33;background:#17835a0a}
.home-page .project-yafe .project-meta>div>span{color:#b95018;border-color:#e6772733;background:#e677270a}
.home-page .game-fares .game-visual{background:radial-gradient(ellipse at 50% 0,#1c4471,#0b1729)}
.home-page .game-baina .game-visual{background:radial-gradient(ellipse at 50% 0,#39311d,#0d1018)}
.home-page .game-clean .game-visual{background:radial-gradient(ellipse at 50% 0,#254d3e,#10231e)}
.home-page .philosophy-card{border-radius:20px;box-shadow:0 8px 28px #3b2c2305}
.home-page .contact-form{border-color:#dcd1c6;box-shadow:0 20px 70px #3123370a}
.home-page .contact{background:radial-gradient(ellipse at 10% 80%,#e7d9ca55,transparent 55%)}
.case-hero{isolation:isolate;min-height:auto;padding:155px 0 80px}
.case-hero-grid{gap:50px}
.case-page .case-title{line-height:1.2;letter-spacing:-2px;font-size:clamp(44px,5.8vw,80px)}
.case-page .case-title small{letter-spacing:3px;font-size:11px}
.case-desc{font-size:15px;line-height:1.95}
.case-kicker{font-size:11px;padding:7px 12px}
.case-tags span{font-size:10px;padding:6px 10px}
.case-summary small{font-size:10px;margin-bottom:5px}
.case-summary b{font-size:14px}
.case-page .case-feature{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.case-page .case-feature:hover{transform:translateY(-4px);box-shadow:0 20px 45px color-mix(in srgb,var(--case-ink) 9%,transparent)}
.case-feature>span{letter-spacing:1px}
.feature-symbol{position:absolute;inset-inline-end:24px;top:23px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--case-accent) 9%,transparent);color:var(--case-accent);font-size:15px}
.case-almhamweb .case-feature.wide .feature-symbol,.case-injaz .case-feature.wide .feature-symbol{background:#ffffff12;color:var(--case-accent2)}
.project-signature{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 0 0;margin-top:12px;border-top:1px solid color-mix(in srgb,var(--case-accent) 15%,transparent)}
.project-signature>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 6px;border:1px solid color-mix(in srgb,var(--case-accent) 13%,transparent);border-radius:12px;background:color-mix(in srgb,var(--case-accent) 5%,var(--case-panel));color:var(--case-ink);text-align:center;font-size:11px;font-weight:700}
.project-signature i{color:var(--case-accent);font-size:16px}
.case-almhamweb .project-signature{margin:0;padding:12px;border:0;background:#faf8ff}
.case-almhamweb .almham-preview img{max-height:340px;object-fit:contain;background:#f0edf6}
.case-almhamweb .almham-window-bar{background:#f6f2ff}
.case-almhamweb .case-hero::before{background-size:42px 42px;opacity:.5}
.case-almhamweb .case-feature{border-radius:16px}
.case-almhamweb .case-feature>span{display:inline-block;padding:4px 8px;border:1px solid #6744d426;border-radius:6px}
.case-almhamweb .case-feature.wide>span{border-color:#ffffff22}
.case-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.case-atmosphere span{position:absolute;display:block}
.case-atmosphere span:nth-child(1){width:160px;height:160px;left:4%;top:16%}
.case-atmosphere span:nth-child(2){width:70px;height:70px;right:7%;bottom:8%}
.case-atmosphere span:nth-child(3){width:20px;height:20px;left:45%;top:15%}
.case-atmosphere span:nth-child(4){width:30px;height:30px;left:35%;bottom:10%}
/* Fares: a bright adventure sky, stars, and playful learning steps. */
.case-fares{--case-hero:radial-gradient(ellipse at 20% 35%,#2258a0,transparent 65%),linear-gradient(140deg,#081e42,#10376c)}
.case-fares .case-hero{min-height:auto}
.case-fares .site-header:not(.scrolled){color:#fff}
.case-fares .site-header:not(.scrolled) .nav-links a{color:#ffffffb8}
.case-fares .site-header:not(.scrolled) .lang-toggle{color:#fff;border-color:#ffffff30;background:#ffffff0c}
.case-fares .nav-cta{background:#ffc83d;color:#102143}
.case-fares .nav-cta i{color:#102143}
.case-fares .case-hero::before{background-image:radial-gradient(#ffffff44 1px,transparent 1px);background-size:32px 32px}
.case-fares .case-atmosphere span{background:#ffd45a;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);opacity:.15;transform:rotate(-12deg)}
.case-fares .case-atmosphere span:nth-child(1){width:100px;height:100px}
.case-fares .case-atmosphere span:nth-child(2){background:#7ee4cd;transform:rotate(18deg)}
.case-page.case-fares .case-visual{border:1px solid #ffd45a44;background:#f7fbff;border-radius:26px;box-shadow:0 30px 80px #0003}
.case-fares .project-signature>div:nth-child(1){background:#e7f0ff}
.case-fares .project-signature>div:nth-child(2){background:#fff2c9}
.case-fares .project-signature>div:nth-child(3){background:#e0f5ee}
.case-fares .case-feature{border-radius:24px;background:linear-gradient(135deg,#fff,#f5f9ff)}
.case-fares .case-feature:nth-child(2){background:linear-gradient(135deg,#142e57,#102143)}
.case-fares .case-feature:nth-child(2) .feature-symbol{color:#ffc83d;background:#ffffff12}
.case-fares .case-gallery-section{background:radial-gradient(ellipse at top,#e6f0ff,transparent 75%),#f5f8fd}
.case-fares .case-quote{background:radial-gradient(ellipse at 50% 0,#25569b,#0a2045)}
/* Baina Wahed: secret cards and a gold spotlight. */
.case-baina .case-atmosphere span{border:1px solid #f4bf2730;border-radius:16px;transform:rotate(-15deg);background:linear-gradient(135deg,#f4bf2708,transparent)}
.case-baina .case-atmosphere span:nth-child(1){width:100px;height:145px}
.case-baina .case-atmosphere span:nth-child(2){width:65px;height:95px;transform:rotate(18deg)}
.case-baina .project-signature>div{background:#151720;border-color:#f4bf2730}
.case-baina .project-signature i{color:#f4bf27}
.case-baina .case-visual-note{border-radius:10px}
.case-baina .case-feature .feature-symbol{color:#f4bf27;background:#f4bf2712}
/* Ataya: soft wallet cards and a receipt edge. */
.case-ataya .case-atmosphere span{border:1px solid #2f825c22;border-radius:20px;background:linear-gradient(135deg,#2f825c0e,transparent);transform:rotate(-12deg)}
.case-ataya .case-atmosphere span:nth-child(1){width:180px;height:110px}
.case-ataya .case-atmosphere span:nth-child(2){border-radius:50%;border:12px solid #cdb56b22}
.case-ataya .project-signature{border-top-style:dashed}
.case-ataya .project-signature>div{border-radius:8px 8px 18px 18px}
.case-ataya .case-feature:nth-child(2) .feature-symbol,.case-ataya .case-feature:nth-child(4) .feature-symbol{color:#caead8;background:#ffffff12}
/* Clean City: a map grid, green spaces, and terracotta details. */
.case-clean .case-hero::before{background-size:56px 56px;opacity:.7}
.case-clean .case-atmosphere span{border:8px solid #32795512;background:#32795508;border-radius:8px}
.case-clean .case-atmosphere span:nth-child(1){transform:rotate(25deg)}
.case-clean .project-signature{border-top:3px dashed #32795525}
.case-clean .project-signature>div{border-radius:8px}
.case-clean .case-feature:nth-child(3) .feature-symbol{color:#fff;background:#ffffff16}
.case-clean .case-gallery-section{background:linear-gradient(135deg,#e0ebe2,#f0f5ef)}
/* Injaz: a precise, architectural frame. */
.case-injaz .case-atmosphere span{border-inline-start:1px solid #a92f3a30;border-block:1px solid #c6974730;transform:rotate(-8deg)}
.case-injaz .project-signature>div{border-radius:6px;background:#faf7f1}
.case-injaz .case-section-head h2{letter-spacing:-1px}
.case-injaz .case-gallery figure{border-radius:10px}
.case-injaz .case-quote{background:linear-gradient(120deg,#20252d,#353038)}
/* Labbaik: connected service steps and a welcoming green palette. */
.case-labbaik .case-atmosphere span{border:1px solid #17835a22;border-radius:50%}
.case-labbaik .case-atmosphere span:nth-child(1){width:230px;height:230px;box-shadow:0 0 0 28px #17835a05,0 0 0 56px #17835a04}
.case-labbaik .project-signature>div{border-radius:24px 24px 10px 10px}
.case-labbaik .case-feature:nth-child(1) .feature-symbol{color:#fff;background:#ffffff14}
.case-labbaik .case-gallery-section{background:linear-gradient(180deg,#dfefe5,#f1f8f4)}
/* Yafe: notebook lines, warm color, and progress badges. */
.case-yafe .case-hero::before{background-image:linear-gradient(#3474ce0b 1px,transparent 1px);background-size:100% 34px}
.case-yafe .case-atmosphere span{border:2px solid #e6772726;border-radius:50%;background:#ffc65314}
.case-yafe .case-atmosphere span:nth-child(1){width:120px;height:120px;border-style:dashed}
.case-yafe .project-signature>div{background:#fffbf1;border-radius:18px}
.case-yafe .project-signature>div:nth-child(2){background:#edf4ff}
.case-yafe .project-signature i{color:#3474ce}
.case-yafe .case-feature:nth-child(3) .feature-symbol{color:#fff;background:#ffffff14}
.case-yafe .case-gallery-section{background:linear-gradient(135deg,#fff0cd,#fffaef)}
@media(max-width:980px){
  .case-hero{padding:135px 0 65px}
  .case-hero-grid{gap:40px}
  .case-page .case-title{font-size:clamp(44px,8vw,65px)}
  .case-atmosphere span:nth-child(1){opacity:.07}
}
@media(max-width:640px){
  .home-page .hero h1{font-size:41px;line-height:1.35;letter-spacing:-1px}
  .case-hero{padding:120px 0 50px}
  .case-page .case-title{font-size:44px;letter-spacing:-1px}
  .case-desc{font-size:14px}
  .project-signature>div{font-size:10px;padding:11px 4px}
  .project-signature i{font-size:14px}
  .feature-symbol{inset-inline-end:20px;top:20px;width:29px;height:29px;font-size:12px}
  .case-almhamweb .almham-preview img{max-height:270px}
  .case-page .case-feature>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.case-page .case-feature,.home-page .project-card{transition:none}}

/* Keep navigation legible over both the adventure hero and the light sections. */
.case-fares .site-header,.case-fares .site-header.scrolled{color:#fff;background:#0c2347;border-bottom:1px solid #ffffff24;box-shadow:0 8px 30px #07162b26}
.case-fares .site-header .nav-links a,.case-fares .site-header:not(.scrolled) .nav-links a{color:#eaf1ff}
.case-fares .site-header .nav-links a:hover,.case-fares .site-header .nav-links a.active{color:#ffdb70}
.case-fares .site-header .nav-links a::after{background:#ffdb70}
.case-fares .site-header .lang-toggle{color:#fff;border-color:#ffffff50;background:#ffffff0d}
.case-fares .site-header .lang-toggle:hover{background:#ffffff20}
.case-fares .site-header .menu-toggle{color:#fff;border-color:#ffffff50}
.case-fares .site-header .nav-cta:hover{background:#ffdc78;color:#102143}
@media(max-width:980px){.case-fares .site-header .nav-links{background:#0c2347}}

/* Readable secondary text and matching foregrounds on colored panels. */
.case-clean{--case-accent:#286543}
.case-labbaik{--case-accent:#116b47}
.case-ataya{--case-accent:#256d4c}
.case-yafe{--case-accent:#b74d16}
.case-almhamweb{--case-accent:#5f38c5}
.case-page .site-header .nav-links a{color:var(--case-ink)}
.case-page .case-breadcrumb,.case-page .case-title small,.case-page .case-summary small{color:color-mix(in srgb,var(--case-ink) 80%,var(--case-bg))}
.case-page .case-hero .case-desc,.case-page .case-section .case-section-head p,.case-page .case-cta p{color:color-mix(in srgb,var(--case-ink) 82%,var(--case-bg))}
.case-page .case-bento .case-feature p{color:color-mix(in srgb,var(--case-ink) 80%,var(--case-panel))}
.case-page .site-footer .footer-top>p,.case-page .site-footer .footer-bottom{color:color-mix(in srgb,var(--case-ink) 80%,var(--case-bg))}
.case-page .site-footer .back-top{color:var(--case-ink);border-color:color-mix(in srgb,var(--case-ink) 35%,transparent)}
.case-page .case-quote p{color:#e0e6f0}
.case-almhamweb .almham-window-bar b,.case-almhamweb .almham-caption-meta b{color:#6b587f}
.case-almhamweb .case-kicker{color:#512cae}
.case-fares .case-hero .case-desc,.case-fares .case-hero .case-breadcrumb,.case-fares .case-hero .case-title small{color:#e4eeff}
.case-fares .case-kicker{color:#ffdc78;background:#102e58;border-color:#ffdc7870}
.case-fares .case-actions .button-ghost{background:#112e55;color:#fff}
.case-fares .case-actions .button-ghost:hover{background:#1b4070;color:#fff}
.case-fares .case-visual-note small{color:#12366c}
.case-fares .case-cta .button-primary{background:#174faa;color:#fff}
.case-page.case-fares .case-bento .case-feature:nth-child(2)>span{color:#ffdc78}
.case-page.case-fares .case-bento .case-feature:nth-child(2) p{color:#e3edff}
.case-page.case-almhamweb .case-bento .case-feature.wide p,.case-page.case-injaz .case-bento .case-feature.wide p{color:#e3dff0}
.case-page.case-injaz .case-bento .case-feature.wide>span{color:#f0c578}
.case-page.case-clean .case-bento .case-feature:nth-child(3){background:#285f43}
.case-page.case-labbaik .case-bento .case-feature:nth-child(1){background:#116546}
.case-page.case-ataya .case-bento .case-feature:nth-child(2){background:linear-gradient(145deg,#256d4c,#1c543c)}
.case-page.case-yafe .case-bento .case-feature:nth-child(3){background:#25599e}
.case-page.case-clean .case-bento .case-feature:nth-child(3)>span,.case-page.case-labbaik .case-bento .case-feature:nth-child(1)>span,.case-page.case-ataya .case-bento .case-feature:nth-child(2)>span,.case-page.case-yafe .case-bento .case-feature:nth-child(3)>span{color:#fff}
.case-page.case-clean .case-bento .case-feature:nth-child(3) p,.case-page.case-labbaik .case-bento .case-feature:nth-child(1) p,.case-page.case-ataya .case-bento .case-feature:nth-child(2) p,.case-page.case-ataya .case-bento .case-feature:nth-child(4) p,.case-page.case-yafe .case-bento .case-feature:nth-child(3) p{color:#f0f5f3}
.case-yafe .case-quote blockquote span{color:#91bdff}
.case-ataya .case-kicker,.case-ataya .case-summary small{color:#256d4c}
.case-yafe .case-visual-note small{color:#a24416}
.case-page.case-baina .case-hero .case-desc,.case-page.case-baina .case-hero .case-breadcrumb{color:#e0ded6}
.case-baina .site-header .lang-toggle{color:#fff;background:#ffffff0c;border-color:#ffffff50}
.case-baina .site-header .lang-toggle:hover{background:#ffffff20}
.case-page.case-baina .case-bento .case-feature p{color:#d7dce5}
.home-page .hero-signature p,.home-page .metrics span,.home-page .card-index,.home-page .service-number,.home-page .service-row p,.home-page .project-meta h3 small,.home-page .process-copy p,.home-page .process-steps p,.home-page .contact-details small,.home-page .field label,.home-page .footer-top>p,.home-page .footer-social-group>span,.home-page .footer-bottom{color:#5d6069}
.home-page .game-topline b{color:#adb6c6}
.home-page .project-ataya .project-meta>div>span{color:#256d4c}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#646974;opacity:1}
.case-page.case-fares .site-header .nav-links a{color:#eaf1ff}
.case-page.case-fares .site-header .nav-links a:hover,.case-page.case-fares .site-header .nav-links a.active{color:#ffdb70}
.case-ataya .case-kicker{color:#1e593d}
.case-yafe .case-kicker{color:#a24416}

/* Product stories: diagrams inspired by what each product actually does. */
.project-story{position:relative;padding:84px 0;background:var(--case-bg);border-bottom:1px solid color-mix(in srgb,var(--case-ink) 9%,transparent)}
.project-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:68px}
.story-eyebrow{display:block;margin-bottom:16px;color:var(--case-accent);font-size:11px;font-weight:800;letter-spacing:.7px}
.story-copy h2{margin:0 0 22px;font-size:clamp(32px,3.4vw,48px);line-height:1.4;letter-spacing:-1px}
.story-copy>p{max-width:470px;margin:0;color:color-mix(in srgb,var(--case-ink) 82%,var(--case-bg));font-size:14px;line-height:2}
.story-art{position:relative;min-width:0;padding:30px;border:1px solid color-mix(in srgb,var(--case-accent) 16%,transparent);border-radius:28px;background:radial-gradient(ellipse at 20% 0,color-mix(in srgb,var(--case-accent) 9%,var(--case-bg)),var(--case-bg));box-shadow:0 22px 60px color-mix(in srgb,var(--case-ink) 5%,transparent)}
.story-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.story-tile{position:relative;min-width:0;padding:22px 14px 25px;border:1px solid color-mix(in srgb,var(--case-accent) 14%,transparent);border-radius:18px;background:var(--case-panel);text-align:center;color:var(--case-ink)}
.story-number{display:block;font:700 10px var(--latin);color:color-mix(in srgb,var(--case-ink) 72%,var(--case-panel));letter-spacing:2px}
.story-icon{display:grid;place-items:center;width:56px;height:56px;margin:20px auto;border-radius:16px;background:color-mix(in srgb,var(--case-accent) 9%,var(--case-panel));color:var(--case-accent);font-size:22px}
.story-tile h3{margin:0 0 9px;font-size:16px;line-height:1.7}
.story-tile p{margin:0;font-size:11px;line-height:1.9;color:color-mix(in srgb,var(--case-ink) 82%,var(--case-panel))}
.story-almham{grid-template-columns:1fr;gap:14px}
.story-almham .story-tile{display:grid;grid-template-columns:28px 48px 1fr;column-gap:16px;align-items:center;text-align:start;padding:17px 22px;border-radius:12px}
.story-almham .story-number{grid-row:1/3;color:#614385}
.story-almham .story-icon{grid-row:1/3;width:44px;height:44px;margin:0;border-radius:12px;font-size:18px}
.story-almham h3{grid-column:3;margin:0;font-size:15px}
.story-almham p{grid-column:3;font-size:12px}
.story-almham .story-tile::after{content:"";position:absolute;inset-inline-start:56px;bottom:-15px;width:1px;height:14px;background:#bba7dc}
.story-almham .story-tile:last-child::after{display:none}
.case-almhamweb .story-art{background:radial-gradient(ellipse at top,#e8def8,#f3eefb);border-radius:22px}
.story-ataya{gap:0;align-items:center}
.story-ataya .story-tile{border-radius:0;padding:25px 12px 28px}
.story-ataya .story-tile:first-child{border-radius:14px 14px 4px 4px;border-bottom:5px dotted #d8e8dc;transform:rotate(3deg)}
.story-ataya .story-tile:nth-child(2){z-index:1;transform:translateY(-10px);border-radius:16px;box-shadow:0 18px 30px #173b2312}
.story-ataya .story-tile:last-child{border-radius:16px;background:#1c543c;color:#fff;transform:rotate(-3deg)}
.story-ataya .story-tile:last-child p,.story-ataya .story-tile:last-child .story-number{color:#e2eee7}
.story-ataya .story-tile:last-child .story-icon{background:#ffffff16;color:#f7d9a2}
.case-ataya .story-art{padding:40px 28px;background:linear-gradient(145deg,#e5efe6,#f5f8ee)}
.case-ataya .case-summary{border-top:0}
.story-baina{gap:12px;align-items:center}
.story-baina .story-tile{min-height:240px;background:linear-gradient(150deg,#1b202c,#10141d);border-color:#ffffff22;transform:rotate(4deg)}
.story-baina .story-tile:nth-child(2){transform:translateY(-8px)}
.story-baina .story-tile:last-child{transform:rotate(-5deg);border-color:#f4bf2780;background:linear-gradient(150deg,#342916,#171711);box-shadow:0 12px 35px #f4bf270c}
.story-baina .story-icon{border:1px solid #f4bf2733;border-radius:50%;background:#f4bf2709}
.case-baina .story-art{background:radial-gradient(ellipse at center,#33281977,transparent 80%),#090d15;border-color:#f4bf2728;padding:40px 26px}
.case-baina .project-story{background:#090c12}
.story-fares{align-items:start;gap:12px}
.story-fares .story-tile{padding-top:30px;border-radius:50px 50px 20px 20px;min-height:228px;border-color:#20477824}
.story-fares .story-number{color:#184171}
.story-fares .story-tile:nth-child(1){background:#e8f7ee;transform:translateY(12px)}
.story-fares .story-tile:nth-child(2){background:#fff1c9;transform:translateY(-8px)}
.story-fares .story-tile:nth-child(3){background:#e8eeff;transform:translateY(12px)}
.story-fares .story-icon{background:#fff9;border-radius:50%;color:#174faa;font-size:25px}
.story-fares .story-tile h3{font-size:15px;color:#102143}
.story-fares .story-tile p{font-size:12px;color:#244668;font-weight:700}
.case-fares .story-art{background:radial-gradient(ellipse at top,#f3f7ff,#e5edf9);padding:38px 25px}
.case-fares .project-story{background:linear-gradient(180deg,#f6f8fc,#edf3fc)}
.story-clean{padding-top:30px;gap:12px}
.story-clean::before{content:"";position:absolute;top:0;inset-inline:0;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,#92a99b 0 25px,transparent 25px 40px)}
.story-clean .story-tile{border-radius:8px 8px 20px 20px;border-top:4px solid #286543}
.story-clean .story-tile:nth-child(2){border-top-color:#b95420}
.story-clean .story-icon{border-radius:8px;background:#e5f0e7}
.case-clean .story-art{background:linear-gradient(90deg,#32795508 1px,transparent 1px),linear-gradient(#32795508 1px,transparent 1px),#e9f1e9;background-size:24px 24px;padding:28px}
.story-injaz{grid-template-columns:1fr;gap:0}
.story-injaz .story-tile{display:grid;grid-template-columns:26px 48px 1fr;gap:0 18px;text-align:start;border-radius:0;border-bottom:0;padding:20px}
.story-injaz .story-tile:first-child{border-radius:12px 12px 0 0}
.story-injaz .story-tile:last-child{border-radius:0 0 12px 12px;border-bottom:1px solid #a92f3a24}
.story-injaz .story-number,.story-injaz .story-icon{grid-row:1/3;align-self:center}
.story-injaz .story-icon{margin:0;width:42px;height:42px;background:#a92f3a0a;border-radius:8px;font-size:18px}
.story-injaz h3,.story-injaz p{grid-column:3;margin:0}
.case-injaz .story-art{border-radius:14px;background:#eae4da;padding:24px;box-shadow:14px 14px 0 #c6974715}
.story-labbaik{gap:18px}
.story-labbaik .story-tile{border:0;background:transparent;padding:12px 2px}
.story-labbaik .story-icon{position:relative;width:64px;height:64px;background:#fff;border:1px solid #116b4733;border-radius:50%;box-shadow:0 8px 25px #116b470d}
.story-labbaik .story-tile:not(:last-child)::after{content:"";position:absolute;top:84px;inset-inline-start:70%;width:65%;height:1px;background:#116b4740}
.story-labbaik .story-number{color:#116b47}
.case-labbaik .story-art{border-radius:36px 36px 16px 16px;background:linear-gradient(135deg,#def0e6,#f2f9f5)}
.story-yafe{align-items:center;gap:12px}
.story-yafe .story-tile{border-radius:20px 20px 8px 8px;min-height:230px}
.story-yafe .story-tile:nth-child(2){transform:translateY(-12px);background:#f1f6ff}
.story-yafe .story-icon{border-radius:18px;background:#fff0d6;color:#a24416}
.story-yafe .story-tile:nth-child(2) .story-icon{background:#e1ebff;color:#25599e}
.story-yafe .story-tile:last-child .story-icon{border-radius:50%;background:#fff0c4;color:#946314}
.case-yafe .story-art{background:repeating-linear-gradient(#fff8e9 0 27px,#d7dff025 27px 28px);padding:38px 25px;border-color:#e5d3b4}

/* A calmer editorial rhythm around the individual identities. */
.case-page .case-summary-grid{min-height:122px}
.case-page .case-section{padding:88px 0}
.case-page .case-section-head{margin-bottom:38px;align-items:center}
.case-page .case-section-head h2{font-size:clamp(34px,3.9vw,54px);line-height:1.35}
.case-page .case-section-head>p,.case-page .case-section-head>div>p{line-height:1.95}
.case-page .case-feature{padding:28px;box-shadow:0 8px 24px color-mix(in srgb,var(--case-ink) 4%,transparent)}
.case-page .case-feature h3{margin-top:35px;font-size:21px;line-height:1.6}
.case-page .case-feature p{font-size:13px;line-height:1.95}
.case-page .case-gallery figure{transition:transform .25s,box-shadow .25s}
.case-page .case-gallery figure:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--case-ink) 10%,transparent)}
.case-page .case-cta{padding:75px 0}
.case-page .case-cta .container{padding:55px 28px;border:1px solid color-mix(in srgb,var(--case-accent) 18%,transparent);border-radius:28px;background:color-mix(in srgb,var(--case-panel) 65%,var(--case-bg))}
.case-page .case-cta h2{font-size:clamp(34px,3.8vw,52px);line-height:1.4}
.case-page .case-quote{padding:85px 0}
.case-page .case-quote blockquote{font-size:clamp(30px,3.7vw,50px);line-height:1.5}
.case-page .site-footer{padding-top:56px}
.case-page .case-visual-note{line-height:1.8}
.case-page .case-visual-note b{font-size:13px}
.case-almhamweb .case-hero{background:radial-gradient(ellipse at 15% 40%,#ddd1f7,transparent 60%),linear-gradient(120deg,#faf8fe,#f1ecfa)}
.case-ataya .case-hero{background:radial-gradient(ellipse at 15% 20%,#d9ebdf,transparent 60%),#f5f8f2}
.case-baina .case-hero-grid{grid-template-columns:.95fr 1.05fr}
.case-baina .case-hero{min-height:auto}
.case-baina .case-visual{box-shadow:0 25px 85px #0006,0 0 60px #f4bf2708}
.case-fares .case-hero-grid{grid-template-columns:.82fr 1.18fr}
.case-injaz .case-visual{box-shadow:12px 12px 0 #c6974718,0 24px 60px #222a3215}
.case-labbaik .case-hero{background:radial-gradient(ellipse at 15% 40%,#d5eddf,transparent 65%),#f0f8f3}
.case-yafe .case-hero{background:radial-gradient(ellipse at 15% 30%,#ffedbb,transparent 65%),#fff9ed}

/* Portfolio home: two clear entrances, restrained typography and framed work. */
.portfolio-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.portfolio-routes>a{display:flex;align-items:center;gap:12px;padding:17px 14px;border:1px solid #d6c9bc;border-radius:14px;background:#fffdfa;box-shadow:0 6px 18px #35263104;transition:transform .25s,border-color .25s}
.portfolio-routes>a:hover{transform:translateY(-3px);border-color:#a92f3a77}
.portfolio-routes>a>i:first-child{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:10px;background:#a92f3a0c;color:#a92f3a;font-size:16px}
.portfolio-routes>a:nth-child(2)>i:first-child{background:#174faa0c;color:#174faa}
.portfolio-routes>a>i:last-child{margin-inline-start:auto;font-size:11px;color:#a92f3a}
.portfolio-routes small,.portfolio-routes b{display:block}
.portfolio-routes small{color:#5d6069;font-size:9px}
.portfolio-routes b{margin-top:3px;font-size:11px;color:#211d27}
.home-page .hero-grid{gap:55px}
.home-page .hero{padding-top:150px;min-height:auto}
.home-page .section{padding:95px 0}
.home-page .section-heading{margin-bottom:44px}
.home-page .section h2{font-size:clamp(36px,4vw,56px);line-height:1.4}
.home-page .project-large{grid-template-columns:.8fr 1.2fr}
.home-page .project-large .project-meta{padding:34px}
.home-page .project-large .project-shot{height:330px;padding:24px}
.home-page .project-meta h3{line-height:1.5}
.home-page .project-meta p{font-size:13px;line-height:1.95}
.home-page .games{background:radial-gradient(ellipse at 10% 20%,#222d4544,transparent 60%),#101116}
.home-page .game-featured{border-color:#ffc83d44}
.home-page .contact-form{border-radius:22px}
.home-page .contact-form input,.home-page .contact-form select,.home-page .contact-form textarea{border-radius:10px}
.home-page .process{border-block:1px solid #2d223312}
@media(max-width:980px){
  .project-story-grid{grid-template-columns:1fr;gap:35px}
  .story-copy>p{max-width:640px}
  .project-story{padding:65px 0}
  .case-fares .case-hero-grid,.case-baina .case-hero-grid{grid-template-columns:1fr}
  .home-page .hero-grid{gap:40px}
  .home-page .project-large{display:block}
}
@media(max-width:640px){
  .story-copy h2{font-size:32px;line-height:1.45}
  .story-copy>p{font-size:13px}
  .story-art{padding:22px 16px;border-radius:20px}
  .story-board:not(.story-almham):not(.story-injaz){grid-template-columns:1fr;gap:12px}
  .story-board:not(.story-almham):not(.story-injaz) .story-tile{display:grid;grid-template-columns:30px 50px 1fr;gap:0 12px;text-align:start;min-height:0;padding:18px 14px;transform:none;border-radius:14px}
  .story-board:not(.story-almham):not(.story-injaz) .story-number,.story-board:not(.story-almham):not(.story-injaz) .story-icon{grid-row:1/3;align-self:center}
  .story-board:not(.story-almham):not(.story-injaz) .story-icon{width:44px;height:44px;margin:0;font-size:18px}
  .story-board:not(.story-almham):not(.story-injaz) h3,.story-board:not(.story-almham):not(.story-injaz) p{grid-column:3;margin:0}
  .story-labbaik .story-tile::after{display:none}
  .story-almham .story-tile,.story-injaz .story-tile{column-gap:12px;padding:16px 12px}
  .story-almham h3,.story-injaz h3{font-size:14px}
  .story-almham p,.story-injaz p{font-size:11px}
  .case-page .case-section{padding:60px 0}
  .case-page .case-section-head h2{font-size:34px}
  .case-page .case-feature{padding:24px;min-height:0}
  .case-page .case-feature h3{font-size:19px}
  .case-page .case-cta .container{padding:38px 20px;border-radius:20px}
  .portfolio-routes{grid-template-columns:1fr;margin-top:22px;gap:10px}
  .portfolio-routes>a{padding:14px}
  .portfolio-routes b{font-size:12px}
  .home-page .hero{padding-top:125px}
  .home-page .hero h1{font-size:40px}
  .home-page .project-large .project-shot{height:220px;padding:14px}
  .home-page .project-large .project-meta{padding:24px 20px}
  .home-page .section{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){.portfolio-routes>a,.case-page .case-gallery figure{transition:none}}