.elant-portfolio { --navy:#050d29; --navy-rgb:5,13,41; --teal:#00b7ad; --white:#f8fafc; --muted:#9ba8c2; color:var(--white); font-family:Arial, Helvetica, sans-serif; line-height:1.2; min-height:100vh; position:relative; }
.elant-portfolio *, .elant-portfolio *::before, .elant-portfolio *::after { box-sizing:border-box; }
.elant-portfolio button { font:inherit; }
.elant-portfolio__loader, .elant-portfolio__error { align-items:center; background:var(--navy); color:var(--white); display:flex; justify-content:center; min-height:72vh; padding:40px; }
.elant-view { background:var(--navy); min-height:100vh; overflow:hidden; position:relative; }
.elant-view::before { background:linear-gradient(rgba(5,13,41,.82), rgba(5,13,41,.9)), var(--elant-cover) center/cover no-repeat; content:""; inset:0; opacity:.92; position:absolute; }
.elant-view__content { min-height:100vh; padding:30px 38px; position:relative; z-index:1; }
.elant-brand { color:var(--teal); font-size:clamp(34px, 3.2vw, 58px); font-weight:800; letter-spacing:-.09em; line-height:.8; text-decoration:none; }
.elant-back { align-items:center; background:transparent; border:0; color:var(--white); cursor:pointer; display:flex; font-size:20px; font-weight:800; gap:13px; padding:8px 0; position:absolute; right:38px; text-decoration:none; top:32px; }
.elant-back::before, .elant-icon-arrow { border-bottom:12px solid transparent; border-right:17px solid currentColor; border-top:12px solid transparent; content:""; display:block; height:0; width:0; }
.elant-overview { display:grid; gap:34px; grid-template-columns:260px minmax(0,1fr); padding-top:38px; }
.elant-side-title { color:var(--white); font-size:28px; font-weight:700; margin:16px 0 44px; }
.elant-category-list { display:grid; gap:14px; }
.elant-category { background:transparent; border:0; color:var(--white); cursor:pointer; font-size:20px; font-weight:700; padding:2px 0; text-align:left; transition:color .25s, transform .25s; }
.elant-category:hover, .elant-category.is-active { color:var(--teal); transform:translateX(7px); }
.elant-category:first-child::before { border-bottom:14px solid #bec7dc; border-left:16px solid transparent; border-right:16px solid transparent; content:""; display:block; margin:0 0 12px 8px; width:0; }
.elant-project-grid { align-content:start; display:grid; gap:34px 32px; grid-template-columns:repeat(3, minmax(0, 1fr)); padding-top:28px; }
.elant-project-card { background:transparent; border:0; color:var(--white); cursor:pointer; min-width:0; padding:0; text-align:center; transform:translateY(0); transition:transform .36s cubic-bezier(.2,.8,.2,1); }
.elant-project-card__image { aspect-ratio:1.78 / 1; background:#101936; display:block; overflow:hidden; position:relative; }
.elant-project-card__image::after { background:rgba(0,183,173,.18); content:""; inset:0; opacity:0; position:absolute; transition:opacity .3s; }
.elant-project-card img { height:100%; object-fit:cover; transition:filter .36s, transform .5s cubic-bezier(.2,.8,.2,1); width:100%; }
.elant-project-card:hover { transform:translateY(-7px); }
.elant-project-card:hover img { transform:scale(1.045); }
.elant-project-card:hover .elant-project-card__image::after { opacity:1; }
.elant-project-card__name { display:block; font-size:18px; font-weight:800; margin-top:12px; }
.elant-project-card__type { color:#9eabc8; font-size:11px; font-weight:700; letter-spacing:.12em; margin-left:7px; text-transform:uppercase; }
.elant-detail { display:grid; gap:34px; grid-template-columns:250px minmax(0,1fr); padding-top:32px; }
.elant-project-info { margin-top:46px; }
.elant-project-info p { font-size:18px; font-weight:700; line-height:1.42; margin:0; }
.elant-project-rail { align-content:start; display:grid; gap:10px; margin-top:48px; }
.elant-rail-nav { background:transparent; border:0; color:#dbe5f7; cursor:pointer; height:29px; margin:auto; padding:0; width:48px; }
.elant-rail-nav::before { border-left:18px solid transparent; border-right:18px solid transparent; border-top:21px solid currentColor; content:""; display:block; }
.elant-rail-nav--up::before { border-bottom:21px solid currentColor; border-top:0; }
.elant-rail-card { background:transparent; border:0; color:var(--white); cursor:pointer; padding:0; text-align:left; }
.elant-rail-card img { aspect-ratio:1.68/1; display:block; filter:grayscale(1) brightness(.65); object-fit:cover; transition:filter .28s, transform .28s; width:100%; }
.elant-rail-card:hover img, .elant-rail-card.is-current img { filter:none; transform:scale(1.02); }
.elant-rail-card span { display:block; font-size:15px; font-weight:800; margin-top:7px; text-align:center; }
.elant-detail-content { min-width:0; padding-top:68px; }
.elant-detail-title { font-size:clamp(22px, 2.2vw, 34px); margin:0 0 22px; }
.elant-gallery-grid { display:grid; gap:22px 28px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.elant-image-button { aspect-ratio:1.75 / 1; background:#111b37; border:1px solid rgba(255,255,255,.07); cursor:pointer; overflow:hidden; padding:0; position:relative; transform:translateY(0); transition:transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s; }
.elant-image-button img { height:100%; object-fit:cover; transition:filter .35s, transform .5s cubic-bezier(.2,.8,.2,1); width:100%; }
.elant-image-button:hover { box-shadow:0 17px 30px rgba(0,0,0,.28); transform:translateY(-6px); }
.elant-image-button:hover img { transform:scale(1.055); }
.elant-focus { align-items:center; background:rgba(2,7,20,.8); display:flex; inset:0; justify-content:center; opacity:0; padding:72px 60px; pointer-events:none; position:fixed; transition:opacity .3s; z-index:99998; }
.elant-focus.is-open { opacity:1; pointer-events:auto; }
.elant-focus__image { box-shadow:0 30px 80px rgba(0,0,0,.5); max-height:78vh; max-width:min(78vw, 1250px); object-fit:contain; transform:scale(.96); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.elant-focus.is-open .elant-focus__image { transform:scale(1); }
.elant-focus__close { background:transparent; border:0; color:#fff; cursor:pointer; font-size:36px; line-height:1; position:absolute; right:24px; top:20px; }
.elant-focus__caption { bottom:28px; color:#dce4f4; font-size:13px; left:0; position:absolute; right:0; text-align:center; }
.elant-focus__caption small { color:#91a0bd; display:block; margin-top:5px; }
.elant-fullscreen { background:#030918; inset:0; opacity:0; overflow:auto; pointer-events:none; position:fixed; transition:opacity .35s; z-index:100000; }
.elant-fullscreen.is-open { opacity:1; pointer-events:auto; }
.elant-fullscreen__brand { left:38px; position:absolute; top:34px; z-index:2; }
.elant-fullscreen__close { background:transparent; border:0; color:#fff; cursor:pointer; font-size:18px; font-weight:800; position:absolute; right:38px; top:35px; z-index:2; }
.elant-fullscreen__stage { align-items:center; display:flex; height:calc(100vh - 150px); justify-content:center; padding:75px 110px 28px; }
.elant-fullscreen__stage img { max-height:100%; max-width:100%; object-fit:contain; transition:opacity .24s, transform .35s cubic-bezier(.2,.8,.2,1); }
.elant-fullscreen__arrow { background:transparent; border:0; color:#fff; cursor:pointer; font-size:60px; opacity:.85; padding:16px; position:absolute; top:45%; transition:opacity .2s, transform .2s; }
.elant-fullscreen__arrow:hover { opacity:1; transform:scale(1.12); }
.elant-fullscreen__arrow--prev { left:28px; }.elant-fullscreen__arrow--next { right:28px; }
.elant-fullscreen__thumbs { display:flex; gap:12px; justify-content:center; overflow:auto; padding:0 65px 22px; }
.elant-fullscreen__thumb { background:transparent; border:2px solid transparent; cursor:pointer; flex:0 0 auto; height:68px; opacity:.55; padding:0; transition:opacity .2s, border-color .2s; width:112px; }
.elant-fullscreen__thumb.is-active, .elant-fullscreen__thumb:hover { border-color:var(--teal); opacity:1; }
.elant-fullscreen__thumb img { height:100%; object-fit:cover; width:100%; }
@media (max-width:1000px) { .elant-view__content { padding:25px; }.elant-overview,.elant-detail { grid-template-columns:200px minmax(0,1fr); }.elant-project-grid,.elant-gallery-grid { gap:18px; }.elant-back { right:25px; } }
@media (max-width:720px) { .elant-view__content { padding:22px 18px; }.elant-back { font-size:15px; right:18px; top:22px; }.elant-overview,.elant-detail { display:block; padding-top:22px; }.elant-side-title { margin:16px 0 22px; }.elant-category-list { display:flex; flex-wrap:wrap; gap:8px 16px; }.elant-category { font-size:15px; }.elant-category:first-child::before { display:none; }.elant-project-grid,.elant-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }.elant-project-rail { grid-template-columns:30px repeat(3,minmax(0,1fr)) 30px; margin:28px 0 12px; }.elant-rail-nav { align-self:center; }.elant-rail-nav--up { grid-column:1; grid-row:1; transform:rotate(-90deg); }.elant-rail-nav--down { grid-column:5; grid-row:1; transform:rotate(90deg); }.elant-detail-content { padding-top:12px; }.elant-focus { padding:55px 18px; }.elant-focus__image { max-height:72vh; max-width:95vw; }.elant-fullscreen__stage { padding:72px 46px 18px; }.elant-fullscreen__arrow { font-size:44px; padding:8px; }.elant-fullscreen__arrow--prev { left:4px; }.elant-fullscreen__arrow--next { right:4px; }.elant-fullscreen__brand { left:20px; top:28px; }.elant-fullscreen__close { right:20px; top:31px; } }