/* Glass controls inspired by the supplied references; no CURIO artwork changes. */
#portfolio-root .nav { position:relative; }
#portfolio-root .theme-toggle,
#portfolio-root .language-toggle,
#portfolio-root .drawer-theme {
  display:inline-flex!important; align-items:center; gap:9px; position:relative;
  flex:none; width:auto!important; height:42px!important; min-height:42px!important;
  padding:4px 12px 4px 4px!important; border:1px solid var(--edge)!important;
  border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(140,150,165,.18))!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7),inset 0 -2px 3px #00000012,0 6px 18px #00000012;
  color:var(--ink)!important; cursor:pointer; font:inherit; font-size:13px;
}
#portfolio-root .theme-toggle::before { display:none!important; }
#portfolio-root .glass-orb { width:34px; height:34px; display:grid; place-items:center; flex:none; border-radius:50%; border:1px solid var(--edge); background:linear-gradient(135deg,#ffffff65,#ffffff08 50%,#ffffff48); box-shadow:inset 2px 2px 4px #ffffff66,inset -2px -2px 5px #00000018,0 3px 7px #00000016; transition:transform .25s ease; }
#portfolio-root :is(.theme-toggle,.language-toggle):hover .glass-orb { transform:scale(1.06); }
#portfolio-root .glass-orb svg { width:20px; height:20px; grid-area:1/1; transition:opacity .25s,transform .35s; }
#portfolio-root .theme-toggle .moon { opacity:0; transform:rotate(-35deg) scale(.6); }
#portfolio-root[data-theme=dark] .theme-toggle .moon { opacity:1; transform:none; }
#portfolio-root[data-theme=dark] .theme-toggle .sun { opacity:0; transform:rotate(35deg) scale(.6); }
#portfolio-root .switch-caption { white-space:nowrap; color:var(--ink)!important; }
#portfolio-root #navbar .menu-toggle { align-items:center; gap:8px; border-radius:999px; background:var(--glass)!important; cursor:pointer; }
#portfolio-root #navbar .menu-toggle svg { width:20px; height:20px; }
#portfolio-root.compact-layout #navbar .menu-toggle { display:inline-flex!important; }
#portfolio-root #navbar, #portfolio-root #navbar .nav { overflow:visible!important; }
#portfolio-root #glass-menu { position:static; display:grid; grid-template-rows:0fr; width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; opacity:0; transform:translateY(-6px); transition:grid-template-rows .22s ease,opacity .22s ease,transform .22s ease; }
#portfolio-root #glass-menu[hidden] { display:none!important; }
#portfolio-root #glass-menu.is-open { grid-template-rows:1fr; opacity:1; transform:none; }
#portfolio-root .menu-surface { display:flex; flex-direction:column; padding:14px; overscroll-behavior:contain; }
#portfolio-root .menu-heading { display:flex; align-items:center; gap:10px; padding:0 4px 10px; border-bottom:1px solid var(--edge); }
#portfolio-root .menu-heading h2 { font-family:var(--font-body); font-size:20px!important; line-height:1.3; margin:0; }
#portfolio-root .menu-emblem { font-size:29px; }
#portfolio-root .menu-close { margin-inline-start:auto; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--edge); background:var(--glass); color:var(--ink); cursor:pointer; }
#portfolio-root .menu-close svg { width:21px; height:21px; }
#portfolio-root .drawer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding-block:12px; }
#portfolio-root .drawer-links a { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px; border-radius:18px; color:var(--ink); font-size:13px; text-decoration:none; transition:background .2s,color .2s; }
#portfolio-root .drawer-links a:hover { background:rgba(130,145,158,.15); }
#portfolio-root .drawer-links a.is-current { background:var(--ink); color:var(--page); }
#portfolio-root .drawer-links a.is-current :is(span,small) { color:var(--page)!important; -webkit-text-fill-color:currentColor!important; }
#portfolio-root .drawer-icon { display:grid; place-items:center; }
#portfolio-root .drawer-icon svg { width:22px; height:22px; }
#portfolio-root .drawer-links small { display:none; }
#portfolio-root .drawer-footer { border-top:1px solid var(--edge); padding:12px 4px 2px; }
#portfolio-root .drawer-footer > span { display:none; }
#portfolio-root .drawer-settings { display:flex; flex-wrap:wrap; gap:12px; }
#portfolio-root .drawer-theme { padding-inline:14px!important; }
#portfolio-root .drawer-theme svg { width:20px; height:20px; }
@keyframes drawer-in { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }

