/* case.css through the Arabic type system (ar_type.py, built by build_case_ar.py). */
/* Case study pages. Brand tokens and fonts come from the design system stylesheet linked before this one.
   One ground per project, chosen against its screenshots: light screenshots sit on deep navy, dark ones on Warm Clay.
   The story runs on that ground from the title to the result, with space between sections instead of colour bands;
   the colour changes only for the next project and for the closing call. The same header and footer as the home page,
   and the project shown in the same browser and phone frames as the Selected work track. */
:root{--ink:#2C3B4D;--ink-deep:#1B2632;--sand:#F5F2EC;--clay:#EEE9DF;--copper:#FF9864;--copper-deep:#A35139;--sage:#BADBBA;--muted:#5B6B7E;--stone:#C9C1B1;--hairline:#E6E1D4;--ease:cubic-bezier(.2,0,0,1);--gutter:clamp(20px,4vw,48px);--head:clamp(64px,calc(40px + 2.5vw),72px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font-sans);font-size:clamp(17px,calc(15px + .3vw),19px);line-height:1.85;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a,a:hover{color:inherit;text-decoration:none;border-bottom:0}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
::selection{background:var(--copper);color:var(--ink-deep)}
.cursor{color:var(--copper);font-weight:600}
.stop{color:var(--copper)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.overline{margin:0;font-size:13px;line-height:1.65;font-weight:600;text-transform:uppercase;color:var(--muted)}

/* Header: logo, the home page sections, and the way to start a project, as the home page's bar (navFrame() in
   ../index.html): the colour of the page under it (case-menu.js sets the tone), its line (inside the bar, as there) once the page has scrolled. The logo may draw
   outside its box, as there: the Arabic wordmark's hamza and the tail of its ى do. */
.site-head{position:sticky;top:0;z-index:20;background:var(--sand)}
.site-head.tone-clay:not(.cm-on){background:var(--clay)}
.site-head.tone-dark:not(.cm-on){background:var(--ink-deep);color:var(--sand)}
.site-head.tone-dark use[href="#agwa-word"]{fill:var(--sand)}
.site-head.is-scrolled:not(.cm-on){box-shadow:inset 0 -1px #DCD5C6}
.site-head.is-scrolled.tone-clay:not(.cm-on){box-shadow:inset 0 -1px #D6CEBE}
.site-head.is-scrolled.tone-dark:not(.cm-on){box-shadow:inset 0 -1px rgba(245,242,236,.16)}
.site-head .wrap{height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;padding:10px 0}
.logo svg{display:block;height:clamp(20px,calc(16px + .42vw),22px);width:auto;overflow:visible}
.site-nav{display:flex;align-items:center;font-size:14px;line-height:1}
/* The section links from 960px, centred in the bar; the button, the globe and the menu icon at its end. */
.site-nav .nls{display:none}
@media (min-width:960px){.site-head .wrap{position:relative}.site-nav .nls{position:absolute;top:0;left:50%;height:100%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(16px,2.6vw,40px)}}
.site-nav .nl{opacity:.72;transition:opacity 240ms var(--ease)}
.site-nav .nl:hover{opacity:1}
.site-nav .nact{display:flex;align-items:center;gap:8px}
.site-nav .hcta{flex:none}
/* On phones the globe stands closer to the menu icon and the button keeps its width; under 375px the button drops its
   arrow (as the home page's bar). */
@media (max-width:759px){.nact [data-lang=bar]{width:34px;margin-inline-end:-4px}}
@media (max-width:599px){.hcta:not(.is-folded){padding-inline:16px 12px}}
@media (max-width:374px){.hcta:not(.is-folded){padding:0 14px}.hcta:not(.is-folded) i{display:none}}
/* The language switch, as on the home pages (lang-switch.html, kept in step by hand): the globe of the brand's icon
   set, in the bar's colour at 72% like the section links. A tap opens a small list of the three languages, each in its
   own name, this one marked with a brand-orange dot; each opens this project in that language (case-menu.js). The
   list is sized as there, without its padding (this sheet sizes boxes with theirs). */
[data-langs]{position:relative;display:inline-flex;flex:none}
[data-lang]{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:9999px;background:none;font:inherit;color:inherit;opacity:.72;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity 240ms var(--ease)}
[data-lang] svg{display:block;width:20px;height:20px;fill:currentColor}
[data-lang]:hover,[data-lang]:focus-visible,[data-open]>[data-lang]{opacity:1}
[data-lang-list]{position:absolute;z-index:2;top:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;box-sizing:content-box;min-width:152px;padding:6px;border-radius:12px;background:#1B2632;box-shadow:0 0 0 1px rgba(245,242,236,.1),0 18px 40px -16px rgba(16,23,31,.55);font:500 14px/1.2 var(--font-sans,-apple-system,sans-serif);text-align:start;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:opacity 180ms var(--ease),transform 240ms var(--ease),visibility 0s linear 240ms}
html[dir=rtl] [data-lang-list]{transform-origin:top left}
[data-open]>[data-lang-list]{visibility:visible;opacity:1;transform:none;transition:opacity 180ms var(--ease),transform 240ms var(--ease),visibility 0s}
[data-lang-list] a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:0;border-radius:8px;color:rgba(245,242,236,.72);text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(-3px);transition:opacity 160ms var(--ease),transform 220ms var(--ease),background-color 160ms var(--ease),color 160ms var(--ease)}
[data-lang-list] a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#FF9864;opacity:0}
[data-lang-list] a[aria-current]{color:#F5F2EC}
[data-lang-list] a[aria-current]::before{opacity:1}
[data-lang-list] a:focus-visible{outline:0;background:rgba(245,242,236,.1);color:#F5F2EC}
[data-lang-list] a:hover{background:rgba(245,242,236,.07);color:#F5F2EC}
[data-open]>[data-lang-list] a{opacity:1;transform:none}
[data-open]>[data-lang-list] a:nth-child(2){transition-delay:40ms,40ms,0s,0s}
[data-open]>[data-lang-list] a:nth-child(3){transition-delay:80ms,80ms,0s,0s}
@media (prefers-reduced-motion:reduce){[data-lang-list],[data-lang-list] a{transform:none!important;transition-duration:0s!important;transition-delay:0s!important}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:9999px;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;transition:background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease),transform 160ms var(--ease)}
/* Each button names its hover text colour: the reset a:hover{color:inherit} above would otherwise win. */
.btn:hover{transform:translateY(-1px)}
.btn-copper{background:var(--copper);color:var(--ink-deep);box-shadow:inset 0 1px 0 rgba(163,81,57,.3),0 1px 2px rgba(163,81,57,.18)}
.btn-copper:hover{background:#FF8A50;color:var(--ink-deep)}
/* The secondary button, as in the design system: Quiet Current, darkening to Quiet Current Deep on hover. */
.btn-ink{background:var(--ink);color:var(--sand)}
.btn-ink:hover{background:var(--ink-deep);color:var(--sand)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
/* Header action: it folds into a circle holding only its arrow while the page's own "Start a project" is on screen,
   so the same button never shows twice, and on phones while the reader scrolls down; it opens again on the way up, at
   the top and once that button has gone (see case-menu.js). As on the home page: the label's width eases exactly (a
   grid track from 1fr to 0fr), with the padding and the gap on the same curve, and the label fades out first and
   back in near the end. */
.hcta{transition:background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease),transform 160ms var(--ease),padding 560ms cubic-bezier(.4,0,.2,1),gap 560ms cubic-bezier(.4,0,.2,1)}
.hcta i{font-size:16px}
.hcta-t{flex:none;display:inline-grid;grid-template-columns:1fr;transition:grid-template-columns 560ms cubic-bezier(.4,0,.2,1),opacity 320ms var(--ease) 200ms}
.hcta-t>span{min-width:0;overflow:hidden}
.hcta.is-folded{padding:0 12px;gap:0}
.hcta.is-folded .hcta-t{grid-template-columns:0fr;opacity:0;transition:grid-template-columns 560ms cubic-bezier(.4,0,.2,1),opacity 200ms var(--ease)}

/* Hero: the idea as the headline, a short lead, the facts, then the project in its frames. */
.hero{padding:clamp(40px,7vh,88px) 0 clamp(64px,8vw,112px)}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);transition:color 160ms var(--ease)}
.back:hover{color:var(--ink)}
.hero .overline{margin-top:clamp(32px,5vh,56px)}
.hero h1{margin:16px 0 0;font-size:calc(clamp(44px,min(7.4vw,12vh),120px) * 0.92);line-height:1.3;font-weight:200;color:var(--ink-deep);text-wrap:balance}
.hero h1 b{display:block;font-weight:600}
.hero-grid{display:grid;gap:32px 64px;margin-top:clamp(32px,4vw,56px);align-items:start}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.lead{margin:0;max-width:32em;font-size:clamp(19px,calc(15px + .45vw),22px);line-height:1.75;text-wrap:pretty;text-align:justify}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 24px;align-content:start;font-size:16px;line-height:1.65}
.facts dt{padding-top:3px;font-size:13px;font-weight:600;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0}
.facts a{border-bottom:1px solid rgba(255,152,100,.5);transition:border-color 160ms var(--ease)}
.facts a:hover{border-color:var(--copper)}

/* Frames: a browser window for desktop views and a phone for mobile views. */
.frame{border-radius:16px;overflow:hidden;background:var(--ink-deep);box-shadow:0 24px 48px rgba(27,38,50,.18)}
.frame-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 16px;background:var(--ink)}
.frame-bar .dot{flex:none;width:8px;height:8px;border-radius:9999px;background:rgba(245,242,236,.18)}
.frame-bar .url{margin-left:auto;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;background:rgba(245,242,236,.06);font-size:13px;color:rgba(245,242,236,.72)}
.frame .shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{border-radius:30px;overflow:hidden;border:6px solid var(--ink-deep);background:var(--ink-deep);box-shadow:0 24px 48px rgba(27,38,50,.24)}
.phone img{width:100%;aspect-ratio:720/1273;object-fit:cover;object-position:top}
/* A screen chosen as it is: shown whole, at its own size and proportions, never cropped to the frame. */
.frame .shot.whole,.phone img.whole{aspect-ratio:auto;height:auto}
.showcase{position:relative;margin:clamp(48px,6vw,88px) 0 0;padding-bottom:clamp(48px,7vw,104px)}
.showcase .frame{width:min(100%,1100px)}
.showcase .phone{position:absolute;right:0;bottom:0;width:clamp(132px,21vw,300px)}
@media (max-width:599px){.showcase .phone{right:-4px;width:38%}}
.sec-dark .frame,.sec-dark .phone{box-shadow:0 0 0 1px rgba(245,242,236,.1),0 24px 48px rgba(0,0,0,.32)}

/* Sections. Two grounds: Warm Clay and deep navy. Sections on the same ground follow each other with space and
   no seam (the second loses its top padding; flow-root keeps a first heading's margin inside). On deep, titles use Stone Grain, not white. */
.sec{display:flow-root;padding:clamp(80px,10vw,144px) 0}
.sec-clay{background:var(--clay)}
.sec-dark{background:var(--ink-deep);color:var(--sand)}
.sec-dark+.sec-dark,.sec-clay+.sec-clay{padding-top:0}
.sec-dark .overline{color:rgba(245,242,236,.56)}
.sec-dark .back,.sec-dark .facts dt{color:rgba(245,242,236,.6)}
.sec-dark .back:hover{color:var(--sand)}
.hero.sec-dark h1{color:var(--stone)}
.sec-dark .lead{color:rgba(245,242,236,.88)}
.split{display:grid;gap:24px 64px;align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.sec h2{margin:12px 0 0;font-size:calc(clamp(32px,4.2vw,60px) * 0.92);line-height:1.36;font-weight:600;color:var(--ink-deep);text-wrap:balance}
.sec-dark h2{color:var(--stone)}
.prose p{margin:0 0 1em;max-width:34em;text-wrap:pretty;text-align:justify}
.prose p:last-child{margin-bottom:0}
/* Text stays justified on every screen (Omar's choice); on phones long words break with hyphens to keep the gaps
   small. Names are never hyphenated, so a line of names can still open wide. */
@media (max-width:599px){.prose p,.lead{-webkit-hyphens:auto;hyphens:auto}}
.sec-dark .prose p{color:rgba(245,242,236,.8)}
.split .prose{padding-top:clamp(0px,1.4vw,24px)}
/* A phone inside a split: under the text on phones, so two texts never follow each other without a picture between
   them; in the empty column under the heading on wider screens. */
.split-media .phone{width:min(64%,280px);margin:16px auto 0}
@media (min-width:900px){.split.has-media>.prose{grid-row:1/span 2;grid-column:2}.split-media{grid-column:1;grid-row:2}.split-media .phone{width:min(72%,280px);margin:clamp(24px,3vw,48px) 0 0}}

/* A pull quote for the line a whole identity grows from. */
.quote{margin:clamp(40px,5vw,72px) 0 0;max-width:22em;font-size:calc(clamp(28px,3.4vw,52px) * 0.92);line-height:1.44;font-weight:200;color:var(--ink-deep);text-wrap:balance}
.quote cite{display:block;margin-top:20px;font-size:14px;line-height:1.65;font-style:normal;font-weight:600;color:var(--muted)}
.sec-dark .quote{color:var(--stone)}
.sec-dark .quote cite{color:rgba(245,242,236,.56)}

/* Marks: each on its own card, large enough to read the drawing. */
.marks{display:grid;gap:24px;margin-top:clamp(40px,5vw,72px)}
/* Side by side from 560px: stacked, each card took the full width at 4:3 and left the drawing small in a large field. */
@media (min-width:560px){.marks{grid-template-columns:1fr 1fr}}
.mark{margin:0;display:flex;flex-direction:column;gap:16px}
.mark-card{display:grid;place-items:center;aspect-ratio:4/3;padding:clamp(32px,7vw,96px);border-radius:24px;background:var(--clay)}
.sec-clay .mark-card{background:var(--sand)}
.mark-card.deep{background:var(--ink-deep)}
.mark-card.stone,.sec-clay .mark-card.stone{background:var(--stone)}
.mark-card img{width:100%;max-height:100%;object-fit:contain}
.mark-card img.tall{width:auto;height:clamp(150px,22vw,320px)}
.mark figcaption{font-size:15px;line-height:1.75;color:var(--muted);max-width:30em}
.mark figcaption b{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
.sec-dark .mark figcaption{color:rgba(245,242,236,.64)}
.sec-dark .mark figcaption b{color:var(--sand)}

/* Media blocks: two phones side by side, or a browser frame with a phone. */
.media{margin:clamp(48px,6vw,88px) 0 0}
.phones{display:flex;justify-content:center;gap:clamp(16px,4vw,56px)}
.phones figure{margin:0;width:min(44%,300px);display:flex;flex-direction:column;gap:16px}
/* Image captions read as captions, not text: the design system's Caption (12px), a short rule before them, and lines
   kept even, so a last word never sits alone. */
.phones figcaption,.duo figcaption,.solo figcaption{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.7;color:rgba(245,242,236,.64);text-wrap:balance}
.phones figcaption::before,.duo figcaption::before,.solo figcaption::before{content:"";flex:none;width:16px;height:1px;margin-top:.72em;background:currentColor;opacity:.6}
.sec:not(.sec-dark) .phones figcaption,.sec:not(.sec-dark) .duo figcaption,.sec:not(.sec-dark) .solo figcaption{color:var(--muted)}
.duo{display:grid;gap:24px clamp(24px,4vw,56px);align-items:end}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}}
.duo figure{margin:0;display:flex;flex-direction:column;gap:16px}
.solo figure{margin:0;max-width:1100px;display:flex;flex-direction:column;gap:16px}
@media (max-width:899px){.duo figure.mob{width:min(60%,300px);justify-self:center}}

/* Features: one decision each, text beside its evidence. */
.feature{display:grid;gap:32px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(64px,8vw,120px)}
@media (min-width:900px){.feature{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.feature.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.feature.flip .feature-media{order:-1}}
.feature h3{margin:0 0 16px;font-size:clamp(24px,2.4vw,34px);line-height:1.45;font-weight:600;color:var(--ink-deep);text-wrap:balance}
.sec-dark .feature h3{color:var(--stone)}
.feature-media .phone{width:min(70%,300px);margin:0 auto}

/* Next project and the way to start one. */
.next{display:grid;gap:32px 64px;align-items:center}
@media (min-width:900px){.next{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.next h2 a{transition:color 160ms var(--ease)}
.next h2 a:hover{color:var(--copper-deep)}
.next .frame{transition:transform 240ms var(--ease)}
.next .frame:hover{transform:translateY(-4px)}
.next .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sec-dark .next h2 a:hover{color:var(--copper)}
/* On deep, the secondary button inverts: Soft Sand with deep navy text, settling to Stone Grain on hover, as on the
   home page Work cards (whose border turns sage on hover). */
.sec-dark .btn-ink{background:var(--hairline);color:var(--ink-deep);box-shadow:inset 0 0 0 1.5px var(--hairline)}
.sec-dark .btn-ink:hover{background:var(--ink);color:var(--sand)}
.start{text-align:left}
.start h2{font-weight:200}
.start h2 b{display:block;font-weight:600}
.start .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Footer, as on the home page (Omar 2026-10-23: one footer on every page): its spacing, and above it the home
   page's line, a hairline across the middle of a band with the copper segment at its end, where the page's progress
   leaves it. */
.site-foot{--fline:clamp(24px,6.2vh,56px);position:relative;padding-top:var(--fline);background:var(--ink-deep);color:rgba(245,242,236,.56)}
.site-foot::before,.site-foot::after{content:"";position:absolute;top:calc(var(--fline) / 2);height:1px;pointer-events:none}
.site-foot::before{left:0;right:0;background:rgba(245,242,236,.16)}
.site-foot::after{right:22.5px;width:67px;height:3px;margin-top:-1px;border-radius:1.5px;background:var(--copper)}
@media (min-width:900px){.site-foot{--fline:28px}}
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:clamp(12px,min(2vw,2.6vh),24px);padding-bottom:calc(clamp(14px,min(2.4vw,3vh),28px) + env(safe-area-inset-bottom));font-size:13px;line-height:1.65}
@media (min-width:600px) and (max-height:800px){.site-foot .wrap{padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
.site-foot .logo svg{height:18px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:14px}
.site-foot nav a{color:rgba(245,242,236,.72);transition:color 160ms var(--ease)}
.site-foot nav a:hover{color:var(--copper)}
.site-foot .ac{color:inherit}
.site-foot .fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.site-foot .logo{gap:16px;padding:0}
.site-foot .lsep{width:1px;height:20px;background:rgba(245,242,236,.2)}
.site-foot .logo img{height:23.6px;width:auto}
.site-foot .facr{font-size:13px;line-height:1.65;font-weight:600;text-transform:uppercase;color:#F5F2EC}
/* The copyright, a short sage rule and the email, as on the home page. */
.site-foot .fcopy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.site-foot .fsep{flex:none;width:1px;height:12px;background:var(--sage)}
.site-foot .fcopy a{transition:color 160ms var(--ease)}
.site-foot .fcopy a:hover{color:var(--copper)}
/* Phones, as on the home page: the two names small on one line, English at the left edge and Arabic at the right,
   with a hairline between them; the acronym centred under the line and the copyright with the email under it. The
   sections are left to the menu in the bar. */
@media (max-width:599px){
.site-foot{padding-top:0}
.site-foot::before,.site-foot::after{display:none}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;padding-top:0;padding-bottom:calc(20px + env(safe-area-inset-bottom));text-align:center}
.site-foot .fbrand{display:contents}
.site-foot .logo{justify-self:stretch;height:28px;padding:0;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.site-foot .logo svg,.site-foot .logo img{pointer-events:auto}
.site-foot .logo svg{height:14px}
.site-foot .logo img{height:18.5px}
.site-foot .lsep{flex:1;width:auto;height:1px;background:rgba(245,242,236,.16)}
.site-foot .facr{margin-top:-10px;color:rgba(245,242,236,.72)}
.site-foot nav{display:none}
.site-foot .fcopy{justify-content:center;column-gap:16px}
}
@media (max-width:374px){.site-foot .logo svg{height:12px}.site-foot .logo img{height:15.9px}.site-foot .facr{}}

/* Gentle reveal on scroll, only when scripts run and motion is welcome. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn:hover,.next .frame:hover{transform:none}}