/* hero page styles, shared by hero.html (English) and ar/hero.html (Arabic) */
:root { --cream:#eae6df; --beige:#dcd5c3; --camel:#ba8867; --brick:#9b450b; --brown:#773805; --sage:#949b80; --ink:#000000; /* black (was off-palette dark green #0f1f1b) */
--bg:#dcd5c3; /* page background: light beige (was cream #eae6df) */
/* Fonts from Amanda's brand manual, via Adobe Fonts web project "IKDU website" */
--serif:"benton-modern-display", Georgia, serif; /* headings */
--sans:"cofo-sans-variable", Arial, sans-serif; /* body + sub-headings */
--arabic:"ibm-plex-arabic", Tahoma, sans-serif; } /* Arabic */
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; }
:lang(ar) { font-family:var(--arabic); letter-spacing:0 !important; text-transform:none !important; }
/* Header: logo centred, menu split left/right; shrinks to emblem on scroll */
header { position:fixed; inset:0 0 auto 0; z-index:10; height:120px; background:var(--bg);
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 40px;
transition:height .5s ease; }
header.small { height:64px; }
nav { display:flex; gap:48px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
nav a { color:var(--ink); text-decoration:none; opacity:.75; }
nav a:hover, nav a.on { opacity:1; color:var(--brown); } /* brown: 6.1:1 on light beige */
nav.right { justify-content:flex-end; }
.logo { position:relative; width:220px; height:80px; display:grid; place-items:center; transition:height .5s; }
header.small .logo { height:44px; }
.logo img { position:absolute; max-height:100%; transition:opacity .5s, transform .5s; }
.logo .word { height:52px; }
.logo .emblem { height:40px; opacity:0; transform:scale(.8); }
header.small .word { opacity:0; transform:scale(.8); }
header.small .emblem { opacity:1; transform:scale(1); }
.menu-btn { display:none; }
/* Hero slideshow: crossfade + slow zoom, feels like video */
/* Gentle snap (Amr, 2026-09-29): scrolling stays free; when it stops near a project, that project settles just under the
small header. The top of the page is its own snap point (first project + big header). Off in the category view (sticky
chips; the old snap fought the category jump) and for people who ask for less motion. */
html { scroll-padding-top:64px; } /* snap removed 2026-10-19: the home page is no longer a stack of full-screen projects */
main { scroll-snap-align:start; }
.project:not(:first-of-type) { scroll-snap-align:start; }
html:has(body.grouped) { scroll-snap-type:none; }
@media (prefers-reduced-motion:reduce) { html { scroll-snap-type:none; } }
main { padding-top:120px; }
.project { position:relative; height:calc(100vh - 64px); margin:0 0 8px; overflow:hidden; background:#000; }
.project:first-of-type { height:calc(100vh - 120px); }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; } /* shorter fade to suit 1.5 s photos (was .9 s) */
/* --zoom is set per photo by JS: less zoom when the frame already crops a lot of the photo */
.slide { --zoom:.08; --pan:1.2%; }
.slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide.on { opacity:1; }
.slide.on img.main { animation:kb 4s linear forwards; }
.slide:nth-child(even).on img.main { animation-name:kb2; }
@keyframes kb { from { transform:scale(1) } to { transform:scale(calc(1 + var(--zoom))) translate(calc(-1 * var(--pan)), 0) } }
@keyframes kb2 { from { transform:scale(calc(1 + var(--zoom))) translate(var(--pan), 0) } to { transform:scale(1) } }
/* Photos that don't fit the screen shape are shown whole, on a blurred copy of themselves */
.slide img.bg { display:none; filter:blur(30px) brightness(.7); transform:scale(1.15); }
.slide.fit img.bg { display:block; }
.slide.fit img.main { object-fit:contain; }
/* Custom end frame for specific photos (values set by JS) */
.slide.custom.on img.main { animation:kbc 3s ease-out forwards; }
@keyframes kbc { from { transform:translateX(var(--t0)) scale(var(--s0)) } to { transform:translateX(var(--t1)) scale(var(--s1)) } }
.project::after { content:""; position:absolute; inset:auto 0 0 0; height:35%; background:linear-gradient(transparent, rgba(0,0,0,.38)); pointer-events:none; }
.caption { position:absolute; z-index:2; left:40px; bottom:36px; color:#fff; }
.caption h2 { font-family:var(--serif); font-weight:400; font-size:48px; letter-spacing:.02em; }
.caption p, .caption a { font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
.caption p { opacity:.85; margin:6px 0 14px; }
.caption a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:3px; }
/* Photo counter: one small line per photo, bottom-centre (clear of the caption and the WhatsApp button); the current one fills over its 3 s (like the first version, a bit bigger) */
.dots { position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:40px; display:flex; gap:10px; }
.dots span { width:40px; height:3px; background:rgba(255,255,255,.4); overflow:hidden; }
.dots span i, .dots span::after { content:""; display:block; height:100%; width:0; background:#fff; }
.dots.run span.on::after { animation:fill var(--dur, 2s) linear forwards; } /* --dur set per photo by hero.js (1.5 s first, then 2 s) */
[dir="rtl"] .dots span::after { margin-left:auto; }
@keyframes fill { from { width:0 } to { width:100% } }
/* Below the hero: just enough to scroll and see the header change */
.intro { max-width:760px; margin:120px auto; padding:0 24px; text-align:center; }
.intro h1 { font-family:var(--serif); font-weight:400; font-size:44px; margin-bottom:20px; }
.intro p { line-height:1.7; opacity:.8; }
@media (max-width:760px) {
header { padding:0 16px; height:84px; grid-template-columns:72px 1fr 72px; }
nav { display:none; }
.logo { grid-column:2; width:160px; justify-self:center; }
.logo .word { height:36px; }
main { padding-top:84px; } .project, .project:first-of-type { height:calc(100svh - 84px); } .caption h2 { font-size:34px; }
.caption { left:16px; bottom:40px; right:88px; }
.dots { left:16px; transform:none; bottom:18px; gap:8px; } .dots span { width:32px; }
[dir="rtl"] .dots { left:auto; right:16px; } /* phones: under the caption, away from the WhatsApp button */
.project::after { height:30%; background:linear-gradient(transparent, rgba(0,0,0,.32)); }
}
/* Category icon beside the project name (always visible, stays still through the crossfade) */
.caption .name { display:flex; align-items:center; gap:14px; }
.caption .cat { border:0; padding:0; display:block; }
.caption .cat:focus-visible { outline:2px solid var(--cream); outline-offset:3px; border-radius:50%; }
.caption .cat:hover .chip { box-shadow:0 0 0 2px var(--brick); }
/* Category chips (touch devices): each jumps to its section */
.filters { display:none; position:sticky; top:64px; z-index:5; gap:10px; flex-wrap:wrap; justify-content:center; padding:12px 16px; background:var(--bg); }
.filters a { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border:1px solid rgba(0,0,0,.25); border-radius:999px;
font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.filters .chip { width:30px; height:30px; } .filters .chip img { width:22px; height:22px; }
@media (hover:none) { .filters { display:flex; } }
body.grouped .filters { display:flex; } /* desktop too, once a category is picked */
.filters a.all { display:none; padding-left:14px; padding-right:14px; }
body.grouped .filters a.all { display:inline-flex; }
/* Category picked (Amr, 2026-09-27): compact view, small header + chip row; the chip of the category in view is highlighted in sage (accent colour) */
body.grouped main { padding-top:64px; }
.filters a { transition:background-color .3s, border-color .3s; }
.filters a.on { border-color:var(--sage); background:var(--sage); color:var(--ink); }
@media (max-width:760px) { .filters { position:static; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:10px 12px; gap:8px; scrollbar-width:none; }
.filters a { flex:none; font-size:10px; letter-spacing:.1em; }
body.grouped .filters { position:sticky; top:64px; } } /* phones: chip row stays on top in the category view so the highlight is visible */
/* One-line positioning statement on the first project */
.tagline { position:absolute; z-index:2; top:0; left:0; right:0; padding:28px 40px 60px; text-align:center; color:#fff;
font-family:var(--serif); font-size:24px; letter-spacing:.01em;
background:linear-gradient(rgba(0,0,0,.35), transparent); text-shadow:0 1px 10px rgba(0,0,0,.35); }
@media (max-width:760px) { .tagline { font-size:17px; padding:18px 16px 44px; } }
/* Phone turned sideways / short screens (2026-09-29): compact header with the emblem from the start (like the other pages),
each project fills the screen below it, smaller caption so it fits */
@media (max-height:500px) and (orientation:landscape) {
main { padding-top:64px; }
.project, .project:first-of-type { height:calc(100svh - 64px); }
.logo .word { opacity:0; transform:scale(.8); } .logo .emblem { opacity:1; transform:scale(1); }
.caption { bottom:20px; } .caption h2 { font-size:30px; } .caption p { margin:4px 0 8px; }
.tagline { font-size:16px; padding:12px 16px 36px; }
.dots { bottom:16px; }
}
/* Make it obvious the projects open (Amr, 2026-09-30): the whole photo is a link, and "View project" is a real button */
.project .hit { position:absolute; inset:0; z-index:1; }
.tagline { pointer-events:none; }
.caption a.view { display:inline-flex; align-items:center; gap:8px; margin-top:4px; padding:13px 22px; border:0; border-radius:999px;
background:var(--cream); color:var(--ink); font-size:14px; letter-spacing:.12em; box-shadow:0 4px 18px rgba(0,0,0,.25);
transition:background .2s, color .2s; }
.caption a.view:hover { background:var(--brick); color:#fff; }
[dir="rtl"] .caption a.view { letter-spacing:0; font-size:16px; }
@media (max-width:760px) { .caption a.view { padding:12px 20px; font-size:13px; } }
/* Concept -> Reality teaser after the 2nd project (Amr, 2026-09-30) */
.cr-teaser { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; background:var(--cream); margin:0 0 8px; padding:56px 40px;
scroll-snap-align:start; }
body.grouped .cr-teaser { display:none; }
.crt-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-decoration:none; }
.crt-img { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--beige); }
.crt-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.crt-pair:hover img { transform:scale(1.04); }
.crt-img em { position:absolute; top:12px; left:12px; background:var(--cream); color:var(--ink); font-style:normal; font-size:11px; letter-spacing:.15em;
text-transform:uppercase; padding:6px 10px; line-height:1; }
[dir="rtl"] .crt-img em { left:auto; right:12px; letter-spacing:0; font-size:13px; }
.crt-text h2 { font-family:var(--serif); font-weight:400; font-size:clamp(32px, 3.6vw, 52px); line-height:1.05; margin-bottom:14px; }
.crt-text p { font-size:18px; line-height:1.6; opacity:.85; margin-bottom:28px; max-width:420px; }
.crt-btn { display:inline-flex; align-items:center; gap:8px; padding:16px 26px; border-radius:999px; background:var(--brick); color:#fff; text-decoration:none;
font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.crt-btn:hover { filter:brightness(1.1); }
[dir="rtl"] .crt-btn { letter-spacing:0; font-size:16px; }
@media (max-width:760px) {
.cr-teaser { grid-template-columns:1fr; gap:24px; padding:40px 16px; }
.crt-text h2 { font-size:32px; } .crt-text p { font-size:16px; margin-bottom:20px; }
.crt-btn { display:flex; justify-content:center; }
}
@media (max-height:500px) and (orientation:landscape) { .cr-teaser { padding:24px 40px; gap:24px; } .crt-img { aspect-ratio:1; } }
/* ---- Home layout A (Amr, 2026-10-19): opening slideshow of all projects, then the project grid, Concept -> Reality, What we do ---- */
.project, .project:first-of-type { scroll-snap-align:none !important; }
.project.showreel { height:calc(100vh - 120px - 72px); margin:0; } /* ~72 px of the next section peeks in */
.showreel .caption h2, .showreel .caption p { transition:opacity .3s; }
.showreel .down { position:absolute; z-index:3; left:50%; bottom:14px; width:34px; height:34px; margin-left:-17px; display:grid; place-items:center; }
.showreel .down span { width:14px; height:14px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform:translateY(-3px) rotate(45deg); opacity:.6 } 50% { transform:translateY(5px) rotate(45deg); opacity:1 } }
.showreel .dots { bottom:56px; }
.pgrid { padding:44px 40px 72px; max-width:1240px; margin:0 auto; scroll-margin-top:64px; }
.pg-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.pg-head h2 { font-family:var(--serif); font-weight:400; font-size:clamp(32px, 3.4vw, 48px); }
.pg-head p { opacity:.75; }
.pgrid .filters { display:flex; position:static; justify-content:flex-start; padding:0 0 22px; background:none; }
.pgrid .filters a.all { display:inline-flex; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 22px; }
.pcard { display:block; color:var(--ink); text-decoration:none; }
.pcard[hidden] { display:none; }
.pc-img { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--cream); }
.pc-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.pcard:hover .pc-img img { transform:scale(1.04); }
.pc-img .chip { position:absolute; top:10px; left:10px; }
[dir="rtl"] .pc-img .chip { left:auto; right:10px; }
.pcard h3 { font-family:var(--serif); font-weight:400; font-size:28px; margin:12px 0 2px; }
.pc-sub { display:block; font-size:12px; letter-spacing:.15em; text-transform:uppercase; opacity:.75; line-height:1.5; }
[dir="rtl"] .pc-sub { letter-spacing:0; font-size:14px; }
.cr-teaser { margin:0; }
.intro { margin:96px auto; }
.intro .what { display:block; margin-bottom:14px; opacity:.7; }
.svc-links { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:28px 0 22px; }
.svc-links a { padding:12px 20px; border:1px solid rgba(0,0,0,.3); border-radius:999px; color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.svc-links a:hover { border-color:var(--brick); color:var(--brick); }
[dir="rtl"] .svc-links a { letter-spacing:0; font-size:15px; }
.intro .more { color:var(--ink); font-size:12px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--camel); padding-bottom:3px; text-decoration:none; }
[dir="rtl"] .intro .more { letter-spacing:0; font-size:15px; }
@media (max-width:760px) {
.project.showreel { height:calc(100svh - 84px - 64px); }
.showreel .down { display:none; } /* phones: the peeking "Our projects" heading is the cue */
.showreel .dots { bottom:18px; }
.pgrid { padding:28px 16px 56px; }
.cards { grid-template-columns:1fr 1fr; gap:22px 12px; }
.pcard h3 { font-size:21px; margin-top:8px; } .pc-sub { font-size:10px; letter-spacing:.1em; }
.intro { margin:64px auto; }
}
@media (max-height:500px) and (orientation:landscape) { .project.showreel { height:calc(100svh - 64px - 48px); } }
/* "Your project next?" card in the last grid space (Amr, 2026-10-25) */
.pc-cta { background:var(--brick); display:grid; place-items:center; text-align:center; transition:filter .3s; }
.pc-cta > span { display:flex; flex-direction:column; gap:14px; padding:20px; }
.pc-cta b { font-family:var(--serif); font-weight:400; color:var(--cream); font-size:clamp(24px, 2.6vw, 36px); line-height:1.1; }
.pc-cta em { font-style:normal; color:var(--cream); font-size:12px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid rgba(234,230,223,.6); align-self:center; padding-bottom:3px; }
[dir="rtl"] .pc-cta em { letter-spacing:0; font-size:15px; }
.pcta:hover .pc-cta { filter:brightness(1.08); }