/* elyesbc.com — V4.2 — portfolio.css */
:root{--cyan:#18c2dc;--cyan-d:#0fa3bf;--cyan-l:#6eddf0;--navy:#0d1b2e;--navy-2:#152540;--gold:#c9963a;--white:#fff;--off:#f5f2ed;--ink:#0d1b2e;--ink-60:#4a6080;--ink-30:#9baec2;--font-display:'Cormorant Garamond',serif;--font-body:'Outfit',sans-serif;--ease:cubic-bezier(.25,.46,.45,.94)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--off);color:var(--ink);overflow-x:hidden}a,button{cursor:pointer}
nav{position:fixed;inset:0 0 auto;z-index:1000;padding:1.35rem 4rem;display:flex;align-items:center;justify-content:space-between;transition:.35s}nav.scrolled{background:rgba(13,27,46,.96);backdrop-filter:blur(18px);padding:1rem 4rem;box-shadow:0 4px 35px rgba(0,0,0,.18)}.nav-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}.nav-logo img{width:40px;height:40px;border-radius:50%;object-fit:cover}.nav-logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:#fff}.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);text-decoration:none;transition:.2s}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-links a.active{border-bottom:1px solid var(--cyan);padding-bottom:.3rem}.nav-cta{background:var(--cyan);color:#fff!important;padding:.55rem 1.3rem;border-radius:50px;border:0!important}.nav-lang{display:flex;gap:.25rem;background:rgba(255,255,255,.08);border-radius:50px;padding:.28rem}.lang-btn{font:600 .7rem var(--font-body);color:rgba(255,255,255,.5);background:none;border:0;padding:.3rem .55rem;border-radius:50px}.lang-btn.active{background:var(--cyan);color:#fff}.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem}.burger span{width:24px;height:2px;background:#fff}
.hero{min-height:62vh;background:var(--navy);color:#fff;padding:9rem 6rem 5rem;display:flex;align-items:flex-end;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(24,194,220,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(24,194,220,.04) 1px,transparent 1px);background-size:60px 60px}.hero::after{content:'PORTFOLIO';position:absolute;right:-2rem;bottom:-2.5rem;font:600 clamp(8rem,20vw,19rem)/1 var(--font-display);color:rgba(255,255,255,.025)}.hero-content{max-width:950px;position:relative;z-index:1}.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}.eyebrow::before{content:'';width:25px;height:1px;background:var(--cyan)}h1{font-size:clamp(3rem,6vw,6.2rem);line-height:.96;letter-spacing:-.055em;margin-bottom:1.5rem}h1 em{font-family:var(--font-display);font-weight:400;color:var(--cyan)}.hero p{max-width:680px;font-size:1rem;line-height:1.75;color:rgba(255,255,255,.58)}.hero-actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.btn-primary,.btn-outline,.btn-dark{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.55rem;border-radius:50px;text-decoration:none;font-size:.78rem;font-weight:600;transition:.25s}.btn-primary{background:var(--cyan);color:#fff}.btn-primary:hover{background:var(--cyan-d);transform:translateY(-2px)}.btn-outline{border:1px solid rgba(255,255,255,.22);color:#fff}.btn-outline:hover{border-color:var(--cyan)}.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:var(--cyan)}
.filters{position:sticky;top:70px;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(13,27,46,.08);overflow-x:auto}.filters-inner{display:flex;gap:.3rem;padding:.75rem 6rem;min-width:max-content}.filter-btn{border:0;background:none;border-radius:50px;padding:.65rem 1rem;font:600 .68rem var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30);transition:.2s}.filter-btn:hover{color:var(--ink)}.filter-btn.active{background:var(--navy);color:#fff}
section{padding:7rem 6rem}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}.section-title{font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.035em}.section-title em{font-family:var(--font-display);font-weight:500;color:var(--cyan)}.section-copy{max-width:500px;font-size:.9rem;line-height:1.7;color:var(--ink-60)}
.featured{background:var(--off)}.featured-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:310px 310px;gap:1.25rem}.featured-card{position:relative;overflow:hidden;border-radius:22px;background:var(--navy);text-decoration:none;color:#fff;isolation:isolate}.featured-card:first-child{grid-row:1/3}.featured-card img,.project-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease),filter .4s}.featured-card::after,.project-media::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(5,15,28,.94))}.featured-card:hover img,.project-card:hover img{transform:scale(1.045)}.featured-info{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:2rem}.featured-kicker{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:700}.featured-info h3{font-size:clamp(1.3rem,2vw,2rem);margin:.45rem 0}.featured-meta{font-size:.73rem;color:rgba(255,255,255,.62)}.view-link{display:inline-block;margin-top:1rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.projects{background:#fff}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.25rem}.project-card{text-decoration:none;color:var(--ink);transition:.35s}.project-card.hidden{display:none}.project-media{height:280px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--navy-2),var(--cyan-d));position:relative}.project-media::after{background:linear-gradient(transparent 60%,rgba(5,15,28,.35));opacity:.6}.project-card:hover{transform:translateY(-5px)}.project-info{padding:1rem .2rem}.project-info h3{font-size:1rem;margin-bottom:.35rem}.project-meta{font-size:.72rem;color:var(--ink-60);line-height:1.5}.project-info .view-link{color:var(--cyan-d);margin-top:.7rem}.project-card.wide{grid-column:span 2}.project-card.wide .project-media{height:360px}.empty-state{display:none;text-align:center;color:var(--ink-60);padding:4rem 0}
.archive{background:var(--navy-2);color:#fff}.archive-wrap{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}.archive .section-title{color:#fff}.archive p{max-width:650px;margin-top:1rem;color:rgba(255,255,255,.5);line-height:1.75}.behance-btn{display:inline-flex;align-items:center;gap:.7rem;background:#1769ff;color:#fff;padding:1rem 1.8rem;border-radius:50px;text-decoration:none;font-size:.82rem;font-weight:700;white-space:nowrap}.behance-btn:hover{transform:translateY(-3px)}
.logos{background:#fff;padding-top:5rem;padding-bottom:5rem}.logos-title{text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-30);margin-bottom:2rem}.logo-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem}.logo-chip{padding:.75rem 1.25rem;border:1px solid rgba(13,27,46,.1);border-radius:50px;font-size:.75rem;color:var(--ink-60);background:var(--off)}
.cta{background:linear-gradient(125deg,var(--cyan-d),var(--navy));color:#fff;text-align:center}.cta h2{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1;margin-bottom:1.2rem}.cta h2 em{font-family:var(--font-display);color:#93edfa}.cta p{max-width:650px;margin:auto;color:rgba(255,255,255,.62);line-height:1.7}.cta .hero-actions{justify-content:center}
footer{background:var(--navy);color:#fff;padding:4rem 6rem 2rem}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;padding-bottom:3rem}.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}.footer-brand img{width:40px;height:40px;border-radius:50%}.footer-brand strong{font-family:var(--font-display);font-size:1.15rem}.footer-text,.footer-col a{font-size:.78rem;color:rgba(255,255,255,.44);line-height:1.8;text-decoration:none}.footer-col h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}.footer-col a{display:block}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;font-size:.72rem;color:rgba(255,255,255,.25);display:flex;justify-content:space-between}.reveal{opacity:0;transform:translateY(28px);transition:.7s var(--ease)}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){nav{padding:1.1rem 2rem}nav.scrolled{padding:.9rem 2rem}.nav-links{display:none}.nav-lang{margin-left:auto}.burger{display:flex}.hero,section,footer{padding-left:2rem;padding-right:2rem}.filters-inner{padding-left:2rem;padding-right:2rem}.featured-grid{grid-template-columns:1fr 1fr;grid-template-rows:450px 280px}.featured-card:first-child{grid-column:1/3;grid-row:auto}.projects-grid{grid-template-columns:1fr 1fr}.archive-wrap{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.nav-logo-text{display:none}.hero{min-height:65vh;padding-top:8rem}.featured-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none}.featured-card,.featured-card:first-child{grid-column:auto;grid-row:auto;height:340px}.projects-grid{grid-template-columns:1fr}.project-card.wide{grid-column:auto}.project-card.wide .project-media,.project-media{height:290px}.section-head{flex-direction:column;align-items:flex-start}.footer-top{grid-template-columns:1fr;gap:2rem}.footer-bottom{flex-direction:column;gap:.5rem}.archive{padding-top:5rem;padding-bottom:5rem}}


/* ═══════════════════════════════════════════════
   HEADER & FOOTER — shared index design
═══════════════════════════════════════════════ */
:root {
  --font-body: var(--body, 'Outfit', sans-serif);
  --font-display: var(--display, 'Cormorant Garamond', serif);
  --ease-smooth: var(--ease, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.5rem 4rem; display: flex; align-items: center;
  justify-content: space-between; background: transparent; border: 0;
  transition: background .4s, padding .4s, box-shadow .4s;
}
nav#navbar.scrolled {
  background: rgba(13,27,46,.96); backdrop-filter: blur(20px);
  padding: 1rem 4rem; box-shadow: 0 4px 40px rgba(0,0,0,.2);
}
nav#navbar .nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
nav#navbar .nav-logo img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
nav#navbar .nav-logo-text { font-family:var(--font-body); font-size:1.2rem; font-weight:600; color:#fff; letter-spacing:.02em; }
nav#navbar .nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
nav#navbar .nav-links a {
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.65); text-decoration:none; position:relative;
  border:0; padding-bottom:0; transition:color .2s;
}
nav#navbar .nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--cyan); transition:width .3s var(--ease-smooth);
}
nav#navbar .nav-links a:hover,
nav#navbar .nav-links a.active { color:#fff; }
nav#navbar .nav-links a:hover::after,
nav#navbar .nav-links a.active::after { width:100%; }
nav#navbar .nav-lang { display:flex; gap:.4rem; margin-left:0; background:rgba(255,255,255,.08); border-radius:100px; padding:.3rem .5rem; }
nav#navbar .lang-btn {
  font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5); background:none; border:0;
  padding:.25rem .6rem; border-radius:100px; transition:all .2s;
}
nav#navbar .lang-btn.active { background:var(--cyan); color:#fff; }
nav#navbar .nav-cta { background:var(--cyan); color:#fff!important; padding:.55rem 1.4rem!important; border-radius:100px; }
nav#navbar .nav-cta::after { display:none!important; }
nav#navbar .nav-cta:hover { background:var(--cyan-d)!important; transform:translateY(-1px); }
nav#navbar .burger { display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; }
nav#navbar .burger span { display:block; width:24px; height:2px; margin:0; background:#fff; border-radius:2px; }