/* One coherent story, nine slides; no fixed scroll height or overlapping original panels. */
#portfolio-root .touch-showcase { display:none!important; }
#portfolio-root.compact-layout #projects #before-after { display:none!important; }
#portfolio-root.compact-layout #projects .touch-showcase { display:block!important; width:100%!important; max-width:1120px!important; margin:0 auto 36px!important; padding:0!important; height:auto!important; min-height:0!important; background:transparent!important; }
#portfolio-root .showcase-heading { margin:0 0 22px; text-align:start; }
#portfolio-root .showcase-heading > span { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
#portfolio-root .showcase-heading h3 { margin:12px 0!important; font-size:clamp(29px,4vw,44px)!important; line-height:1.1!important; }
#portfolio-root .showcase-heading p { font-size:14px!important; }
#portfolio-root.compact-layout #projects .story-track { display:block!important; width:100%; overflow:visible!important; touch-action:pan-y pinch-zoom; }
#portfolio-root .story-track::-webkit-scrollbar { display:none; }
#portfolio-root .story-slide { flex:0 0 100%; min-width:0; width:100%; display:grid; grid-template-columns:1fr; gap:18px; scroll-snap-align:start; scroll-snap-stop:always; }
#portfolio-root .story-slide figure { position:relative; display:flex; justify-content:center; align-items:center; margin:0; padding:0 0 52px; width:100%; min-width:0; height:auto; min-height:0; overflow:visible; border-radius:20px; background:transparent; }
#portfolio-root.compact-layout #projects .story-slide img { position:static!important; display:block!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:60svh!important; aspect-ratio:auto!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; border-radius:18px!important; transform:none!important; translate:none!important; scale:none!important; }
#portfolio-root .story-caption { border:1px solid var(--edge); border-radius:24px; padding:24px; background:var(--glass); min-width:0; align-self:start; }
#portfolio-root .story-caption > span { display:block; font-size:11px; line-height:1.6; letter-spacing:.1em; color:var(--muted); margin-bottom:14px; }
#portfolio-root .story-caption h3 { font-size:clamp(28px,4vw,42px)!important; line-height:1.12!important; margin:0 0 16px!important; }
#portfolio-root .story-caption p { font-size:16px!important; line-height:1.65!important; margin:0!important; max-width:none!important; }
#portfolio-root .story-slide.is-active .story-caption { animation:caption-in .35s ease both; }
@keyframes caption-in { from { opacity:.65; transform:translateY(8px); } to { opacity:1; transform:none; } }
#portfolio-root .gallery-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 0 6px; }
#portfolio-root .gallery-controls > button { display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border:1px solid var(--edge); border-radius:50%; background:var(--glass); color:var(--ink); cursor:pointer; }
#portfolio-root .gallery-controls > button:disabled { opacity:.3; cursor:default; }
#portfolio-root .gallery-controls svg { width:20px; height:20px; }
#portfolio-root .gallery-count { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#portfolio-root .gallery-dots { display:flex; gap:0; align-items:center; }
#portfolio-root .gallery-dots button { width:22px; height:36px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
#portfolio-root .gallery-dots button::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.25; transition:opacity .2s,transform .2s; }
#portfolio-root .gallery-dots button.is-active::after { opacity:1; transform:scale(1.45); }
#portfolio-root:not(.compact-layout) #brand .gallery-controls { display:none; }
html#portfolio-root.compact-layout #brand #brandTrack { display:block!important; overflow:visible!important; width:100%!important; padding:0!important; touch-action:pan-y pinch-zoom; }
#portfolio-root #brandTrack::-webkit-scrollbar { display:none; }
html#portfolio-root.compact-layout #brand #brandTrack .bcard { flex:0 0 100%!important; width:100%!important; max-width:none!important; min-height:0!important; height:auto!important; scroll-snap-align:start; scroll-snap-stop:always; box-shadow:none!important; }
html#portfolio-root.compact-layout #brand #brandTrack .blogo { position:relative!important; height:clamp(180px,28svh,250px)!important; aspect-ratio:auto!important; padding:0!important; box-shadow:none!important; }
html#portfolio-root.compact-layout #brand #brandTrack .blogo img { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; max-height:100%!important; margin:0!important; object-fit:contain!important; object-position:center!important; }
html#portfolio-root.compact-layout #brand #brandTrack .bmeta { padding:20px!important; }
html#portfolio-root.compact-layout #brand #brandTrack .bmeta h4 { font-size:24px!important; }
html#portfolio-root.compact-layout #brand #brandTrack .brand-description { font-size:14px!important; line-height:1.55!important; }
#portfolio-root .gentle-entry.entered { animation:gentle-entry .4s ease; }
#portfolio-root.compact-layout #projects .gentle-entry.entered,
#portfolio-root.compact-layout #brand #brandPin.gentle-entry.entered { animation:gentle-entry .4s ease!important; }
@keyframes gentle-entry { from { opacity:.7; translate:0 10px; } to { opacity:1; translate:0 0; } }

