/* SERAFIN.CC / V2 CONTROLLED ENERGY | Prototype, 2026 */
:root{--ink:#111115;--dark:#101014;--dark-2:#17171d;--paper:#f4f1e9;--paper-2:#eae8e0;--coral:#fb8469;--lime:#d1f59c;--lilac:#a99fff;--text:#24232a;--muted:#85838b;--line:rgba(29,29,34,.16);--line-dark:rgba(255,255,255,.15);--gutter:clamp(24px,5.2vw,92px);--wrap:1570px;--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--dark);color:var(--paper);font-family:Inter,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}svg,img{max-width:100%}::selection{background:#d1f59c;color:#101014}:focus-visible{outline:2px solid var(--coral);outline-offset:5px}.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin:auto}.dark{background:var(--dark);color:var(--paper)}.light{background:var(--paper);color:var(--text)}.section-pad{padding:clamp(105px,11vw,170px) 0}.display{font-size:clamp(56px,7.8vw,119px);font-weight:540;line-height:.98;letter-spacing:-.078em;margin:0}.display i{font-style:normal;color:#939394}.section-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid var(--line);font-size:10px;font-weight:750;letter-spacing:.155em}.section-label>span:last-child{color:#888780;text-align:right}.section-label.inverse{border-color:var(--line-dark);color:#e2e2dc}.section-label.inverse>span:last-child{color:#8e8d94}.micro-accent{font-size:10px;font-weight:800;letter-spacing:.16em;color:#986655}.skip-link{position:fixed;top:-80px;left:16px;z-index:1000;background:#fff;color:#111;padding:14px}.skip-link:focus{top:16px}.scroll-progress{position:fixed;z-index:101;top:0;left:0;width:100%;height:2px;pointer-events:none}.scroll-progress span{display:block;width:100%;height:100%;background:var(--coral);transform:scaleX(0);transform-origin:left}
/* navigation */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:100;transition:background .35s,border-color .35s}.site-header.is-scrolled{position:fixed;background:rgba(17,17,21,.95);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.10)}.nav-content{height:92px;display:flex;align-items:center;gap:34px}.logo{display:inline-flex;align-items:center;gap:12px;flex:none}.logo-sign{font-size:36px;letter-spacing:-.11em;font-weight:760;line-height:.8}.logo-sign span{color:var(--coral)}.logo-name{font-size:9px;line-height:1.06;font-weight:800;letter-spacing:.09em}.desktop-links{display:flex;align-items:center;gap:clamp(19px,2.4vw,39px);margin:auto}.desktop-links a{font-size:12px;color:#b5b4b9;transition:color .2s}.desktop-links a:hover,.desktop-links a.active{color:#fff}.nav-cta{font-size:12px;border:1px solid #858389;border-radius:999px;display:flex;align-items:center;gap:35px;padding:14px 19px;transition:background .25s,border-color .25s,color .25s}.nav-cta span{font-size:20px;line-height:1}.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#151016}.menu-button{margin-left:auto;border:0;background:none;width:42px;height:42px;display:none;cursor:pointer;position:relative;z-index:2}.menu-button i{display:block;width:25px;height:2px;background:#fff;position:absolute;left:8px;top:17px;transition:transform .2s,top .2s}.menu-button i:last-child{top:26px}.menu-button[aria-expanded=true] i:first-child{transform:rotate(45deg);top:22px}.menu-button[aria-expanded=true] i:last-child{transform:rotate(-45deg);top:22px}.mobile-menu{position:absolute;top:77px;left:0;right:0;height:calc(100svh - 77px);padding:35px var(--gutter);background:#15151a;overflow:auto}.mobile-menu[hidden]{display:none}.mobile-menu a{padding:23px 0;display:flex;justify-content:space-between;border-bottom:1px solid #3b3a40;font-size:clamp(25px,7vw,44px);letter-spacing:-.04em}.mobile-menu a span{font-size:11px;letter-spacing:.12em;color:#9b99a4}
/* hero */
.hero{height:min(960px,100svh);min-height:760px;position:relative;overflow:hidden;isolation:isolate}.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,rgba(190,185,225,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(190,185,225,.025) 1px,transparent 1px);background-size:132px 132px;mask-image:linear-gradient(to right,transparent 5%,black 50%,black 100%);z-index:-1}.hero-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:#574a95;filter:blur(180px);opacity:.13;right:-140px;top:70px;z-index:0;pointer-events:none}.hero-wrap{height:100%;position:relative;display:flex;align-items:center}.hero-left{position:relative;z-index:4;width:67%;margin-top:10px;pointer-events:none}.hero-left a{pointer-events:auto}.hero-eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:.17em;font-size:10px;font-weight:750;color:#c9c8ce;margin-bottom:65px;white-space:nowrap}.signal-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 15px rgba(198,239,166,.5);animation:signalBreath 3s infinite}.slash{opacity:.35}.hero h1{font-size:clamp(80px,9.25vw,151px);line-height:1.01;letter-spacing:-.095em;font-weight:570;margin:0;white-space:nowrap}.hero h1>span{color:#fffdfa}.hero h1 em{font-style:normal;color:var(--coral)}.end-dot{color:var(--paper)}.hero-blurb{margin-top:75px;max-width:690px;border-top:1px solid #424048;padding-top:30px;display:flex;justify-content:space-between;gap:25px;align-items:center}.hero-blurb p{font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:#c0bfc7;max-width:420px;margin:0}.circle-link{flex:0 0 63px;width:63px;height:63px;border:1px solid #929098;border-radius:50%;display:grid;place-items:center;font-size:29px;transition:background .3s,color .3s,transform .3s}.circle-link:hover{background:var(--coral);color:#151117;border-color:var(--coral);transform:rotate(45deg)}.hero-visual{position:absolute;z-index:2;right:-4%;width:min(53vw,700px);aspect-ratio:1;top:50%;transform:translateY(-48%);will-change:transform}.hero-visual:after{content:'';position:absolute;inset:23%;background:radial-gradient(circle,#ed7e7b2c,transparent 75%);pointer-events:none}.kinetic-art{width:100%;height:100%;overflow:visible;display:block;filter:drop-shadow(0 0 20px rgba(146,116,238,.1));transition:transform .6s var(--ease)}.visual-coordinate{position:absolute;color:#b6aeb8;font-size:9px;letter-spacing:.18em}.coord-top{top:1%;right:4%}.coord-bottom{bottom:2%;right:1%}.coord-bottom span{color:var(--coral)}.art-rings{transform-origin:387px 325px;animation:slowSpin 52s linear infinite}.paths path{stroke-dasharray:4 9;animation:lineFlow 12s linear infinite}.path-purple path{animation-duration:9s;animation-direction:reverse}.path-orange path{animation-duration:15s}.core{transform-origin:387px 325px;animation:heartPulse 4s ease-in-out infinite}.core-ring{transform-origin:387px 325px;animation:ringPulse 4s ease-in-out infinite}.signal-end{animation:signalBreath 2.1s infinite}.hero-foot{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #323039;padding-top:25px;gap:25px;font-size:10px;letter-spacing:.12em;color:#aaa8b2;font-weight:650}.hero-foot strong{color:#f4eee7;font-size:13px}.hero-foot b{color:var(--coral);font-size:18px;margin-left:5px}.hero-foot a{white-space:nowrap}.hero-foot a span{font-size:20px;margin-left:13px}.hero-foot a:hover{color:var(--coral)}
/* ribbon */
.motion-ribbon{height:63px;background:var(--coral);color:#271c26;display:flex;align-items:center;overflow:hidden;user-select:none}.ribbon-track{font-size:12px;font-weight:850;letter-spacing:.14em;white-space:nowrap;width:max-content;animation:marquee 38s linear infinite}.ribbon-track span{font-size:22px;vertical-align:middle;margin:0 46px}.motion-ribbon:hover .ribbon-track{animation-play-state:paused}
/* about */
.about{padding-bottom:120px}.about-layout{display:grid;grid-template-columns:1.55fr .62fr;gap:clamp(45px,8vw,150px);align-items:end;margin:clamp(95px,10vw,155px) 0 115px}.about-head{max-width:1000px}.about-head i{color:#ee826a}.about-copy{padding-bottom:4px}.about-copy p{font-size:15px;line-height:1.86;color:#5d5a5e;margin:18px 0}.inline-link{font-size:13px;display:flex;align-items:center;justify-content:space-between;margin-top:45px;padding-bottom:15px;border-bottom:1px solid #8a8580;font-weight:650}.inline-link span{font-size:22px}.inline-link:hover{color:#e97755}.experience-strip{border-top:1px solid #c7c2b9;display:grid;grid-template-columns:repeat(3,1fr)}.experience-strip>div{padding:34px 22px 2px;border-right:1px solid #d4cfc5;display:flex;gap:20px;align-items:end}.experience-strip>div:first-child{padding-left:0}.experience-strip>div:last-child{border-right:0}.experience-strip strong{font-size:clamp(40px,4vw,75px);letter-spacing:-.085em;line-height:1;font-weight:570;white-space:nowrap}.experience-strip strong span{color:#ed846c}.experience-strip p{font-size:12px;line-height:1.55;color:#656168;margin:0 0 3px}
/* projects */
.work{background:#17171d}.work-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin:100px 0 80px}.work-heading h2{font-size:clamp(55px,7.1vw,108px)}.work-heading h2 i{color:var(--lilac)}.work-heading>p{font-size:16px;line-height:1.75;max-width:315px;color:#b4b2bb;margin:0 0 8px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(60px,6vw,100px) 28px}.work-card{display:block;min-width:0}.project-img{width:100%;aspect-ratio:1.56;position:relative;overflow:hidden;background:#24242b}.project-img img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .9s var(--ease),filter .9s var(--ease);transform:scale(1.002)}.work-card:hover .project-img img{transform:scale(1.055)}.work-open{position:absolute;top:18px;right:18px;width:55px;height:55px;border-radius:50%;background:#f2eee5;color:#1b1720;display:grid;place-items:center;font-size:24px;transform:translateY(-8px);opacity:0;transition:opacity .25s,transform .35s var(--ease)}.work-card:hover .work-open,.work-card:focus-visible .work-open{opacity:1;transform:translateY(0)}.work-meta{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #3d3b43;padding:21px 0;font-size:10px;letter-spacing:.12em;color:#b6b4bc;font-weight:700}.work-meta span:last-child{text-align:right;color:#797782}.work-card h3{font-size:clamp(26px,2.8vw,43px);line-height:1.13;font-weight:540;letter-spacing:-.06em;max-width:620px;margin:26px 0 12px;transition:color .25s}.work-card:hover h3{color:var(--coral)}.work-card>p{color:#9997a1;line-height:1.7;font-size:14px;margin:0;max-width:480px}.work-tail{margin-top:110px;display:flex;justify-content:space-between;gap:45px;align-items:end;padding-top:30px;border-top:1px solid #3b3941}.work-tail p{font-size:12px;line-height:1.6;max-width:440px;color:#9b99a2;margin:0}.big-cta{font-size:15px;display:flex;gap:48px;align-items:center;border-bottom:1px solid #b3b0b8;padding-bottom:17px;white-space:nowrap;transition:gap .25s}.big-cta span{font-size:24px}.big-cta:hover{gap:67px;color:var(--coral)}
/* Expertise */
.approach{padding-bottom:clamp(100px,12vw,175px)}.skills-intro{display:flex;justify-content:space-between;align-items:end;gap:45px;margin:90px 0 88px}.skills-intro .display{font-size:clamp(55px,7.3vw,112px)}.skills-intro .display i{color:#8d84c1}.skills-intro p{max-width:320px;color:#5c5960;font-size:15px;line-height:1.8;margin:0 0 8px}.capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #bfbcb6;border-bottom:1px solid #bfbcb6}.capability{padding:39px clamp(14px,2.7vw,45px) 42px;min-height:410px;border-right:1px solid #ccc7bd;display:flex;flex-direction:column;align-items:flex-start}.capability:first-child{padding-left:0}.capability:last-child{border:0}.capability-icon{width:66px;height:66px;color:#29272d;margin-bottom:45px}.capability-icon svg{height:100%;width:100%}.capability>span{font-size:10px;font-weight:800;letter-spacing:.16em;color:#8e8780}.capability h3{font-weight:580;letter-spacing:-.05em;font-size:clamp(26px,2.35vw,37px);margin:21px 0 13px;line-height:1.14}.capability p{font-size:14px;color:#666169;line-height:1.8;margin:0 0 35px}.cap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.cap-tags span{font-size:10px;border:1px solid #bbb6af;border-radius:30px;padding:8px 10px;color:#676269}.tools-panel{display:grid;grid-template-columns:.8fr 1.3fr;background:#e8e5dd;gap:clamp(30px,4vw,75px);margin-top:88px;padding:clamp(28px,4.2vw,64px)}.tools-intro h3{font-size:clamp(38px,4vw,61px);letter-spacing:-.072em;font-weight:580;line-height:1.1;margin:26px 0}.tools-intro h3 i{font-style:normal;color:#ec826c}.tools-intro p{font-size:13px;color:#66616a;max-width:260px;line-height:1.75}.tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tool{min-height:128px;background:#f3f1eb;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;transition:background .3s,transform .3s var(--ease)}.tool:hover{background:#fff;transform:translateY(-5px)}.tool>span:last-child{font-size:11px;font-weight:650;color:#55515a}.toolmark{height:39px;min-width:39px;display:grid;place-items:center}.toolmark svg{height:34px;width:34px}.adobe-ps,.adobe-ai{font-weight:800;font-size:23px;padding:3px 6px;letter-spacing:-.08em}.adobe-ps{color:#31B5F6;background:#001C39;border:2px solid #31B5F6}.adobe-ai{color:#FF9B46;background:#351500;border:2px solid #FF9B46}.framer-mark{color:#15151c}.wordpress-mark{border:2px solid #256690;border-radius:50%;font-family:Georgia,serif;font-weight:bold;color:#256690;font-size:24px}.webflow-mark{font-size:28px;font-weight:880;font-style:italic;color:#2360f0;letter-spacing:-.2em}.webflow-tick{font-size:12px;position:relative;top:-14px;left:3px;letter-spacing:0}.storybook-mark{font-size:29px;font-weight:830;position:relative;color:#fff;border-radius:8px;width:33px;background:#ff4785}.storybook-mark span{font-size:11px;position:absolute;right:1px;top:1px}
/* Future */
.future{background:#c5bcff;color:#211d37;padding-bottom:clamp(120px,12vw,190px)}.future .section-label{border-color:#9189bf}.future .section-label>span:last-child{color:#625981}.future-layout{display:grid;grid-template-columns:1.6fr .5fr;gap:clamp(50px,8vw,140px);align-items:end;margin-top:clamp(80px,10vw,150px)}.future-star{display:block;font-size:clamp(65px,7vw,110px);line-height:1;margin-bottom:30px;animation:slowSpin 35s linear infinite;width:max-content}.future .display{font-size:clamp(64px,8.3vw,130px)}.future .display i{color:#6757a9}.future-body{padding-bottom:11px}.future-body p{font-size:15px;line-height:1.86;margin:0 0 24px;color:#383049}.future-body>span{display:block;font-size:10px;font-weight:750;letter-spacing:.12em;color:#63578e;margin-top:50px}
/* Contact */
.contact{padding-bottom:50px}.contact-kicker{font-size:16px;color:#c6c2c7;margin:clamp(105px,11vw,170px) 0 37px}.contact-title{font-size:clamp(78px,12.8vw,197px);max-width:1420px}.contact-title i{color:var(--coral)}.contact-title i span{color:#f4f1e9}.contact-bottom{border-bottom:1px solid #3d3b43;padding:65px 0 80px;display:flex;align-items:end;justify-content:space-between;gap:35px}.contact-bottom p{max-width:385px;color:#b8b5be;font-size:15px;line-height:1.7;margin:0}.contact-button{background:#fa866a;color:#19131a;border-radius:999px;padding:21px 25px 21px 30px;min-width:220px;display:flex;align-items:center;justify-content:space-between;font-weight:730;font-size:14px;transition:background .3s,transform .3s var(--ease)}.contact-button:hover{background:#ffd0bb;transform:translateY(-4px)}.contact-button span{font-size:23px}.contact-links{padding-top:30px;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;font-size:10px;color:#9b96a2;letter-spacing:.12em;font-weight:650}.contact-links a:hover{color:var(--coral)}
/* PROJECT PAGE */
.projects-hero{min-height:750px;display:flex;align-items:center;position:relative;overflow:hidden;padding:170px 0 100px}.projects-hero:before{content:'';position:absolute;width:590px;height:590px;border-radius:50%;border:1px solid #45414c;box-shadow:0 0 0 82px #ffffff06,0 0 0 164px #ffffff04,0 0 0 246px #ffffff03;right:6%;bottom:-18%}.projects-hero h1{font-size:clamp(76px,10vw,156px);letter-spacing:-.088em;line-height:1.02;font-weight:560;position:relative;max-width:1100px;margin:135px 0 50px}.projects-hero h1 em{font-style:normal;color:var(--coral)}.projects-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:35px;position:relative;border-top:1px solid #4e4953;padding-top:28px}.projects-hero-bottom p{font-size:17px;line-height:1.68;color:#c2bfc7;max-width:600px;margin:0}.projects-hero-bottom span{font-size:10px;letter-spacing:.15em;color:#9995a3;text-align:right}.project-nav-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:65px}.project-nav-list a{border:1px solid #c4bfb8;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;font-size:17px;font-weight:620;letter-spacing:-.035em;transition:background .3s,color .3s}.project-nav-list a>span{font-size:10px;font-weight:770;letter-spacing:.12em}.project-nav-list a:hover{background:#222025;color:#f9f5ed}.project-nav-list a b{align-self:flex-end;font-size:24px;font-weight:450}.project-intro{padding:90px 0 100px}.project-intro h2{margin:70px 0 0;font-size:clamp(45px,5vw,80px);max-width:940px;letter-spacing:-.065em;line-height:1.05;font-weight:560}.project-detail{scroll-margin-top:75px;padding:105px 0 140px;background:var(--paper);color:var(--ink);border-top:1px solid #c6c0b7}.project-detail.alt{background:#ebe7de}.project-number{font-weight:760;letter-spacing:.12em;font-size:10px;color:#807883}.project-detail-main{display:grid;grid-template-columns:1.12fr .75fr;gap:clamp(40px,7vw,110px);margin:80px 0}.project-detail-main h2{font-size:clamp(56px,6vw,96px);font-weight:560;letter-spacing:-.075em;line-height:1.06;margin:18px 0 36px}.detail-chip-list{display:flex;gap:7px;flex-wrap:wrap}.detail-chip-list span{border-radius:40px;border:1px solid #aaa4a0;padding:9px 13px;font-size:10px;font-weight:650;letter-spacing:.08em}.detail-block{padding:0 0 23px;border-bottom:1px solid #c9c2b9;margin-bottom:23px}.detail-block:last-child{border:0}.detail-block h3{font-size:13px;margin:0 0 13px}.detail-block p{font-size:14px;color:#615d65;line-height:1.8;margin:0}.project-wide-art{display:block;width:100%;background:#aaa;overflow:hidden;position:relative;aspect-ratio:2.15}.project-wide-art img{height:100%;width:100%;object-fit:cover;display:block}.project-wide-art:after{content:'ARTWORK CONCEITUAL / NÃO É SCREENSHOT DO PRODUTO';position:absolute;bottom:22px;right:25px;color:#fff;background:#101014a6;font-size:9px;font-weight:700;padding:9px 12px;letter-spacing:.08em}.back-home{margin-top:50px;color:#f0eff1;font-size:17px;display:flex;width:max-content;gap:25px;border-bottom:1px solid #aaa5ac;padding:0 0 15px}.back-home:hover{color:var(--coral)}
/* reveal, animations */
@media(prefers-reduced-motion:no-preference){.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.js [data-reveal].visible{opacity:1;transform:translateY(0)}}
@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes lineFlow{to{stroke-dashoffset:-260}}@keyframes heartPulse{50%{transform:scale(1.19);opacity:.74}}@keyframes ringPulse{50%{transform:scale(1.5);opacity:.2}}@keyframes signalBreath{50%{opacity:.35}}@keyframes marquee{to{transform:translateX(-50%)}}
/* Tablet */
@media(max-width:1200px){.desktop-links{gap:18px}.nav-content{gap:20px}.hero h1{font-size:clamp(73px,9.3vw,116px)}.hero-left{width:72%}.hero-visual{right:-13%;width:61vw}.hero-blurb{max-width:560px}.about-layout{grid-template-columns:1.15fr .7fr;gap:60px}.experience-strip>div{align-items:start;flex-direction:column}.skills-intro{align-items:start;flex-direction:column}.future-layout{grid-template-columns:1.3fr .7fr}.work-heading{align-items:start;flex-direction:column}.work-heading>p{max-width:580px}}
@media(max-width:900px){.nav-content{height:77px}.desktop-links,.nav-cta{display:none}.menu-button{display:block}.hero{height:auto;min-height:960px}.hero-wrap{padding-top:175px;padding-bottom:100px;display:block}.hero-left{width:100%;margin:0}.hero h1{font-size:clamp(65px,10vw,95px)}.hero-visual{position:relative;top:auto;right:auto;width:75%;max-width:590px;margin:-10px -30px -30px auto;transform:none!important;opacity:.91}.hero-blurb{max-width:670px;margin-top:40px}.hero-foot{bottom:24px}.hero-foot>span:nth-child(2){display:none}.about-layout{grid-template-columns:1fr;gap:40px}.about-head{max-width:750px}.about-copy{max-width:650px;margin-left:auto}.work-grid{gap:65px 22px}.work-card h3{font-size:28px}.capabilities{grid-template-columns:1fr}.capability,.capability:first-child{min-height:auto;padding:32px 0;display:grid;grid-template-columns:80px 1fr;grid-template-rows:repeat(3,auto);gap:0 12px;border-right:0;border-bottom:1px solid #c9c5bc}.capability:last-child{border:0}.capability-icon{grid-row:1/5;margin-bottom:0}.capability>span{align-self:center}.capability h3{margin:15px 0}.capability p{margin-bottom:16px}.cap-tags{margin:0}.tools-panel{grid-template-columns:1fr}.tools-intro p{max-width:650px}.future-layout{grid-template-columns:1fr;gap:40px}.future-body{max-width:580px;margin-left:auto}.project-nav-list{grid-template-columns:repeat(2,1fr)}.project-detail-main{grid-template-columns:1fr;gap:35px}.project-detail-main>div:last-child{max-width:700px}.projects-hero{min-height:680px}}
@media(max-width:640px){:root{--gutter:22px}.section-pad{padding:93px 0}.section-label{font-size:9px}.section-label>span:last-child{max-width:48%;line-height:1.4}.display{font-size:clamp(48px,11.7vw,76px)}.hero{min-height:790px}.hero-wrap{padding-top:142px;padding-bottom:104px}.hero-eyebrow{font-size:9px;letter-spacing:.11em;margin-bottom:43px}.hero h1{font-size:clamp(52px,12.7vw,78px);letter-spacing:-.086em;white-space:normal}.hero h1>span{white-space:nowrap}.hero-blurb{margin-top:44px;padding-top:22px;gap:12px}.hero-blurb p{font-size:14px;line-height:1.65}.circle-link{width:48px;height:48px;flex-basis:48px;font-size:24px}.hero-visual{width:94%;margin:-5px -30px -35px auto}.coord-top,.coord-bottom{font-size:7px}.hero-foot{font-size:8px;letter-spacing:.08em}.hero-foot>a{font-size:9px}.hero-foot a span{margin-left:4px}.motion-ribbon{height:54px}.ribbon-track{font-size:10px}.ribbon-track span{margin:0 26px}.about-layout{margin:75px 0 55px}.about-copy p{font-size:14px}.experience-strip{grid-template-columns:1fr}.experience-strip>div,.experience-strip>div:first-child{padding:18px 0;flex-direction:row;align-items:center;gap:35px;border-right:0;border-bottom:1px solid #d5d0c6}.experience-strip>div:last-child{border:0}.experience-strip strong{font-size:50px;min-width:120px}.experience-strip p{font-size:12px}.work-heading{margin:78px 0 52px}.work-heading h2{font-size:clamp(51px,11vw,78px)}.work-heading p{font-size:14px}.work-grid{grid-template-columns:1fr;gap:65px}.project-img{aspect-ratio:1.32}.work-open{opacity:1;transform:none;width:44px;height:44px;font-size:23px}.work-meta{padding:18px 0;font-size:9px}.work-card h3{font-size:32px}.work-tail{margin-top:80px;align-items:start;flex-direction:column}.big-cta{width:100%;justify-content:space-between}.skills-intro{margin:75px 0 50px}.skills-intro .display{font-size:clamp(46px,10.2vw,72px)}.capability{grid-template-columns:55px 1fr;gap:0 12px}.capability-icon{width:48px;height:48px}.capability h3{font-size:27px}.capability p{font-size:13px}.tools-panel{margin-top:60px;padding:24px 18px}.tools-intro h3{font-size:46px}.tools-grid{grid-template-columns:repeat(2,1fr);gap:8px}.tool{min-height:106px}.future-layout{margin-top:80px}.future .display{font-size:clamp(53px,11.8vw,83px)}.future-star{font-size:70px}.future-body p{font-size:14px}.contact{padding-bottom:40px}.contact-kicker{font-size:14px;margin:95px 0 32px}.contact-title{font-size:clamp(65px,13vw,104px)}.contact-bottom{flex-direction:column;align-items:stretch;padding:50px 0}.contact-button{width:100%}.contact-links{font-size:9px;row-gap:18px}.contact-links>span{width:100%}.projects-hero{padding-top:137px;min-height:620px}.projects-hero h1{font-size:clamp(59px,12vw,84px);margin:75px 0 45px}.projects-hero-bottom{flex-direction:column;align-items:start}.projects-hero-bottom p{font-size:14px}.projects-hero-bottom span{text-align:left}.project-nav-list{grid-template-columns:1fr;gap:9px;margin-top:45px}.project-nav-list a{min-height:95px;font-size:18px}.project-detail{padding:80px 0 95px}.project-detail-main{margin:55px 0}.project-detail-main h2{font-size:clamp(48px,11.2vw,76px)}.project-wide-art{aspect-ratio:1.25}.project-wide-art:after{bottom:8px;right:8px;font-size:7px;letter-spacing:0}.project-intro h2{font-size:50px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js [data-reveal]{opacity:1!important;transform:none!important}}
/* V2 QA refinements: protect artwork framing at narrow widths */
@media(max-width:640px){.hero{min-height:920px}.hero-visual{margin:25px -18px 12px auto;width:96%}.project-img{aspect-ratio:1.58}.project-img img{object-fit:cover}}

/* V2.1: WhatsApp and ATS-ready CV placeholder. The download deliberately remains disabled. */
.cv-section{background:var(--paper);color:var(--text);padding:clamp(82px,9vw,130px) 0}
.cv-panel{position:relative;background:#e7e1d9;border:1px solid #d1c8bf;padding:clamp(23px,3.7vw,58px);overflow:hidden}
.cv-panel::before{content:"";position:absolute;width:230px;height:230px;border:1px solid #f4a184;border-radius:50%;right:-118px;bottom:-152px;box-shadow:0 0 0 55px #fb846911,0 0 0 110px #fb84690d;pointer-events:none}
.cv-top{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:10px;letter-spacing:.14em;font-weight:760;border-bottom:1px solid #bdb5ae;padding-bottom:21px}
.cv-status{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:#7b5d56}
.cv-status-dot{width:7px;height:7px;border-radius:50%;background:#ed896c;display:inline-block;box-shadow:0 0 0 4px #f0baa34f}
.cv-content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.55fr);gap:clamp(32px,6vw,110px);align-items:end;padding-top:clamp(50px,7vw,105px)}
.cv-eyebrow{display:block;font-weight:770;letter-spacing:.14em;font-size:10px;color:#9c6258;margin-bottom:26px}
.cv-story h2{font-size:clamp(48px,6.5vw,99px);line-height:1.02;font-weight:540;letter-spacing:-.08em;margin:0 0 32px}
.cv-story h2 em{font-style:normal;color:#a26356}
.cv-story p{max-width:640px;font-size:15px;line-height:1.8;color:#5c585d;margin:0}
.cv-actions{position:relative;max-width:340px;margin-left:auto;width:100%}
.cv-file-icon{height:56px;width:49px;color:#b18b7d;margin-bottom:27px}
.cv-file-icon svg{height:100%;width:100%}
.cv-download{width:100%;display:flex;justify-content:space-between;gap:22px;align-items:center;padding:20px 24px;border:1px solid #b7b0a9;background:#d8d1ca;color:#817c78;font-size:14px;font-weight:720;cursor:not-allowed;opacity:1}
.cv-download span{font-size:22px;line-height:1}
.cv-actions>p{font-size:12px;line-height:1.65;color:#706a69;margin:13px 0 20px}
.cv-link{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;font-size:12px;font-weight:700;padding:13px 0 8px;border-bottom:1px solid #908a84;transition:color .2s,border-color .2s}
.cv-link:hover{color:#c85a41;border-color:#c85a41}
/* V2.1: project artworks reveal and each SVG has its own embedded cinematic microanimation. */
.project-wide-art img{transition:transform 1.1s var(--ease)}
@media(hover:hover){.project-wide-art:hover img{transform:scale(1.025)}}
.art-motion-flag{position:absolute;top:23px;left:24px;z-index:3;display:flex;align-items:center;gap:9px;color:#fff;background:rgba(16,16,20,.72);border:1px solid rgba(255,255,255,.26);padding:10px 13px;font-size:10px;font-weight:750;letter-spacing:.1em;pointer-events:none;backdrop-filter:blur(6px)}
.art-motion-flag i{width:6px;height:6px;border-radius:100%;background:#d1f59c;box-shadow:0 0 0 4px #d1f59c22;animation:liveDot 2s ease-in-out infinite}
@keyframes liveDot{50%{opacity:.25;box-shadow:0 0 0 7px #d1f59c00}}
@media(max-width:900px){.cv-content{grid-template-columns:1fr;gap:55px}.cv-actions{margin-left:0;max-width:420px}}
@media(max-width:640px){.cv-section{padding:80px 0}.cv-top{align-items:flex-start;font-size:8px;line-height:1.7}.cv-status{font-size:8px}.cv-content{gap:42px;padding-top:50px}.cv-story h2{font-size:clamp(44px,11vw,70px);margin-bottom:22px}.cv-story p{font-size:14px}.cv-actions{max-width:none}.art-motion-flag{top:10px;left:10px;padding:8px 10px;font-size:8px}.project-wide-art:after{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){.art-motion-flag{display:none}.project-wide-art img{transition:none}}

/* SERAFIN.CC V2.2 | Finishing pass: uncropped project artwork and expressive 404 */
/* The original SVG canvases are 1280 × 800 (8:5): mirror this ratio on small screens.
   Neither the home cards nor the detail compositions should discard artwork edges. */
@media (max-width: 900px) {
  .project-img,
  .project-wide-art {
    aspect-ratio: 8 / 5;
    height: auto;
  }
  .project-img img,
  .project-wide-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .project-wide-art img:hover,
  .work-card:hover .project-img img {
    transform: none;
  }
}
@media (hover: none) {
  .project-wide-art:hover img,
  .work-card:hover .project-img img {
    transform: none;
  }
}
/* 404: purpose-built graphic and consistent typographic vocabulary */
.error-page { min-height: 100svh; background: #101014; color: var(--paper); isolation: isolate; overflow: hidden; }
.error-page::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg,rgba(190,185,225,.035) 1px, transparent 1px),linear-gradient(rgba(190,185,225,.025) 1px, transparent 1px);
  background-size: 130px 130px; mask-image: linear-gradient(to right, transparent 0%, black 75%); }
.error-header { position: relative; z-index: 2; border-bottom: 1px solid rgba(255,255,255,.09); }
.error-header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.error-nav { display: flex; align-items: center; gap: clamp(18px,3vw,45px); }
.error-nav a { font-size: 12px; color: #bdbbc5; transition: color .25s; }
.error-nav a:hover { color: var(--coral); }
.error-main { display: grid; min-height: min(880px,calc(100svh - 165px)); align-items: center; position: relative; }
.error-layout { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); align-items: center; gap: clamp(20px,4vw,85px); padding-top: 72px; padding-bottom: 100px; }
.error-eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(33px,5vw,67px); color: #a5a2ae; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.error-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(251,132,105,.13); }
.error-kicker { font-size: clamp(110px,15vw,215px); font-weight: 560; letter-spacing: -.115em; line-height: .75; color: #fff9f0; margin: 0 0 55px -.045em; }
.error-kicker span { color: var(--coral); }
.error-title { margin: 0 0 25px; max-width: 800px; font-size: clamp(49px,5.6vw,88px); line-height: 1.02; font-weight: 550; letter-spacing: -.08em; }
.error-title em { color: #afa4fa; font-style: normal; }
.error-description { max-width: 475px; margin: 0 0 34px; font-size: clamp(14px,1.3vw,17px); line-height: 1.8; color: #bcb9c4; }
.error-actions { display: flex; align-items: center; gap: 27px; flex-wrap: wrap; }
.error-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; min-height: 56px; padding: 14px 19px 14px 24px; background: var(--coral); color: #151016; border-radius: 999px; font-size: 13px; font-weight: 740; transition: background .25s, transform .25s; }
.error-primary:hover { background: #ffc7b6; transform: translateY(-3px); }
.error-primary span { font-size: 22px; line-height: 1; }
.error-secondary { border-bottom: 1px solid rgba(255,255,255,.45); padding: 14px 0; color: #f1eef1; font-size: 13px; font-weight: 620; transition: border-color .25s, color .25s; }
.error-secondary:hover { color: var(--coral); border-color: var(--coral); }
.error-visual { width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 1 / 1; position: relative; }
.error-visual svg { width: 100%; height: 100%; display: block; overflow: visible; }
.error-path { stroke-dasharray: 10 16; animation: errorFlow 8s linear infinite; }
.error-orbit { transform-origin: 330px 316px; animation: errorOrbit 35s linear infinite; }
.error-ping { transform-origin: center; animation: errorPing 3s ease-in-out infinite; }
.error-ping.second { animation-delay: -1.5s; }
.error-visual-note { position: absolute; bottom: 4%; left: 6%; font-size: 9px; letter-spacing: .14em; color: #aaa6b5; font-weight: 700; }
.error-footer { border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 25px 0 32px; font-size: 10px; font-weight: 700; letter-spacing: .13em; color: #96929f; }
.error-footer a { transition: color .25s; } .error-footer a:hover { color: var(--coral); }
@keyframes errorFlow { to { stroke-dashoffset: -260; } }
@keyframes errorOrbit { to { transform: rotate(360deg); } }
@keyframes errorPing { 50% { opacity: .27; transform: scale(1.2); } }
@media (max-width: 900px) {
  .error-header-inner { min-height: 76px; }
  .error-layout { grid-template-columns: 1fr; gap: 0; padding-top: 90px; padding-bottom: 60px; }
  .error-copy { position: relative; z-index: 1; }
  .error-kicker { font-size: clamp(110px,20vw,170px); margin-bottom: 42px; }
  .error-visual { max-width: 480px; margin: -20px auto 0; }
}
@media (max-width: 640px) {
  .error-nav { gap: 19px; }
  .error-nav a { font-size: 11px; }
  .error-header .logo-name { display: none; }
  .error-layout { padding-top: 64px; padding-bottom: 35px; }
  .error-eyebrow { font-size: 9px; margin-bottom: 40px; }
  .error-kicker { font-size: clamp(100px,28vw,150px); margin-bottom: 38px; }
  .error-title { font-size: clamp(47px,11.6vw,70px); }
  .error-description { font-size: 14px; }
  .error-actions { gap: 15px 24px; }
  .error-visual { width: 100%; margin: 4px auto 0; }
  .error-visual-note { font-size: 7px; }
  .error-footer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .error-path, .error-orbit, .error-ping { animation: none !important; } }

/* SERAFIN.CC V2.3 | Directed motion, centered CTA arrows, six cases */
/* Arrow has geometrically centered geometry in a 24x24 viewbox. The link never rotates. */
.arrow-icon { display:inline-flex; flex:none; width:1.35em; height:1.35em; align-items:center; justify-content:center; vertical-align:middle; line-height:0; }
.arrow-glyph { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 50%; transform:rotate(-45deg); transition:transform .45s var(--ease); }
.arrow-diagonal .arrow-glyph {transform:rotate(45deg)}
a:hover .arrow-glyph, a:focus-visible .arrow-glyph {transform:rotate(0deg)}
.circle-link {display:flex; align-items:center; justify-content:center; padding:0; transform:none!important; transition:background .3s,color .3s,border-color .3s}
.circle-link .arrow-icon {width:27px;height:27px;font-size:initial}
.nav-cta .arrow-icon,.contact-button .arrow-icon {width:24px;height:24px;font-size:initial}
.nav-cta,.contact-button,.inline-link,.big-cta,.cv-link,.project-nav-list a {align-items:center}
.inline-link .arrow-icon,.cv-link .arrow-icon {width:23px;height:23px;font-size:initial}
.big-cta .arrow-icon {width:25px;height:25px;font-size:initial}
.work-open .arrow-glyph {width:26px;height:26px}
.work-open .arrow-icon {width:27px;height:27px;font-size:initial}
.project-nav-list a b.arrow-icon {align-self:flex-end;width:25px;height:25px}
.contact-links a .arrow-icon,.error-footer .arrow-icon {width:15px;height:15px;position:relative;top:-1px}
/* Enlarge real case studies through hierarchy, not a change of art direction. */
.work-card.featured-project .project-img {background:#252236}
.featured-project h3 {max-width:540px}
.project-nav-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.project-nav-list a {min-width:0}
.featured-detail .detail-block h3 {color:#51465d}
@media(max-width:900px){
  .hero-visual{left:auto;right:auto;width:min(94%,590px);max-width:100%;margin:25px auto 12px;transform:none!important;}
  .project-nav-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .hero-visual {position:relative;left:50%;right:auto;width:min(100%,470px);margin:30px 0 8px;transform:translateX(-50%)!important;}
  .hero-visual .kinetic-art {width:100%;height:auto;}
  .hero-visual .visual-coordinate {letter-spacing:.08em}
  .project-nav-list {grid-template-columns:1fr}
  .work-card.featured-project .project-img {aspect-ratio:8/5}
  .work-card .project-img img {object-fit:contain}
}
@media(prefers-reduced-motion:reduce){ .arrow-glyph{transition:none!important} }