footer.site-footer {
  background:var(--navy); color:#fff; border-top:1px solid rgba(24,194,220,.08);
  padding:4rem 6rem 2.5rem;
}
footer.site-footer .footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  margin:0 0 4rem; padding:0 0 4rem; border-bottom:1px solid rgba(255,255,255,.06);
}
footer.site-footer .footer-brand { display:block; margin:0; }
footer.site-footer .footer-logo { display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; text-decoration:none; }
footer.site-footer .footer-logo img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
footer.site-footer .footer-logo-text { font-family:var(--font-body); font-size:1.1rem; font-weight:700; color:#fff; }
footer.site-footer .footer-tagline { font-family:var(--font-display); font-size:1rem; font-style:italic; color:rgba(255,255,255,.35); margin-bottom:1.5rem; line-height:1.5; }
footer.site-footer .footer-social { display:flex; gap:.7rem; }
footer.site-footer .social-link {
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); display:flex; align-items:center;
  justify-content:center; padding:0; text-decoration:none; color:rgba(255,255,255,.5);
  transition:all .2s;
}
footer.site-footer .social-link:hover { background:var(--cyan); border-color:var(--cyan); color:#fff; transform:translateY(-3px); }
footer.site-footer .footer-col-title { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35); margin:0 0 1.2rem; }
footer.site-footer .footer-links-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:0; padding:0; }
footer.site-footer .footer-links-list li { margin:0; }
footer.site-footer .footer-links-list a { display:inline; font-size:.85rem; line-height:1.4; color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s; }
footer.site-footer .footer-links-list a:hover { color:var(--cyan); }
footer.site-footer .footer-contact-item { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
footer.site-footer .footer-contact-item svg { flex:0 0 auto; }
footer.site-footer .footer-contact-item a,
footer.site-footer .footer-contact-item span { font-size:.82rem; line-height:1.4; color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s; }
footer.site-footer .footer-contact-item a:hover { color:var(--cyan); }
footer.site-footer .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:0; border:0; }
footer.site-footer .footer-copy { font-size:.78rem; color:rgba(255,255,255,.25); }
footer.site-footer .footer-copy span { color:var(--cyan); }
footer.site-footer .footer-credits { font-size:.75rem; color:rgba(255,255,255,.2); }

@media (max-width:1100px) {
  footer.site-footer { padding-left:2rem; padding-right:2rem; }
  footer.site-footer .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  nav#navbar { padding:1.2rem 1.5rem; }
  nav#navbar.scrolled { padding:.9rem 1.5rem; }
  nav#navbar .nav-links { display:none; }
  nav#navbar .nav-links.mobile-open { display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:rgba(13,27,46,.98); padding:2rem; gap:1.5rem; backdrop-filter:blur(20px); }
  nav#navbar .nav-lang { display:flex; margin-left:auto; }
  nav#navbar .burger { display:flex; }
}
@media (max-width:640px) {
  footer.site-footer .footer-top { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  nav#navbar .nav-logo-text { display:none; }
  nav#navbar .nav-lang { gap:.15rem; padding:.25rem .35rem; }
  nav#navbar .lang-btn { padding:.22rem .48rem; }
}


.project-card[id], .featured-card[id] { scroll-margin-top: 110px; }