html#portfolio-root.compact-layout #brand #brandPin { max-width:1000px!important; margin-inline:auto!important; }
html#portfolio-root.compact-layout #brand .bmeta { height:auto!important; max-height:none!important; overflow:visible!important; }
@media(min-width:700px) {
 html#portfolio-root.compact-layout #brand #brandTrack .bcard { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center!important; }
 html#portfolio-root.compact-layout #brand #brandTrack .blogo { height:300px!important; }
}
@media(min-width:1000px) {
 #portfolio-root .story-slide { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:center; gap:24px; }
 #portfolio-root .story-caption { align-self:center; }

}
@media(max-width:600px) {
 #portfolio-root .nav-language { display:none!important; }
 #portfolio-root #navbar .theme-toggle { width:42px!important; padding:3px!important; }
 #portfolio-root #navbar .theme-toggle .switch-caption { display:none; }
 #portfolio-root .gallery-controls { gap:7px; }
 #portfolio-root .gallery-dots button { width:16px; }
 #portfolio-root .gallery-count { font-size:11px; }
 #portfolio-root .story-caption { padding:22px; }
}
@media(max-width:350px) {
 #portfolio-root #navbar .nav-logo-text { font-size:11px!important; }
 #portfolio-root #navbar .menu-toggle { padding:8px!important; }
 #portfolio-root .gallery-controls { gap:5px; }
 #portfolio-root .gallery-dots button { width:12px; }
}
/* Real Arabic text, not mirrored Latin geometry. Logos and image artwork are preserved. */
#portfolio-root[lang=ar] body { font-family:Tahoma,Arial,sans-serif!important; }
#portfolio-root[lang=ar] body :is(h1,h2,h3,h4,h5,p,span,small,a,button,label,li) { font-family:Tahoma,Arial,sans-serif!important; letter-spacing:0!important; }
#portfolio-root[lang=ar] body :is(h1,h2,h3,h4,h5) { line-height:1.5!important; }
#portfolio-root[lang=ar] body p { line-height:1.85!important; }

#portfolio-root[lang=ar] .gallery-controls > button svg { transform:scaleX(-1); }
#portfolio-root[lang=ar] .theme-toggle,
#portfolio-root[lang=ar] .language-toggle { padding:4px 4px 4px 12px!important; }
#portfolio-root[lang=ar] .contact-link strong { direction:ltr; unicode-bidi:isolate; }
#portfolio-root[lang=ar] :is(.intro-about,.story-caption,.bmeta,.pm-details,.casestudy,.pm-img-desc) { text-align:start!important; }
#portfolio-root[lang=ar] .intro-name { direction:ltr; }
#portfolio-root[lang=ar] #about .intro-name span { line-height:1.5!important; }
#portfolio-root[lang=ar]:not(.compact-layout) #about .intro-about h2 { font-size:clamp(30px,2.8vw,48px)!important; line-height:1.45!important; }
#portfolio-root[lang=ar]:not(.compact-layout) #about .intro-about p { font-size:clamp(13px,.95vw,16px)!important; line-height:1.8!important; }
#portfolio-root[lang=ar]:not(.compact-layout) #about .intro-about { top:16%!important; }
#portfolio-root[lang=ar] #projects #before-after .project-copy-v13 { height:auto!important; min-height:0!important; max-height:none!important; }
#portfolio-root[lang=ar] #projects #before-after .pv-mask { overflow:visible!important; flex-shrink:0!important; }
#portfolio-root[lang=ar] .brand-side { text-align:start!important; }
#portfolio-root:not(.compact-layout) #about .intro-about { left:9%!important; top:22%!important; width:46%!important; max-width:720px!important; padding:clamp(28px,2.8vw,46px)!important; }
#portfolio-root .image-expand { position:absolute; inset:auto 12px 12px auto; z-index:5; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--edge); border-radius:50%; background:var(--page); color:var(--ink); cursor:pointer; box-shadow:0 3px 15px #0002; }
#portfolio-root .image-expand svg { width:20px; height:20px; }
#portfolio-root:not(.compact-layout) #brand .image-expand { display:none; }
#portfolio-root #image-viewer { position:fixed; inset:16px; width:calc(100vw - 32px); height:calc(100dvh - 32px); max-width:none; max-height:none; margin:0; padding:60px 16px; border:1px solid var(--edge); border-radius:22px; background:var(--page); color:var(--ink); }
#portfolio-root #image-viewer::backdrop { background:#0009; }
#portfolio-root .viewer-scroll { width:100%; height:100%; overflow:auto; }
#portfolio-root #image-viewer img { display:block!important; width:100%!important; height:100%!important; min-height:0!important; max-height:100%!important; object-fit:contain!important; }
#portfolio-root .viewer-close { position:absolute; top:8px; inset-inline-end:12px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--edge); background:var(--glass); color:var(--ink); cursor:pointer; }
#portfolio-root .viewer-close svg { width:22px; height:22px; }
#portfolio-root .viewer-original { position:absolute; bottom:18px; inset-inline-start:24px; color:var(--ink); text-decoration:underline; }
#portfolio-root #image-viewer { overscroll-behavior:contain; }
#portfolio-root :is(.image-expand,.viewer-close,.menu-close,.drawer-links a,.gallery-controls button,.language-toggle,.menu-toggle):focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
 #portfolio-root :is(.story-track,#brandTrack) { scroll-behavior:auto!important; }
 #portfolio-root :is(.story-caption,.gentle-entry,#glass-menu,.glass-orb,svg) { animation:none!important; transition:none!important; }
 #portfolio-root.compact-layout #projects .gentle-entry.entered,
 #portfolio-root.compact-layout #brand #brandPin.gentle-entry.entered { animation:none!important; }
}

