:root{color-scheme:dark;--bg:#080808;--panel:#0e0e0e;--text:#f4f1ea;--muted:#aaa69c;--line:rgba(255,255,255,.13);--gold:#d4ad62;--gold-soft:#9e7b3f;--gold-deep:#c39a4e;--gold-deeper:#b0883d;--ink-brown:#241a0c;--radius:4px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#171717;color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}::selection{background:var(--gold);color:#080808}a,button{-webkit-tap-highlight-color:rgba(212,173,98,.16)}
.ambient-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 18% 24%,#45413a 0,#242321 38%,#101010 80%)}.ambient-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0004,#0009),url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2000&q=85") center/cover;filter:grayscale(1);opacity:.34}.ambient-glow{position:absolute;width:45vw;height:45vw;right:-10vw;top:10vh;border-radius:50%;background:#d4ad620c;filter:blur(75px)}
.site-shell{width:min(1220px,calc(100% - 56px));margin:32px auto;background:var(--bg);padding:0 clamp(24px,6.5vw,94px);box-shadow:0 26px 100px #0008;border:1px solid #ffffff0a}
.skip-link{position:absolute;top:-100px;left:12px;background:var(--gold);color:#000;padding:10px;z-index:20}.skip-link:focus{top:12px}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative}.wordmark{font-size:16px;letter-spacing:.24em;font-weight:600;color:var(--text);text-decoration:none}.wordmark span{font-size:8px;vertical-align:top;color:var(--gold);margin-left:3px}.topbar-note{font-size:8px;letter-spacing:.18em;color:#8e8a81}
.menu-toggle{width:40px;height:40px;border:1px solid var(--line);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:border-color .2s}.menu-toggle:hover{border-color:var(--gold)}.menu-toggle span{height:1px;width:14px;background:#eee;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{display:none;position:absolute;right:0;top:70px;background:#101010;border:1px solid var(--line);padding:15px 22px;z-index:5;min-width:230px;box-shadow:0 18px 35px #0009}.menu.open{display:grid;gap:0}.menu a{display:flex;justify-content:space-between;gap:30px;padding:12px 0;color:var(--text);font-size:12px;text-decoration:none;border-bottom:1px solid #ffffff10}.menu a:last-child{border:0}.menu a span{color:var(--gold);font-size:9px}.menu a:hover{color:var(--gold)}
.intro{padding:46px 0 0}.eyebrow,.section-label,.kicker,.overline{font-size:9px;letter-spacing:.18em;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:10px}.availability-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 11px #d4ad6277}
.hero-heading{max-width:760px;margin:32px 0 30px}.kicker{margin:0 0 17px;font-size:8px}.intro h1{font-family:Manrope,sans-serif;font-weight:300;font-size:clamp(43px,7vw,84px);letter-spacing:-.02em;line-height:1.06;margin:0 0 23px}.intro h1 span{color:var(--gold)}.lead{max-width:485px;color:#c0bcb2;font-size:14px;line-height:1.85;margin:0 0 24px}
.text-link{display:inline-flex;gap:14px;align-items:center;color:var(--text);font-size:9px;letter-spacing:.15em;text-decoration:none;padding:0 0 8px;border-bottom:1px solid var(--gold);transition:color .2s}.text-link span{color:var(--gold);font-size:13px}.text-link:hover{color:var(--gold)}
.portrait-frame{position:relative;height:clamp(380px,59vw,650px);overflow:hidden;background:#161616;border:1px solid #ffffff14}.portrait-topline{position:absolute;z-index:2;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.16em;color:#e6e0d2}.portrait{width:100%;height:100%;object-fit:cover;object-position:center 36%;filter:saturate(.78) brightness(.78);transition:transform .9s cubic-bezier(.2,.7,.2,1)}.portrait-frame:hover .portrait{transform:scale(1.018)}.portrait-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0006 0%,transparent 24%,transparent 55%,#000b 100%);pointer-events:none}.portrait-caption{position:absolute;bottom:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:end}.portrait-name{font-family:Manrope;font-size:clamp(30px,4.3vw,48px);font-weight:300;letter-spacing:-.055em}.portrait-role{text-align:right;font-size:8px;letter-spacing:.16em;line-height:1.9;color:#ded8ca}
.hero-foot{display:flex;justify-content:space-between;align-items:center;padding:18px 0 23px;border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.16em;color:#89857c}.scroll-indicator{display:flex;align-items:center;gap:9px}.scroll-indicator span{width:24px;height:1px;background:var(--gold)}
.section-grid{display:grid;grid-template-columns:1fr 2.2fr;gap:42px;padding:84px 0;border-bottom:1px solid var(--line)}.section-label{padding-top:5px;white-space:nowrap}.overline{margin:0 0 16px;font-size:8px}.section-content h2,.section-heading h2,.contact h2{font-family:Manrope,sans-serif;font-size:clamp(30px,4.2vw,48px);font-weight:300;line-height:1.16;letter-spacing:-.02em;margin:0 0 23px}.about em,.services em,.contact em{font-style:normal;color:var(--gold)}.body-copy{font-size:13px;line-height:1.95;color:#c4c0b7;max-width:620px}.muted{color:#908c83;font-size:10px;line-height:1.85;max-width:600px;margin:18px 0 25px}
.work{padding:80px 0;border-bottom:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.section-heading h2{margin:8px 0 0}.section-heading>p{font-size:10px;line-height:1.8;color:var(--muted);text-align:right}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.project-visual{height:265px;position:relative;overflow:hidden;border:1px solid #ffffff18;display:flex;align-items:center;justify-content:center;background:#121212;transition:border-color .25s}.work-card:hover .project-visual{border-color:#d4ad6266}.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0003,transparent 35%,#0007)}
/* Dormant placeholder art — intentionally kept: these rules preserve the legacy warm-brown brand palette (#594438, #5b493a, #716044, #55452c) for future sample-project visuals. */
.visual-app{background:radial-gradient(ellipse at 50% 50%,#55452c 0,#2b241a 40%,#101010 78%)}.visual-lifestyle{background:radial-gradient(ellipse at 55% 45%,#594438 0,#261d19 43%,#101010 80%)}.visual-tech{background:radial-gradient(ellipse at 50% 45%,#383b3c 0,#1a1c1d 45%,#0e0e0e 80%)}
.project-index,.project-type{position:absolute;z-index:2;left:14px;font-size:7px;letter-spacing:.16em;color:#d8c9ac}.project-index{top:14px}.project-type{bottom:14px;color:#b9b1a0}.mock-window{width:65%;padding:15px 12px;background:#0d0e0d;border:1px solid #d1b27666;box-shadow:0 12px 35px #0009;transform:rotate(-5deg);position:relative;z-index:1}.mock-window-top{display:flex;align-items:center;gap:4px;margin-bottom:19px}.mock-window-top i{width:4px;height:4px;border-radius:50%;background:#8b7958}.mock-window-top span{margin-left:5px;font-size:6px;color:#b9b2a4}.mock-line{height:3px;width:54%;background:#716044;margin:8px 0}.mock-line.wide{width:78%;height:5px;background:#d0b578}.mock-task{display:flex;gap:7px;align-items:center;margin-top:12px}.mock-task b{width:8px;height:8px;border:1px solid #bda46e;font-size:6px;color:#d8c18b;line-height:6px;text-align:center}.mock-task span{height:3px;width:70px;background:#4a4944}.mock-task .short{width:40px}.mock-task .medium{width:55px}
.product-orb{width:92px;height:135px;border-radius:30px 30px 23px 23px;background:linear-gradient(105deg,#8b7960,#e0cba6 28%,#5b493a 66%,#201b17);box-shadow:20px 24px 30px #0008,inset 6px 0 8px #fff2;position:relative;z-index:1;transform:rotate(7deg)}.orb-cap{position:absolute;width:35px;height:22px;left:29px;top:-17px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#504334,#c4ae8b,#4b4034)}.product-orb:after{content:"EL / STUDIO";position:absolute;left:0;right:0;top:60px;text-align:center;color:#f0e1c5;font-size:7px;letter-spacing:.12em}.tech-rings{width:160px;height:160px;position:relative;display:grid;place-items:center;z-index:1}.tech-rings span{position:absolute;border:1px solid #c7a76a66;border-radius:50%;inset:0}.tech-rings span:nth-child(2){inset:17px;border-color:#c7a76a99}.tech-rings span:nth-child(3){inset:36px;border-color:#c7a76a55}.tech-rings b{font-family:Manrope;font-size:25px;font-weight:300;color:#e1c78f;letter-spacing:.08em}
.card-meta{display:flex;justify-content:space-between;gap:10px;padding:14px 0 18px}.card-meta h3{font-size:12px;font-weight:500;margin:0 0 5px}.card-meta p{font-size:10px;color:var(--muted);margin:0}.status{font-size:7px;letter-spacing:.1em;color:var(--gold);white-space:nowrap;padding-top:4px}.small-note{font-size:9px;color:#8d897f;margin:13px 0 0;line-height:1.8}.small-note span{color:var(--gold);letter-spacing:.13em;margin-right:8px}
.service-list{border-top:1px solid var(--line);margin-top:28px}.service-list>div{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;border-bottom:1px solid var(--line);padding:17px 0;gap:12px}.service-number,.service-arrow{font-size:9px;color:var(--gold)}.service-list p{font-size:12px;margin:0}
.contact{padding:82px 0 70px;text-align:center}.contact .section-label{text-align:left;margin-bottom:58px}.contact .eyebrow{justify-content:center;margin-bottom:18px}.contact h2{font-size:clamp(38px,5.6vw,66px);margin-bottom:18px}.contact-copy{font-size:11px;color:var(--muted);margin:0 0 26px}.email-link{display:inline-flex;gap:15px;align-items:center;color:var(--text);text-decoration:none;border-bottom:1px solid var(--gold);padding:0 0 9px;font-size:13px}.email-link span,.social-links a span{color:var(--gold)}.social-links{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-top:37px}.social-links a{color:var(--text);font-size:10px;text-decoration:none}.social-links a:hover{color:var(--gold)}
footer{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}footer p,.back-top,.copyright{font-size:8px;color:var(--muted);letter-spacing:.09em;margin:0}.back-top{text-decoration:none;text-align:right}.copyright{grid-column:1/-1;border-top:1px solid #ffffff10;padding-top:13px;font-size:7px;letter-spacing:.14em}
@media(min-width:1200px){.intro{padding-top:52px}.hero-heading{margin-top:36px}.portrait-frame{height:650px}}
@media(max-width:760px){.site-shell{width:calc(100% - 20px);margin:10px auto;padding:0 20px}.topbar{height:70px}.topbar-note{display:none}.intro{padding-top:30px}.intro h1{font-size:clamp(43px,11vw,70px)}.hero-heading{margin-top:25px}.lead{font-size:13px}.portrait-frame{height:450px}.portrait{object-position:52% 35%}.portrait-caption{left:16px;right:16px;bottom:17px}.portrait-role{font-size:7px}.hero-foot{font-size:7px;gap:8px}.scroll-indicator{display:none}.section-grid{grid-template-columns:1fr;gap:22px;padding:58px 0}.section-content h2,.section-heading h2{font-size:34px}.work{padding:58px 0}.section-heading{align-items:start;flex-direction:column;gap:12px}.section-heading>p{text-align:left;margin:0}.work-grid{grid-template-columns:1fr;gap:7px}.project-visual{height:290px}.card-meta{padding-bottom:21px}.contact{padding:58px 0}.contact .section-label{margin-bottom:43px}.contact h2{font-size:43px}.social-links{gap:17px}footer{grid-template-columns:1fr auto}footer p{grid-column:1/-1;grid-row:2}.back-top{grid-column:2;grid-row:1}}
@media(max-width:380px){.site-shell{padding:0 15px}.portrait-frame{height:380px}.hero-foot{font-size:6px}.contact h2{font-size:36px}.email-link{font-size:11px}.project-visual{height:250px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

[hidden]{display:none!important}

/* Inline video player inside portfolio project cards */
.project-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0a0a0a;z-index:1}
.project-visual:has(.project-video):after{display:none}
.project-visual:has(.project-video) .project-type{top:14px;bottom:auto;color:#e8e2d4;text-shadow:0 1px 8px #000d}
.video-fallback{position:relative;z-index:1;margin:0;padding:0 22px;font-size:10px;line-height:1.85;color:var(--muted);text-align:center}

/* ============================================================
   Creator portfolio polish (Oct 2026) — consolidated layer.
   Merges the two former override blocks ("Compact layout",
   "Portrait framing") into one cascade; net computed values kept
   identical to the last override generation, plus new CTA,
   sticky topbar, aspect-ratio video framing and reveal rules.
   ============================================================ */
.gold{color:var(--gold)}
.site-shell{width:min(940px,calc(100% - 36px));margin:24px auto;padding:0 clamp(28px,5.5vw,72px)}
.topbar{height:72px;position:sticky;top:0;z-index:8;background:var(--bg)}
.topbar-actions{display:flex;align-items:center;gap:14px}
/* CTA link states are fully covered (:link/:visited/:hover/:active/:focus) so no browser default blue/purple can appear. */
.topbar-cta{display:inline-flex;align-items:center;font-size:9px;letter-spacing:.16em;text-decoration:none;color:var(--gold);background:transparent;border:1px solid #d4ad6266;border-radius:var(--radius);padding:8px 13px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
a.topbar-cta:link,a.topbar-cta:visited{color:var(--gold);background:transparent;border-color:#d4ad6266}
.topbar-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-brown)}
.topbar-cta:active{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ink-brown)}
.btn-primary:focus,.btn-primary:focus-visible,.topbar-cta:focus,.topbar-cta:focus-visible,.text-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.intro{padding-top:34px}
.hero-heading{max-width:650px;margin:24px 0 24px}
.intro h1{font-size:clamp(34px,4.2vw,50px);letter-spacing:-.015em;line-height:1.08;margin-bottom:18px}
.lead{font-size:13px;max-width:470px;line-height:1.8;margin-bottom:18px}
.hero-ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--gold);border:1px solid var(--gold);border-radius:var(--radius);text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.15em;padding:14px 24px;transition:background .2s,border-color .2s}
a.btn-primary:link,a.btn-primary:visited,a.btn-primary:hover,a.btn-primary:active{color:var(--ink-brown)}
.btn-primary span{font-size:12px}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-primary:active{background:var(--gold-deeper);border-color:var(--gold-deeper)}
.hero-foot{padding:14px 0 18px}
.section-grid{padding:62px 0;gap:32px}
.work{padding:62px 0}
.contact{padding:62px 0 54px}
.portrait-frame{height:clamp(420px,48vw,560px);background:#101010;display:flex;align-items:center;justify-content:center}
.portrait{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center center;filter:none;transform:none!important}
.portrait-overlay{background:linear-gradient(180deg,#0003 0%,transparent 20%,transparent 78%,#0007 100%)}
.project-visual{height:auto;aspect-ratio:16/10;border-radius:var(--radius)}
.project-visual.vertical{aspect-ratio:3/4}
.menu{border-radius:6px}
.work-card{transition:transform .25s ease}
.work-card:hover{transform:translateY(-3px)}
.work-card:hover .project-visual{box-shadow:0 14px 34px #0007}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in-view{opacity:1;transform:none}
/* Editorial typography and spacing refinement */
.body-copy{font-size:14px;max-width:560px}
.muted{font-size:11px;max-width:560px}
.card-meta h3{font-size:14px;letter-spacing:.01em}
.card-meta p{font-size:11px;line-height:1.7}
.status{border:1px solid #9e7b3f66;border-radius:3px;padding:3px 8px;letter-spacing:.14em;margin-top:2px}
.service-list>div{align-items:start;transition:background .2s}
.service-title{font-size:13px;transition:color .2s}
.service-desc{font-size:11px;color:var(--muted);line-height:1.7;margin-top:5px;max-width:460px}
.service-list>div:hover .service-title{color:var(--gold)}
.contact-copy{font-size:12px}
.email-link{overflow-wrap:anywhere;transition:color .2s}
.email-link:hover{color:var(--gold)}
/* Brand wordmark — the full "ELINS CREATOR®" name always stays visible, scaled to fit narrow screens */
.wordmark{font-size:14px;letter-spacing:.16em;white-space:nowrap}
/* Collaboration process section */
.process em{font-style:normal;color:var(--gold)}
.process-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.process-steps li{border-top:1px solid var(--line);padding-top:16px}
.process-number{font-size:9px;color:var(--gold);letter-spacing:.14em}
.process-steps h3{font-size:14px;font-weight:600;margin:9px 0 6px}
.process-steps p{font-size:12px;color:var(--muted);line-height:1.75;margin:0}
/* Contact — Request a Quote is the primary action */
.contact .btn-primary{margin-top:6px}
.contact-direct{font-size:11px;color:var(--muted);margin:20px 0 0}
.contact .social-links{margin-top:34px}
/* Footer — brand mark, section links and description */
footer{grid-template-columns:1fr auto;gap:14px;padding:26px 0 18px}
footer p{grid-column:1/-1}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end}
.footer-links a{font-size:8px;letter-spacing:.14em;color:var(--muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
@media(min-width:1200px){
 .site-shell{width:min(940px,calc(100% - 36px));padding:0 58px}
 .portrait-frame{height:520px}
}
/* Tablet range: three cards become two before collapsing to one at 760px */
@media(max-width:980px) and (min-width:761px){
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Prevent topbar crowding between note, CTA and menu toggle */
@media(max-width:860px){
 .topbar-note{display:none}
}
@media(max-width:760px){
 .site-shell{width:calc(100% - 16px);margin:8px auto;padding:0 18px}
 .topbar{height:64px}
 .intro{padding-top:28px}
 .intro h1{font-size:clamp(32px,7vw,42px)}
 .portrait-frame{height:min(124vw,620px);min-height:430px}
 .section-grid{padding:46px 0;gap:18px}
 .work{padding:46px 0}
 .contact{padding:48px 0 42px}
 .process-steps{grid-template-columns:1fr}
 .hero-foot{flex-wrap:wrap}
}
@media(max-width:420px){
 .topbar-cta{padding:7px 10px;font-size:8px}
 .hero-ctas{gap:14px}
 .portrait-frame{height:460px;min-height:460px}
 .wordmark{font-size:12px;letter-spacing:.1em}
}
@media(max-width:380px){
 .wordmark{font-size:11px;letter-spacing:.06em}
 .topbar-cta{font-size:7px;padding:6px 8px}
}