/* The disclosure shares the navigation surface and expands its lower edge. */
#portfolio-root .nav-top-row { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
#portfolio-root #navbar .nav { flex-direction:column; }
#portfolio-root.compact-layout #navbar .nav { width:min(460px,calc(100vw - 24px))!important; gap:0!important; transition:border-radius .22s ease!important; }
#portfolio-root.compact-layout #navbar .nav.menu-expanded { border-radius:26px!important; }
#portfolio-root.compact-layout .nav-top-row { gap:8px; justify-content:space-between; }
#portfolio-root.compact-layout .nav-top-row .nav-logo-text { font-size:clamp(12px,2.5vw,18px)!important; }
#portfolio-root.compact-layout .nav-top-row .nav-logo { margin-inline-end:auto; }
#portfolio-root .menu-clip { min-height:0; overflow:hidden; }
#portfolio-root .menu-surface { max-height:calc(100svh - 120px); overflow-y:auto; padding:12px 0 2px; }
#portfolio-root .menu-heading { display:none; }
#portfolio-root.compact-layout .nav-language { display:none!important; }
#portfolio-root.compact-layout .story-slide:not(.is-active),
html#portfolio-root.compact-layout #brand #brandTrack .bcard:not(.is-active) { display:none!important; }
html#portfolio-root.compact-layout #brand #brandTrack .bcard.is-active { width:100%!important; }
#portfolio-root.compact-layout #projects .touch-showcase { max-width:1000px!important; }
#portfolio-root.compact-layout .showcase-heading { padding-top:18px; }
#portfolio-root.compact-layout .story-slide.is-active { animation:gallery-enter .22s ease; }
#portfolio-root.compact-layout #brandTrack .bcard.is-active { animation:gallery-enter .22s ease; }
#portfolio-root .story-slide .image-expand { inset:auto 0 0 auto; }
@keyframes gallery-enter { from { opacity:.5; } to { opacity:1; } }
#portfolio-root #roi .roi-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border:1px solid var(--edge); border-radius:20px; background:var(--glass); color:#735538; box-shadow:inset 0 1px 2px #ffffff55; }
#portfolio-root[data-theme=dark] #roi .roi-icon { color:#d9b58b; }
#portfolio-root #roi .roi-icon svg { width:38px; height:38px; transition:transform .2s ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { #portfolio-root #roi .roi-card:hover .roi-icon svg { transform:translateY(-2px); } }
@media(prefers-reduced-motion:reduce) { #portfolio-root.compact-layout .story-slide.is-active, #portfolio-root.compact-layout #brandTrack .bcard.is-active { animation:none!important; } }